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>

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

@ -1,11 +1,29 @@
<div class="datatable"> <div class="datatable">
<rd-widget>
<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="'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"> <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 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,50 +56,45 @@
</span> </span>
</div> </div>
</div> </div>
<div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input
type="text"
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
auto-focus
ng-model-options="{ debounce: 300 }"
data-cy="k8sConfigDetail-eventsTableSearchInput"
/>
</div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover nowrap-cells" data-cy="k8sConfigDetail-eventsTable"> <table class="table table-hover nowrap-cells" data-cy="k8sConfigDetail-eventsTable">
<thead> <thead>
<tr> <tr>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Date')"> <table-column-header
Date col-title="'Date'"
<i class="fa fa-sort-numeric-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Date' && !$ctrl.state.reverseOrder"></i> can-sort="true"
<i class="fa fa-sort-numeric-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Date' && $ctrl.state.reverseOrder"></i> is-sorted="$ctrl.state.orderBy === 'Date'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Date' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Date')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Involved.kind')"> <table-column-header
Kind col-title="'Kind'"
<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 === 'Involved.kind'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Involved.kind' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Involved.kind')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Type')"> <table-column-header
Type col-title="'Type'"
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Type' && !$ctrl.state.reverseOrder"></i> can-sort="true"
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Type' && $ctrl.state.reverseOrder"></i> is-sorted="$ctrl.state.orderBy === 'Type'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Type' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Type')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Message')"> <table-column-header
Message col-title="'Message'"
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Message' && !$ctrl.state.reverseOrder"></i> can-sort="true"
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Message' && $ctrl.state.reverseOrder"></i> is-sorted="$ctrl.state.orderBy === 'Message'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Message' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Message')"
></table-column-header>
</th> </th>
</tr> </tr>
</thead> </thead>
@ -112,12 +125,7 @@
<form class="form-inline"> <form class="form-inline">
<span class="limitSelector"> <span class="limitSelector">
<span style="margin-right: 5px"> Items per page </span> <span style="margin-right: 5px"> Items per page </span>
<select <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="k8sConfigDetail-eventsTablePaginationDropdown">
class="form-control"
ng-model="$ctrl.state.paginatedItemLimit"
ng-change="$ctrl.changePaginationLimit()"
data-cy="k8sConfigDetail-eventsTablePaginationDropdown"
>
<option value="0">All</option> <option value="0">All</option>
<option value="10">10</option> <option value="10">10</option>
<option value="25">25</option> <option value="25">25</option>
@ -129,6 +137,4 @@
</form> </form>
</div> </div>
</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"

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

@ -1,11 +1,28 @@
<div class="datatable"> <div class="datatable">
<rd-widget>
<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">
<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"> <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 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 +42,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,33 +55,24 @@
</span> </span>
</div> </div>
</div> </div>
<div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input
type="text"
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
auto-focus
ng-model-options="{ debounce: 300 }"
/>
</div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover nowrap-cells"> <table class="table table-hover nowrap-cells">
<thead> <thead>
<tr> <tr>
<th style="width: 2%"> <th style="width: 2%">
<a ng-click="$ctrl.expandAll()" ng-if="$ctrl.hasExpandableItems()"> <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> <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> </a>
</th> </th>
<th style="width: 98%"> <th style="width: 98%">
<a ng-click="$ctrl.changeOrderBy('Name')"> <table-column-header
Node col-title="'Node'"
<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 === 'Node'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Node' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Node')"
></table-column-header>
</th> </th>
</tr> </tr>
</thead> </thead>
@ -77,10 +85,11 @@
> >
<td> <td>
<a ng-if="$ctrl.itemCanExpand(item)"> <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> <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> </a>
<i ng-if="item.AcceptsApplication" class="fa fa-check green-icon" aria-hidden="true"></i> <pr-icon icon="'check'" ng-if="item.AcceptsApplication" mode="'success'" feather="true"></pr-icon>
<i ng-if="!item.AcceptsApplication" class="fa fa-times red-icon" aria-hidden="true"></i> <pr-icon icon="'x'" ng-if="!item.AcceptsApplication" mode="'error'" feather="true"></pr-icon>
</td> </td>
<td> <td>
{{ item.Name }} {{ item.Name }}
@ -179,6 +188,4 @@
</form> </form>
</div> </div>
</div> </div>
</rd-widget-body>
</rd-widget>
</div> </div>

16
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" style="margin-left: 20px"> <input type="checkbox" ng-model="ctrl.state.autoRefresh" ng-change="ctrl.updateAutoRefresh()" /><i></i> </label> <label class="switch col-sm-8"> <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',
}, },
}; };
} }