Add service catalog deprovision button (vmware-tanzu#60)

* add deprovision

* delete selfLink instead of params

* remove delete url

* readability

src/actions/catalog.ts

@@ -74,6 +74,12 @@ export function provision(
  };
 }
 
+export function deprovision(instance: IServiceInstance) {
+ return async (dispatch: Dispatch<IStoreState>) => {
+ return ServiceCatalog.deprovisionInstance(instance);
+ };
+}
+
 export function sync(broker: IServiceBroker) {
  return async (dispatch: Dispatch<IStoreState>) => {
  return ServiceCatalog.syncBroker(broker);

src/components/BrokerView/index.tsx

@@ -9,6 +9,7 @@ import {
  IServicePlan,
 } from "../../shared/ServiceCatalog";
 import { Card, CardContainer } from "../Card";
+import DeprovisionButton from "../DeprovisionButton";
 import SyncButton from "../SyncButton";
 
 export interface IBrokerViewProps {
@@ -19,6 +20,7 @@ export interface IBrokerViewProps {
  instances: IServiceInstance[];
  plans: IServicePlan[];
  sync: (broker: IServiceBroker) => Promise<any>;
+ deprovision: (instance: IServiceInstance) => Promise<any>;
 }
 
 export class BrokerView extends React.PureComponent<IBrokerViewProps> {
@@ -27,7 +29,7 @@ export class BrokerView extends React.PureComponent<IBrokerViewProps> {
  }
 
  public render() {
- const { bindings, broker, instances } = this.props;
+ const { bindings, broker, instances, deprovision } = this.props;
 
  return (
  <div className="broker">
@@ -76,6 +78,9 @@ export class BrokerView extends React.PureComponent<IBrokerViewProps> {
  <td key={message}>
  <code>{message}</code>
  </td>
+ <td>
+ <DeprovisionButton deprovision={deprovision} instance={instance} />
+ </td>
  </tr>
  );
  })}

src/components/DeprovisionButton/index.tsx

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { IServiceInstance } from "../../shared/ServiceCatalog";
+
+interface IDeprovisionButtonProps {
+ instance: IServiceInstance;
+ deprovision: (instance: IServiceInstance) => Promise<{}>;
+}
+
+interface IDeprovisionButtonState {
+ error: string | undefined;
+ instance: IServiceInstance | undefined;
+ isDeprovisioning: boolean;
+}
+
+class DeprovisionButton extends React.Component<IDeprovisionButtonProps, IDeprovisionButtonState> {
+ public state: IDeprovisionButtonState = {
+ error: undefined,
+ instance: this.props.instance,
+ isDeprovisioning: false,
+ };
+
+ public handleDeprovision = async () => {
+ const { deprovision, instance } = this.props;
+ this.setState({ isDeprovisioning: true });
+
+ try {
+ await deprovision(instance);
+ this.setState({ isDeprovisioning: false });
+ } catch (err) {
+ this.setState({ isDeprovisioning: false, error: err.toString() });
+ }
+ };
+
+ public render() {
+ return (
+ <div className="DeprovisionButton">
+ {this.state.isDeprovisioning && <div>Deprovisioning...</div>}
+ <button
+ className="button button-primary"
+ disabled={this.state.isDeprovisioning}
+ onClick={this.handleDeprovision}
+ >
+ Deprovision
+ </button>
+ </div>
+ );
+ }
+}
+
+export default DeprovisionButton;

src/containers/BrokerView.ts

@@ -3,7 +3,7 @@ import { Dispatch } from "redux";
 
 import actions from "../actions";
 import { BrokerView } from "../components/BrokerView";
-import { IServiceBroker } from "../shared/ServiceCatalog";
+import { IServiceBroker, IServiceInstance } from "../shared/ServiceCatalog";
 import { IStoreState } from "../shared/types";
 
 interface IRouteProps {
@@ -43,6 +43,9 @@ function mapStateToProps({ catalog }: IStoreState, { match: { params } }: IRoute
 
 function mapDispatchToProps(dispatch: Dispatch<IStoreState>) {
  return {
+ deprovision: async (instance: IServiceInstance) => {
+ await dispatch(actions.catalog.deprovision(instance));
+ },
  getCatalog: async () => {
  dispatch(actions.catalog.getCatalog());
  },

src/shared/ServiceCatalog.ts

@@ -109,6 +109,16 @@ export class ServiceCatalog {
  return data;
  }
 
+ public static async deprovisionInstance(instance: IServiceInstance) {
+ const { data } = await axios.delete("/api/kube" + instance.metadata.selfLink);
+
+ if (data.status === "Failure") {
+ throw new Error(data.message);
+ }
+
+ return data;
+ }
+
  public static async syncBroker(broker: IServiceBroker) {
  const { data } = await axios.patch<IStatus>(
  urls.api.clusterservicebrokers.sync(broker),