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

feat(ui): UI improvements kube app detail EE-3463 (#7176)

pull/7152/head
Prabhat Khera 2022-07-15 10:49:12 +12:00 committed by GitHub
parent 552d3f8a3e
commit f5e774c89d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 531 additions and 450 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/assets/css/bootstrap-override.css
View File

@ -326,3 +326,21 @@ input:checked + .slider:before {
.control-label {
@apply inline-flex items-center;
}
.progress {
height: 8px;
border-radius: 4px;
width: 50%;
display: inline-block;
margin-bottom: 0;
}
.progress .progress-bar {
background-color: var(--ui-blue-8);
}
.progress + span {
display: inline-block;
font-size: 85%;
margin-left: 10px;
}

139
app/kubernetes/components/datatables/application/containers-datatable/containersDatatable.html
View File

@ -2,10 +2,28 @@
<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">
<pr-icon icon="'server'" mode="'primary'" feather="true"></pr-icon>
</div>
<span>
{{ $ctrl.titleText }}
</span>
</div>
<div class="searchBar">
<pr-icon icon="'search'" class="vertical-center" feather="true"></pr-icon>
<input
type="text"
class="searchInput ml-1"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search for an application..."
ng-model-options="{ debounce: 300 }"
/>
</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><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="tableMenu">
<div class="menuHeader"> Table settings </div>
@ -25,7 +43,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" style="display: none" icon="'check'" mode="'success'" feather="true"></pr-icon>
</span>
</div>
</div>
@ -38,76 +56,81 @@
</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..."
ng-model-options="{ debounce: 300 }"
/>
</div>
<div class="table-responsive">
<table class="table table-hover nowrap-cells" data-cy="k8sAppDetail-containerTable">
<thead>
<tr>
<th ng-if="!$ctrl.isPod">
<a ng-click="$ctrl.changeOrderBy('PodName')">
Pod
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'PodName' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'PodName' && $ctrl.state.reverseOrder"></i>
</a>
<table-column-header
col-title="'Pod'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'PodName'"
is-sorted-desc="$ctrl.state.orderBy === 'PodName' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('PodName')"
></table-column-header>
</th>
<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('Image')">
Image
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Image' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Image' && $ctrl.state.reverseOrder"></i>
</a>
<table-column-header
col-title="'Image'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'Image'"
is-sorted-desc="$ctrl.state.orderBy === 'Image' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Image')"
></table-column-header>
</th>
<th>
<a ng-click="$ctrl.changeOrderBy('ImagePullPolicy')">
Image Pull Policy
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ImagePullPolicy' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ImagePullPolicy' && $ctrl.state.reverseOrder"></i>
</a>
<table-column-header
col-title="'Image Pull Policy'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'ImagePullPolicy'"
is-sorted-desc="$ctrl.state.orderBy === 'ImagePullPolicy' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('ImagePullPolicy')"
></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('Node')">
Node
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Node' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Node' && $ctrl.state.reverseOrder"></i>
</a>
<table-column-header
col-title="'Node'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'Node'"
is-sorted-desc="$ctrl.state.orderBy === 'Node' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Node')"
></table-column-header>
</th>
<th>
<a ng-click="$ctrl.changeOrderBy('IP')">
Pod IP
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IP' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IP' && $ctrl.state.reverseOrder"></i>
</a>
<table-column-header
col-title="'Pod IP'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'IP'"
is-sorted-desc="$ctrl.state.orderBy === 'IP' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('IP')"
></table-column-header>
</th>
<th>
<a ng-click="$ctrl.changeOrderBy('CreationDate')">
Creation date
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'CreationDate' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'CreationDate' && $ctrl.state.reverseOrder"></i>
</a>
<table-column-header
col-title="'Creation date'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'CreationDate'"
is-sorted-desc="$ctrl.state.orderBy === 'CreationDate' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('CreationDate')"
></table-column-header>
</th>
<th>Actions</th>
</tr>
@ -140,11 +163,13 @@
ui-sref="kubernetes.applications.application.stats({ pod: item.PodName, container: item.Name })"
style="margin-right: 10px"
>
<i class="fa fa-chart-area" aria-hidden="true"></i> Stats
<pr-icon icon="'pie-chart'" class="mr-1" feather="true"></pr-icon>Stats
</a>
<a ui-sref="kubernetes.applications.application.logs({ pod: item.PodName, container: item.Name })">
<pr-icon icon="'file-text'" class="mr-1" feather="true"></pr-icon>Logs
</a>
<a ui-sref="kubernetes.applications.application.logs({ pod: item.PodName, container: item.Name })"> <i class="fa fa-file-alt" aria-hidden="true"></i> Logs </a>
<a ng-if="item.Status === 'Running'" ui-sref="kubernetes.applications.application.console({ pod: item.PodName, container: item.Name })" style="margin-left: 10px">
<i class="fa fa-terminal" aria-hidden="true"></i> Console
<pr-icon icon="'terminal'" class="mr-1" feather="true"></pr-icon>Console
</a>
</td>
</tr>

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

@ -1,134 +1,140 @@
<div class="datatable">
<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="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="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
<div class="tableMenu">
<div class="menuHeader"> Table settings </div>
<div class="menuContent">
<div>
<div class="md-checkbox">
<input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()" />
<label for="setting_auto_refresh">Auto refresh</label>
</div>
<div ng-if="$ctrl.settings.repeater.autoRefresh">
<label for="settings_refresh_rate"> Refresh rate </label>
<select id="settings_refresh_rate" ng-model="$ctrl.settings.repeater.refreshRate" ng-change="$ctrl.onSettingsRepeaterChange()" class="small-select">
<option value="10">10s</option>
<option value="30">30s</option>
<option value="60">1min</option>
<option value="120">2min</option>
<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>
</span>
</div>
</div>
<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>
<span class="vertical-center">
{{ $ctrl.titleText }}
</span>
</div>
<div class="searchBar">
<pr-icon icon="'search'" class="vertical-center" feather="true"></pr-icon>
<input
type="text"
class="searchInput ml-1"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search for an event..."
auto-focus
ng-model-options="{ debounce: 300 }"
data-cy="k8sConfigDetail-eventsTableSearchInput"
/>
</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><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>
<div class="menuContent">
<div>
<div class="md-checkbox">
<input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()" />
<label for="setting_auto_refresh">Auto refresh</label>
</div>
<div>
<a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.settings.open = false;">Close</a>
<div ng-if="$ctrl.settings.repeater.autoRefresh">
<label for="settings_refresh_rate"> Refresh rate </label>
<select id="settings_refresh_rate" ng-model="$ctrl.settings.repeater.refreshRate" ng-change="$ctrl.onSettingsRepeaterChange()" class="small-select">
<option value="10">10s</option>
<option value="30">30s</option>
<option value="60">1min</option>
<option value="120">2min</option>
<option value="300">5min</option>
</select>
<span>
<pr-icon id="refreshRateChange" style="display: none" icon="'check'" mode="'success'" feather="true"></pr-icon>
</span>
</div>
</div>
</div>
</span>
<div>
<a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.settings.open = false;">Close</a>
</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 }"
data-cy="k8sConfigDetail-eventsTableSearchInput"
/>
</div>
<div class="table-responsive">
<table class="table table-hover nowrap-cells" data-cy="k8sConfigDetail-eventsTable">
<thead>
<tr>
<th>
<a ng-click="$ctrl.changeOrderBy('Date')">
Date
<i class="fa fa-sort-numeric-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Date' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-numeric-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Date' && $ctrl.state.reverseOrder"></i>
</a>
</th>
<th>
<a ng-click="$ctrl.changeOrderBy('Involved.kind')">
Kind
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Involved.kind' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Involved.kind' && $ctrl.state.reverseOrder"></i>
</a>
</th>
<th>
<a ng-click="$ctrl.changeOrderBy('Type')">
Type
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Type' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Type' && $ctrl.state.reverseOrder"></i>
</a>
</th>
<th>
<a ng-click="$ctrl.changeOrderBy('Message')">
Message
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Message' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Message' && $ctrl.state.reverseOrder"></i>
</a>
</th>
</tr>
</thead>
<tbody>
<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: $ctrl.tableKey))"
pagination-id="$ctrl.tableKey"
>
<td>{{ item.Date | getisodate }}</td>
<td>{{ item.Involved.kind }}</td>
<td
><span class="label label-{{ item.Type | kubernetesEventTypeColor }}">{{ item.Type }}</span></td
>
<td>{{ item.Message }}</td>
</tr>
<tr ng-if="$ctrl.loading">
<td colspan="4" class="text-center text-muted">Loading...</td>
</tr>
<tr ng-if="!$ctrl.loading && (!$ctrl.dataset || $ctrl.state.filteredDataSet.length === 0)">
<td colspan="4" class="text-center text-muted">No event available.</td>
</tr>
</tbody>
</table>
</div>
<div class="footer" ng-if="$ctrl.dataset">
<div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
<div class="paginationControls">
<form class="form-inline">
<span class="limitSelector">
<span style="margin-right: 5px"> Items per page </span>
<select
class="form-control"
ng-model="$ctrl.state.paginatedItemLimit"
ng-change="$ctrl.changePaginationLimit()"
data-cy="k8sConfigDetail-eventsTablePaginationDropdown"
>
<option value="0">All</option>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</span>
<dir-pagination-controls max-size="5" pagination-id="$ctrl.tableKey"></dir-pagination-controls>
</form>
</div>
</div>
</rd-widget-body>
</rd-widget>
</span>
</div>
</div>
<div class="table-responsive">
<table class="table table-hover nowrap-cells" data-cy="k8sConfigDetail-eventsTable">
<thead>
<tr>
<th>
<table-column-header
col-title="'Date'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'Date'"
is-sorted-desc="$ctrl.state.orderBy === 'Date' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Date')"
></table-column-header>
</th>
<th>
<table-column-header
col-title="'Kind'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'Involved.kind'"
is-sorted-desc="$ctrl.state.orderBy === 'Involved.kind' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Involved.kind')"
></table-column-header>
</th>
<th>
<table-column-header
col-title="'Type'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'Type'"
is-sorted-desc="$ctrl.state.orderBy === 'Type' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Type')"
></table-column-header>
</th>
<th>
<table-column-header
col-title="'Message'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'Message'"
is-sorted-desc="$ctrl.state.orderBy === 'Message' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Message')"
></table-column-header>
</th>
</tr>
</thead>
<tbody>
<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: $ctrl.tableKey))"
pagination-id="$ctrl.tableKey"
>
<td>{{ item.Date | getisodate }}</td>
<td>{{ item.Involved.kind }}</td>
<td
><span class="label label-{{ item.Type | kubernetesEventTypeColor }}">{{ item.Type }}</span></td
>
<td>{{ item.Message }}</td>
</tr>
<tr ng-if="$ctrl.loading">
<td colspan="4" class="text-center text-muted">Loading...</td>
</tr>
<tr ng-if="!$ctrl.loading && (!$ctrl.dataset || $ctrl.state.filteredDataSet.length === 0)">
<td colspan="4" class="text-center text-muted">No event available.</td>
</tr>
</tbody>
</table>
</div>
<div class="footer" ng-if="$ctrl.dataset">
<div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
<div class="paginationControls">
<form class="form-inline">
<span class="limitSelector">
<span style="margin-right: 5px"> Items per page </span>
<select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="k8sConfigDetail-eventsTablePaginationDropdown">
<option value="0">All</option>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</span>
<dir-pagination-controls max-size="5" pagination-id="$ctrl.tableKey"></dir-pagination-controls>
</form>
</div>
</div>
</div>

