Service Instances view (#79)

* service instances view

* updating class list view

* moving provision button

* renaming instance list view container

src/components/ClassList/index.tsx

@@ -5,7 +5,6 @@ import { IServiceBroker } from "../../shared/ServiceCatalog";
 import { Card, CardContainer } from "../Card";
 
 export interface IClassListProps {
-  broker: IServiceBroker | undefined;
   classes: IClusterServiceClass[];
   getBrokers: () => Promise<IServiceBroker[]>;
   getClasses: () => Promise<IClusterServiceClass[]>;
@@ -22,7 +21,7 @@ export class ClassList extends React.Component<IClassListProps> {
     return (
       <div>
         <h2>Classes</h2>
-        <p>Types of services available from this broker</p>
+        <p>Types of services available from all brokers</p>
         <CardContainer>
           {classes
             .sort((a, b) => a.spec.externalName.localeCompare(b.spec.externalName))
@@ -45,7 +44,9 @@ export class ClassList extends React.Component<IClassListProps> {
                   icon={imageUrl}
                   body={description}
                   buttonText="View Plans"
-                  linkTo={`${location.pathname}/${svcClass.spec.externalName}`}
+                  linkTo={`/services/brokers/${svcClass.spec.clusterServiceBrokerName}/classes/${
+                    svcClass.spec.externalName
+                  }`}
                   notes={
                     <span style={{ fontSize: "small" }}>
                       <strong>Tags:</strong> {tags}

src/components/Header/Header.tsx

@@ -38,6 +38,10 @@ class Header extends React.Component<IHeaderProps, IHeaderState> {
       external: true,
       to: "/kubeless/",
     },
+    {
+      children: "Service Instances",
+      to: "/services/instances",
+    },
   ];
 
   constructor(props: any) {

src/components/InstanceListView/index.tsx

@@ -0,0 +1,85 @@
+import * as React from "react";
+
+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";
+
+export interface InstanceListViewProps {
+  brokers: IServiceBroker[];
+  classes: IClusterServiceClass[];
+  getCatalog: () => Promise<any>;
+  instances: IServiceInstance[];
+  plans: IServicePlan[];
+}
+
+export class InstanceListView extends React.PureComponent<InstanceListViewProps> {
+  public async componentDidMount() {
+    this.props.getCatalog();
+  }
+
+  public render() {
+    const { brokers, instances, classes } = this.props;
+
+    return (
+      <div className="InstanceList">
+        {brokers && (
+          <div>
+            <div className="row">
+              <div className="col-8">
+                <h3>Service Instances</h3>
+                <p>Service instances from your brokers:</p>
+              </div>
+              <div className="col-2 margin-normal">
+                <Link to={`/services/classes`}>
+                  <button className="button button-primary">Provision New Service</button>
+                </Link>
+              </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>
+    );
+  }
+}

src/containers/ClassListContainer.ts

@@ -15,19 +15,9 @@ interface IRouteProps {
 }
 
 function mapStateToProps({ catalog }: IStoreState, props: IRouteProps) {
-  const broker =
-    catalog.brokers.find(
-      potental => !!potental.metadata.name.match(new RegExp(props.match.params.brokerName, "i")),
-    ) || undefined;
-  const classes = broker
-    ? catalog.classes.filter(
-        serviceClass =>
-          !!serviceClass.spec.clusterServiceBrokerName.match(new RegExp(broker.metadata.name, "i")),
-      )
-    : [];
+  const classes = catalog.classes;
 
   return {
-    broker,
     classes,
   };
 }

src/containers/InstanceListViewContainer.ts

@@ -0,0 +1,37 @@
+import { connect } from "react-redux";
+import { Dispatch } from "redux";
+
+import actions from "../actions";
+import { InstanceListView } from "../components/InstanceListView";
+import { IStoreState } from "../shared/types";
+
+interface IRouteProps {
+  match: {
+    params: {
+      brokerName: string;
+    };
+  };
+}
+
+function mapStateToProps({ catalog }: IStoreState, { match: { params } }: IRouteProps) {
+  const brokers = catalog.brokers;
+  const plans = catalog.plans;
+  const classes = catalog.classes;
+  const instances = catalog.instances;
+  return {
+    brokers,
+    classes,
+    instances,
+    plans,
+  };
+}
+
+function mapDispatchToProps(dispatch: Dispatch<IStoreState>) {
+  return {
+    getCatalog: async () => {
+      dispatch(actions.catalog.getCatalog());
+    },
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(InstanceListView);

src/containers/Root.tsx

@@ -3,18 +3,19 @@ import * as React from "react";
 import { Provider } from "react-redux";
 import { Route, RouteComponentProps } from "react-router";
 import { ConnectedRouter } from "react-router-redux";
+import { ClassViewContainer } from "./ClassView";
 
 import Layout from "../components/Layout";
 import configureStore from "../store";
 import AppList from "./AppListContainer";
 import AppNew from "./AppNewContainer";
 import AppView from "./AppViewContainer";
-import BrokerView from "./BrokerView";
 import ChartList from "./ChartListContainer";
 import ChartView from "./ChartViewContainer";
 import ClassListContainer from "./ClassListContainer";
-import { ClassViewContainer } from "./ClassView";
+import InstanceListViewContainer from "./InstanceListViewContainer";
 import InstanceView from "./InstanceView";
+
 import RepoListContainer from "./RepoListContainer";
 import ServiceCatalogContainer from "./ServiceCatalogContainer";
 
@@ -34,10 +35,10 @@ class Root extends React.Component {
     "/charts/:repo/:id/versions/:version": ChartView,
     "/config/brokers": ServiceCatalogContainer,
     "/config/repos": RepoListContainer,
-    "/services/brokers/:brokerName/classes": ClassListContainer,
     "/services/brokers/:brokerName/classes/:className": ClassViewContainer,
     "/services/brokers/:brokerName/instances/:namespace/:instanceName": InstanceView,
-    "/services/brokers/:name": BrokerView,
+    "/services/classes": ClassListContainer,
+    "/services/instances": InstanceListViewContainer,
   };
 
   public render() {