mirror of https://github.com/portainer/portainer
feat(ui): volume detals UI improvements EE-3483 (#7329)
Dakota Walsh
GitHub
parent
ea60740d48
commit
a2e1570162
|
|
@ -2,13 +2,25 @@
|
||||||
<rd-widget>
|
<rd-widget>
|
||||||
<rd-widget-body classes="no-padding">
|
<rd-widget-body classes="no-padding">
|
||||||
<div class="toolBar">
|
<div class="toolBar">
|
||||||
<div class="toolBarTitle">
|
<div class="toolBarTitle vertical-center">
|
||||||
<i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px"></i>
|
<pr-icon icon="$ctrl.titleIcon" feather="true" mode="'primary'" class-name="'icon-nested-blue'"></pr-icon>
|
||||||
{{ $ctrl.titleText }}
|
{{ $ctrl.titleText }}
|
||||||
</div>
|
</div>
|
||||||
|
<div class="searchBar">
|
||||||
|
<pr-icon icon="'search'" feather="true" class="vertical-center"></pr-icon>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="searchInput ml-1"
|
||||||
|
ng-model="$ctrl.state.textFilter"
|
||||||
|
ng-change="$ctrl.onTextFilterChange()"
|
||||||
|
placeholder="Search for an application..."
|
||||||
|
auto-focus
|
||||||
|
ng-model-options="{ debounce: 300 }"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<div ng-if="$ctrl.refreshCallback" class="settings">
|
<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 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> <i class="fa fa-cog" aria-hidden="true"></i> Table settings </span>
|
<span uib-dropdown-toggle><pr-icon icon="'more-vertical'" feather="true"></pr-icon></span>
|
||||||
<div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
|
<div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
|
||||||
<div class="tableMenu">
|
<div class="tableMenu">
|
||||||
<div class="menuHeader"> Table settings </div>
|
<div class="menuHeader"> Table settings </div>
|
||||||
|
|
@ -28,7 +40,7 @@
|
||||||
<option value="300">5min</option>
|
<option value="300">5min</option>
|
||||||
</select>
|
</select>
|
||||||
<span>
|
<span>
|
||||||
<i id="refreshRateChange" class="fa fa-check green-icon" aria-hidden="true" style="margin-top: 7px; display: none"></i>
|
<pr-icon id="refreshRateChange" style="display: none" icon="'check'" mode="'success'" feather="true"></pr-icon>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -41,42 +53,36 @@
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="searchBar">
|
|
||||||
<i class="fa fa-search searchIcon" aria-hidden="true"></i>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="searchInput"
|
|
||||||
ng-model="$ctrl.state.textFilter"
|
|
||||||
ng-change="$ctrl.onTextFilterChange()"
|
|
||||||
placeholder="Search..."
|
|
||||||
auto-focus
|
|
||||||
ng-model-options="{ debounce: 300 }"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="table-responsive">
|
<div class="table-responsive">
|
||||||
<table class="table table-hover nowrap-cells">
|
<table class="table table-hover nowrap-cells">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>
|
<th>
|
||||||
<a ng-click="$ctrl.changeOrderBy('Name')">
|
<table-column-header
|
||||||
Name
|
col-title="'Name'"
|
||||||
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></i>
|
can-sort="true"
|
||||||
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></i>
|
is-sorted="$ctrl.state.orderBy === 'Name'"
|
||||||
</a>
|
is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
|
||||||
|
ng-click="$ctrl.changeOrderBy('Name')"
|
||||||
|
></table-column-header>
|
||||||
</th>
|
</th>
|
||||||
<th>
|
<th>
|
||||||
<a ng-click="$ctrl.changeOrderBy('StackName')">
|
<table-column-header
|
||||||
Stack
|
col-title="'Stack'"
|
||||||
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'StackName' && !$ctrl.state.reverseOrder"></i>
|
can-sort="true"
|
||||||
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'StackName' && $ctrl.state.reverseOrder"></i>
|
is-sorted="$ctrl.state.orderBy === 'StackName'"
|
||||||
</a>
|
is-sorted-desc="$ctrl.state.orderBy === 'StackName' && $ctrl.state.reverseOrder"
|
||||||
|
ng-click="$ctrl.changeOrderBy('StackName')"
|
||||||
|
></table-column-header>
|
||||||
</th>
|
</th>
|
||||||
<th>
|
<th>
|
||||||
<a ng-click="$ctrl.changeOrderBy('Image')">
|
<table-column-header
|
||||||
Image
|
col-title="'Image'"
|
||||||
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Image' && !$ctrl.state.reverseOrder"></i>
|
can-sort="true"
|
||||||
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Image' && $ctrl.state.reverseOrder"></i>
|
is-sorted="$ctrl.state.orderBy === 'Image'"
|
||||||
</a>
|
is-sorted-desc="$ctrl.state.orderBy === 'Image' && $ctrl.state.reverseOrder"
|
||||||
|
ng-click="$ctrl.changeOrderBy('Image')"
|
||||||
|
></table-column-header>
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
|
|
|
||||||
|
|
@ -24,8 +24,10 @@
|
||||||
<rd-widget-body classes="no-padding">
|
<rd-widget-body classes="no-padding">
|
||||||
<uib-tabset active="ctrl.state.activeTab" justified="true" type="pills">
|
<uib-tabset active="ctrl.state.activeTab" justified="true" type="pills">
|
||||||
<uib-tab index="0" classes="btn-sm" select="ctrl.selectTab(0)">
|
<uib-tab index="0" classes="btn-sm" select="ctrl.selectTab(0)">
|
||||||
<uib-tab-heading data-cy="k8sVolDetail-volTab"> <i class="fa fa-database space-right" aria-hidden="true"></i> Volume </uib-tab-heading>
|
<uib-tab-heading class="vertical-center" data-cy="k8sVolDetail-volTab">
|
||||||
|
<pr-icon icon="'database'" feather="true"></pr-icon>
|
||||||
|
Volume
|
||||||
|
</uib-tab-heading>
|
||||||
<div style="padding: 20px">
|
<div style="padding: 20px">
|
||||||
<table class="table">
|
<table class="table">
|
||||||
<tbody>
|
<tbody>
|
||||||
|
|
@ -122,11 +124,11 @@
|
||||||
|
|
||||||
<div class="form-inline">
|
<div class="form-inline">
|
||||||
<div class="small text-warning" style="margin-top: 5px" ng-show="ctrl.state.errors.volumeSize || kubernetesVolumeUpdateForm.size.$invalid">
|
<div class="small text-warning" style="margin-top: 5px" ng-show="ctrl.state.errors.volumeSize || kubernetesVolumeUpdateForm.size.$invalid">
|
||||||
<div ng-messages="kubernetesVolumeUpdateForm.size.$error">
|
<div class="vertical-center" ng-messages="kubernetesVolumeUpdateForm.size.$error">
|
||||||
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
|
<p ng-message="required"><pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> This field is required.</p>
|
||||||
</div>
|
</div>
|
||||||
<p ng-show="ctrl.state.errors.volumeSize && !kubernetesVolumeUpdateForm.size.$invalid"
|
<p class="vertical-center" ng-show="ctrl.state.errors.volumeSize"
|
||||||
><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> The new size must be greater than the actual size.</p
|
><pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> The new size must be greater than the actual size.</p
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -139,16 +141,16 @@
|
||||||
</uib-tab>
|
</uib-tab>
|
||||||
|
|
||||||
<uib-tab index="1" classes="btn-sm" select="ctrl.selectTab(1)">
|
<uib-tab index="1" classes="btn-sm" select="ctrl.selectTab(1)">
|
||||||
<uib-tab-heading data-cy="k8sVolDetail-volEventsTab">
|
<uib-tab-heading class="vertical-center" data-cy="k8sVolDetail-volEventsTab">
|
||||||
<i class="fa fa-history space-right" aria-hidden="true"></i> Events
|
<pr-icon icon="'file-text'" feather="true"></pr-icon> Events
|
||||||
<div ng-if="ctrl.hasEventWarnings()">
|
<div ng-if="ctrl.hasEventWarnings()">
|
||||||
<i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i>
|
<pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon>
|
||||||
{{ ctrl.state.eventWarningCount }} warning(s)
|
{{ ctrl.state.eventWarningCount }} warning(s)
|
||||||
</div>
|
</div>
|
||||||
</uib-tab-heading>
|
</uib-tab-heading>
|
||||||
<kubernetes-events-datatable
|
<kubernetes-events-datatable
|
||||||
title-text="Events"
|
title-text="Events"
|
||||||
title-icon="fa-history"
|
title-icon="file-text"
|
||||||
dataset="ctrl.events"
|
dataset="ctrl.events"
|
||||||
table-key="kubernetes.volume.events"
|
table-key="kubernetes.volume.events"
|
||||||
order-by="Date"
|
order-by="Date"
|
||||||
|
|
@ -160,8 +162,8 @@
|
||||||
</uib-tab>
|
</uib-tab>
|
||||||
|
|
||||||
<uib-tab index="2" ng-if="ctrl.volume.PersistentVolumeClaim.Yaml" select="ctrl.showEditor()" classes="btn-sm">
|
<uib-tab index="2" ng-if="ctrl.volume.PersistentVolumeClaim.Yaml" select="ctrl.showEditor()" classes="btn-sm">
|
||||||
<uib-tab-heading data-cy="k8sVolDetail-volYamlTab"> <i class="fa fa-code space-right" aria-hidden="true"></i> YAML </uib-tab-heading>
|
<uib-tab-heading class="vertical-center" data-cy="k8sVolDetail-volYamlTab"> <pr-icon icon="'code'" feather="true"></pr-icon> YAML </uib-tab-heading>
|
||||||
<div style="padding-right: 25px" ng-if="ctrl.state.showEditorTab">
|
<div class="px-5" ng-if="ctrl.state.showEditorTab">
|
||||||
<kubernetes-yaml-inspector key="volume-yaml" data="ctrl.volume.PersistentVolumeClaim.Yaml"></kubernetes-yaml-inspector>
|
<kubernetes-yaml-inspector key="volume-yaml" data="ctrl.volume.PersistentVolumeClaim.Yaml"></kubernetes-yaml-inspector>
|
||||||
</div>
|
</div>
|
||||||
</uib-tab>
|
</uib-tab>
|
||||||
|
|
@ -179,7 +181,7 @@
|
||||||
order-by="Name"
|
order-by="Name"
|
||||||
refresh-callback="ctrl.getVolume"
|
refresh-callback="ctrl.getVolume"
|
||||||
title-text="Applications using this volume"
|
title-text="Applications using this volume"
|
||||||
title-icon="fa-laptop-code"
|
title-icon="code"
|
||||||
>
|
>
|
||||||
</kubernetes-integrated-applications-datatable>
|
</kubernetes-integrated-applications-datatable>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue