Merge pull request #183 from porter-dev/beta.3.integration-frontend

Beta.3.integration frontend

dashboard/src/components/TabRegion.tsx

@@ -70,6 +70,18 @@ export default class TabRegion extends Component<PropsType, StateType> {
   }
 }
 
+const Placeholder = styled.div`
+  width: 100%;
+  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #ffffff11;
+  border-radius: 5px;
+  color: #ffffff44;
+  font-size: 13px;
+`;
+
 const Div = styled.div`
   width: 100%;
   height: 100%;

dashboard/src/main/home/Home.tsx

@@ -34,6 +34,7 @@ type StateType = {
 
   // Track last project id for refreshing clusters on project change
   prevProjectId: number | null,
+  sidebarReady: boolean, // Fixes error where ~1/3 times reloading to provisioner fails
 };
 
 export default class Home extends Component<PropsType, StateType> {
@@ -44,6 +45,7 @@ export default class Home extends Component<PropsType, StateType> {
     prevProjectId: null as number | null,
     viewData: null as any,
     forceRefreshClusters: false,
+    sidebarReady: false,
   }
 
   // Possibly consolidate into context (w/ ProjectSection + NewProject)
@@ -73,15 +75,18 @@ export default class Home extends Component<PropsType, StateType> {
                   });
                 }
               });
-
+              
+              console.log('infras viewdata: ', viewData);
               if (viewData.length > 0) {
-                this.setState({ currentView: 'provisioner', viewData});
+                console.log('setting to provisioner...');
+                this.setState({ currentView: 'provisioner', viewData, sidebarReady: true, });
+              } else {
+                this.setState({ sidebarReady: true });
               }
-
             }
           });
         } else if (res.data.length === 0) {
-          this.setState({ currentView: 'new-project' });
+          this.setState({ currentView: 'new-project', sidebarReady: true, });
         }
       }
     });
@@ -100,6 +105,7 @@ export default class Home extends Component<PropsType, StateType> {
           prevProjectId: this.context.currentProject.id,
           currentView: 'dashboard'
         });
+        console.log('setting view to dashboard from Home');
       }
     }
   }
@@ -183,18 +189,18 @@ export default class Home extends Component<PropsType, StateType> {
       // Force sidebar closed on first provision
       if (this.state.currentView === 'provisioner' && this.state.forceSidebar) {
         this.setState({ forceSidebar: false });
+      } else if (this.state.sidebarReady) {
+        return (
+          <Sidebar
+            forceSidebar={this.state.forceSidebar}
+            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 })}
+          />
+        );
       }
-
-      return (
-        <Sidebar
-          forceSidebar={this.state.forceSidebar}
-          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 })}
-        />
-      );
     }
   }
 

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

@@ -198,7 +198,8 @@ export default class Provisioner extends Component<PropsType, StateType> {
     }
 
     if (maxStep !== 0 && currentStep === maxStep) {
-      console.log('Provisioning complete.')
+      console.log('Thinks provisioning complete.')
+      console.log(currentStep, maxStep);
       this.props.setCurrentView('dashboard');
     }
 

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

@@ -13,6 +13,7 @@ type PropsType = {
   releaseDrawer: () => void,
   setWelcome: (x: boolean) => void,
   setCurrentView: (x: string) => void,
+  currentView: string,
   isSelected: boolean,
   forceRefreshClusters: boolean,
   setRefreshClusters: (x: boolean) => void,
@@ -55,9 +56,10 @@ export default class ClusterSection extends Component<PropsType, StateType> {
           if (clusters.length > 0) {
             this.setState({ clusters });
             setCurrentCluster(clusters[0]);
-          } else {
+          } else if (this.props.currentView !== 'provisioner') {
             this.setState({ clusters: [] });
             setCurrentCluster(null);
+            console.log('set to dashboard from clustersection');
             this.props.setCurrentView('dashboard');
           }
         }

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

@@ -42,6 +42,7 @@ export default class ProjectSection extends Component<PropsType, StateType> {
         if (viewData.length > 0) {
           this.props.setCurrentView('provisioner', viewData);
         } else {
+          console.log('set to dashboard from projectsection');
           this.props.setCurrentView('dashboard');
         }
       }

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

@@ -132,6 +132,7 @@ export default class Sidebar extends Component<PropsType, StateType> {
             forceCloseDrawer={this.state.forceCloseDrawer} 
             releaseDrawer={() => this.setState({ forceCloseDrawer: false })}
             setWelcome={this.props.setWelcome}
+            currentView={this.props.currentView}
             setCurrentView={this.props.setCurrentView}
             isSelected={this.props.currentView === 'cluster-dashboard'}
             forceRefreshClusters={this.props.forceRefreshClusters}

dashboard/src/main/home/templates/expanded-template/LaunchTemplate.tsx

@@ -182,6 +182,20 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
     );
   }
 
+  renderTabRegion = () => {
+    if (this.state.tabOptions.length > 0) {
+      return (
+        <TabRegion
+          options={this.state.tabOptions}
+          currentTab={this.state.currentTab}
+          setCurrentTab={(x: string) => this.setState({ currentTab: x })}
+        >
+          {this.renderTabContents()}
+        </TabRegion>
+      );
+    }
+  }
+
   render() {
     let { name, icon } = this.props.currentTemplate;
     let { currentTemplate } = this.props;
@@ -240,13 +254,7 @@ export default class LaunchTemplate extends Component<PropsType, StateType> {
 
         <br />
         <Subtitle>Configure additional settings for this template (optional).</Subtitle>
-        <TabRegion
-          options={this.state.tabOptions}
-          currentTab={this.state.currentTab}
-          setCurrentTab={(x: string) => this.setState({ currentTab: x })}
-        >
-          {this.renderTabContents()}
-        </TabRegion>
+        {this.renderTabRegion()}
       </StyledLaunchTemplate>
     );
   }