Additional info for application status (#1540)

dashboard/package.json

@@ -48,6 +48,7 @@
     "react-feather": "^1.0.8",
     "react-jsonschema-form": "^1.0.3",
     "react-markdown": "^4.2.2",
+    "react-minimal-pie-chart": "^6.0.1",
     "react-modal": "^3.1.11",
     "react-redux": "^5.0.6",
     "react-router": "^5.1.2",

dashboard/src/components/ApplicationStatus/ApplicationStatus.scss

@@ -7,6 +7,36 @@
   height: 2.5em;
 }
 
+.ApplicationStatusPieChart {
+  text-align: center;
+  max-width: 100px;
+  margin-bottom: -50px;
+  a {
+    color: unset;
+  }
+  a:hover {
+    text-decoration: none !important;
+    color: unset;
+  }
+  &__title {
+    margin-top: 0px;
+  }
+  &__label {
+    position: relative;
+    bottom: 80px;
+    &__number {
+      margin: 0;
+      font-size: 1.5em;
+    }
+    &__text {
+      margin: -5px 0 0 0;
+    }
+  }
+  tr {
+    line-height: 5px;
+  }
+}
+
 .ApplicationStatus--success {
   color: #fff;
   background-color: #1598cb;

dashboard/src/components/ApplicationStatus/ApplicationStatus.test.tsx

@@ -1,5 +1,6 @@
 import { shallow } from "enzyme";
 import * as React from "react";
+import * as ReactTooltip from "react-tooltip";
 
 import { IKubeItem, IResource } from "shared/types";
 import ApplicationStatus from "./ApplicationStatus";
@@ -12,6 +13,17 @@ const defaultProps = {
   daemonsets: [],
 };
 
+const consoleError = global.console.error;
+beforeEach(() => {
+  // Mute console.error since we are getting a lot of error for rendering the PieChart component
+  // more info here: https://github.com/toomuchdesign/react-minimal-pie-chart/issues/131
+  global.console.error = jest.fn();
+});
+afterEach(() => {
+  jest.resetAllMocks();
+  global.console.error = consoleError;
+});
+
 describe("componentDidMount", () => {
   it("calls watchWorkloads", () => {
     const mock = jest.fn();
@@ -77,20 +89,25 @@ describe("isFetching", () => {
     statefulsets: Array<IKubeItem<IResource>>;
     daemonsets: Array<IKubeItem<IResource>>;
     deployed: boolean;
+    totalPods: number;
+    readyPods: number;
   }> = [
     {
       title: "shows a deployed status if there are no resources",
       deployments: [],
       statefulsets: [],
       daemonsets: [],
       deployed: true,
+      totalPods: 0,
+      readyPods: 0,
     },
     {
       title: "shows a deploying status if there is a non deployed deployment",
       deployments: [
         {
           isFetching: false,
           item: {
+            metadata: { name: "foo" },
             status: {
               replicas: 1,
               availableReplicas: 0,
@@ -101,13 +118,16 @@ describe("isFetching", () => {
       statefulsets: [],
       daemonsets: [],
       deployed: false,
+      totalPods: 1,
+      readyPods: 0,
     },
     {
       title: "shows a deploying status if there is a non deployed statefulset",
       statefulsets: [
         {
           isFetching: false,
           item: {
+            metadata: { name: "foo" },
             status: {
               replicas: 1,
               readyReplicas: 0,
@@ -118,13 +138,16 @@ describe("isFetching", () => {
       deployments: [],
       daemonsets: [],
       deployed: false,
+      totalPods: 1,
+      readyPods: 0,
     },
     {
       title: "shows a deploying status if there is a non deployed daemonset",
       daemonsets: [
         {
           isFetching: false,
           item: {
+            metadata: { name: "foo" },
             status: {
               currentNumberScheduled: 1,
               numberReady: 0,
@@ -135,13 +158,16 @@ describe("isFetching", () => {
       deployments: [],
       statefulsets: [],
       deployed: false,
+      totalPods: 1,
+      readyPods: 0,
     },
     {
       title: "shows a deployed status if it has a daemonset, deployment and statefulset deployed",
       daemonsets: [
         {
           isFetching: false,
           item: {
+            metadata: { name: "foo" },
             status: {
               currentNumberScheduled: 1,
               numberReady: 1,
@@ -153,6 +179,7 @@ describe("isFetching", () => {
         {
           isFetching: false,
           item: {
+            metadata: { name: "foo" },
             status: {
               replicas: 1,
               availableReplicas: 1,
@@ -164,6 +191,7 @@ describe("isFetching", () => {
         {
           isFetching: false,
           item: {
+            metadata: { name: "foo" },
             status: {
               replicas: 1,
               readyReplicas: 1,
@@ -172,19 +200,83 @@ describe("isFetching", () => {
         },
       ],
       deployed: true,
+      totalPods: 3,
+      readyPods: 3,
+    },
+    {
+      title:
+        "shows a deploying status if it has a daemonset, deployment (deployed) and statefulset (not deployed)",
+      daemonsets: [
+        {
+          isFetching: false,
+          item: {
+            metadata: { name: "foo-ds" },
+            status: {
+              currentNumberScheduled: 1,
+              numberReady: 1,
+            },
+          } as IResource,
+        },
+      ],
+      deployments: [
+        {
+          isFetching: false,
+          item: {
+            metadata: { name: "foo-dp" },
+            status: {
+              replicas: 1,
+              availableReplicas: 1,
+            },
+          } as IResource,
+        },
+      ],
+      statefulsets: [
+        {
+          isFetching: false,
+          item: {
+            metadata: { name: "foo-ss" },
+            status: {
+              replicas: 1,
+              readyReplicas: 0,
+            },
+          } as IResource,
+        },
+      ],
+      deployed: true,
+      totalPods: 3,
+      readyPods: 2,
     },
   ];
   tests.forEach(t => {
     it(t.title, () => {
-      const wrapper = shallow(
-        <ApplicationStatus
-          {...defaultProps}
-          deployments={t.deployments}
-          statefulsets={t.statefulsets}
-          daemonsets={t.daemonsets}
-        />,
-      );
+      const wrapper = shallow(<ApplicationStatus {...defaultProps} />);
+      wrapper.setProps({
+        deployments: t.deployments,
+        statefulsets: t.statefulsets,
+        daemonsets: t.daemonsets,
+      });
       expect(wrapper.text()).toContain(t.deployed ? "Ready" : "Not Ready");
+      expect(wrapper.state()).toMatchObject({ totalPods: t.totalPods, readyPods: t.readyPods });
+      // Check tooltip text
+      const tooltipText = wrapper
+        .find(ReactTooltip)
+        .dive()
+        .text();
+      t.deployments.forEach(d =>
+        expect(tooltipText).toContain(
+          `${d.item?.status.availableReplicas}/${d.item?.status.replicas}${d.item?.metadata.name}`,
+        ),
+      );
+      t.statefulsets.forEach(d =>
+        expect(tooltipText).toContain(
+          `${d.item?.status.readyReplicas}/${d.item?.status.replicas}${d.item?.metadata.name}`,
+        ),
+      );
+      t.daemonsets.forEach(d =>
+        expect(tooltipText).toContain(
+          `${d.item?.status.numberReady}/${d.item?.status.currentNumberScheduled}${d.item?.metadata.name}`,
+        ),
+      );
     });
   });
 });