feat(applications): show status indication [EE-1623] (#5614)

* feat(applications): show status indication

* feat(k8s/applications): move colors to theme

* fix helm application indicator for main header

* refactor(k8s/apps): receive more general ok status

Co-authored-by: waysonwei <degui.wei@gmail.com>
pull/5790/head
Chaim Lev-Ari 2021-09-29 03:10:51 +03:00 committed by GitHub
parent 7b72130433
commit 50f63ae865
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 28 additions and 0 deletions

View File

@ -88,6 +88,7 @@ html {
--green-1: #164;
--green-2: #1ec863;
--green-3: #23ae89;
}
:root {

View File

@ -201,6 +201,7 @@
>
<td>{{ item.ApplicationType | kubernetesApplicationTypeText }}</td>
<td ng-if="item.ApplicationType !== $ctrl.KubernetesApplicationTypes.POD">
<status-indicator ok="(item.TotalPodsCount > 0 && item.TotalPodsCount === item.RunningPodsCount) || item.Status === 'Ready'"></status-indicator>
<span ng-if="item.DeploymentType === $ctrl.KubernetesApplicationDeploymentTypes.REPLICATED">Replicated</span>
<span ng-if="item.DeploymentType === $ctrl.KubernetesApplicationDeploymentTypes.GLOBAL">Global</span>
<span ng-if="item.RunningPodsCount >= 0 && item.TotalPodsCount >= 0">

View File

@ -0,0 +1,12 @@
import angular from 'angular';
import './status-indicator.css';
export const statusIndicator = {
templateUrl: './status-indicator.html',
bindings: {
ok: '<',
},
};
angular.module('portainer.app').component('statusIndicator', statusIndicator);

View File

@ -0,0 +1,13 @@
.status-indicator {
padding: 0 !important;
margin-right: 1ch;
border-radius: 50%;
background-color: var(--red-3);
height: 10px;
width: 10px;
display: inline-block;
}
.ok {
background-color: var(--green-3);
}

View File

@ -0,0 +1 @@
<i aria-hidden="true" ng-class="['status-indicator', { ok: $ctrl.ok }]"></i>