Add start button to restart stopped clusters. (#457)

Add a button that will start any cluster whose current state is "Stopped". Rather than adding a dedicated start/stop button, the new button replaces the "Connect" button for clusters in the "Stopped" state.

ui/src/components/ClusterCard.js

@@ -10,6 +10,7 @@ import { withStyles } from '@material-ui/core/styles';
 
 import ConnectButton from './ConnectButton'
 import DeleteDialog from './DeleteDialog'
+import StartButton from './StartButton'
 import StatusIcon from './StatusIcon'
 
 
@@ -28,6 +29,7 @@ const unknownStatus = "Unknown";
 const runningStatus = "Running";
 const deletingStatus = "Deleting";
 const deletedStatus = "Deleted";
+const stoppedStatus = "Stopped";
 const errorString404 = "404/Not Found";
 
 
@@ -79,7 +81,12 @@ class ClusterCard extends React.Component {
 
   setClusterStatusDeleting = () => {
     this.setState({ clusterStatus: "Deleting" });
-    this.checkForUpdatedState()
+    setTimeout(this.checkForUpdatedState, fastStatusCheckInterval)
+  }
+
+  setClusterStatusStarting = () => {
+    this.setState({ clusterStatus: "Starting" });
+    setTimeout(this.checkForUpdatedState, fastStatusCheckInterval)
   }
 
   /**
@@ -193,6 +200,25 @@ class ClusterCard extends React.Component {
     var classes = this.props.classes;
     var model = this.props.clusterModel;
     var machineCfg = model.machineConfig;
+    var startOrConnect = null;
+    if (this.state.clusterStatus === stoppedStatus) {
+      startOrConnect = (<StartButton
+            errorHandler={this.props.errorHandler}
+            googleAuthToken={this.props.googleAuthToken}
+            updateStatusToStarting={this.setClusterStatusStarting}
+            clusterModel={model}
+          />
+      );
+    } else {
+      startOrConnect = (<ConnectButton
+            oauthClientId={this.props.oauthClientId}
+            errorHandler={this.props.errorHandler}
+            googleAuthToken={this.props.googleAuthToken}
+            clusterStatus={this.state.clusterStatus}
+            clusterModel={model}
+          />
+      );
+    }
     return (
       <Grid item xs={12} sm={10}>
       <Card className={classes.card}>
@@ -230,13 +256,7 @@ class ClusterCard extends React.Component {
         </Typography>
       </CardContent>
       <CardActions>
-        <ConnectButton
-          oauthClientId={this.props.oauthClientId}
-          errorHandler={this.props.errorHandler}
-          googleAuthToken={this.props.googleAuthToken}
-          clusterStatus={this.state.clusterStatus}
-          clusterModel={model}
-        />
+        {startOrConnect}
         <DeleteDialog
           clusterStatus={this.state.clusterStatus}
           errorHandler={this.props.errorHandler}

ui/src/components/StartButton.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+
+import { createApiUrl } from '../net'
+
+
+/**
+ * @props errorHandler function callback displays a string as a dismissable error.
+ * @props googleAuthToken string access token provided by oauth login.
+ * @props updateStatusToStarting callback that update's the cluster card's state.
+ * @props clusterModel object contains a cluster model returned by Leonardo's API.
+ */
+class StartButton extends React.Component {
+
+  handleClick = (event) => {
+    var model = this.props.clusterModel;
+    // Fetch auth info which includes the Google Client ID.
+    var notebooksUrl = createApiUrl(
+      model.googleProject, model.clusterName);
+    fetch(
+       notebooksUrl + "/start",
+      {
+        method: "POST",
+        headers: {
+          "Authorization": "Bearer " + this.props.googleAuthToken
+        },
+        credentials: "include"
+      })
+    .then((response) => {
+      if (response.status == 409) {
+        throw new Error("Cluster cannot be started.")
+      }
+      if (response.status == 404) {
+        throw new Error("Cluster not found.")
+      }
+      if (response.status >= 400) {
+        console.log("Unexpected response, logging response object.")
+        console.log(response)
+        throw new Error("Bad response from server. Cluster may not start.");
+      }
+      return response;
+    })
+    .then((response) => this.props.updateStatusToStarting())
+    .catch((error) => {
+      this.props.errorHandler(error.toString());
+    });
+  }
+
+  render() {
+    return <Button size="medium" onClick={this.handleClick}>Start</Button>;
+  }
+}
+
+export default StartButton;