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 { .control-label {
@apply inline-flex items-center; @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>
<rd-widget-body classes="no-padding"> <rd-widget-body classes="no-padding">
<div class="toolBar"> <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"> <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>
@ -25,7 +43,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>
@ -38,76 +56,81 @@
</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..."
ng-model-options="{ debounce: 300 }"
/>
</div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover nowrap-cells" data-cy="k8sAppDetail-containerTable"> <table class="table table-hover nowrap-cells" data-cy="k8sAppDetail-containerTable">
<thead> <thead>
<tr> <tr>
<th ng-if="!$ctrl.isPod"> <th ng-if="!$ctrl.isPod">
<a ng-click="$ctrl.changeOrderBy('PodName')"> <table-column-header
Pod col-title="'Pod'"
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'PodName' && !$ctrl.state.reverseOrder"></i> can-sort="true"
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'PodName' && $ctrl.state.reverseOrder"></i> is-sorted="$ctrl.state.orderBy === 'PodName'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'PodName' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('PodName')"
></table-column-header>
</th> </th>
<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('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>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('ImagePullPolicy')"> <table-column-header
Image Pull Policy col-title="'Image Pull Policy'"
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ImagePullPolicy' && !$ctrl.state.reverseOrder"></i> can-sort="true"
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ImagePullPolicy' && $ctrl.state.reverseOrder"></i> is-sorted="$ctrl.state.orderBy === 'ImagePullPolicy'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'ImagePullPolicy' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('ImagePullPolicy')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Status')"> <table-column-header
Status col-title="'Status'"
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Status' && !$ctrl.state.reverseOrder"></i> can-sort="true"
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Status' && $ctrl.state.reverseOrder"></i> is-sorted="$ctrl.state.orderBy === 'Status'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Status' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Status')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Node')"> <table-column-header
Node col-title="'Node'"
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Node' && !$ctrl.state.reverseOrder"></i> can-sort="true"
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Node' && $ctrl.state.reverseOrder"></i> is-sorted="$ctrl.state.orderBy === 'Node'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Node' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Node')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('IP')"> <table-column-header
Pod IP col-title="'Pod IP'"
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IP' && !$ctrl.state.reverseOrder"></i> can-sort="true"
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IP' && $ctrl.state.reverseOrder"></i> is-sorted="$ctrl.state.orderBy === 'IP'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'IP' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('IP')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('CreationDate')"> <table-column-header
Creation date col-title="'Creation date'"
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'CreationDate' && !$ctrl.state.reverseOrder"></i> can-sort="true"
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'CreationDate' && $ctrl.state.reverseOrder"></i> is-sorted="$ctrl.state.orderBy === 'CreationDate'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'CreationDate' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('CreationDate')"
></table-column-header>
</th> </th>
<th>Actions</th> <th>Actions</th>
</tr> </tr>
@ -140,11 +163,13 @@
ui-sref="kubernetes.applications.application.stats({ pod: item.PodName, container: item.Name })" ui-sref="kubernetes.applications.application.stats({ pod: item.PodName, container: item.Name })"
style="margin-right: 10px" 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>
<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"> <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> </a>
</td> </td>
</tr> </tr>

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

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

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

@ -15,33 +15,29 @@
value="$ctrl.memoryReservationPercent" value="$ctrl.memoryReservationPercent"
type="{{ $ctrl.memoryReservationPercent | kubernetesUsageLevelInfo }}" type="{{ $ctrl.memoryReservationPercent | kubernetesUsageLevelInfo }}"
data-cy="k8sNamespaceDetail-memoryUsage" data-cy="k8sNamespaceDetail-memoryUsage"
> ></uib-progressbar>
<b style="white-space: nowrap"> {{ $ctrl.memoryReservation }} / {{ $ctrl.memoryLimit }} MB - {{ $ctrl.memoryReservationPercent }}% </b> <span> {{ $ctrl.memoryReservation }} / {{ $ctrl.memoryLimit }} MB - {{ $ctrl.memoryReservationPercent }}% </span>
</uib-progressbar>
</div> </div>
</div> </div>
<div class="form-group" ng-if="$ctrl.displayUsage && $ctrl.memoryLimit !== 0"> <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> <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"> <div class="col-sm-9" style="margin-top: 4px">
<uib-progressbar animate="false" value="$ctrl.memoryUsagePercent" type="{{ $ctrl.memoryUsagePercent | kubernetesUsageLevelInfo }}"> <uib-progressbar animate="false" value="$ctrl.memoryUsagePercent" type="{{ $ctrl.memoryUsagePercent | kubernetesUsageLevelInfo }}"></uib-progressbar>
<b style="white-space: nowrap"> {{ $ctrl.memoryUsage }} / {{ $ctrl.memoryLimit }} MB - {{ $ctrl.memoryUsagePercent }}% </b> <span> {{ $ctrl.memoryUsage }} / {{ $ctrl.memoryLimit }} MB - {{ $ctrl.memoryUsagePercent }}% </span>
</uib-progressbar>
</div> </div>
</div> </div>
<div class="form-group" ng-if="$ctrl.cpuLimit !== 0"> <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> <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"> <div class="col-sm-9" style="margin-top: 4px">
<uib-progressbar animate="false" value="$ctrl.cpuReservationPercent" type="{{ $ctrl.cpuReservationPercent | kubernetesUsageLevelInfo }}"> <uib-progressbar animate="false" value="$ctrl.cpuReservationPercent" type="{{ $ctrl.cpuReservationPercent | kubernetesUsageLevelInfo }}"></uib-progressbar>
<b style="white-space: nowrap"> {{ $ctrl.cpuReservation | kubernetesApplicationCPUValue }} / {{ $ctrl.cpuLimit }} - {{ $ctrl.cpuReservationPercent }}% </b> <span> {{ $ctrl.cpuReservation | kubernetesApplicationCPUValue }} / {{ $ctrl.cpuLimit }} - {{ $ctrl.cpuReservationPercent }}% </span>
</uib-progressbar>
</div> </div>
</div> </div>
<div class="form-group" ng-if="$ctrl.displayUsage && $ctrl.cpuLimit !== 0"> <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> <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"> <div class="col-sm-9" style="margin-top: 4px">
<uib-progressbar animate="false" value="$ctrl.cpuUsagePercent" type="{{ $ctrl.cpuUsagePercent | kubernetesUsageLevelInfo }}"> <uib-progressbar animate="false" value="$ctrl.cpuUsagePercent" type="{{ $ctrl.cpuUsagePercent | kubernetesUsageLevelInfo }}"></uib-progressbar>
<b style="white-space: nowrap"> {{ $ctrl.cpuUsage | kubernetesApplicationCPUValue }} / {{ $ctrl.cpuLimit }} - {{ $ctrl.cpuUsagePercent }}% </b> <span> {{ $ctrl.cpuUsage | kubernetesApplicationCPUValue }} / {{ $ctrl.cpuLimit }} - {{ $ctrl.cpuUsagePercent }}% </span>
</uib-progressbar>
</div> </div>
</div> </div>
</div> </div>

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

@ -1,10 +1,17 @@
<div> <div>
<code-editor identifier="application-details-yaml" read-only="true" value="$ctrl.data"></code-editor> <code-editor identifier="application-details-yaml" read-only="true" value="$ctrl.data"></code-editor>
<div style="margin: 15px"> <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-light btn-sm" ng-click="$ctrl.copyYAML()">
<span class="btn btn-primary btn-sm space-left" ng-click="$ctrl.toggleYAMLInspectorExpansion()"> <pr-icon icon="'copy'" feather="true"></pr-icon>
<i class="fa fa-{{ $ctrl.expanded ? 'minus' : 'plus' }} space-right" aria-hidden="true"></i>{{ $ctrl.expanded ? 'Collapse' : 'Expand' }}</span Copy to clipboard
> </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 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>
</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> <div class="col-sm-12 form-section-title"> Console </div>
<!-- Command --> <!-- Command -->
<div class="form-group"> <div class="form-group">
<label for="console_command" class="col-sm-1 control-label text-left">Command</label> <label for="console_command" class="col-sm-3 col-lg-2 control-label text-left">Command</label>
<div class="col-sm-10 input-group"> <div class="col-sm-8 input-group">
<span class="input-group-addon"> <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> </span>
<input <input
type="text" 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> <kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>
<div ng-if="ctrl.state.viewReady"> <div ng-if="ctrl.state.viewReady">
<div class="row"> <div class="row kubernetes-application">
<div class="col-sm-12"> <div class="col-sm-12">
<rd-widget> <rd-widget>
<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> <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"> <div style="padding: 20px">
<table class="table"> <table class="table">
<tbody> <tbody>
@ -79,25 +79,29 @@
<tr> <tr>
<td>Creation</td> <td>Creation</td>
<td> <td>
<span ng-if="ctrl.application.ApplicationOwner" style="margin-right: 5px" data-cy="k8sAppDetail-owner"> <span ng-if="ctrl.application.ApplicationOwner" class="mr-1 vertical-center" data-cy="k8sAppDetail-owner">
<i class="fas fa-user"></i> {{ ctrl.application.ApplicationOwner }} <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>
<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> </td>
</tr> </tr>
<tr> <tr>
<td colspan="2"> <td colspan="2">
<form class="form-horizontal" name="kubernetesApplicationNoteForm"> <form class="form-horizontal" name="kubernetesApplicationNoteForm">
<div class="form-group"> <div class="form-group">
<div class="col-sm-12"> <div class="col-sm-12 vertical-center">
<i class="fa fa-edit" aria-hidden="true"></i> Note <pr-icon icon="'edit'" feather="true"></pr-icon> Note
<button class="btn btn-xs btn-primary" ng-click="ctrl.state.expandedNote = !ctrl.state.expandedNote;" data-cy="k8sAppDetail-expandNoteButton" <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' }} >{{ ctrl.state.expandedNote ? 'Collapse' : 'Expand' }}
<i class="fas {{ ctrl.state.expandedNote ? 'fa-angle-up' : 'fa-angle-down' }}" aria-hidden="true"></i <pr-icon icon="'chevron-up'" feather="true" ng-if="ctrl.state.expandedNote"></pr-icon>
></button> <pr-icon icon="'chevron-down'" feather="true" ng-if="!ctrl.state.expandedNote"></pr-icon>
</button>
</div> </div>
</div> </div>
<div class="form-group" ng-if="ctrl.state.expandedNote"> <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 index="1" classes="btn-sm" select="ctrl.selectTab(1)">
<uib-tab-heading> <uib-tab-heading>
<i class="fas fa-compress-arrows-alt space-right" aria-hidden="true"></i> Placement <pr-icon icon="'fa-compress-arrows-alt'"></pr-icon> Placement
<div ng-if="ctrl.state.placementWarning"> <div ng-if="ctrl.state.placementWarning" class="vertical-center">
<i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i> <pr-icon icon="'alert-circle'" mode="'warning'" feather="true"></pr-icon>
warning warning
</div> </div>
</uib-tab-heading> </uib-tab-heading>
<div class="small text-muted" style="padding: 20px"> <div class="small text-muted vertical-center" style="padding: 20px">
<i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i> <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. The placement component helps you understand whether or not this application can be deployed on a specific node.
</div> </div>
<kubernetes-application-placements-datatable <kubernetes-application-placements-datatable
@ -176,9 +180,9 @@
<uib-tab index="2" classes="btn-sm" select="ctrl.selectTab(2)"> <uib-tab index="2" classes="btn-sm" select="ctrl.selectTab(2)">
<uib-tab-heading> <uib-tab-heading>
<i class="fa fa-history space-right" aria-hidden="true"></i> Events <pr-icon icon="'fa-history'"></pr-icon> Events
<div ng-if="ctrl.hasEventWarnings()"> <div ng-if="ctrl.hasEventWarnings()" class="vertical-center">
<i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i> <pr-icon icon="'alert-circle'" mode="'warning'" feather="true"></pr-icon>
{{ ctrl.state.eventWarningCount }} warning(s) {{ ctrl.state.eventWarningCount }} warning(s)
</div> </div>
</uib-tab-heading> </uib-tab-heading>
@ -195,7 +199,7 @@
</uib-tab> </uib-tab>
<uib-tab index="3" ng-if="ctrl.application.Yaml" select="ctrl.showEditor()" classes="btn-sm"> <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"> <div style="padding-right: 25px" ng-if="ctrl.state.showEditorTab">
<kubernetes-yaml-inspector key="application-yaml" data="ctrl.application.Yaml"></kubernetes-yaml-inspector> <kubernetes-yaml-inspector key="application-yaml" data="ctrl.application.Yaml"></kubernetes-yaml-inspector>
</div> </div>
@ -214,70 +218,66 @@
<button <button
ng-if="!ctrl.isExternalApplication()" ng-if="!ctrl.isExternalApplication()"
type="button" type="button"
class="btn btn-sm btn-primary" class="btn btn-sm btn-light vertical-center"
ui-sref="kubernetes.applications.application.edit" ui-sref="kubernetes.applications.application.edit"
style="margin-left: 0" style="margin-left: 0"
data-cy="k8sAppDetail-editAppButton" 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>
<button <button
authorization="K8sApplicationDetailsW" authorization="K8sApplicationDetailsW"
ng-if="ctrl.isExternalApplication()" ng-if="ctrl.isExternalApplication()"
type="button" type="button"
class="btn btn-sm btn-primary" class="btn btn-sm btn-light"
ui-sref="kubernetes.applications.application.edit" ui-sref="kubernetes.applications.application.edit"
style="margin-left: 0" style="margin-left: 0"
data-cy="k8sAppDetail-editAppButton" 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>
<button <button
ng-if="ctrl.application.ApplicationType !== ctrl.KubernetesApplicationTypes.POD" ng-if="ctrl.application.ApplicationType !== ctrl.KubernetesApplicationTypes.POD"
type="button" type="button"
class="btn btn-sm btn-primary" class="btn btn-sm btn-light"
style="margin-left: 0" style="margin-left: 0"
ng-click="ctrl.redeployApplication()" ng-click="ctrl.redeployApplication()"
data-cy="k8sAppDetail-redeployButton" 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>
<button <button
ng-if="!ctrl.isExternalApplication()" ng-if="!ctrl.isExternalApplication()"
type="button" type="button"
class="btn btn-sm btn-primary" class="btn btn-sm btn-light"
style="margin-left: 0" style="margin-left: 0"
ng-click="ctrl.rollbackApplication()" ng-click="ctrl.rollbackApplication()"
ng-disabled="ctrl.application.Revisions.length < 2 || ctrl.state.appType !== ctrl.KubernetesDeploymentTypes.APPLICATION_FORM" ng-disabled="ctrl.application.Revisions.length < 2 || ctrl.state.appType !== ctrl.KubernetesDeploymentTypes.APPLICATION_FORM"
data-cy="k8sAppDetail-rollbackButton" 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> </button>
<a <a
ng-if="ctrl.isStack() && ctrl.stackFileContent" ng-if="ctrl.isStack() && ctrl.stackFileContent"
class="btn btn-sm btn-primary space-left" class="btn btn-sm btn-primary space-left"
ui-sref="kubernetes.templates.custom.new({fileContent: ctrl.stackFileContent})" 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> </a>
</div> </div>
<!-- ACCESSING APPLICATION --> <!-- 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"> <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> <pr-icon icon="'alert-circle'" mode="'primary'" class="mr-1" feather="true"></pr-icon>This application is not exposing any port.
This application is not exposing any port.
</div> </div>
<div ng-if="ctrl.application.Services.length !== 0"> <div ng-if="ctrl.application.Services.length !== 0">
<!-- Services notice --> <!-- Services notice -->
<div> <div>
<div class="small text-muted"> <div class="small text-muted">
<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>
<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>
</div> </div>
</div> </div>
@ -295,10 +295,10 @@
</div> </div>
<!-- !ACCESSING APPLICATION --> <!-- !ACCESSING APPLICATION -->
<!-- AUTO SCALING --> <!-- 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"> <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. This application does not have an autoscaling policy defined.
</div> </div>
@ -327,10 +327,13 @@
<!-- !AUTO SCALING --> <!-- !AUTO SCALING -->
<!-- CONFIGURATIONS --> <!-- 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"> <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. This application is not using any environment variable or configuration.
</div> </div>
@ -346,7 +349,7 @@
<td data-cy="k8sAppDetail-containerName"> <td data-cy="k8sAppDetail-containerName">
{{ container.Name }} {{ container.Name }}
<span ng-if="container.Type === ctrl.KubernetesPodContainerTypes.INIT" <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/" href="https://kubernetes.io/docs/concepts/workloads/pods/init-containers/"
target="_blank" target="_blank"
>init container</a >init container</a
@ -357,13 +360,13 @@
<td> <td>
<span ng-if="envvar.value" data-cy="k8sAppDetail-envVarValue">{{ envvar.value }}</span> <span ng-if="envvar.value" data-cy="k8sAppDetail-envVarValue">{{ envvar.value }}</span>
<span ng-if="envvar.valueFrom.configMapKeyRef" data-cy="k8sAppDetail-envVarValue" <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" <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" <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" href="https://kubernetes.io/docs/tasks/inject-data-application/downward-api-volume-expose-pod-information/#capabilities-of-the-downward-api"
target="_blank" target="_blank"
>downward API</a >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.value || envvar.valueFrom.fieldRef || (!envvar.valueFrom.secretKeyRef && !envvar.valueFrom.configMapKeyRef)">-</span>
<span ng-if="envvar.valueFrom.configMapKeyRef" data-cy="k8sAppDetail-configName" <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 })" ><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
> >
<span ng-if="envvar.valueFrom.secretKeyRef" data-cy="k8sAppDetail-configName" <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 })" ><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 ></span
> >
</td> </td>
@ -400,7 +403,7 @@
<td> <td>
{{ container.Name }} {{ container.Name }}
<span ng-if="container.Type === ctrl.KubernetesPodContainerTypes.INIT" <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/" href="https://kubernetes.io/docs/concepts/workloads/pods/init-containers/"
target="_blank" target="_blank"
>init container</a >init container</a
@ -410,10 +413,13 @@
<td> <td>
{{ volume.fileMountPath }} {{ volume.fileMountPath }}
</td> </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> <td>
<a ui-sref="kubernetes.configurations.configuration({ name: volume.configurationName, namespace: ctrl.application.ResourcePool })" <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> </td>
</tr> </tr>
@ -422,10 +428,13 @@
<!-- !CONFIGURATIONS --> <!-- !CONFIGURATIONS -->
<!-- DATA PERSISTENCE --> <!-- 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()"> <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. This application has no persisted folders.
</div> </div>
@ -448,7 +457,7 @@
</td> </td>
<td ng-if="volume.PersistentVolumeClaimName"> <td ng-if="volume.PersistentVolumeClaimName">
<a ui-sref="kubernetes.volumes.volume({ name: volume.PersistentVolumeClaimName, namespace: ctrl.application.ResourcePool })" data-cy="k8sAppDetail-volClaimName" <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>
<td ng-if="volume.HostPath"> {{ volume.HostPath }} on host filesystem </td> <td ng-if="volume.HostPath"> {{ volume.HostPath }} on host filesystem </td>
@ -470,7 +479,7 @@
<td> <td>
{{ container.Name }} {{ container.Name }}
<span ng-if="container.Type === ctrl.KubernetesPodContainerTypes.INIT" <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/" href="https://kubernetes.io/docs/concepts/workloads/pods/init-containers/"
target="_blank" target="_blank"
>init container</a >init container</a
@ -483,7 +492,7 @@
</td> </td>
<td ng-if="volume.PersistentVolumeClaimName"> <td ng-if="volume.PersistentVolumeClaimName">
<a ui-sref="kubernetes.volumes.volume({ name: volume.PersistentVolumeClaimName + '-' + container.PodName, namespace: ctrl.application.ResourcePool })"> <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>
<td ng-if="volume.HostPath"> {{ volume.HostPath }} on host filesystem </td> <td ng-if="volume.HostPath"> {{ volume.HostPath }} on host filesystem </td>
@ -501,7 +510,7 @@
<div class="col-sm-12"> <div class="col-sm-12">
<kubernetes-containers-datatable <kubernetes-containers-datatable
title-text="Application containers" title-text="Application containers"
title-icon="fa-server" title-icon="server"
dataset="ctrl.allContainers" dataset="ctrl.allContainers"
table-key="kubernetes.application.containers" table-key="kubernetes.application.containers"
is-pod="ctrl.application.ApplicationType === ctrl.KubernetesApplicationTypes.POD" 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"> <div class="datatable">
<rd-widget> <div class="toolBar">
<rd-widget-body classes="no-padding"> <div class="toolBarTitle flex">
<div class="toolBar"> <div class="flex justify-center content-center mr-2 icon-nested-blue vertical-center">
<div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px"></i> {{ $ctrl.titleText }} </div> <i class="fa icon icon-primary icon-sm" ng-class="$ctrl.titleIcon" aria-hidden="true"></i>
<div class="settings"> </div>
<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="vertical-center">
<span uib-dropdown-toggle><i class="fa fa-cog" aria-hidden="true"></i> Table settings</span> {{ $ctrl.titleText }}
<div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu> </span>
<div class="tableMenu"> </div>
<div class="menuHeader"> Table settings </div> <div class="searchBar">
<div class="menuContent"> <pr-icon icon="'search'" class="vertical-center" feather="true"></pr-icon>
<div> <input
<div class="md-checkbox"> type="text"
<input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()" /> class="searchInput ml-1"
<label for="setting_auto_refresh">Auto refresh</label> ng-model="$ctrl.state.textFilter"
</div> ng-change="$ctrl.onTextFilterChange()"
<div ng-if="$ctrl.settings.repeater.autoRefresh"> placeholder="Search for a node..."
<label for="settings_refresh_rate"> Refresh rate </label> auto-focus
<select id="settings_refresh_rate" ng-model="$ctrl.settings.repeater.refreshRate" ng-change="$ctrl.onSettingsRepeaterChange()" class="small-select"> ng-model-options="{ debounce: 300 }"
<option value="10">10s</option> />
<option value="30">30s</option> </div>
<option value="60">1min</option> <div class="settings">
<option value="120">2min</option> <span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
<option value="300">5min</option> <span uib-dropdown-toggle><pr-icon icon="'more-vertical'" feather="true"></pr-icon></span>
</select> <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
<span> <div class="tableMenu">
<i id="refreshRateChange" class="fa fa-check green-icon" aria-hidden="true" style="margin-top: 7px; display: none"></i> <div class="menuHeader"> Table settings </div>
</span> <div class="menuContent">
</div> <div>
</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>
<div> <div ng-if="$ctrl.settings.repeater.autoRefresh">
<a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.settings.open = false;">Close</a> <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> </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> </span>
<div class="searchBar"> </div>
<i class="fa fa-search searchIcon" aria-hidden="true"></i> </div>
<input <div class="table-responsive">
type="text" <table class="table table-hover nowrap-cells">
class="searchInput" <thead>
ng-model="$ctrl.state.textFilter" <tr>
ng-change="$ctrl.onTextFilterChange()" <th style="width: 2%">
placeholder="Search..." <a ng-click="$ctrl.expandAll()" ng-if="$ctrl.hasExpandableItems()">
auto-focus <pr-icon icon="'chevron-down'" feather="true" ng-if="$ctrl.state.expandAll"></pr-icon>
ng-model-options="{ debounce: 300 }" <pr-icon icon="'chevron-up'" feather="true" ng-if="!$ctrl.state.expandAll"></pr-icon>
/> </a>
</div> </th>
<div class="table-responsive"> <th style="width: 98%">
<table class="table table-hover nowrap-cells"> <table-column-header
<thead> col-title="'Node'"
<tr> can-sort="true"
<th style="width: 2%"> is-sorted="$ctrl.state.orderBy === 'Node'"
<a ng-click="$ctrl.expandAll()" ng-if="$ctrl.hasExpandableItems()"> is-sorted-desc="$ctrl.state.orderBy === 'Node' && $ctrl.state.reverseOrder"
<i ng-class="{ 'fas fa-angle-down': $ctrl.state.expandAll, 'fas fa-angle-right': !$ctrl.state.expandAll }" aria-hidden="true"></i> ng-click="$ctrl.changeOrderBy('Node')"
</a> ></table-column-header>
</th> </th>
<th style="width: 98%"> </tr>
<a ng-click="$ctrl.changeOrderBy('Name')"> </thead>
Node <tbody>
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></i> <tr
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></i> 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))"
</a> ng-class="{ active: item.Checked, 'datatable-highlighted': item.Highlighted }"
</th> ng-click="$ctrl.expandItem(item, !item.Expanded)"
</tr> pagination-id="$ctrl.tableKey"
</thead> >
<tbody> <td>
<tr <a ng-if="$ctrl.itemCanExpand(item)">
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))" <pr-icon icon="'chevron-down'" class="mr-1" feather="true" ng-if="item.Expanded"></pr-icon>
ng-class="{ active: item.Checked, 'datatable-highlighted': item.Highlighted }" <pr-icon icon="'chevron-up'" class="mr-1" feather="true" ng-if="!item.Expanded"></pr-icon>
ng-click="$ctrl.expandItem(item, !item.Expanded)" </a>
pagination-id="$ctrl.tableKey" <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>
<a ng-if="$ctrl.itemCanExpand(item)"> <td>
<i ng-class="{ 'fas fa-angle-down': item.Expanded, 'fas fa-angle-right': !item.Expanded }" class="space-right" aria-hidden="true"></i> {{ item.Name }}
</a> </td>
<i ng-if="item.AcceptsApplication" class="fa fa-check green-icon" aria-hidden="true"></i> </tr>
<i ng-if="!item.AcceptsApplication" class="fa fa-times red-icon" aria-hidden="true"></i> <!-- ADMIN + UNMET TAINTS -->
</td> <tr
<td> ng-if="$ctrl.isAdmin"
{{ item.Name }} ng-show="item.Expanded"
</td> ng-repeat="taint in item.UnmetTaints"
</tr> ng-class="{ 'datatable-highlighted': item.Highlighted, 'datatable-unhighlighted': !item.Highlighted }"
<!-- ADMIN + UNMET TAINTS --> >
<tr <td colspan="2">
ng-if="$ctrl.isAdmin" This application is missing a toleration for the taint <code>{{ taint.Key }}{{ taint.Value ? '=' + taint.Value : '' }}:{{ taint.Effect }}</code>
ng-show="item.Expanded" </td>
ng-repeat="taint in item.UnmetTaints" </tr>
ng-class="{ 'datatable-highlighted': item.Highlighted, 'datatable-unhighlighted': !item.Highlighted }" <!-- !ADMIN + UNMET TAINTS -->
> <!-- USER + UNMET TAINTS -->
<td colspan="2"> <tr
This application is missing a toleration for the taint <code>{{ taint.Key }}{{ taint.Value ? '=' + taint.Value : '' }}:{{ taint.Effect }}</code> ng-if="!$ctrl.isAdmin && item.UnmetTaints.length"
</td> ng-show="item.Expanded"
</tr> ng-class="{ 'datatable-highlighted': item.Highlighted, 'datatable-unhighlighted': !item.Highlighted }"
<!-- !ADMIN + UNMET TAINTS --> >
<!-- USER + UNMET TAINTS --> <td colspan="2"> Placement constraint not respected for that node. </td>
<tr </tr>
ng-if="!$ctrl.isAdmin && item.UnmetTaints.length" <!-- ! USER + UNMET TAINTS -->
ng-show="item.Expanded" <!-- ADMIN + UNMET NODE SELECTOR LABELS -->
ng-class="{ 'datatable-highlighted': item.Highlighted, 'datatable-unhighlighted': !item.Highlighted }" <tr
> ng-if="$ctrl.isAdmin"
<td colspan="2"> Placement constraint not respected for that node. </td> ng-show="item.Expanded"
</tr> ng-repeat="label in item.UnmatchedNodeSelectorLabels"
<!-- ! USER + UNMET TAINTS --> ng-class="{ 'datatable-highlighted': item.Highlighted, 'datatable-unhighlighted': !item.Highlighted }"
<!-- ADMIN + UNMET NODE SELECTOR LABELS --> >
<tr <td colspan="2">
ng-if="$ctrl.isAdmin" This application can only be scheduled on a node where the label <code>{{ label.key }}</code> is set to <code>{{ label.value }}</code>
ng-show="item.Expanded" </td>
ng-repeat="label in item.UnmatchedNodeSelectorLabels" </tr>
ng-class="{ 'datatable-highlighted': item.Highlighted, 'datatable-unhighlighted': !item.Highlighted }" <!-- ! ADMIN + UNMET NODE SELECTOR LABELS -->
> <!-- USER + UNMET NODE SELECTOR LABELS || UNMET NODE AFFINITIES -->
<td colspan="2"> <tr
This application can only be scheduled on a node where the label <code>{{ label.key }}</code> is set to <code>{{ label.value }}</code> ng-if="!$ctrl.isAdmin && (item.UnmatchedNodeSelectorLabels.length || item.UnmatchedNodeAffinities.length)"
</td> ng-show="item.Expanded"
</tr> ng-class="{ 'datatable-highlighted': item.Highlighted, 'datatable-unhighlighted': !item.Highlighted }"
<!-- ! ADMIN + UNMET NODE SELECTOR LABELS --> >
<!-- USER + UNMET NODE SELECTOR LABELS || UNMET NODE AFFINITIES --> <td colspan="2"> Placement label not respected for that node. </td>
<tr </tr>
ng-if="!$ctrl.isAdmin && (item.UnmatchedNodeSelectorLabels.length || item.UnmatchedNodeAffinities.length)" <!-- ! USER + UNMET NODE SELECTOR LABELS || UNMET NODE AFFINITIES -->
ng-show="item.Expanded" <!-- ADMIN + UNMET NODE AFFINITIES -->
ng-class="{ 'datatable-highlighted': item.Highlighted, 'datatable-unhighlighted': !item.Highlighted }" <tr
> ng-if="$ctrl.isAdmin"
<td colspan="2"> Placement label not respected for that node. </td> ng-show="item.Expanded && item.UnmatchedNodeAffinities.length"
</tr> ng-class="{ 'datatable-highlighted': item.Highlighted, 'datatable-unhighlighted': !item.Highlighted }"
<!-- ! USER + UNMET NODE SELECTOR LABELS || UNMET NODE AFFINITIES --> >
<!-- ADMIN + UNMET NODE AFFINITIES --> <td colspan="2"> This application can only be scheduled on nodes respecting one of the following labels combination: </td>
<tr </tr>
ng-if="$ctrl.isAdmin" <tr
ng-show="item.Expanded && item.UnmatchedNodeAffinities.length" dir-paginate-end
ng-class="{ 'datatable-highlighted': item.Highlighted, 'datatable-unhighlighted': !item.Highlighted }" ng-if="$ctrl.isAdmin"
> ng-show="item.Expanded"
<td colspan="2"> This application can only be scheduled on nodes respecting one of the following labels combination: </td> ng-repeat="aff in item.UnmatchedNodeAffinities"
</tr> ng-class="{ 'datatable-highlighted': item.Highlighted, 'datatable-unhighlighted': !item.Highlighted }"
<tr >
dir-paginate-end <td></td>
ng-if="$ctrl.isAdmin" <td>
ng-show="item.Expanded" <code ng-repeat-start="term in aff track by $index">
ng-repeat="aff in item.UnmatchedNodeAffinities" {{ term.key }} {{ term.operator }} {{ term.values | kubernetesApplicationConstraintNodeAffinityValue: term.operator }}
ng-class="{ 'datatable-highlighted': item.Highlighted, 'datatable-unhighlighted': !item.Highlighted }" </code>
> <span ng-repeat-end>{{ $last ? '' : ' + ' }}</span>
<td></td> </td>
<td> </tr>
<code ng-repeat-start="term in aff track by $index"> <!-- ! ADMIN + UNMET NODE AFFINITIES -->
{{ term.key }} {{ term.operator }} {{ term.values | kubernetesApplicationConstraintNodeAffinityValue: term.operator }} <tr ng-if="$ctrl.loading">
</code> <td colspan="2" class="text-center text-muted">Loading...</td>
<span ng-repeat-end>{{ $last ? '' : ' + ' }}</span> </tr>
</td> <tr ng-if="!$ctrl.loading && (!$ctrl.dataset || $ctrl.state.filteredDataSet.length === 0)">
</tr> <td colspan="2" class="text-center text-muted">No node available.</td>
<!-- ! ADMIN + UNMET NODE AFFINITIES --> </tr>
<tr ng-if="$ctrl.loading"> </tbody>
<td colspan="2" class="text-center text-muted">Loading...</td> </table>
</tr> </div>
<tr ng-if="!$ctrl.loading && (!$ctrl.dataset || $ctrl.state.filteredDataSet.length === 0)"> <div class="footer" ng-if="$ctrl.dataset">
<td colspan="2" class="text-center text-muted">No node available.</td> <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
</tr> <div class="paginationControls">
</tbody> <form class="form-inline">
</table> <span class="limitSelector">
</div> <span style="margin-right: 5px"> Items per page </span>
<div class="footer" ng-if="$ctrl.dataset"> <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="component-paginationSelect">
<div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div> <option value="0">All</option>
<div class="paginationControls"> <option value="10">10</option>
<form class="form-inline"> <option value="25">25</option>
<span class="limitSelector"> <option value="50">50</option>
<span style="margin-right: 5px"> Items per page </span> <option value="100">100</option>
<select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="component-paginationSelect"> </select>
<option value="0">All</option> </span>
<option value="10">10</option> <dir-pagination-controls max-size="5" pagination-id="$ctrl.tableKey"></dir-pagination-controls>
<option value="25">25</option> </form>
<option value="50">50</option> </div>
<option value="100">100</option> </div>
</select>
</span>
<dir-pagination-controls max-size="5" pagination-id="$ctrl.tableKey"></dir-pagination-controls>
</form>
</div>
</div>
</rd-widget-body>
</rd-widget>
</div> </div>

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