20
app/kubernetes/components/resource-reservation/resourceReservation.html
View File

@ -15,33 +15,29 @@
value="$ctrl.memoryReservationPercent"
type="{{ $ctrl.memoryReservationPercent | kubernetesUsageLevelInfo }}"
data-cy="k8sNamespaceDetail-memoryUsage"
>
<b style="white-space: nowrap"> {{ $ctrl.memoryReservation }} / {{ $ctrl.memoryLimit }} MB - {{ $ctrl.memoryReservationPercent }}% </b>
</uib-progressbar>
></uib-progressbar>
<span> {{ $ctrl.memoryReservation }} / {{ $ctrl.memoryLimit }} MB - {{ $ctrl.memoryReservationPercent }}% </span>
</div>
</div>
<div class="form-group" ng-if="$ctrl.displayUsage && $ctrl.memoryLimit !== 0">
<label for="memory-usage" class="col-sm-3 col-lg-2 control-label text-left"> Memory used </label>
<div class="col-sm-9" style="margin-top: 4px">
<uib-progressbar animate="false" value="$ctrl.memoryUsagePercent" type="{{ $ctrl.memoryUsagePercent | kubernetesUsageLevelInfo }}">
<b style="white-space: nowrap"> {{ $ctrl.memoryUsage }} / {{ $ctrl.memoryLimit }} MB - {{ $ctrl.memoryUsagePercent }}% </b>
</uib-progressbar>
<uib-progressbar animate="false" value="$ctrl.memoryUsagePercent" type="{{ $ctrl.memoryUsagePercent | kubernetesUsageLevelInfo }}"></uib-progressbar>
<span> {{ $ctrl.memoryUsage }} / {{ $ctrl.memoryLimit }} MB - {{ $ctrl.memoryUsagePercent }}% </span>
</div>
</div>
<div class="form-group" ng-if="$ctrl.cpuLimit !== 0">
<label for="cpu-reservation" class="col-sm-3 col-lg-2 control-label text-left"> CPU reservation </label>
<div class="col-sm-9" style="margin-top: 4px">
<uib-progressbar animate="false" value="$ctrl.cpuReservationPercent" type="{{ $ctrl.cpuReservationPercent | kubernetesUsageLevelInfo }}">
<b style="white-space: nowrap"> {{ $ctrl.cpuReservation | kubernetesApplicationCPUValue }} / {{ $ctrl.cpuLimit }} - {{ $ctrl.cpuReservationPercent }}% </b>
</uib-progressbar>
<uib-progressbar animate="false" value="$ctrl.cpuReservationPercent" type="{{ $ctrl.cpuReservationPercent | kubernetesUsageLevelInfo }}"></uib-progressbar>
<span> {{ $ctrl.cpuReservation | kubernetesApplicationCPUValue }} / {{ $ctrl.cpuLimit }} - {{ $ctrl.cpuReservationPercent }}% </span>
</div>
</div>
<div class="form-group" ng-if="$ctrl.displayUsage && $ctrl.cpuLimit !== 0">
<label for="cpu-usage" class="col-sm-3 col-lg-2 control-label text-left"> CPU used </label>
<div class="col-sm-9" style="margin-top: 4px">
<uib-progressbar animate="false" value="$ctrl.cpuUsagePercent" type="{{ $ctrl.cpuUsagePercent | kubernetesUsageLevelInfo }}">
<b style="white-space: nowrap"> {{ $ctrl.cpuUsage | kubernetesApplicationCPUValue }} / {{ $ctrl.cpuLimit }} - {{ $ctrl.cpuUsagePercent }}% </b>
</uib-progressbar>
<uib-progressbar animate="false" value="$ctrl.cpuUsagePercent" type="{{ $ctrl.cpuUsagePercent | kubernetesUsageLevelInfo }}"></uib-progressbar>
<span> {{ $ctrl.cpuUsage | kubernetesApplicationCPUValue }} / {{ $ctrl.cpuLimit }} - {{ $ctrl.cpuUsagePercent }}% </span>
</div>
</div>
</div>

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

