Bind & Unbind Buttons

.gitignore

@@ -16,6 +16,7 @@
 .env.test.local
 .env.production.local
 .vscode
+.idea
 
 npm-debug.log*
 yarn-debug.log*

src/actions/catalog.ts

@@ -1,14 +1,10 @@
 import { Dispatch } from "redux";
 import { createAction, getReturnOfExpression } from "typesafe-actions";
 
-import {
-  IServiceBinding,
-  IServiceBroker,
-  IServiceClass,
-  IServiceInstance,
-  IServicePlan,
-  ServiceCatalog,
-} from "../shared/ServiceCatalog";
+import { IClusterServiceClass } from "../shared/ClusterServiceClass";
+import { IServiceBinding, ServiceBinding } from "../shared/ServiceBinding";
+import { IServiceBroker, IServicePlan, ServiceCatalog } from "../shared/ServiceCatalog";
+import { IServiceInstance, ServiceInstance } from "../shared/ServiceInstance";
 import { IStoreState } from "../shared/types";
 
 export const checkCatalogInstall = createAction("CHECK_INSTALL");
@@ -35,10 +31,13 @@ export const receiveBindings = createAction("RECEIVE_BINDINGS", (bindings: IServ
   type: "RECEIVE_BINDINGS",
 }));
 export const requestClasses = createAction("REQUEST_PLANS");