@ -31,23 +31,21 @@
<div class="col-sm-12"> <div class="col-sm-12">
<rd-widget> <rd-widget>
<rd-widget-body> <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> <div class="col-sm-12 form-section-title"> Actions </div>
<!-- auto-refresh --> <!-- auto-refresh -->
<div class="form-group"> <div class="form-group">
<div class="col-sm-12"> <label class="col-sm-3 col-lg-2 control-label text-left">
<label class="control-label text-left"> Auto-refresh
Auto-refresh <portainer-tooltip message="'Automatically refresh logs every 5 seconds'"></portainer-tooltip>
<portainer-tooltip message="'Automatically refresh logs every 5 seconds'"></portainer-tooltip> </label>
</label> <label class="switch col-sm-8"> <input type="checkbox" ng-model="ctrl.state.autoRefresh" ng-change="ctrl.updateAutoRefresh()" /><i></i> </label>
<label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="ctrl.state.autoRefresh" ng-change="ctrl.updateAutoRefresh()" /><i></i> </label>
</div>
</div> </div>
<!-- !auto-refresh --> <!-- !auto-refresh -->
<!-- search --> <!-- search -->
<div class="form-group"> <div class="form-group">
<label for="logs_search" class="col-sm-1 control-label text-left"> Search </label> <label for="logs_search" class="col-sm-3 col-lg-2 control-label text-left"> Search </label>
<div class="col-sm-11"> <div class="col-sm-8">
<input <input
class="form-control" class="form-control"
type="text" type="text"
@ -63,7 +61,9 @@
<!-- actions --> <!-- actions -->
<div class="form-group"> <div class="form-group">
<div class="col-sm-12"> <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>
</div> </div>
<!-- !actions --> <!-- !actions -->

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

@ -9,3 +9,15 @@
.service-form .clear-both { .service-form .clear-both {
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: { buttons: {
confirm: { confirm: {
label: 'Update', label: 'Update',
className: 'btn-warning', className: 'btn-primary',
}, },
}, },
callback, 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 options.cancel && options.cancel.label
? sanitize(options.cancel.label) ? sanitize(options.cancel.label)
: 'Cancel', : 'Cancel',
className: 'btn-default',
}, },
}; };
} }