github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

feat(ui): config-details-styling EE-3472 (#7367) 

* feat(ui): config details EE-3472
pull/7400/head
Ali 2022-08-02 14:21:14 +12:00 committed by GitHub
parent e1c7079c81
commit 5469392ec7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 79 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/assets/css/icon.css
View File

@ -126,6 +126,11 @@ pr-icon {
margin-right: 5px;
}
.icon-nested-blue > svg {
height: 20px;
width: 20px;
}
.icon-container {
display: flex;
align-items: center;

8
app/kubernetes/components/datatables/events-datatable/eventsDatatable.html
View File

@ -1,12 +1,10 @@
<div class="datatable">
<div class="toolBar">
<div class="toolBarTitle flex">
<div class="flex justify-center content-center mr-2 icon-nested-blue vertical-center">
<pr-icon icon="'rotate-ccw'" size="'sm'" mode="'primary'" feather="true"></pr-icon>
<div class="icon-nested-blue flex justify-center items-center">
<pr-icon icon="'rotate-ccw'" mode="'primary'" feather="true" class="vertical-center"></pr-icon>
</div>
<span class="vertical-center">
{{ $ctrl.titleText }}
</span>
{{ $ctrl.titleText }}
</div>
<div class="searchBar">
<pr-icon icon="'search'" class="vertical-center" feather="true"></pr-icon>

12
app/kubernetes/components/datatables/integrated-applications-datatable/integratedApplicationsDatatable.html
View File

@ -3,14 +3,14 @@
<rd-widget-body classes="no-padding">
<div class="toolBar">
<div class="toolBarTitle vertical-center">
<pr-icon icon="$ctrl.titleIcon" feather="true" mode="'primary'" class-name="'icon-nested-blue'"></pr-icon>
<pr-icon icon="$ctrl.titleIcon" class-name="'icon-nested-blue vertical-center'" mode="'primary'"></pr-icon>
{{ $ctrl.titleText }}
</div>
<div class="searchBar">
<div class="searchBar vertical-center">
<pr-icon icon="'search'" feather="true" class="vertical-center"></pr-icon>
<input
type="text"
class="searchInput ml-1"
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search for an application..."
@ -20,7 +20,9 @@
</div>
<div ng-if="$ctrl.refreshCallback" class="settings">
<span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
<span uib-dropdown-toggle><pr-icon icon="'more-vertical'" feather="true"></pr-icon></span>
<span uib-dropdown-toggle aria-label="Settings">
<pr-icon icon="'more-vertical'" feather="true" class-name="'!mr-0 !h-4'"></pr-icon>
</span>
<div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
<div class="tableMenu">
<div class="menuHeader"> Table settings </div>
@ -40,7 +42,7 @@
<option value="300">5min</option>
</select>
<span>
<pr-icon id="refreshRateChange" style="display: none" icon="'check'" mode="'success'" feather="true"></pr-icon>
<pr-icon id="refreshRateChange" icon="'check'" feather="true" mode="'success'" size="'sm'"></pr-icon>
</span>
</div>
</div>

64
app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationData.html
View File

@ -25,10 +25,10 @@
<div class="form-group" ng-if="$ctrl.formValues.IsSimple">
<div class="col-sm-12">
<button type="button" class="btn btn-sm btn-default" style="margin-left: 0" ng-click="$ctrl.addEntry()" data-cy="k8sConfigCreate-createEntryButton">
<pr-icon icon="'plus'" feather="true" class="vertical-center"></pr-icon> Create entry
<pr-icon class="vertical-center" icon="'plus'" feather="true"></pr-icon> Create entry
</button>
<button type="button" class="btn btn-sm btn-default" ngf-select="$ctrl.addEntryFromFile($file)" style="margin-left: 0" data-cy="k8sConfigCreate-createConfigsFromFileButton">
<pr-icon icon="'upload'" feather="true" class="vertical-center"></pr-icon> Create key/value from file
<pr-icon class="vertical-center" icon="'upload'" feather="true"></pr-icon> Create key/value from file
</button>
</div>
</div>
@ -36,7 +36,7 @@
<div ng-repeat="(index, entry) in $ctrl.formValues.Data" ng-if="$ctrl.formValues.IsSimple">
<div class="form-group">
<label for="configuration_data_key_{{ index }}" class="col-sm-3 col-lg-2 control-label text-left">Key</label>
<div class="col-sm-8">
<div class="col-sm-8 col-lg-9">
<input
type="text"
class="form-control"
@ -47,33 +47,37 @@
required
ng-change="$ctrl.onChangeKey(entry)"
/>
</div>
<div
class="col-sm-11 small text-muted"
style="margin-top: 5px"
ng-show="
kubernetesConfigurationDataCreationForm['configuration_data_key_' + index].$invalid ||
(!entry.Used && $ctrl.state.duplicateKeys[index] !== undefined) ||
$ctrl.state.invalidKeys[index]
"
>
<ng-messages for="kubernetesConfigurationDataCreationForm['configuration_data_key_' + index].$error">
<p ng-message="required" class="vertical-center"> <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> This field is required. </p>
</ng-messages>
<div>
<p ng-if="$ctrl.state.duplicateKeys[index] !== undefined" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> This key is already defined.
<div
class="small text-muted"
style="margin-top: 5px"
ng-show="
kubernetesConfigurationDataCreationForm['configuration_data_key_' + index].$invalid ||
(!entry.Used && $ctrl.state.duplicateKeys[index] !== undefined) ||
$ctrl.state.invalidKeys[index]
"
>
<ng-messages for="kubernetesConfigurationDataCreationForm['configuration_data_key_' + index].$error">
<p ng-message="required" class="vertical-center">
<pr-icon class="vertical-center" icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> This field is required.
</p>
</ng-messages>
<div>
<p ng-if="$ctrl.state.duplicateKeys[index] !== undefined" class="vertical-center">
<pr-icon class="vertical-center" icon="'alert-triangle'" feather="true" mode="'warning'" class="vertical-center"></pr-icon>This key is already defined.
</p>
</div>
<p ng-if="$ctrl.state.invalidKeys[index]" class="vertical-center">
<pr-icon class="vertical-center" icon="'alert-triangle'" feather="true" mode="'warning'" class="vertical-center"></pr-icon> This key is invalid. A valid key must
consist of alphanumeric characters, '-', '_' or '.'
</p>
</div>
<p ng-if="$ctrl.state.invalidKeys[index]" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> This key is invalid. A valid key must consist of alphanumeric characters, '-', '_' or '.'
</p>
</div>
<div class="col-sm-3 col-lg-2"></div>
</div>
<div class="form-group" ng-if="$ctrl.formValues.IsSimple && !entry.IsBinary">
<label for="configuration_data_value_{{ index }}" class="col-sm-3 col-lg-2 control-label text-left">Value</label>
<div class="col-sm-8">
<div class="col-sm-8 col-lg-9">
<textarea
class="form-control"
rows="5"
@ -82,11 +86,13 @@
ng-model="$ctrl.formValues.Data[index].Value"
required
></textarea>
</div>
<div class="col-sm-11 small text-muted" style="margin-top: 5px" ng-show="kubernetesConfigurationDataCreationForm['configuration_data_value_' + index].$invalid">
<ng-messages for="kubernetesConfigurationDataCreationForm['configuration_data_value_' + index].$error">
<p ng-message="required" class="vertical-center"><pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> This field is required.</p>
</ng-messages>
<div class="small text-muted" style="margin-top: 5px" ng-show="kubernetesConfigurationDataCreationForm['configuration_data_value_' + index].$invalid">
<ng-messages for="kubernetesConfigurationDataCreationForm['configuration_data_value_' + index].$error">
<p ng-message="required" class="vertical-center"
><pr-icon class="vertical-center" icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> This field is required.</p
>
</ng-messages>
</div>
</div>
</div>
@ -108,7 +114,7 @@
ng-click="$ctrl.removeEntry(index, entry)"
data-cy="k8sConfigDetail-removeEntryButton{{ index }}"
>
<pr-icon icon="'trash-2'" feather="true"></pr-icon> Remove entry
<pr-icon class="vertical-center" icon="'trash-2'" feather="true"></pr-icon> Remove entry
</button>
<span class="small text-muted" ng-if="entry.Used">
<pr-icon icon="'alert-circle'" feather="true" mode="'primary'"></pr-icon>

10
app/kubernetes/components/yaml-inspector/yamlInspector.html
View File

@ -1,17 +1,17 @@
<div>
<code-editor identifier="application-details-yaml" read-only="true" value="$ctrl.data"></code-editor>
<div style="margin: 15px">
<div class="py-5">
<span class="btn btn-light btn-sm" ng-click="$ctrl.copyYAML()">
<pr-icon icon="'copy'" feather="true"></pr-icon>
<pr-icon class="vertical-center" icon="'copy'" feather="true"></pr-icon>
Copy to clipboard
</span>
<span class="btn btn-light btn-sm space-left" ng-click="$ctrl.toggleYAMLInspectorExpansion()">
<pr-icon icon="'minus'" size="'sm'" ng-if="$ctrl.expanded" feather="true"></pr-icon>
<pr-icon icon="'plus'" size="'sm'" ng-if="!$ctrl.expanded" feather="true"></pr-icon>
<pr-icon class="vertical-center" icon="'minus'" size="'sm'" ng-if="$ctrl.expanded" feather="true"></pr-icon>
<pr-icon class="vertical-center" icon="'plus'" size="'sm'" ng-if="!$ctrl.expanded" feather="true"></pr-icon>
{{ $ctrl.expanded ? 'Collapse' : 'Expand' }}
</span>
<span id="copyNotificationYAML" style="display: none" class="small vertical-center ml-1">
<pr-icon icon="'check'" size="'md'" mode="'success'" feather="true"></pr-icon> copied
<pr-icon class="vertical-center" icon="'check'" size="'md'" mode="'success'" feather="true"></pr-icon> copied
</span>
</div>
</div>

31
app/kubernetes/views/configurations/edit/configuration.html
View File

@ -3,9 +3,9 @@
title="'Configuration details'"
breadcrumbs="[
{ label:'Namespaces', link:'kubernetes.resourcePools' },
{
{
label:ctrl.configuration.Namespace,
link: 'kubernetes.resourcePools.resourcePool',
link: 'kubernetes.resourcePools.resourcePool',
linkParams:{ id: ctrl.configuration.Namespace }
},
{ label:'ConfigMaps and Secrets', link:'kubernetes.configurations' },
@ -24,26 +24,29 @@
<rd-widget-body classes="no-padding">
<uib-tabset active="ctrl.state.activeTab" justified="true" type="pills">
<uib-tab index="0" classes="btn-sm" select="ctrl.selectTab(0)" data-cy="k8sConfigDetail-configTab">
<uib-tab-heading> <i class="fa fa-file-code space-right" aria-hidden="true"></i> Configuration </uib-tab-heading>
<uib-tab-heading>
<pr-icon icon="'svg-filecode'"></pr-icon>
Configuration
</uib-tab-heading>
<div style="padding: 20px">
<table class="table" data-cy="k8sConfigDetail-configTable">
<tbody>
<tr>
<td>Name</td>
<td>
<td class="!pl-0 !border-none w-[40%]">Name</td>
<td class="!border-none">
{{ ctrl.configuration.Name }}
<span style="margin-left: 5px" class="label label-info image-tag" ng-if="ctrl.configuration.IsRegistrySecret">system</span>
</td>
</tr>
<tr>
<td>Namespace</td>
<td class="!pl-0">Namespace</td>
<td>
<a ui-sref="kubernetes.resourcePools.resourcePool({ id: ctrl.configuration.Namespace })">{{ ctrl.configuration.Namespace }}</a>
<span style="margin-left: 5px" class="label label-info image-tag" ng-if="ctrl.isSystemNamespace()">system</span>
</td>
</tr>
<tr>
<td>Configuration type</td>
<td class="!pl-0">Configuration type</td>
<td>
{{ ctrl.configuration.Type | kubernetesConfigurationTypeText }}
</td>
@ -54,7 +57,8 @@
</uib-tab>
<uib-tab index="1" classes="btn-sm" select="ctrl.selectTab(1)" data-cy="k8sConfigDetail-eventsTab">
<uib-tab-heading>
<i class="fa fa-history space-right" aria-hidden="true"></i> Events
<pr-icon icon="'svg-clockrewind'"></pr-icon>
Events
<div ng-if="ctrl.hasEventWarnings()">
<i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i>
{{ ctrl.state.eventWarningCount }} warning(s)
@ -73,8 +77,11 @@
</kubernetes-events-datatable>
</uib-tab>
<uib-tab index="2" ng-if="ctrl.configuration.Yaml" classes="btn-sm" select="ctrl.showEditor()" data-cy="k8sConfigDetail-yamlTab">
<uib-tab-heading> <i class="fa fa-code space-right" aria-hidden="true"></i> YAML </uib-tab-heading>
<div style="padding-right: 25px" ng-if="ctrl.state.showEditorTab">
<uib-tab-heading>
<pr-icon icon="'code'" feather="true"></pr-icon>
YAML
</uib-tab-heading>
<div class="!pt-5 px-5" ng-if="ctrl.state.showEditorTab">
<kubernetes-yaml-inspector key="configuration-yaml" data="ctrl.configuration.Yaml"> </kubernetes-yaml-inspector>
</div>
</uib-tab>
@ -109,7 +116,7 @@
<div class="col-sm-12">
<button
type="button"
class="btn btn-primary btn-sm"
class="btn btn-primary btn-sm !ml-0"
ng-disabled="!ctrl.isFormValid() || !kubernetesConfigurationCreationForm.$valid || ctrl.state.actionInProgress"
ng-click="ctrl.updateConfiguration()"
button-spinner="ctrl.state.actionInProgress"
@ -159,7 +166,7 @@
order-by="Name"
refresh-callback="ctrl.getApplications"
title-text="Applications using this configuration"
title-icon="fa-laptop-code"
title-icon="svg-laptopcode"
>
</kubernetes-integrated-applications-datatable>
</div>

12
app/kubernetes/views/summary/summary.html
View File

@ -1,14 +1,6 @@
<div
class="col-xs-12 form-section-title interactive"
ng-click="$ctrl.toggleSummary()"
style="display: flex; justify-content: space-between"
ng-if="$ctrl.state.resources.length > 0"
>
<div class="flex justify-start form-section-title interactive" ng-click="$ctrl.toggleSummary()" ng-if="$ctrl.state.resources.length > 0">
<pr-icon icon="$ctrl.state.expandedTemplate ? 'chevron-down' : 'chevron-right'" feather="true" class="!mr-1 vertical-center pb-1"></pr-icon>
Summary
<span class="small space-left">
<a ng-if="!$ctrl.state.expandedTemplate"><pr-icon icon="'chevron-down'" feather="true"></pr-icon> expand</a>
<a ng-if="$ctrl.state.expandedTemplate"><pr-icon icon="'chevron-up'" feather="true"></pr-icon> collapse</a>
</span>
</div>
<div class="form-group" ng-if="$ctrl.state.expandedTemplate">

6
app/kubernetes/views/volumes/edit/volume.html
View File

@ -3,9 +3,9 @@
title="'Volume details'"
breadcrumbs="[
{ label:'Namespaces', link:'kubernetes.resourcePools' },
{
{
label:ctrl.volume.ResourcePool.Namespace.Name,
link: 'kubernetes.resourcePools.resourcePool',
link: 'kubernetes.resourcePools.resourcePool',
linkParams:{ id: ctrl.volume.ResourcePool.Namespace.Name }
},
{ label:'Volumes', link:'kubernetes.volumes' },
@ -181,7 +181,7 @@
order-by="Name"
refresh-callback="ctrl.getVolume"
title-text="Applications using this volume"
title-icon="code"
title-icon="svg-laptopcode"
>
</kubernetes-integrated-applications-datatable>
</div>