From 50f63ae865055a5f987267fee4d41b2193f4c06d Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chiptus@users.noreply.github.com>
Date: Wed, 29 Sep 2021 03:10:51 +0300
Subject: [PATCH] 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>
---
 app/assets/css/theme.css                            |  1 +
 .../applicationsDatatable.html                      |  1 +
 app/portainer/components/status-indicator/index.js  | 12 ++++++++++++
 .../status-indicator/status-indicator.css           | 13 +++++++++++++
 .../status-indicator/status-indicator.html          |  1 +
 5 files changed, 28 insertions(+)
 create mode 100644 app/portainer/components/status-indicator/index.js
 create mode 100644 app/portainer/components/status-indicator/status-indicator.css
 create mode 100644 app/portainer/components/status-indicator/status-indicator.html

diff --git a/app/assets/css/theme.css b/app/assets/css/theme.css
index 957cb451c..902fbd2c8 100644
--- a/app/assets/css/theme.css
+++ b/app/assets/css/theme.css
@@ -88,6 +88,7 @@ html {
 
   --green-1: #164;
   --green-2: #1ec863;
+  --green-3: #23ae89;
 }
 
 :root {
diff --git a/app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.html b/app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.html
index d13ae7e3c..20e35dd01 100644
--- a/app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.html
+++ b/app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.html
@@ -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">
diff --git a/app/portainer/components/status-indicator/index.js b/app/portainer/components/status-indicator/index.js
new file mode 100644
index 000000000..5b2cc7659
--- /dev/null
+++ b/app/portainer/components/status-indicator/index.js
@@ -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);
diff --git a/app/portainer/components/status-indicator/status-indicator.css b/app/portainer/components/status-indicator/status-indicator.css
new file mode 100644
index 000000000..2b0345266
--- /dev/null
+++ b/app/portainer/components/status-indicator/status-indicator.css
@@ -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);
+}
diff --git a/app/portainer/components/status-indicator/status-indicator.html b/app/portainer/components/status-indicator/status-indicator.html
new file mode 100644
index 000000000..e459de370
--- /dev/null
+++ b/app/portainer/components/status-indicator/status-indicator.html
@@ -0,0 +1 @@
+<i aria-hidden="true" ng-class="['status-indicator', { ok: $ctrl.ok }]"></i>