@ -1,10 +1,17 @@
<div>
<code-editor identifier="application-details-yaml" read-only="true" value="$ctrl.data"></code-editor>
<div style="margin: 15px">
<span class="btn btn-primary btn-sm" ng-click="$ctrl.copyYAML()"><i class="fa fa-copy space-right" aria-hidden="true"></i>Copy to clipboard</span>
<span class="btn btn-primary btn-sm space-left" ng-click="$ctrl.toggleYAMLInspectorExpansion()">
<i class="fa fa-{{ $ctrl.expanded ? 'minus' : 'plus' }} space-right" aria-hidden="true"></i>{{ $ctrl.expanded ? 'Collapse' : 'Expand' }}</span
>
<span id="copyNotificationYAML" style="margin-left: 7px; display: none; color: #23ae89" class="small"> <i class="fa fa-check" aria-hidden="true"></i> copied </span>
<span class="btn btn-light btn-sm" ng-click="$ctrl.copyYAML()">
<pr-icon 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>
{{ $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
</span>
</div>
</div>

6
app/kubernetes/views/applications/console/console.html
View File

@ -35,10 +35,10 @@
<div class="col-sm-12 form-section-title"> Console </div>
<!-- Command -->
<div class="form-group">
<label for="console_command" class="col-sm-1 control-label text-left">Command</label>
<div class="col-sm-10 input-group">
<label for="console_command" class="col-sm-3 col-lg-2 control-label text-left">Command</label>
<div class="col-sm-8 input-group">
<span class="input-group-addon">
<i class="fas fa-terminal" aria-hidden="true"></i>
<pr-icon icon="'terminal'" class="mr-1" feather="true"></pr-icon>
</span>
<input
type="text"

123
app/kubernetes/views/applications/edit/application.html
View File

@ -18,13 +18,13 @@
<kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>
<div ng-if="ctrl.state.viewReady">
<div class="row">
<div class="row kubernetes-application">
<div class="col-sm-12">
<rd-widget>
<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)">
<uib-tab-heading> <i class="fa fa-laptop-code space-right" aria-hidden="true"></i> Application </uib-tab-heading>
<uib-tab-heading> <pr-icon icon="'fa-laptop-code'" class-name="'mr-1'"></pr-icon> Application </uib-tab-heading>
<div style="padding: 20px">
<table class="table">
<tbody>
@ -79,25 +79,29 @@
<tr>
<td>Creation</td>
<td>
<span ng-if="ctrl.application.ApplicationOwner" style="margin-right: 5px" data-cy="k8sAppDetail-owner">
<i class="fas fa-user"></i> {{ ctrl.application.ApplicationOwner }}
<span ng-if="ctrl.application.ApplicationOwner" class="mr-1 vertical-center" data-cy="k8sAppDetail-owner">
<pr-icon icon="'user'" feather="true"></pr-icon> {{ ctrl.application.ApplicationOwner }}
</span>
<span class="vertical-center"> <pr-icon icon="'clock'" mode="'alt'" feather="true"></pr-icon> {{ ctrl.application.CreationDate | getisodate }} </span>
<span ng-if="ctrl.application.ApplicationOwner" data-cy="k8sAppDetail-creationMethod" class="vertical-center">
<pr-icon icon="'clock'" feather="true"></pr-icon> Deployed from {{ ctrl.state.appType }}
</span>
<span> <i class="fas fa-clock"></i> {{ ctrl.application.CreationDate | getisodate }}</span>
<span ng-if="ctrl.application.ApplicationOwner" data-cy="k8sAppDetail-creationMethod">
<i class="fa fa-file-code space-left space-right" aria-hidden="true"></i> Deployed from {{ ctrl.state.appType }}</span
>
</td>
</tr>
<tr>
<td colspan="2">
<form class="form-horizontal" name="kubernetesApplicationNoteForm">
<div class="form-group">
<div class="col-sm-12">
<i class="fa fa-edit" aria-hidden="true"></i> Note
<button class="btn btn-xs btn-primary" ng-click="ctrl.state.expandedNote = !ctrl.state.expandedNote;" data-cy="k8sAppDetail-expandNoteButton"
<div class="col-sm-12 vertical-center">
<pr-icon icon="'edit'" feather="true"></pr-icon> Note
<button
class="btn btn-xs btn-light vertical-center"
ng-click="ctrl.state.expandedNote = !ctrl.state.expandedNote;"
data-cy="k8sAppDetail-expandNoteButton"
>{{ ctrl.state.expandedNote ? 'Collapse' : 'Expand' }}
<i class="fas {{ ctrl.state.expandedNote ? 'fa-angle-up' : 'fa-angle-down' }}" aria-hidden="true"></i
></button>
<pr-icon icon="'chevron-up'" feather="true" ng-if="ctrl.state.expandedNote"></pr-icon>
<pr-icon icon="'chevron-down'" feather="true" ng-if="!ctrl.state.expandedNote"></pr-icon>
</button>
</div>
</div>
<div class="form-group" ng-if="ctrl.state.expandedNote">
@ -152,14 +156,14 @@
<uib-tab index="1" classes="btn-sm" select="ctrl.selectTab(1)">
<uib-tab-heading>
<i class="fas fa-compress-arrows-alt space-right" aria-hidden="true"></i> Placement
<div ng-if="ctrl.state.placementWarning">
<i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i>
<pr-icon icon="'fa-compress-arrows-alt'"></pr-icon> Placement
<div ng-if="ctrl.state.placementWarning" class="vertical-center">
<pr-icon icon="'alert-circle'" mode="'warning'" feather="true"></pr-icon>
warning
</div>
</uib-tab-heading>
<div class="small text-muted" style="padding: 20px">
<i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i>
<div class="small text-muted vertical-center" style="padding: 20px">
<pr-icon icon="'alert-circle'" mode="'warning'" feather="true"></pr-icon>
The placement component helps you understand whether or not this application can be deployed on a specific node.
</div>
<kubernetes-application-placements-datatable
@ -176,9 +180,9 @@
<uib-tab index="2" classes="btn-sm" select="ctrl.selectTab(2)">
<uib-tab-heading>
<i class="fa fa-history space-right" aria-hidden="true"></i> Events
<div ng-if="ctrl.hasEventWarnings()">
<i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i>
<pr-icon icon="'fa-history'"></pr-icon> Events
<div ng-if="ctrl.hasEventWarnings()" class="vertical-center">
<pr-icon icon="'alert-circle'" mode="'warning'" feather="true"></pr-icon>
{{ ctrl.state.eventWarningCount }} warning(s)
</div>
</uib-tab-heading>
@ -195,7 +199,7 @@
</uib-tab>
<uib-tab index="3" ng-if="ctrl.application.Yaml" select="ctrl.showEditor()" classes="btn-sm">
<uib-tab-heading> <i class="fa fa-code space-right" aria-hidden="true"></i> YAML </uib-tab-heading>
<uib-tab-heading> <pr-icon icon="'code'" feather="true"></pr-icon> YAML </uib-tab-heading>
<div style="padding-right: 25px" ng-if="ctrl.state.showEditorTab">
<kubernetes-yaml-inspector key="application-yaml" data="ctrl.application.Yaml"></kubernetes-yaml-inspector>
</div>
@ -214,70 +218,66 @@
<button
ng-if="!ctrl.isExternalApplication()"
type="button"
class="btn btn-sm btn-primary"
class="btn btn-sm btn-light vertical-center"
ui-sref="kubernetes.applications.application.edit"
style="margin-left: 0"
data-cy="k8sAppDetail-editAppButton"
>
<i class="fa fa-file-code space-right" aria-hidden="true"></i>Edit this application
<pr-icon icon="'code'" class="mr-1" feather="true"></pr-icon>Edit this application
</button>
<button
authorization="K8sApplicationDetailsW"
ng-if="ctrl.isExternalApplication()"
type="button"
class="btn btn-sm btn-primary"
class="btn btn-sm btn-light"
ui-sref="kubernetes.applications.application.edit"
style="margin-left: 0"
data-cy="k8sAppDetail-editAppButton"
>
<i class="fa fa-file-code space-right" aria-hidden="true"></i>Edit External application
<pr-icon icon="'code'" class-name="'mr-1'" feather="true"></pr-icon>Edit External application
</button>
<button
ng-if="ctrl.application.ApplicationType !== ctrl.KubernetesApplicationTypes.POD"
type="button"
class="btn btn-sm btn-primary"
class="btn btn-sm btn-light"
style="margin-left: 0"
ng-click="ctrl.redeployApplication()"
data-cy="k8sAppDetail-redeployButton"
>
<i class="fa fa-redo space-right" aria-hidden="true"></i>Redeploy
<pr-icon icon="'rotate-cw'" class="'mr-1'" feather="true"></pr-icon>Redeploy
</button>
<button
ng-if="!ctrl.isExternalApplication()"
type="button"
class="btn btn-sm btn-primary"
class="btn btn-sm btn-light"
style="margin-left: 0"
ng-click="ctrl.rollbackApplication()"
ng-disabled="ctrl.application.Revisions.length < 2 || ctrl.state.appType !== ctrl.KubernetesDeploymentTypes.APPLICATION_FORM"
data-cy="k8sAppDetail-rollbackButton"
>
<i class="fas fa-history space-right" aria-hidden="true"></i>Rollback to previous configuration
<pr-icon icon="'rotate-ccw'" feather="true" class="mr-1"></pr-icon>Rollback to previous configuration
</button>
<a
ng-if="ctrl.isStack() && ctrl.stackFileContent"
class="btn btn-sm btn-primary space-left"
ui-sref="kubernetes.templates.custom.new({fileContent: ctrl.stackFileContent})"
>
<i class="fas fa-plus space-right" aria-hidden="true"></i>Create template from application
<pr-icon icon="'plus'" class="mr-1" feather="true"></pr-icon>Create template from application
</a>
</div>
<!-- ACCESSING APPLICATION -->
<div class="text-muted" style="margin-bottom: 15px"> <i class="fa fa-external-link-alt" aria-hidden="true" style="margin-right: 2px"></i> Accessing the application </div>
<div class="text-muted" style="margin-bottom: 15px"> <pr-icon icon="'external-link'" class="mr-1" feather="true"></pr-icon>Accessing the application </div>
<div class="small text-muted" ng-if="ctrl.application.PublishedPorts.length === 0" style="margin-bottom: 15px">
<i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i>
This application is not exposing any port.
<pr-icon icon="'alert-circle'" mode="'primary'" class="mr-1" feather="true"></pr-icon>This application is not exposing any port.
</div>
<div ng-if="ctrl.application.Services.length !== 0">
<!-- Services notice -->
<div>
<div class="small text-muted">
<p>
<i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i>
This application is exposed through service(s) as below:
</p>
<p> <pr-icon icon="'alert-circle'" mode="'primary'" class="mr-1" feather="true"></pr-icon>This application is exposed through service(s) as below: </p>
</div>
</div>
@ -295,10 +295,10 @@
</div>
<!-- !ACCESSING APPLICATION -->
<!-- AUTO SCALING -->
<div class="text-muted" style="margin-bottom: 15px"> <i class="fa fa-expand-arrows-alt" aria-hidden="true" style="margin-right: 2px"></i> Auto-scaling</div>
<div class="text-muted" style="margin-bottom: 15px"> <pr-icon icon="'move'" class="mr-1" feather="true"></pr-icon>Auto-scaling </div>
<div class="small text-muted" ng-if="!ctrl.application.AutoScaler" style="margin-bottom: 15px">
<i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i>
<pr-icon icon="'alert-circle'" mode="'primary'" class="mr-1" feather="true"></pr-icon>
This application does not have an autoscaling policy defined.
</div>
@ -327,10 +327,13 @@
<!-- !AUTO SCALING -->
<!-- CONFIGURATIONS -->
<div class="text-muted" style="margin-bottom: 15px; margin-top: 25px"> <i class="fa fa-file-code" aria-hidden="true" style="margin-right: 2px"></i> Configuration </div>
<div class="text-muted" style="margin-bottom: 15px; margin-top: 25px">
<pr-icon icon="'file'" class="mr-1" feather="true"></pr-icon>
Configuration
</div>
<div class="small text-muted" ng-if="!ctrl.application.Env.length > 0 && !ctrl.hasVolumeConfiguration()" style="margin-bottom: 15px">
<i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i>
<pr-icon icon="'alert-circle'" mode="'primary'" class="mr-1" feather="true"></pr-icon>
This application is not using any environment variable or configuration.
</div>
@ -346,7 +349,7 @@
<td data-cy="k8sAppDetail-containerName">
{{ container.Name }}
<span ng-if="container.Type === ctrl.KubernetesPodContainerTypes.INIT"
><i class="fa fa-asterisk" aria-hidden="true"></i> {{ envvar.valueFrom.fieldRef.fieldPath }} (<a
><pr-icon icon="'fa-asterisk'"></pr-icon> {{ envvar.valueFrom.fieldRef.fieldPath }} (<a
href="https://kubernetes.io/docs/concepts/workloads/pods/init-containers/"
target="_blank"
>init container</a
@ -357,13 +360,13 @@
<td>
<span ng-if="envvar.value" data-cy="k8sAppDetail-envVarValue">{{ envvar.value }}</span>
<span ng-if="envvar.valueFrom.configMapKeyRef" data-cy="k8sAppDetail-envVarValue"
><i class="fa fa-key" aria-hidden="true"></i> {{ envvar.valueFrom.configMapKeyRef.key }}</span
><pr-icon icon="'key'" class="mr-1" feather="true"></pr-icon>{{ envvar.valueFrom.configMapKeyRef.key }}</span
>
<span ng-if="envvar.valueFrom.secretKeyRef" data-cy="k8sAppDetail-envVarValue"
><i class="fa fa-key" aria-hidden="true"></i> {{ envvar.valueFrom.secretKeyRef.key }}</span
><pr-icon icon="'key'" class="mr-1" feather="true"></pr-icon>{{ envvar.valueFrom.secretKeyRef.key }}</span
>
<span ng-if="envvar.valueFrom.fieldRef" data-cy="k8sAppDetail-envVarValue"
><i class="fa fa-asterisk" aria-hidden="true"></i> {{ envvar.valueFrom.fieldRef.fieldPath }} (<a
><pr-icon icon="'fa-asterisk'"></pr-icon> {{ envvar.valueFrom.fieldRef.fieldPath }} (<a
href="https://kubernetes.io/docs/tasks/inject-data-application/downward-api-volume-expose-pod-information/#capabilities-of-the-downward-api"
target="_blank"
>downward API</a
@ -375,12 +378,12 @@
<span ng-if="envvar.value || envvar.valueFrom.fieldRef || (!envvar.valueFrom.secretKeyRef && !envvar.valueFrom.configMapKeyRef)">-</span>
<span ng-if="envvar.valueFrom.configMapKeyRef" data-cy="k8sAppDetail-configName"
><a ui-sref="kubernetes.configurations.configuration({ name: envvar.valueFrom.configMapKeyRef.name, namespace: ctrl.application.ResourcePool })"
><i class="fa fa-file-code" aria-hidden="true"></i> {{ envvar.valueFrom.configMapKeyRef.name }}</a
><pr-icon icon="'file'" class="mr-1" feather="true"></pr-icon>{{ envvar.valueFrom.configMapKeyRef.name }}</a
></span
>
<span ng-if="envvar.valueFrom.secretKeyRef" data-cy="k8sAppDetail-configName"
><a ui-sref="kubernetes.configurations.configuration({ name: envvar.valueFrom.secretKeyRef.name, namespace: ctrl.application.ResourcePool })"
><i class="fa fa-file-code" aria-hidden="true"></i> {{ envvar.valueFrom.secretKeyRef.name }}</a
><pr-icon icon="'file'" class="mr-1" feather="true"></pr-icon>{{ envvar.valueFrom.secretKeyRef.name }}</a
></span
>
</td>
@ -400,7 +403,7 @@
<td>
{{ container.Name }}
<span ng-if="container.Type === ctrl.KubernetesPodContainerTypes.INIT"
><i class="fa fa-asterisk" aria-hidden="true"></i> {{ envvar.valueFrom.fieldRef.fieldPath }} (<a
><pr-icon icon="'fa-asterisk'"></pr-icon> {{ envvar.valueFrom.fieldRef.fieldPath }} (<a
href="https://kubernetes.io/docs/concepts/workloads/pods/init-containers/"
target="_blank"
>init container</a
@ -410,10 +413,13 @@
<td>
{{ volume.fileMountPath }}
</td>
<td> <i class="fa fa-key" ng-if="volume.configurationKey" aria-hidden="true"></i> {{ volume.configurationKey ? volume.configurationKey : '-' }} </td>
<td>
<pr-icon icon="'plus'" class="mr-1" feather="true" ng-if="volume.configurationKey"></pr-icon>
{{ volume.configurationKey ? volume.configurationKey : '-' }}
</td>
<td>
<a ui-sref="kubernetes.configurations.configuration({ name: volume.configurationName, namespace: ctrl.application.ResourcePool })"
><i class="fa fa-file-code" aria-hidden="true"></i> {{ volume.configurationName }}</a
><pr-icon icon="'plus'" class="mr-1" feather="true"></pr-icon>{{ volume.configurationName }}</a
>
</td>
</tr>
@ -422,10 +428,13 @@
<!-- !CONFIGURATIONS -->
<!-- DATA PERSISTENCE -->
<div class="text-muted" style="margin-bottom: 15px; margin-top: 25px"> <i class="fa fa-database" aria-hidden="true" style="margin-right: 2px"></i> Data persistence </div>
<div class="text-muted" style="margin-bottom: 15px; margin-top: 25px">
<pr-icon icon="'database'" class="mr-1" feather="true"></pr-icon>
Data persistence
</div>
<div class="small text-muted" ng-if="!ctrl.hasPersistedFolders()">
<i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i>
<pr-icon icon="'alert-circle'" mode="'primary'" class="mr-1" feather="true"></pr-icon>
This application has no persisted folders.
</div>
@ -448,7 +457,7 @@
</td>
<td ng-if="volume.PersistentVolumeClaimName">
<a ui-sref="kubernetes.volumes.volume({ name: volume.PersistentVolumeClaimName, namespace: ctrl.application.ResourcePool })" data-cy="k8sAppDetail-volClaimName"
><i class="fa fa-database" aria-hidden="true"></i> {{ volume.PersistentVolumeClaimName }}</a
><pr-icon icon="'database'" class="mr-1" feather="true"></pr-icon>{{ volume.PersistentVolumeClaimName }}</a
>
</td>
<td ng-if="volume.HostPath"> {{ volume.HostPath }} on host filesystem </td>
@ -470,7 +479,7 @@
<td>
{{ container.Name }}
<span ng-if="container.Type === ctrl.KubernetesPodContainerTypes.INIT"
><i class="fa fa-asterisk" aria-hidden="true"></i> {{ envvar.valueFrom.fieldRef.fieldPath }} (<a
><pr-icon icon="'fa-asterisk'"></pr-icon> {{ envvar.valueFrom.fieldRef.fieldPath }} (<a
href="https://kubernetes.io/docs/concepts/workloads/pods/init-containers/"
target="_blank"
>init container</a
@ -483,7 +492,7 @@
</td>
<td ng-if="volume.PersistentVolumeClaimName">
<a ui-sref="kubernetes.volumes.volume({ name: volume.PersistentVolumeClaimName + '-' + container.PodName, namespace: ctrl.application.ResourcePool })">
<i class="fa fa-database" aria-hidden="true"></i> {{ volume.PersistentVolumeClaimName + '-' + container.PodName }}</a
<pr-icon icon="'database'" class="mr-1" feather="true"></pr-icon>{{ volume.PersistentVolumeClaimName + '-' + container.PodName }}</a
>
</td>
<td ng-if="volume.HostPath"> {{ volume.HostPath }} on host filesystem </td>
@ -501,7 +510,7 @@
<div class="col-sm-12">
<kubernetes-containers-datatable
title-text="Application containers"
title-icon="fa-server"
title-icon="server"
dataset="ctrl.allContainers"
table-key="kubernetes.application.containers"
is-pod="ctrl.application.ApplicationType === ctrl.KubernetesApplicationTypes.POD"

361
app/kubernetes/views/applications/edit/components/placements-datatable/template.html
View File

@ -1,184 +1,191 @@
<div class="datatable">
<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="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="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
<div class="tableMenu">
<div class="menuHeader"> Table settings </div>
<div class="menuContent">
<div>
<div class="md-checkbox">
<input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()" />
<label for="setting_auto_refresh">Auto refresh</label>
</div>
<div ng-if="$ctrl.settings.repeater.autoRefresh">
<label for="settings_refresh_rate"> Refresh rate </label>
<select id="settings_refresh_rate" ng-model="$ctrl.settings.repeater.refreshRate" ng-change="$ctrl.onSettingsRepeaterChange()" class="small-select">
<option value="10">10s</option>
<option value="30">30s</option>
<option value="60">1min</option>
<option value="120">2min</option>
<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>
</span>
</div>
</div>
<div class="toolBar">
<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="searchBar">
<pr-icon icon="'search'" class="vertical-center" feather="true"></pr-icon>
<input
type="text"
class="searchInput ml-1"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search for a node..."
auto-focus
ng-model-options="{ debounce: 300 }"
/>
</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><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>
<div class="menuContent">
<div>
<div class="md-checkbox">
<input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()" />
<label for="setting_auto_refresh">Auto refresh</label>
</div>
<div>
<a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.settings.open = false;">Close</a>
<div ng-if="$ctrl.settings.repeater.autoRefresh">
<label for="settings_refresh_rate"> Refresh rate </label>
<select id="settings_refresh_rate" ng-model="$ctrl.settings.repeater.refreshRate" ng-change="$ctrl.onSettingsRepeaterChange()" class="small-select">
<option value="10">10s</option>
<option value="30">30s</option>
<option value="60">1min</option>
<option value="120">2min</option>
<option value="300">5min</option>
</select>
<span>
<pr-icon id="refreshRateChange" style="display: none" icon="'check'" mode="'success'" feather="true"></pr-icon>
</span>
</div>
</div>
</div>
</span>
<div>
<a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.settings.open = false;">Close</a>
</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">
<table class="table table-hover nowrap-cells">
<thead>
<tr>
<th style="width: 2%">
<a ng-click="$ctrl.expandAll()" ng-if="$ctrl.hasExpandableItems()">
<i ng-class="{ 'fas fa-angle-down': $ctrl.state.expandAll, 'fas fa-angle-right': !$ctrl.state.expandAll }" aria-hidden="true"></i>
</a>
</th>
<th style="width: 98%">
<a ng-click="$ctrl.changeOrderBy('Name')">
Node
<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>
</th>
</tr>
</thead>
<tbody>
<tr
dir-paginate-start="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | filter: $ctrl.isDisplayed | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit: $ctrl.tableKey))"
ng-class="{ active: item.Checked, 'datatable-highlighted': item.Highlighted }"
ng-click="$ctrl.expandItem(item, !item.Expanded)"
pagination-id="$ctrl.tableKey"
>
<td>
<a ng-if="$ctrl.itemCanExpand(item)">
<i ng-class="{ 'fas fa-angle-down': item.Expanded, 'fas fa-angle-right': !item.Expanded }" class="space-right" aria-hidden="true"></i>
</a>
<i ng-if="item.AcceptsApplication" class="fa fa-check green-icon" aria-hidden="true"></i>
<i ng-if="!item.AcceptsApplication" class="fa fa-times red-icon" aria-hidden="true"></i>
</td>
<td>
{{ item.Name }}
</td>
</tr>
<!-- ADMIN + UNMET TAINTS -->
<tr
ng-if="$ctrl.isAdmin"
ng-show="item.Expanded"
ng-repeat="taint in item.UnmetTaints"
ng-class="{ 'datatable-highlighted': item.Highlighted, 'datatable-unhighlighted': !item.Highlighted }"
>
<td colspan="2">
This application is missing a toleration for the taint <code>{{ taint.Key }}{{ taint.Value ? '=' + taint.Value : '' }}:{{ taint.Effect }}</code>
</td>
</tr>
<!-- !ADMIN + UNMET TAINTS -->
<!-- USER + UNMET TAINTS -->
<tr
ng-if="!$ctrl.isAdmin && item.UnmetTaints.length"
ng-show="item.Expanded"
ng-class="{ 'datatable-highlighted': item.Highlighted, 'datatable-unhighlighted': !item.Highlighted }"
>
<td colspan="2"> Placement constraint not respected for that node. </td>
</tr>
<!-- ! USER + UNMET TAINTS -->
<!-- ADMIN + UNMET NODE SELECTOR LABELS -->
<tr
ng-if="$ctrl.isAdmin"
ng-show="item.Expanded"
ng-repeat="label in item.UnmatchedNodeSelectorLabels"
ng-class="{ 'datatable-highlighted': item.Highlighted, 'datatable-unhighlighted': !item.Highlighted }"
>
<td colspan="2">
This application can only be scheduled on a node where the label <code>{{ label.key }}</code> is set to <code>{{ label.value }}</code>
</td>
</tr>
<!-- ! ADMIN + UNMET NODE SELECTOR LABELS -->
<!-- USER + UNMET NODE SELECTOR LABELS || UNMET NODE AFFINITIES -->
<tr
ng-if="!$ctrl.isAdmin && (item.UnmatchedNodeSelectorLabels.length || item.UnmatchedNodeAffinities.length)"
ng-show="item.Expanded"
ng-class="{ 'datatable-highlighted': item.Highlighted, 'datatable-unhighlighted': !item.Highlighted }"
>
<td colspan="2"> Placement label not respected for that node. </td>
</tr>
<!-- ! USER + UNMET NODE SELECTOR LABELS || UNMET NODE AFFINITIES -->
<!-- ADMIN + UNMET NODE AFFINITIES -->
<tr
ng-if="$ctrl.isAdmin"
ng-show="item.Expanded && item.UnmatchedNodeAffinities.length"
ng-class="{ 'datatable-highlighted': item.Highlighted, 'datatable-unhighlighted': !item.Highlighted }"
>
<td colspan="2"> This application can only be scheduled on nodes respecting one of the following labels combination: </td>
</tr>
<tr
dir-paginate-end
ng-if="$ctrl.isAdmin"
ng-show="item.Expanded"
ng-repeat="aff in item.UnmatchedNodeAffinities"
ng-class="{ 'datatable-highlighted': item.Highlighted, 'datatable-unhighlighted': !item.Highlighted }"
>
<td></td>
<td>
<code ng-repeat-start="term in aff track by $index">
{{ term.key }} {{ term.operator }} {{ term.values | kubernetesApplicationConstraintNodeAffinityValue: term.operator }}
</code>
<span ng-repeat-end>{{ $last ? '' : ' + ' }}</span>
</td>
</tr>
<!-- ! ADMIN + UNMET NODE AFFINITIES -->
<tr ng-if="$ctrl.loading">
<td colspan="2" class="text-center text-muted">Loading...</td>
</tr>
<tr ng-if="!$ctrl.loading && (!$ctrl.dataset || $ctrl.state.filteredDataSet.length === 0)">
<td colspan="2" class="text-center text-muted">No node available.</td>
</tr>
</tbody>
</table>
</div>
<div class="footer" ng-if="$ctrl.dataset">
<div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
<div class="paginationControls">
<form class="form-inline">
<span class="limitSelector">
<span style="margin-right: 5px"> Items per page </span>
<select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="component-paginationSelect">
<option value="0">All</option>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</span>
<dir-pagination-controls max-size="5" pagination-id="$ctrl.tableKey"></dir-pagination-controls>
</form>
</div>
</div>
</rd-widget-body>
</rd-widget>
</span>
</div>
</div>
<div class="table-responsive">
<table class="table table-hover nowrap-cells">
<thead>
<tr>
<th style="width: 2%">
<a ng-click="$ctrl.expandAll()" ng-if="$ctrl.hasExpandableItems()">
<pr-icon icon="'chevron-down'" feather="true" ng-if="$ctrl.state.expandAll"></pr-icon>
<pr-icon icon="'chevron-up'" feather="true" ng-if="!$ctrl.state.expandAll"></pr-icon>
</a>
</th>
<th style="width: 98%">
<table-column-header
col-title="'Node'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'Node'"
is-sorted-desc="$ctrl.state.orderBy === 'Node' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Node')"
></table-column-header>
</th>
</tr>
</thead>
<tbody>
<tr
dir-paginate-start="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | filter: $ctrl.isDisplayed | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit: $ctrl.tableKey))"
ng-class="{ active: item.Checked, 'datatable-highlighted': item.Highlighted }"
ng-click="$ctrl.expandItem(item, !item.Expanded)"
pagination-id="$ctrl.tableKey"
>
<td>
<a ng-if="$ctrl.itemCanExpand(item)">
<pr-icon icon="'chevron-down'" class="mr-1" feather="true" ng-if="item.Expanded"></pr-icon>
<pr-icon icon="'chevron-up'" class="mr-1" feather="true" ng-if="!item.Expanded"></pr-icon>
</a>
<pr-icon icon="'check'" ng-if="item.AcceptsApplication" mode="'success'" feather="true"></pr-icon>
<pr-icon icon="'x'" ng-if="!item.AcceptsApplication" mode="'error'" feather="true"></pr-icon>
</td>
<td>
{{ item.Name }}
</td>
</tr>
<!-- ADMIN + UNMET TAINTS -->
<tr
ng-if="$ctrl.isAdmin"
ng-show="item.Expanded"
ng-repeat="taint in item.UnmetTaints"
ng-class="{ 'datatable-highlighted': item.Highlighted, 'datatable-unhighlighted': !item.Highlighted }"
>
<td colspan="2">
This application is missing a toleration for the taint <code>{{ taint.Key }}{{ taint.Value ? '=' + taint.Value : '' }}:{{ taint.Effect }}</code>
</td>
</tr>
<!-- !ADMIN + UNMET TAINTS -->
<!-- USER + UNMET TAINTS -->
<tr
ng-if="!$ctrl.isAdmin && item.UnmetTaints.length"
ng-show="item.Expanded"
ng-class="{ 'datatable-highlighted': item.Highlighted, 'datatable-unhighlighted': !item.Highlighted }"
>
<td colspan="2"> Placement constraint not respected for that node. </td>
</tr>
<!-- ! USER + UNMET TAINTS -->
<!-- ADMIN + UNMET NODE SELECTOR LABELS -->
<tr
ng-if="$ctrl.isAdmin"
ng-show="item.Expanded"
ng-repeat="label in item.UnmatchedNodeSelectorLabels"
ng-class="{ 'datatable-highlighted': item.Highlighted, 'datatable-unhighlighted': !item.Highlighted }"
>
<td colspan="2">
This application can only be scheduled on a node where the label <code>{{ label.key }}</code> is set to <code>{{ label.value }}</code>
</td>
</tr>
<!-- ! ADMIN + UNMET NODE SELECTOR LABELS -->
<!-- USER + UNMET NODE SELECTOR LABELS || UNMET NODE AFFINITIES -->
<tr
ng-if="!$ctrl.isAdmin && (item.UnmatchedNodeSelectorLabels.length || item.UnmatchedNodeAffinities.length)"
ng-show="item.Expanded"
ng-class="{ 'datatable-highlighted': item.Highlighted, 'datatable-unhighlighted': !item.Highlighted }"
>
<td colspan="2"> Placement label not respected for that node. </td>
</tr>
<!-- ! USER + UNMET NODE SELECTOR LABELS || UNMET NODE AFFINITIES -->
<!-- ADMIN + UNMET NODE AFFINITIES -->
<tr
ng-if="$ctrl.isAdmin"
ng-show="item.Expanded && item.UnmatchedNodeAffinities.length"
ng-class="{ 'datatable-highlighted': item.Highlighted, 'datatable-unhighlighted': !item.Highlighted }"
>
<td colspan="2"> This application can only be scheduled on nodes respecting one of the following labels combination: </td>
</tr>
<tr
dir-paginate-end
ng-if="$ctrl.isAdmin"
ng-show="item.Expanded"
ng-repeat="aff in item.UnmatchedNodeAffinities"
ng-class="{ 'datatable-highlighted': item.Highlighted, 'datatable-unhighlighted': !item.Highlighted }"
>
<td></td>
<td>
<code ng-repeat-start="term in aff track by $index">
{{ term.key }} {{ term.operator }} {{ term.values | kubernetesApplicationConstraintNodeAffinityValue: term.operator }}
</code>
<span ng-repeat-end>{{ $last ? '' : ' + ' }}</span>
</td>
</tr>
<!-- ! ADMIN + UNMET NODE AFFINITIES -->
<tr ng-if="$ctrl.loading">
<td colspan="2" class="text-center text-muted">Loading...</td>
</tr>
<tr ng-if="!$ctrl.loading && (!$ctrl.dataset || $ctrl.state.filteredDataSet.length === 0)">
<td colspan="2" class="text-center text-muted">No node available.</td>
</tr>
</tbody>
</table>
</div>
<div class="footer" ng-if="$ctrl.dataset">
<div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
<div class="paginationControls">
<form class="form-inline">
<span class="limitSelector">
<span style="margin-right: 5px"> Items per page </span>
<select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="component-paginationSelect">
<option value="0">All</option>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</span>
<dir-pagination-controls max-size="5" pagination-id="$ctrl.tableKey"></dir-pagination-controls>
</form>
</div>
</div>
</div>

22
app/kubernetes/views/applications/logs/logs.html
View File

@ -31,23 +31,21 @@
<div class="col-sm-12">
<rd-widget>
<rd-widget-body>
<form class="form-horizontal" autocomplete="off">
<form class="form-horizontal row" autocomplete="off">
<div class="col-sm-12 form-section-title"> Actions </div>
<!-- auto-refresh -->
<div class="form-group">
<div class="col-sm-12">
<label class="control-label text-left">
Auto-refresh
<portainer-tooltip message="'Automatically refresh logs every 5 seconds'"></portainer-tooltip>
</label>
<label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="ctrl.state.autoRefresh" ng-change="ctrl.updateAutoRefresh()" /><i></i> </label>
</div>
<label class="col-sm-3 col-lg-2 control-label text-left">
Auto-refresh
<portainer-tooltip message="'Automatically refresh logs every 5 seconds'"></portainer-tooltip>
</label>
<label class="switch col-sm-8"> <input type="checkbox" ng-model="ctrl.state.autoRefresh" ng-change="ctrl.updateAutoRefresh()" /><i></i> </label>
</div>
<!-- !auto-refresh -->
<!-- search -->
<div class="form-group">
<label for="logs_search" class="col-sm-1 control-label text-left"> Search </label>
<div class="col-sm-11">
<label for="logs_search" class="col-sm-3 col-lg-2 control-label text-left"> Search </label>
<div class="col-sm-8">
<input
class="form-control"
type="text"
@ -63,7 +61,9 @@
<!-- actions -->
<div class="form-group">
<div class="col-sm-12">
<button class="btn btn-primary btn-sm" type="button" ng-click="ctrl.downloadLogs()" style="margin-left: 0"><i class="fa fa-download"></i> Download logs</button>
<button class="btn btn-primary btn-sm !ml-0" type="button" ng-click="ctrl.downloadLogs()">
<pr-icon icon="'download'" feather="true"></pr-icon> Download logs
</button>
</div>
</div>
<!-- !actions -->

12
app/kubernetes/views/kubernetes.css
View File

@ -9,3 +9,15 @@
.service-form .clear-both {
clear: both;
}
.service-form .form-group {
vertical-align: top;
}
.service-form .form-group .input-group {
width: 100%;
}
.service-form .clear-both {
clear: both;
}

2
app/portainer/services/modal.service/confirm.ts
View File

@ -161,7 +161,7 @@ export function confirmUpdate(message: string, callback: ConfirmCallback) {
buttons: {
confirm: {
label: 'Update',
className: 'btn-warning',
className: 'btn-primary',
},
},
callback,

1
app/portainer/services/modal.service/utils.ts
View File

@ -22,6 +22,7 @@ export function confirmButtons(options: ButtonsOptions) {
options.cancel && options.cancel.label
? sanitize(options.cancel.label)
: 'Cancel',
className: 'btn-default',
},
};
}