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

feat(ui): ui improvements on cluster landing page EE-3467 (#7245)

Browse Source
pull/7268/head
Prabhat Khera 2 years ago committed by GitHub
parent 35701f5899
commit ce7d234cba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 83 additions and 55 deletions
Show Stats Download Patch File Download Diff File

138
app/kubernetes/components/datatables/nodes-datatable/nodesDatatable.html
Unescape View File

@ -2,10 +2,36 @@
<rd-widget>
<rd-widget-body classes="no-padding">
<div class="toolBar">
<div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px"></i> {{ $ctrl.titleText }} </div>
<div class="toolBarTitle flex">
<div class="flex justify-center content-center mr-2 icon-nested-blue vertical-center">
<i class="fa icon icon-primary icon-sm" ng-class="$ctrl.titleIcon" aria-hidden="true"></i>
</div>
<span class="vertical-center">
{{ $ctrl.titleText }}
</span>
</div>
<div 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><i class="fa fa-cog" aria-hidden="true"></i> Table settings</span>
<div class="searchBar vertical-center">
<pr-icon icon="'search'" feather="true"></pr-icon>
<input
type="text"
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
auto-focus
ng-model-options="{ debounce: 300 }"
/>
</div>
<span
class="setting vertical-center"
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>
<div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
<div class="tableMenu">
<div class="menuHeader"> Table settings </div>
@ -25,7 +51,7 @@
<option value="300">5min</option>
</select>
<span>
<i id="refreshRateChange" class="fa fa-check green-icon" aria-hidden="true" style="margin-top: 7px; display: none"></i>
<pr-icon id="refreshRateChange" icon="'check'" mode="'success'" style="display: none" feather="true"></pr-icon>
</span>
</div>
</div>
@ -38,70 +64,72 @@
</span>
</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">
<table class="table table-hover nowrap-cells">
<thead>
<tr>
<th>
<a ng-click="$ctrl.changeOrderBy('Name')">
Name
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></i>
</a>
<table-column-header
col-title="'Name'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'Name'"
is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Name')"
></table-column-header>
</th>
<th>
<a ng-click="$ctrl.changeOrderBy('Role')">
Role
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Role' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Role' && $ctrl.state.reverseOrder"></i>
</a>
<table-column-header
col-title="'Role'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'Role'"
is-sorted-desc="$ctrl.state.orderBy === 'Role' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Role')"
></table-column-header>
</th>
<th>
<a ng-click="$ctrl.changeOrderBy('Status')">
Status
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Status' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Status' && $ctrl.state.reverseOrder"></i>
</a>
<table-column-header
col-title="'Status'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'Status'"
is-sorted-desc="$ctrl.state.orderBy === 'Status' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Status')"
></table-column-header>
</th>
<th>
<a ng-click="$ctrl.changeOrderBy('CPU')">
CPU
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'CPU' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'CPU' && $ctrl.state.reverseOrder"></i>
</a>
<table-column-header
col-title="'CPU'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'CPU'"
is-sorted-desc="$ctrl.state.orderBy === 'CPU' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('CPU')"
></table-column-header>
</th>
<th>
<a ng-click="$ctrl.changeOrderBy('Memory')">
Memory
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Memory' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Memory' && $ctrl.state.reverseOrder"></i>
</a>
<table-column-header
col-title="'Memory'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'Memory'"
is-sorted-desc="$ctrl.state.orderBy === 'Memory' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Memory')"
></table-column-header>
</th>
<th>
<a ng-click="$ctrl.changeOrderBy('Version')">
Version
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Version' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Version' && $ctrl.state.reverseOrder"></i>
</a>
<table-column-header
col-title="'Version'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'Version'"
is-sorted-desc="$ctrl.state.orderBy === 'Version' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Version')"
></table-column-header>
</th>
<th>
<a ng-click="$ctrl.changeOrderBy('IPAddress')">
IP Address
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IPAddress' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IPAddress' && $ctrl.state.reverseOrder"></i>
</a>
<table-column-header
col-title="'IP Address'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'IPAddress'"
is-sorted-desc="$ctrl.state.orderBy === 'IPAddress' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('IPAddress')"
></table-column-header>
</th>
<th ng-if="$ctrl.useServerMetrics"> Actions </th>
</tr>
@ -110,13 +138,13 @@
<tr
dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
>
<td ng-if="$ctrl.isAdmin">
<a ui-sref="kubernetes.cluster.node({ name: item.Name })">
<td>
<a ui-sref="kubernetes.cluster.node({ name: item.Name })" ng-if="$ctrl.hasK8sClusterNodeR">
{{ item.Name }}
</a>
<span class="label label-primary image-tag" style="margin-left: 5px" ng-if="item.Api">api</span>
<span ng-if="!$ctrl.hasK8sClusterNodeR">{{ item.Name }}</span>
<span class="label label-primary image-tag" style="margin-left: 5px" ng-if="item.Api" authorization="K8sClusterNodeR">api</span>
</td>
<td ng-if="!$ctrl.isAdmin"> {{ item.Name }}</td>
<td>{{ item.Role }}</td>
<td
><span class="label label-{{ item.Status | kubernetesNodeStatusColor }}">{{ item.Status }}</span></td

Write Preview
Loading…
Cancel
Save