Checking for service catalog and service brokers installation and dep…

…loyed service instances (#86) * checks for service catalog, service brokers and service instances * review changes * moving checkCatalogInstalled into an action
vmware-tanzu · Feb 19, 2018 · 9be3ea2 · 9be3ea2
1 parent eb719c8
commit 9be3ea2
Show file tree

Hide file tree

Showing 8 changed files with 132 additions and 76 deletions.
diff --git a/src/actions/catalog.ts b/src/actions/catalog.ts
@@ -135,3 +135,11 @@ export function getCatalog() {
     dispatch(getPlans());
   };
 }
+
+export function checkCatalogInstalled() {
+  return async (dispatch: Dispatch<IStoreState>) => {
+    const isInstalled = await ServiceCatalog.isCatalogInstalled();
+    isInstalled ? dispatch(installed()) : dispatch(notInstalled());
+    return isInstalled;
+  };
+}
diff --git a/src/components/Config/ServiceBrokerList/index.tsx b/src/components/Config/ServiceBrokerList/index.tsx
@@ -14,22 +14,29 @@ export const ServiceBrokerList = (props: IServiceBrokerListProps) => {
   return (
     <div className="service-broker-list">
       <h3>Brokers</h3>
-      <CardContainer>
-        {brokers.map(broker => {
-          const card = (
-            <div>
-              <Card
-                key={broker.metadata.uid}
-                header={broker.metadata.name}
-                body={broker.spec.url}
-                notes={`Last updated ${broker.status.lastCatalogRetrievalTime}`}
-                button={<SyncButton sync={sync} broker={broker} />}
-              />
-            </div>
-          );
-          return card;
-        })}
-      </CardContainer>
+      {brokers.length > 0 ? (
+        <CardContainer>
+          {brokers.map(broker => {
+            const card = (
+              <div>
+                <Card
+                  key={broker.metadata.uid}
+                  header={broker.metadata.name}
+                  body={broker.spec.url}
+                  notes={`Last updated ${broker.status.lastCatalogRetrievalTime}`}
+                  button={<SyncButton sync={sync} broker={broker} />}
+                />
+              </div>
+            );
+            return card;
+          })}
+        </CardContainer>
+      ) : (
+        <div>
+          No service brokers are installed in your cluster. Please ask an administrator to install
+          it.
+        </div>
+      )}
     </div>
   );
 };
diff --git a/src/components/Config/ServiceCatalog/index.tsx b/src/components/Config/ServiceCatalog/index.tsx
@@ -5,7 +5,7 @@ import { IServiceCatalogState } from "../../../reducers/catalog";
 import { ServiceBrokerList } from "../ServiceBrokerList";
 
 export interface IServiceCatalogDispatch {
-  checkCatalogInstalled: () => Promise<boolean>;
+  checkCatalogInstalled: () => Promise<any>;
   getCatalog: () => Promise<any>;
   sync: () => Promise<any>;
 }

diff --git a/src/components/InstanceListView/InstanceCardList.tsx b/src/components/InstanceListView/InstanceCardList.tsx
@@ -0,0 +1,55 @@
+import * as React from "react";
+
+import { IClusterServiceClass } from "../../shared/ClusterServiceClass";
+import { IServiceInstance } from "../../shared/ServiceInstance";
+import { Card, CardContainer } from "../Card";
+
+export interface InstanceCardListProps {
+  classes: IClusterServiceClass[];
+  instances: IServiceInstance[];
+}
+
+export const InstanceCardList = (props: InstanceCardListProps) => {
+  const { instances, classes } = props;
+  return (
+    <div className="InstanceCardList">
+      <section>
+        <CardContainer>
+          {instances.length > 0 &&
+            instances.map(instance => {
+              const conditions = [...instance.status.conditions];
+              const status = conditions.shift(); // first in list is most recent
+              const message = status ? status.message : "";
+              const svcClass = classes.find(
+                potential => potential.metadata.name === instance.spec.clusterServiceClassRef.name,
+              );
+              const broker = svcClass && svcClass.spec.clusterServiceBrokerName;
+              const icon =
+                svcClass &&
+                svcClass.spec.externalMetadata &&
+                svcClass.spec.externalMetadata.imageUrl;
+
+              const card = (
+                <Card
+                  key={instance.metadata.uid}
+                  header={
+                    <span>
+                      {instance.metadata.namespace}/{instance.metadata.name}
+                    </span>
+                  }
+                  icon={icon}
+                  body={message}
+                  buttonText="Details"
+                  linkTo={`/services/brokers/${broker}/instances/${instance.metadata.namespace}/${
+                    instance.metadata.name
+                  }/`}
+                  notes={<span>{instance.spec.clusterServicePlanExternalName}</span>}
+                />
+              );
+              return card;
+            })}
+        </CardContainer>
+      </section>
+    </div>
+  );
+};
diff --git a/src/components/InstanceListView/index.tsx b/src/components/InstanceListView/index.tsx
@@ -4,79 +4,64 @@ import { Link } from "react-router-dom";
 import { IClusterServiceClass } from "../../shared/ClusterServiceClass";
 import { IServiceBroker, IServicePlan } from "../../shared/ServiceCatalog";
 import { IServiceInstance } from "../../shared/ServiceInstance";
