Show proper message when there are no workloads or URLs (#1615)

vmware-tanzu · Mar 31, 2020 · 5ba52be · 5ba52be
1 parent ed6d88e
commit 5ba52be
Show file tree

Hide file tree

Showing 5 changed files with 178 additions and 212 deletions.
diff --git a/dashboard/src/components/AppView/AccessURLTable/AccessURLTable.test.tsx b/dashboard/src/components/AppView/AccessURLTable/AccessURLTable.test.tsx
@@ -5,7 +5,6 @@ import * as React from "react";
 import itBehavesLike from "../../../shared/specs";
 
 import ResourceRef from "shared/ResourceRef";
-import LoadingWrapper from "../../../components/LoadingWrapper";
 import { IIngressSpec, IResource, IServiceSpec, IServiceStatus } from "../../../shared/types";
 import AccessURLItem from "./AccessURLItem";
 import AccessURLTable from "./AccessURLTable";
@@ -51,20 +50,9 @@ context("when fetching ingresses or services", () => {
   });
 });
 
-it("renders a message if there are no services or ingresses", () => {
+it("doesn't render anything if the application has no URL", () => {
   const wrapper = shallow(<AccessURLTable {...defaultProps} />);
-  expect(
-    wrapper
-      .find(LoadingWrapper)
-      .shallow()
-      .find(AccessURLItem),
-  ).not.toExist();
-  expect(
-    wrapper
-      .find(LoadingWrapper)
-      .shallow()
-      .text(),
-  ).toContain("The current application does not expose a public URL");
+  expect(wrapper.find("table")).not.toExist();
 });
 
 context("when the app contains services", () => {
@@ -85,12 +73,7 @@ context("when the app contains services", () => {
     } as IResource;
     const services = [{ isFetching: false, item: service }];
     const wrapper = shallow(<AccessURLTable {...defaultProps} services={services} />);
-    expect(
-      wrapper
-        .find(LoadingWrapper)
-        .shallow()
-        .text(),
-    ).toContain("The current application does not expose a public URL");
+    expect(wrapper.text()).toContain("The current application does not expose a public URL");
   });
 
   it("should show the table if any service is a LoadBalancer", () => {

diff --git a/dashboard/src/components/AppView/AccessURLTable/AccessURLTable.tsx b/dashboard/src/components/AppView/AccessURLTable/AccessURLTable.tsx
@@ -28,15 +28,16 @@ class AccessURLTable extends React.Component<IAccessURLTableProps> {
 
   public render() {
     const { ingresses, services } = this.props;
+    if (isSomeResourceLoading(ingresses.concat(services))) {
+      return <LoadingWrapper type={LoaderType.Placeholder} />;
+    }
+    if (!this.hasItems(services, ingresses)) {
+      return null;
+    }
     return (
       <React.Fragment>
         <h6>Access URLs</h6>
-        <LoadingWrapper
-          loaded={!isSomeResourceLoading(ingresses.concat(services))}
-          type={LoaderType.Placeholder}
-        >
-          {this.accessTableSection()}
-        </LoadingWrapper>
+        {this.accessTableSection()}
       </React.Fragment>
     );
   }
@@ -121,6 +122,30 @@ class AccessURLTable extends React.Component<IAccessURLTableProps> {
     // they are expected to be watched by the ServiceTable.
     this.props.ingressRefs.forEach(r => this.props.getResource(r));
   }
+
+  private elemHasItems(i: IKubeItem<IResource | IK8sList<IResource, {}>>) {
+    if (i.error) {
+      return true;
+    }
+    if (i.item) {
+      const list = i.item as IK8sList<IResource, {}>;
+      if (list.items && list.items.length === 0) {
+        return false;
+      }
+      return true;
+    }
+    return false;
+  }
+
+  private hasItems(
+    svcs: Array<IKubeItem<IResource | IK8sList<IResource, {}>>>,
+    ingresses: Array<IKubeItem<IResource | IK8sList<IResource, {}>>>,
+  ) {
+    return (
+      (svcs.length && svcs.some(svc => this.elemHasItems(svc))) ||
+      (ingresses.length && ingresses.some(ingress => this.elemHasItems(ingress)))
+    );
+  }
 }
 
 export default AccessURLTable;