cluster deletion added

dashboard/src/main/home/Home.tsx

@@ -30,6 +30,7 @@ type StateType = {
   showWelcome: boolean,
   currentView: string,
   viewData: any[],
+  forceRefreshClusters: boolean, // For updating ClusterSection from modal on deletion
 
   // Track last project id for refreshing clusters on project change
   prevProjectId: number | null,
@@ -39,9 +40,10 @@ export default class Home extends Component<PropsType, StateType> {
   state = {
     forceSidebar: true,
     showWelcome: false,
-    currentView: 'provisioner',
+    currentView: 'dashboard',
     prevProjectId: null as number | null,
-    viewData: [] as any
+    viewData: null as any,
+    forceRefreshClusters: false,
   }
 
   // Possibly consolidate into context (w/ ProjectSection + NewProject)
@@ -189,6 +191,8 @@ export default class Home extends Component<PropsType, StateType> {
           setWelcome={(x: boolean) => this.setState({ showWelcome: x })}
           setCurrentView={this.setCurrentView}
           currentView={this.state.currentView}
+          forceRefreshClusters={this.state.forceRefreshClusters}
+          setRefreshClusters={(x: boolean) => this.setState({ forceRefreshClusters: x })}
         />
       );
     }
@@ -214,6 +218,16 @@ export default class Home extends Component<PropsType, StateType> {
         >
           <UpdateProjectModal />
         </ReactModal>
+        <ReactModal
+          isOpen={currentModal === 'UpdateClusterModal'}
+          onRequestClose={() => setCurrentModal(null, null)}
+          style={ProjectModalStyles}
+          ariaHideApp={false}
+        >
+          <UpdateClusterModal 
+            setRefreshClusters={(x: boolean) => this.setState({ forceRefreshClusters: x })} 
+          />
+        </ReactModal>
         <ReactModal
           isOpen={currentModal === 'IntegrationsModal'}
           onRequestClose={() => setCurrentModal(null, null)}

dashboard/src/main/home/cluster-dashboard/ClusterDashboard.tsx

@@ -74,7 +74,14 @@ export default class ClusterDashboard extends Component<PropsType, StateType> {
         <TitleSection>
           {this.renderDashboardIcon()}
           <Title>{currentCluster.name}</Title>
-          <i className="material-icons">more_vert</i>
+          <i 
+            className="material-icons"
+            onClick={() => this.context.setCurrentModal('UpdateClusterModal', { 
+              setCurrentView: this.props.setCurrentView,
+            })}
+          >
+            more_vert
+          </i>
         </TitleSection>
 
         <InfoSection>
@@ -280,7 +287,7 @@ const TitleSection = styled.div`
 
   > i {
     margin-left: 10px;
-    cursor: not-allowed;
+    cursor: pointer;
     font-size 18px;
     color: #858FAAaa;
     padding: 5px;

dashboard/src/main/home/modals/UpdateClusterModal.tsx

@@ -11,6 +11,7 @@ import InputRow from '../../../components/values-form/InputRow';
 import ConfirmOverlay from '../../../components/ConfirmOverlay';
 
 type PropsType = {
+  setRefreshClusters: (x: boolean) => void,
 };
 
 type StateType = {
@@ -25,7 +26,7 @@ export default class UpdateClusterModal extends Component<PropsType, StateType>
     status: null as string | null,
     showDeleteOverlay: false,
   };
-  
+
   handleDelete = () => {
     let { currentProject, currentCluster } = this.context;
     this.setState({ status: 'loading' });
@@ -35,10 +36,11 @@ export default class UpdateClusterModal extends Component<PropsType, StateType>
     }, (err: any, res: any) => {
       if (err) {
         this.setState({ status: 'error' });
-        // console.log(err)
+        console.log(err)
       } else {
-        alert('nice');
+        this.props.setRefreshClusters(true);
         this.setState({ status: 'successful', showDeleteOverlay: false });
+        this.context.setCurrentModal(null, null);
       }
     });
   }
@@ -58,10 +60,9 @@ export default class UpdateClusterModal extends Component<PropsType, StateType>
         </Subtitle>
 
         <InputWrapper>
-          <ProjectIcon>
-            <ProjectImage src={gradient} />
-            <Letter>{this.state.clusterName ? this.state.clusterName[0].toUpperCase() : '-'}</Letter>
-          </ProjectIcon>
+          <DashboardIcon>
+            <i className="material-icons">device_hub</i>
+          </DashboardIcon>
           <InputRow
             disabled={true}
             type='string'
@@ -81,7 +82,7 @@ export default class UpdateClusterModal extends Component<PropsType, StateType>
 
         <ConfirmOverlay
           show={this.state.showDeleteOverlay}
-          message={`Are you sure you want to delete ${this.state.clusterName}?`}
+          message={`Are you sure you want to delete this cluster?`}
           onYes={this.handleDelete}
           onNo={() => this.setState({ showDeleteOverlay: false })}
         />
@@ -92,25 +93,7 @@ export default class UpdateClusterModal extends Component<PropsType, StateType>
 
 UpdateClusterModal.contextType = Context;
 
-const Letter = styled.div`
-  height: 100%;
-  width: 100%;
-  position: absolute;
-  background: #00000028;
-  top: 0;
-  left: 0;
-  display: flex;
-  color: white;
-  align-items: center;
-  justify-content: center;
-`;
-
-const ProjectImage = styled.img`
-  width: 100%;
-  height: 100%;
-`;
-
-const ProjectIcon = styled.div`
+const DashboardIcon = styled.div`
   width: 25px;
   min-width: 25px;
   height: 25px;
@@ -120,6 +103,16 @@ const ProjectIcon = styled.div`
   margin-right: 10px;
   font-weight: 400;
   margin-top: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #676C7C;
+  border: 2px solid #8e94aa;
+  color: white;
+
+  > i {
+    font-size: 13px;
+  }
 `;
 
 const InputWrapper = styled.div`

dashboard/src/main/home/new-project/NewProject.tsx

@@ -31,7 +31,7 @@ type StateType = {
 
 export default class NewProject extends Component<PropsType, StateType> {
   state = {
-    projectExists: true,
+    projectExists: false,
     projectName: '',
     selectedProvider: null as string | null,
     awsRegion: '' as string | null,

dashboard/src/main/home/new-project/Provisioner.tsx

@@ -27,7 +27,7 @@ type StateType = {
 
 export default class Provisioner extends Component<PropsType, StateType> {
   state = {
-    error: true,
+    error: false,
     logs: [] as string[],
     websockets : [] as any[],
     maxStep: {} as Record<string, any>,
@@ -60,34 +60,32 @@ export default class Provisioner extends Component<PropsType, StateType> {
       }
 
       ws.onmessage = (evt: MessageEvent) => {
-        let event = JSON.parse(evt.data)
-        console.log(event)
-        let validEvents = [] as any[]
-        let err = null
+        let event = JSON.parse(evt.data);
+        let validEvents = [] as any[];
+        let err = null;
         
         for (var i = 0; i < event.length; i++) {
-          let msg = event[i]
+          let msg = event[i];
           if (msg["Values"] && msg["Values"]["data"] && this.isJSON(msg["Values"]["data"])) { 
-            let d = JSON.parse(msg["Values"]["data"])
+            let d = JSON.parse(msg["Values"]["data"]);
   
             if (d["kind"] == "error") {
-              err = d["log"]
+              err = d["log"];
               break;
             }
   
             // add only valid events
             if (d["log"] != null && d["created_resources"] != null && d["total_resources"] != null) {
-              validEvents.push(d)
+              validEvents.push(d);
             }
           }
         }
   
         if (err) {
           let e = ansiparse(err).map((el: any) => {
-            return el.text
+            return el.text;
           })
-          console.log("error", e)
-          this.setState({ logs: e })
+          this.setState({ logs: e, error: true });
           return;
         }
   

dashboard/src/main/home/sidebar/ClusterSection.tsx

@@ -13,7 +13,9 @@ type PropsType = {
   releaseDrawer: () => void,
   setWelcome: (x: boolean) => void,
   setCurrentView: (x: string) => void,
-  isSelected: boolean
+  isSelected: boolean,
+  forceRefreshClusters: boolean,
+  setRefreshClusters: (x: boolean) => void,
 };
 
 type StateType = {
@@ -56,6 +58,7 @@ export default class ClusterSection extends Component<PropsType, StateType> {
           } else {
             this.setState({ clusters: [] });
             setCurrentCluster(null);
+            this.props.setCurrentView('dashboard');
           }
         }
       }
@@ -74,6 +77,9 @@ export default class ClusterSection extends Component<PropsType, StateType> {
       if (this.state.prevProjectId !== this.context.currentProject.id) {
         this.updateClusters();
         this.setState({ prevProjectId: this.context.currentProject.id });
+      } else if (this.props.forceRefreshClusters === true) {
+        this.updateClusters();
+        this.props.setRefreshClusters(false);
       }
 
       if (this.props.forceCloseDrawer && this.state.showDrawer) {

dashboard/src/main/home/sidebar/Sidebar.tsx

@@ -15,6 +15,8 @@ type PropsType = {
   setWelcome: (x: boolean) => void,
   setCurrentView: (x: string, viewData?: any) => void,
   currentView: string,
+  forceRefreshClusters: boolean,
+  setRefreshClusters: (x: boolean) => void,
 };
 
 type StateType = {
@@ -132,6 +134,8 @@ export default class Sidebar extends Component<PropsType, StateType> {
             setWelcome={this.props.setWelcome}
             setCurrentView={this.props.setCurrentView}
             isSelected={this.props.currentView === 'cluster-dashboard'}
+            forceRefreshClusters={this.props.forceRefreshClusters}
+            setRefreshClusters={this.props.setRefreshClusters}
           />
         </>
       );

dashboard/src/shared/api.tsx

@@ -281,7 +281,7 @@ const destroyCluster = baseApi<{
   project_id: number,
   infra_id: number,
 }>('POST', pathParams => {
-  return `/projects/${pathParams.project_id}/infra/${pathParams.infra_id}/eks/destroy`;
+  return `/api/projects/${pathParams.project_id}/infra/${pathParams.infra_id}/eks/destroy`;
 });
 
 const deleteCluster = baseApi<{
@@ -289,7 +289,7 @@ const deleteCluster = baseApi<{
   project_id: number,
   cluster_id: number,
 }>('DELETE', pathParams => {
-  return `/projects/${pathParams.project_id}/clusters/${pathParams.cluster_id}`;
+  return `/api/projects/${pathParams.project_id}/clusters/${pathParams.cluster_id}`;
 })
 
 // Bundle export to allow default api import (api.<method> is more readable)

go.sum

@@ -670,6 +670,8 @@ github.com/kr/logfmt v0.0.0-20140226030751-b84e30acd515/go.mod h1:+0opPa2QZZtGFB
 github.com/kr/pretty v0.1.0/go.mod h1:dAy3ld7l9f0ibDNOQOHHMYYIIbhfbHSm3C4ZsoJORNo=
 github.com/kr/pretty v0.2.0 h1:s5hAObm+yFO5uHYt5dYjxi2rXrsnmRpJx4OYvIWUaQs=
 github.com/kr/pretty v0.2.0/go.mod h1:ipq/a2n7PKx3OHsz4KJII5eveXtPO4qwEXGdVfWzfnI=
+github.com/kr/pty v1.1.1/go.mod h1:pFQYn66WHrOpPYNljwOMqo10TkYh1fy3cYio2l3bCsQ=
+github.com/kr/pty v1.1.5/go.mod h1:9r2w37qlBe7rQ6e1fg1S/9xpWHSnaqNdHD3WcMdbPDA=
 github.com/kr/pty v1.1.8 h1:AkaSdXYQOWeaO3neb8EM634ahkXXe3jYbVh/F9lq+GI=
 github.com/kr/pty v1.1.8/go.mod h1:O1sed60cT9XZ5uDucP5qwvh+TE3NnUj51EiZO/lmSfw=
 github.com/kr/text v0.1.0/go.mod h1:4Jbv+DJW3UT/LiOwJeYQe1efqtUx/iVham/4vfdArNI=