-import { Card, CardContainer } from "../Card";
+import { InstanceCardList } from "./InstanceCardList";
 
 export interface InstanceListViewProps {
   brokers: IServiceBroker[];
   classes: IClusterServiceClass[];
   getCatalog: () => Promise<any>;
+  checkCatalogInstalled: () => Promise<any>;
   instances: IServiceInstance[];
   plans: IServicePlan[];
+  isInstalled: boolean;
 }
 
 export class InstanceListView extends React.PureComponent<InstanceListViewProps> {
   public async componentDidMount() {
+    this.props.checkCatalogInstalled();
     this.props.getCatalog();
   }
 
   public render() {
-    const { brokers, instances, classes } = this.props;
+    const { isInstalled, brokers, instances, classes } = this.props;
 
     return (
       <div className="InstanceList">
-        {brokers && (
+        <h3>Service Instances</h3>
+
+        {isInstalled ? (
           <div>
-            <div className="row">
-              <div className="col-8">
-                <h3>Service Instances</h3>
-                <p>Service instances from your brokers:</p>
+            {brokers.length > 0 ? (
+              <div>
+                <div className="row">
+                  <div className="col-8">
+                    <p>Service instances from your brokers:</p>
+                  </div>
+                  <div className="col-4 text-r">
+                    <Link to={`/services/classes`}>
+                      <button className="button button-accent">Provision New Service</button>
+                    </Link>
+                  </div>
+                </div>
+                {instances.length > 0 ? (
+                  <InstanceCardList instances={instances} classes={classes} />
+                ) : (
+                  <div>No service instances are found.</div>
+                )}
               </div>
-              <div className="col-2 margin-normal">
-                <Link to={`/services/classes`}>
-                  <button className="button button-primary">Provision New Service</button>
-                </Link>
+            ) : (
+              <div>
+                No service brokers are installed in your cluster. Please ask an administrator to
+                install it.
               </div>
-            </div>
-            <table>
-              <tbody>
-                <CardContainer>
-                  {instances.length > 0 &&
-                    instances.map(instance => {
-                      const conditions = [...instance.status.conditions];
-                      const status = conditions.shift(); // first in list is most recent
-                      const message = status ? status.message : "";
-                      const svcClass = classes.find(
-                        potential =>
-                          potential.metadata.name === instance.spec.clusterServiceClassRef.name,
-                      );
-                      const broker = svcClass && svcClass.spec.clusterServiceBrokerName;
-                      const icon =
-                        svcClass &&
-                        svcClass.spec.externalMetadata &&
-                        svcClass.spec.externalMetadata.imageUrl;
-
-                      const card = (
-                        <Card
-                          key={instance.metadata.uid}
-                          header={
-                            <span>
-                              {instance.metadata.namespace}/{instance.metadata.name}
-                            </span>
-                          }
-                          icon={icon}
-                          body={message}
-                          buttonText="Details"
-                          linkTo={`/services/brokers/${broker}/instances/${
-                            instance.metadata.namespace
-                          }/${instance.metadata.name}/`}
-                          notes={<span>{instance.spec.clusterServicePlanExternalName}</span>}
-                        />
-                      );
-                      return card;
-                    })}
-                </CardContainer>
-              </tbody>
-            </table>
+            )}
+          </div>
+        ) : (
+          <div>
+            <div>No Service Catalog is installed.</div>
+            <Link className="button button-primary" to={`/charts/svc-cat/catalog`}>
+              Install Catalog
+            </Link>
           </div>
         )}
       </div>

diff --git a/src/components/ProvisionButton/index.tsx b/src/components/ProvisionButton/index.tsx
@@ -186,7 +186,7 @@ class ProvisionButton extends React.Component<IProvisionButtonProps, IProvisionB
           selectedPlan.spec.externalName,
           parametersObject,
         );
-        push(`/services`);
+        push(`/services/instances`);
       }
     } catch (err) {
       this.setState({ isProvisioning: false, error: err.toString() });

diff --git a/src/containers/InstanceListViewContainer.ts b/src/containers/InstanceListViewContainer.ts
@@ -18,16 +18,21 @@ function mapStateToProps({ catalog }: IStoreState, { match: { params } }: IRoute
   const plans = catalog.plans;
   const classes = catalog.classes;
   const instances = catalog.instances;
+  const isInstalled = catalog.isInstalled;
   return {
     brokers,
     classes,
     instances,
+    isInstalled,
     plans,
   };
 }
 
 function mapDispatchToProps(dispatch: Dispatch<IStoreState>) {
   return {
+    checkCatalogInstalled: async () => {
+      dispatch(actions.catalog.checkCatalogInstalled());
+    },
     getCatalog: async () => {
       dispatch(actions.catalog.getCatalog());
     },

diff --git a/src/containers/ServiceCatalogContainer.ts b/src/containers/ServiceCatalogContainer.ts
@@ -3,7 +3,7 @@ import { Dispatch } from "redux";
 
 import actions from "../actions";
 import { ServiceCatalogView } from "../components/Config/ServiceCatalog";
-import { IServiceBroker, ServiceCatalog } from "../shared/ServiceCatalog";
+import { IServiceBroker } from "../shared/ServiceCatalog";
 import { IStoreState } from "../shared/types";
 
 function mapStateToProps({ catalog }: IStoreState) {
@@ -15,11 +15,7 @@ function mapStateToProps({ catalog }: IStoreState) {
 function mapDispatchToProps(dispatch: Dispatch<IStoreState>) {
   return {
     checkCatalogInstalled: async () => {
-      const isInstalled = await ServiceCatalog.isCatalogInstalled();
-      isInstalled
-        ? dispatch(actions.catalog.installed())
-        : dispatch(actions.catalog.notInstalled());
-      return isInstalled;
+      dispatch(actions.catalog.checkCatalogInstalled());
     },
     getCatalog: () => dispatch(actions.catalog.getCatalog()),
     sync: (broker: IServiceBroker) => dispatch(actions.catalog.sync(broker)),