-export const receiveClasses = createAction("RECEIVE_CLASSES", (classes: IServiceClass[]) => ({
-  classes,
-  type: "RECEIVE_CLASSES",
-}));
+export const receiveClasses = createAction(
+  "RECEIVE_CLASSES",
+  (classes: IClusterServiceClass[]) => ({
+    classes,
+    type: "RECEIVE_CLASSES",
+  }),
+);
 
 const actions = [
   checkCatalogInstall,
@@ -64,13 +63,7 @@ export function provision(
   parameters: {},
 ) {
   return async (dispatch: Dispatch<IStoreState>) => {
-    return ServiceCatalog.provisionInstance(
-      releaseName,
-      namespace,
-      className,
-      planName,
-      parameters,
-    );
+    return ServiceInstance.create(releaseName, namespace, className, planName, parameters);
   };
 }
 
@@ -91,7 +84,7 @@ export type ServiceCatalogAction = typeof actions[number];
 export function getBindings() {
   return async (dispatch: Dispatch<IStoreState>) => {
     dispatch(requestBindings());
-    const bindings = await ServiceCatalog.getServiceBindings();
+    const bindings = await ServiceBinding.list();
     dispatch(receiveBindings(bindings));
     return bindings;
   };
@@ -118,7 +111,7 @@ export function getClasses() {
 export function getInstances() {
   return async (dispatch: Dispatch<IStoreState>) => {
     dispatch(requestInstances());
-    const instances = await ServiceCatalog.getServiceInstances();
+    const instances = await ServiceInstance.list();
     dispatch(receiveInstances(instances));
     return instances;
   };

src/components/AppRepoList/AppRepoButton.tsx

@@ -28,11 +28,12 @@ export const AppRepoForm = (props: IAppRepoFormProps) => {
     <div className="app-repo-form">
       <h1>Add an App Repository</h1>
       <label>
-        Name:
+        <span>Name:</span>
         <input type="text" value={name} onChange={handleNameChange} />
       </label>
+      <br />
       <label>
-        URL:
+        <span>URL:</span>
         <input type="text" value={url} onChange={handleURLChange} />
       </label>
       <button className="button button-primary" onClick={handleInstallClick}>

src/components/BrokerView/AddBindingButton.tsx

@@ -0,0 +1,97 @@
+import * as React from "react";
+import * as Modal from "react-modal";
+
+interface IAddBindingButtonProps {
+  bindingName: string;
+  instanceRefName: string;
+  namespace: string;
+  addBinding: (bindingName: string, instanceName: string, namespace: string) => Promise<any>;
+}
+
+interface IAddBindingButtonState {
+  modalIsOpen: boolean;
+  // deployment options
+  bindingName: string;
+  instanceRefName: string;
+  namespace: string;
+  error?: string;
+}
+
+export class AddBindingButton extends React.Component<
+  IAddBindingButtonProps,
+  IAddBindingButtonState
+> {
+  public state = {
+    error: undefined,
+    modalIsOpen: false,
+    ...this.props,
+  };
+
+  public render() {
+    const { modalIsOpen, bindingName, instanceRefName, namespace } = this.state;
+    return (
+      <div className="AddBindingButton">
+        <button className="button button-primary button-small" onClick={this.openModal}>
+          Bind
+        </button>
+        <Modal isOpen={modalIsOpen} onRequestClose={this.closeModal}>
+          {this.state.error && (
+            <div className="container padding-v-bigger bg-action">{this.state.error}</div>
+          )}
+          <div className="bind-form">
+            <h1>Add Binding</h1>
+            <label htmlFor="binding-name">
+              <span>Name:</span>
+              <input
+                type="text"
+                id="binding-name"
+                value={bindingName}
+                onChange={this.handleNameChange}
+              />
+            </label>
+            <br />
+            <label htmlFor="instance-ref-name">
+              <span>Instance Name:</span>
+              <input
+                type="text"
+                id="instance-ref-name"
+                value={instanceRefName}
+                onChange={this.handleInstanceNameChange}
+              />
+            </label>
+            <br />
+            <label htmlFor="namespace">
+              <span>Namespace:</span>
+              <input
+                type="text"
+                id="namespace"
+                value={namespace}
+                onChange={this.handleNamespaceChange}
+              />
+            </label>
+            <button className="button button-primary" onClick={this.bind}>
+              Bind
+            </button>
+          </div>
+        </Modal>
+      </div>
+    );
+  }
+
+  private closeModal = () => this.setState({ modalIsOpen: false });
+  private openModal = () => this.setState({ modalIsOpen: true });
+  private handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) =>
+    this.setState({ bindingName: e.target.value });
+  private handleInstanceNameChange = (e: React.ChangeEvent<HTMLInputElement>) =>
+    this.setState({ instanceRefName: e.target.value });
+  private handleNamespaceChange = (e: React.ChangeEvent<HTMLInputElement>) =>
+    this.setState({ namespace: e.target.value });
+  private bind = async () => {
+    await this.props.addBinding(
+      this.state.bindingName,
+      this.state.instanceRefName,
+      this.state.namespace,
+    );
+    this.closeModal();
+  };
+}

src/components/BrokerView/RemoveBindingButton.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { IServiceBinding, ServiceBinding } from "../../shared/ServiceBinding";
+
+interface IRemoveBindingButtonProps {
+  binding: IServiceBinding;
+  onRemoveComplete?: () => Promise<any>;
+}
+
+export class RemoveBindingButton extends React.Component<IRemoveBindingButtonProps> {
+  public render() {
+    return (
+      <div className="RemoveBindingButton">
+        <button className="button" onClick={this.handleRemoveBindingClick}>
+          Remove
+        </button>
+      </div>
+    );
+  }
+
+  private handleRemoveBindingClick = async () => {
+    const { binding, onRemoveComplete } = this.props;
+    const { name, namespace } = binding.metadata;
+    await ServiceBinding.delete(name, namespace);
+    if (onRemoveComplete) {
+      await onRemoveComplete();
+    }
+  };
+}

src/components/BrokerView/index.tsx

@@ -1,21 +1,20 @@
 import * as React from "react";
 import { Link } from "react-router-dom";
 
-import {
-  IServiceBinding,
-  IServiceBroker,
-  IServiceClass,
-  IServiceInstance,
-  IServicePlan,
-} from "../../shared/ServiceCatalog";
+import { IClusterServiceClass } from "../../shared/ClusterServiceClass";
+import { IServiceBinding, ServiceBinding } from "../../shared/ServiceBinding";
+import { IServiceBroker, IServicePlan } from "../../shared/ServiceCatalog";
+import { IServiceInstance } from "../../shared/ServiceInstance";
 import { Card, CardContainer } from "../Card";
 import DeprovisionButton from "../DeprovisionButton";
 import SyncButton from "../SyncButton";
+import { AddBindingButton } from "./AddBindingButton";
+import { RemoveBindingButton } from "./RemoveBindingButton";
 
 export interface IBrokerViewProps {
   bindings: IServiceBinding[];
   broker: IServiceBroker | undefined;
-  classes: IServiceClass[];
+  classes: IClusterServiceClass[];
   getCatalog: () => Promise<any>;
   instances: IServiceInstance[];
   plans: IServicePlan[];
@@ -56,6 +55,7 @@ export class BrokerView extends React.PureComponent<IBrokerViewProps> {
                   <th>Instance</th>
                   <th>Status</th>
                   <th>Message</th>
+                  <th />
                 </tr>
               </thead>
               <tbody>
@@ -79,7 +79,15 @@ export class BrokerView extends React.PureComponent<IBrokerViewProps> {
                         <code>{message}</code>
                       </td>
                       <td>
-                        <DeprovisionButton deprovision={deprovision} instance={instance} />
+                        <div className="button-list" style={{ display: "flex" }}>
+                          <DeprovisionButton deprovision={deprovision} instance={instance} />
+                          <AddBindingButton
+                            bindingName={instance.metadata.name + "-binding"}
+                            instanceRefName={instance.metadata.name}
+                            namespace={instance.metadata.namespace}
+                            addBinding={this.addbinding}
+                          />
+                        </div>
                       </td>
                     </tr>
                   );
@@ -109,8 +117,21 @@ export class BrokerView extends React.PureComponent<IBrokerViewProps> {
                     ["Port", secretPort],
                     ["Username", secretUsername],
                   ];
+                  const condition = [...binding.status.conditions].shift();
+                  const currentStatus = condition ? (
+                    <div className="condition">
+                      <div>
+                        <strong>{condition.type}</strong>: <code>{condition.status}</code>
+                      </div>
+                      <code>{condition.message}</code>
+                    </div>
+                  ) : (
+                    undefined
+                  );
+
                   const body = (
                     <div style={{ display: "flex", flexWrap: "wrap", flexDirection: "column" }}>
+                      {currentStatus}
                       {statuses.map(statusPair => {
                         const [key, value] = statusPair;
                         return (
@@ -134,7 +155,12 @@ export class BrokerView extends React.PureComponent<IBrokerViewProps> {
                       key={binding.metadata.name}
                       header={binding.metadata.name}
                       body={body}
-                      button={<span />}
+                      button={
+                        <RemoveBindingButton
+                          binding={binding}
+                          onRemoveComplete={this.props.getCatalog}
+                        />
+                      }
                     />
                   );
                   return card;
@@ -145,4 +171,10 @@ export class BrokerView extends React.PureComponent<IBrokerViewProps> {
       </div>
     );
   }
+
+  private addbinding = async (bindingName: string, instanceName: string, namespace: string) => {
+    const binding = await ServiceBinding.create(bindingName, instanceName, namespace);
+    await this.props.getCatalog();
+    return binding;
+  };
 }

src/components/ClassList/index.tsx

@@ -1,13 +1,14 @@
 import * as React from "react";
 
-import { IServiceBroker, IServiceClass } from "../../shared/ServiceCatalog";
+import { IClusterServiceClass } from "../../shared/ClusterServiceClass";
+import { IServiceBroker } from "../../shared/ServiceCatalog";
 import { Card, CardContainer } from "../Card";
 
 export interface IClassListProps {
   broker: IServiceBroker | undefined;
-  classes: IServiceClass[];
+  classes: IClusterServiceClass[];
   getBrokers: () => Promise<IServiceBroker[]>;
-  getClasses: () => Promise<IServiceClass[]>;
+  getClasses: () => Promise<IClusterServiceClass[]>;
 }
 
 export class ClassList extends React.Component<IClassListProps> {

src/components/ClassView/index.tsx

@@ -1,12 +1,13 @@
 import * as React from "react";
 import { RouterAction } from "react-router-redux";
 
-import { IServiceClass, IServicePlan } from "../../shared/ServiceCatalog";
+import { IClusterServiceClass } from "../../shared/ClusterServiceClass";
+import { IServicePlan } from "../../shared/ServiceCatalog";
 import { Card, CardContainer } from "../Card";
 import ProvisionButton from "../ProvisionButton";
 
 interface IClassViewProps {
-  classes: IServiceClass[];
+  classes: IClusterServiceClass[];
   classname: string;
   getCatalog: () => Promise<any>;
   plans: IServicePlan[];
@@ -18,7 +19,7 @@ interface IClassViewProps {
     parameters: {},
   ) => Promise<any>;
   push: (location: string) => RouterAction;
-  svcClass: IServiceClass | undefined;
+  svcClass: IClusterServiceClass | undefined;
 }
 
 export class ClassView extends React.Component<IClassViewProps> {

src/components/DeprovisionButton/index.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { IServiceInstance } from "../../shared/ServiceCatalog";
+import { IServiceInstance } from "../../shared/ServiceInstance";
 
 interface IDeprovisionButtonProps {
   instance: IServiceInstance;
@@ -36,7 +36,7 @@ class DeprovisionButton extends React.Component<IDeprovisionButtonProps, IDeprov
       <div className="DeprovisionButton">
         {this.state.isDeprovisioning && <div>Deprovisioning...</div>}
         <button
-          className="button button-primary"
+          className="button button-primary button-small button-danger"
           disabled={this.state.isDeprovisioning}
           onClick={this.handleDeprovision}
         >