Consider statefulsets and daemonsets for application status (#1044)

vmware-tanzu · Jun 5, 2019 · 8d97800 · 8d97800
1 parent e7f8893
commit 8d97800
Show file tree

Hide file tree

Showing 20 changed files with 450 additions and 244 deletions.
diff --git a/dashboard/src/components/AppView/AppView.test.tsx b/dashboard/src/components/AppView/AppView.test.tsx
@@ -4,7 +4,8 @@ import { safeDump as yamlSafeDump, YAMLException } from "js-yaml";
 import * as React from "react";
 
 import AccessURLTable from "../../containers/AccessURLTableContainer";
-import DeploymentStatus from "../../containers/DeploymentStatusContainer";
+import ApplicationStatusContainer from "../../containers/ApplicationStatusContainer";
+import ApplicationStatus from "../../containers/ApplicationStatusContainer";
 import { hapi } from "../../shared/hapi/release";
 import ResourceRef from "../../shared/ResourceRef";
 import itBehavesLike from "../../shared/specs";
@@ -65,6 +66,16 @@ describe("AppViewComponent", () => {
       metadata: { name: "secret-one" },
       type: "Opaque",
     } as IResource,
+    daemonset: {
+      apiVersion: "apps/v1beta1",
+      kind: "DaemonSet",
+      metadata: { name: "daemonset-one" },
+    } as IResource,
+    statefulset: {
+      apiVersion: "apps/v1beta1",
+      kind: "StatefulSet",
+      metadata: { name: "statefulset-one" },
+    } as IResource,
   };
 
   context("when app info is null", () => {
@@ -172,7 +183,7 @@ describe("AppViewComponent", () => {
     it("renders all the elements of an application", () => {
       const wrapper = shallow(<AppViewComponent {...validProps} />);
       expect(wrapper.find(ChartInfo).exists()).toBe(true);
-      expect(wrapper.find(DeploymentStatus).exists()).toBe(true);
+      expect(wrapper.find(ApplicationStatus).exists()).toBe(true);
       expect(wrapper.find(AppControls).exists()).toBe(true);
       expect(wrapper.find(AppNotes).exists()).toBe(true);
       expect(wrapper.find(OtherResourcesTable).exists()).toBe(true);
@@ -331,4 +342,27 @@ describe("AppViewComponent", () => {
       otherResources: [obj],
     });
   });
+
+  it("forwards statefulsets and daemonsets", () => {
+    const otherResources = [resources.statefulset, resources.daemonset];
+    const manifest = generateYamlManifest(otherResources);
+    const wrapper = shallow(<AppViewComponent {...validProps} />);
+    validProps.app.manifest = manifest;
+    // setProps again so we trigger componentWillReceiveProps
+    wrapper.setProps(validProps);
+
+    const orTable = wrapper.find(OtherResourcesTable);
+    expect(orTable).toExist();
+    expect(orTable.prop("otherResources")).toEqual(otherResources);
+
+    const applicationStatus = wrapper.find(ApplicationStatusContainer);
+    expect(applicationStatus).toExist();
+
+    expect(applicationStatus.prop("statefulsetRefs")).toEqual([
+      new ResourceRef(resources.statefulset, appRelease.namespace),
+    ]);
+    expect(applicationStatus.prop("daemonsetRefs")).toEqual([
+      new ResourceRef(resources.daemonset, appRelease.namespace),
+    ]);
+  });
 });
diff --git a/dashboard/src/components/AppView/AppView.tsx b/dashboard/src/components/AppView/AppView.tsx
@@ -4,8 +4,7 @@ import * as _ from "lodash";
 import * as React from "react";
 
 import AccessURLTable from "../../containers/AccessURLTableContainer";
-import DeploymentStatus from "../../containers/DeploymentStatusContainer";
-import { Kube } from "../../shared/Kube";
+import ApplicationStatus from "../../containers/ApplicationStatusContainer";
 import ResourceRef from "../../shared/ResourceRef";
 import { IK8sList, IRBACRole, IRelease, IResource } from "../../shared/types";
 import { ErrorSelector } from "../ErrorAlert";
@@ -35,6 +34,8 @@ export interface IAppViewProps {
 
 interface IAppViewState {
   deployRefs: ResourceRef[];
+  statefulSetRefs: ResourceRef[];
+  daemonSetRefs: ResourceRef[];
   serviceRefs: ResourceRef[];
   ingressRefs: ResourceRef[];
   secretRefs: ResourceRef[];
@@ -46,6 +47,8 @@ interface IAppViewState {
 
 interface IPartialAppViewState {
   deployRefs: ResourceRef[];
+  statefulSetRefs: ResourceRef[];
+  daemonSetRefs: ResourceRef[];
   serviceRefs: ResourceRef[];
   ingressRefs: ResourceRef[];
   secretRefs: ResourceRef[];
@@ -72,6 +75,8 @@ class AppView extends React.Component<IAppViewProps, IAppViewState> {
     manifest: [],
     ingressRefs: [],
     deployRefs: [],
+    statefulSetRefs: [],
+    daemonSetRefs: [],
     otherResources: [],
     serviceRefs: [],
     secretRefs: [],
@@ -115,35 +120,6 @@ class AppView extends React.Component<IAppViewProps, IAppViewState> {
     this.setState(this.parseResources(manifest, newApp.namespace));
   }
 
-  public handleEvent(e: MessageEvent) {
-    const msg = JSON.parse(e.data);
-    const resource: IResource = msg.object;
-    let apiResource: string;
-    switch (resource.kind) {
-      case "Deployment":
-        apiResource = "deployments";
-        break;
-      case "Service":
-        apiResource = "services";
-        break;
-      case "Ingress":
-        apiResource = "ingresses";
-        break;
-      default:
-        // Unknown resource, ignore
-        return;
-    }
-    // Construct the key used for the store
-    const resourceKey = Kube.getResourceURL(
-      resource.apiVersion,
-      apiResource,
-      resource.metadata.namespace,
-      resource.metadata.name,
-    );
-    // TODO: this is temporary before we move WebSockets to the Redux store (#882)
-    this.props.receiveResource({ key: resourceKey, resource });
-  }
-
   public render() {
     if (this.props.error) {
       return (
@@ -162,7 +138,15 @@ class AppView extends React.Component<IAppViewProps, IAppViewState> {
 
   public appInfo() {
     const { app, push } = this.props;
-    const { serviceRefs, ingressRefs, deployRefs, secretRefs, otherResources } = this.state;
+    const {
+      serviceRefs,
+      ingressRefs,
+      deployRefs,
+      statefulSetRefs,
+      daemonSetRefs,
+      secretRefs,
+      otherResources,
+    } = this.state;
     return (
       <section className="AppView padding-b-big">
         <main>
@@ -183,7 +167,12 @@ class AppView extends React.Component<IAppViewProps, IAppViewState> {
               <div className="col-9">
                 <div className="row padding-t-bigger">
                   <div className="col-4">
-                    <DeploymentStatus deployRefs={deployRefs} info={app.info!} />
+                    <ApplicationStatus
+                      deployRefs={deployRefs}
+                      statefulsetRefs={statefulSetRefs}
+                      daemonsetRefs={daemonSetRefs}
+                      info={app.info!}
+                    />
                   </div>
                   <div className="col-8 text-r">
                     <AppControls app={app} deleteApp={this.deleteApp} push={push} />
@@ -210,6 +199,8 @@ class AppView extends React.Component<IAppViewProps, IAppViewState> {
     const result: IPartialAppViewState = {
       ingressRefs: [],
       deployRefs: [],
+      statefulSetRefs: [],
+      daemonSetRefs: [],
       otherResources: [],
       serviceRefs: [],
       secretRefs: [],
@@ -235,6 +226,16 @@ class AppView extends React.Component<IAppViewProps, IAppViewState> {
           case "Deployment":
             result.deployRefs.push(new ResourceRef(resource.item, releaseNamespace));
             break;
+          case "StatefulSet":
+            result.statefulSetRefs.push(new ResourceRef(resource.item, releaseNamespace));
+            // TODO: Create a statefulset table
+            result.otherResources.push(item);
+            break;
+          case "DaemonSet":
+            result.daemonSetRefs.push(new ResourceRef(resource.item, releaseNamespace));
+            // TODO: Create a daemonset table
+            result.otherResources.push(item);
+            break;
           case "Service":
             result.serviceRefs.push(new ResourceRef(resource.item, releaseNamespace));
             break;

diff --git a/...ts/DeploymentStatus/DeploymentStatus.scss → .../ApplicationStatus/ApplicationStatus.scss b/...ts/DeploymentStatus/DeploymentStatus.scss → .../ApplicationStatus/ApplicationStatus.scss
@@ -1,4 +1,4 @@
-.DeploymentStatus {
+.ApplicationStatus {
   display: inline-block;
   font-size: 1em;
   line-height: 2.5em;
@@ -7,20 +7,20 @@
   height: 2.5em;
 }
 
-.DeploymentStatus--success {
+.ApplicationStatus--success {
   color: #fff;
   background-color: #1598cb;
 }
 
-.DeploymentStatus--pending {
+.ApplicationStatus--pending {
   background-color: #fdba12;
 }
 
-.DeploymentStatus--deleted {
+.ApplicationStatus--deleted {
   background-color: #fda5a5;
 }
 
-.DeploymentStatus--pending > .icon {
+.ApplicationStatus--pending > .icon {
   animation: fadeinout 2s linear infinite;
 }