updated gcp docs

dashboard/src/components/image-selector/ImageSelector.tsx

@@ -62,8 +62,7 @@ export default class ImageSelector extends Component<PropsType, StateType> {
               if (err) {
                 errors.push(1);
               } else {
-                console.log(res.data);
-                res.data.sort((a: any, b: any) => (a.created_at > b.created_at) ? 1 : -1);
+                res.data.sort((a: any, b: any) => (a.name > b.name) ? 1 : -1);
                 // Loop over found image repositories
                 let newImg = res.data.map((img: any) => {
                   if (this.props.selectedImageUrl === img.uri) {

dashboard/src/main/home/Home.tsx

@@ -67,9 +67,10 @@ export default class Home extends Component<PropsType, StateType> {
           return;
         }
         
-        if (res.data.length > 0 && !(currentCluster || includesCompletedInfraSet(res.data))) {
+        if (res.data.length > 0 && (!currentCluster || !includesCompletedInfraSet(res.data))) {
           this.setState({ currentView: 'provisioner', sidebarReady: true, });
         } else {
+          // console.log('getting here', currentCluster)
           this.setState({ currentView: 'dashboard', sidebarReady: true });
         }
       });
@@ -256,7 +257,7 @@ export default class Home extends Component<PropsType, StateType> {
 
   renderContents = () => {
     let { currentView, handleDO } = this.state;
-    if (this.context.currentProject) {
+    if (this.context.currentProject && currentView !== 'new-project') {
       if (currentView === 'cluster-dashboard') {
         return this.renderDashboard();
       } else if (currentView === 'dashboard') {

dashboard/src/main/home/cluster-dashboard/chart/ChartList.tsx

@@ -71,7 +71,6 @@ export default class ChartList extends Component<PropsType, StateType> {
 
   setupWebsocket = (kind: string) => {
       let { currentCluster, currentProject } = this.context;
-      console.log(currentCluster)
       let protocol = process.env.NODE_ENV == 'production' ? 'wss' : 'ws';
       let ws = new WebSocket(`${protocol}://${process.env.API_SERVER}/api/projects/${currentProject.id}/k8s/${kind}/status?cluster_id=${currentCluster.id}`);
       ws.onopen = () => {

dashboard/src/main/home/cluster-dashboard/expanded-chart/graph/GraphDisplay.tsx

@@ -430,7 +430,6 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
           node.x = cursorX + scale * (node.x - cursorX);
           node.y = cursorY + scale * (node.y - cursorY);
         } else {
-          console.log('hi')
           node.x = midX + scale * (node.x - midX);
           node.y = midY + scale * (node.y - midY);
         }

dashboard/src/main/home/dashboard/Dashboard.tsx

@@ -97,7 +97,7 @@ export default class Dashboard extends Component<PropsType, StateType> {
             {!currentCluster && (
               <Banner>
                 <i className="material-icons">error_outline</i>
-                This project currently has no clusters connected.
+                This project currently has no clusters conncted.
               </Banner>
             )}
             <ProvisionerSettings 

dashboard/src/main/home/provisioner/AWSFormSection.tsx

@@ -143,15 +143,16 @@ export default class AWSFormSection extends Component<PropsType, StateType> {
             return;
           }
           setProjects(res.data);
-          setCurrentProject(proj);
-          callback && callback();
+          setCurrentProject(proj, () => {
+            callback && callback()
+          });
         });
       }
     });
   }
 
   provisionECR = (callback?: any) => {
-    console.log('Provisioning ECR')
+    console.log('Provisioning ECR');
     let { awsAccessId, awsSecretKey, awsRegion } = this.state;
     let { currentProject } = this.context;
     let { handleError } = this.props;

dashboard/src/main/home/provisioner/GCPFormSection.tsx

@@ -36,32 +36,35 @@ const provisionOptions = [
 ];
 
 const regionOptions = [
-  { value: 'us-east-1', label: 'US East (N. Virginia) us-east-1' },
-  { value: 'us-east-2', label: 'US East (Ohio) us-east-2' },
-  { value: 'us-west-1', label: 'US West (N. California) us-west-1' },
-  { value: 'us-west-2', label: 'US West (Oregon) us-west-2' },
-  { value: 'af-south-1', label: 'Africa (Cape Town) af-south-1' },
-  { value: 'ap-east-1', label: 'Asia Pacific (Hong Kong)ap-east-1' },
-  { value: 'ap-south-1', label: 'Asia Pacific (Mumbai) ap-south-1' },
-  { value: 'ap-northeast-2', label: 'Asia Pacific (Seoul) ap-northeast-2' },
-  { value: 'ap-southeast-1', label: 'Asia Pacific (Singapore) ap-southeast-1' },
-  { value: 'ap-southeast-2', label: 'Asia Pacific (Sydney) ap-southeast-2' },
-  { value: 'ap-northeast-1', label: 'Asia Pacific (Tokyo) ap-northeast-1' },
-  { value: 'ca-central-1', label: 'Canada (Central) ca-central-1' },
-  { value: 'eu-central-1', label: 'Europe (Frankfurt) eu-central-1' },
-  { value: 'eu-west-1', label: 'Europe (Ireland) eu-west-1' },
-  { value: 'eu-west-2', label: 'Europe (London) eu-west-2' },
-  { value: 'eu-south-1', label: 'Europe (Milan) eu-south-1' },
-  { value: 'eu-west-3', label: 'Europe (Paris) eu-west-3' },
-  { value: 'eu-north-1', label: 'Europe (Stockholm) eu-north-1' },
-  { value: 'me-south-1', label: 'Middle East (Bahrain) me-south-1' },
-  { value: 'sa-east-1', label: 'South America (São Paulo) sa-east-1' },
-];
+  { value: 'asia-east1', label: 'asia-east1' },
+  { value: 'asia-east2', label: 'asia-east2' },
+  { value: 'asia-northeast1', label: 'asia-northeast1' },
+  { value: 'asia-northeast2', label: 'asia-northeast2' },
+  { value: 'asia-northeast3', label: 'asia-northeast3' },
+  { value: 'asia-south1', label: 'asia-south1' },
+  { value: 'asia-southeast1', label: 'asia-southeast1' },
+  { value: 'asia-southeast2', label: 'asia-southeast2' },
+  { value: 'australia-southeast1', label: 'australia-southeast1' },
+  { value: 'europe-north1', label: 'europe-north1' },
+  { value: 'europe-west1', label: 'europe-west1' },
+  { value: 'europe-west2', label: 'europe-west2' },
+  { value: 'europe-west3', label: 'europe-west3' },
+  { value: 'europe-west4', label: 'europe-west4' },
+  { value: 'europe-west6', label: 'europe-west6' },
+  { value: 'northamerica-northeast1', label: 'northamerica-northeast1' },
+  { value: 'southamerica-east1', label: 'southamerica-east1' },
+  { value: 'us-central1', label: 'us-central1' },
+  { value: 'us-east1', label: 'us-east1' },
+  { value: 'us-east4', label: 'us-east4' },
+  { value: 'us-west1', label: 'us-west1' },
+  { value: 'us-west2', label: 'us-west2' },
+  { value: 'us-west3', label: 'us-west3' },
+  { value: 'us-west4', label: 'us-west4' },
+]
 
-// TODO: Consolidate across forms w/ HOC
 export default class GCPFormSection extends Component<PropsType, StateType> {
   state = {
-    gcpRegion: 'us-east-1',
+    gcpRegion: 'us-east1',
     gcpProjectId: '',
     gcpKeyData: '',
     selectedInfras: [...provisionOptions],
@@ -243,7 +246,7 @@ export default class GCPFormSection extends Component<PropsType, StateType> {
           <Heading isAtTop={true}>
             GCP Credentials
             <GuideButton 
-              href='https://docs.getporter.dev/docs/getting-started-with-porter-on-aws' 
+              href='https://docs.getporter.dev/docs/getting-started-on-gcp'
               target='_blank'
             >
               <i className="material-icons-outlined">help</i> 
@@ -263,7 +266,7 @@ export default class GCPFormSection extends Component<PropsType, StateType> {
             value={gcpProjectId}
             setValue={(x: string) => this.setState({ gcpProjectId: x })}
             label='🏷️ GCP Project ID'
-            placeholder='ex: AKIAIOSFODNN7EXAMPLE'
+            placeholder='ex: blindfold-ceiling-24601'
             width='100%'
             isRequired={true}
           />
@@ -271,7 +274,7 @@ export default class GCPFormSection extends Component<PropsType, StateType> {
             type='password'
             value={gcpKeyData}
             setValue={(x: string) => this.setState({ gcpKeyData: x })}
-            label='🔒 GCP Key Data'
+            label='🔒 GCP Key Data (JSON)'
             placeholder='○ ○ ○ ○ ○ ○ ○ ○ ○'
             width='100%'
             isRequired={true}

dashboard/src/main/home/provisioner/ProvisionerStatus.tsx

@@ -57,6 +57,7 @@ export default class ProvisionerStatus extends Component<PropsType, StateType> {
 
   componentDidMount() {
     let { currentProject } = this.context;
+    // console.log(currentProject)
     let protocol = process.env.NODE_ENV == 'production' ? 'wss' : 'ws'
 
     // Check if current project is provisioning
@@ -66,8 +67,9 @@ export default class ProvisionerStatus extends Component<PropsType, StateType> {
       if (err) {
         console.log(err);
       } 
+      
       let infras = filterOldInfras(res.data);
-      console.log('filtered infras: ', infras);
+      // console.log('filtered infras: ', infras);
       let error = false;
 
       let maxStep = {} as Record<string, number>
@@ -79,8 +81,6 @@ export default class ProvisionerStatus extends Component<PropsType, StateType> {
         }
       });
 
-      console.log(infras)
-
       // Filter historical infras list for most current instances of each
       let websockets = infras.map((infra: any) => {
         let ws = new WebSocket(`${protocol}://${process.env.API_SERVER}/api/projects/${currentProject.id}/provision/${infra.kind}/${infra.id}/logs`)
@@ -125,7 +125,6 @@ export default class ProvisionerStatus extends Component<PropsType, StateType> {
           let d = JSON.parse(msg["Values"]["data"]);
 
           if (d["kind"] == "error") {
-            console.log(d)
             err = d["log"];
             break;
           }
@@ -210,8 +209,17 @@ export default class ProvisionerStatus extends Component<PropsType, StateType> {
         } else if (res.data) {
           let clusters = res.data;
           if (clusters.length > 0) {
+            // console.log('response :', res.data);
             this.props.setCurrentView('dashboard');
+            alert('setting to dashboard');
+            // console.log('provision end project: ', this.context.currentProject);
+            // console.log('provision end cluster: ', this.context.currentCluster);
             clearInterval(myInterval);
+          } else {
+            // console.log('looped!')
+            // console.log('response :', res.data);
+            // console.log('provision end project: ', this.context.currentProject);
+            // console.log('provision end cluster: ', this.context.currentCluster);
           }
         }
       });

dashboard/src/shared/Context.tsx

@@ -36,12 +36,16 @@ class ContextProvider extends Component {
       this.setState({ currentError });
     },
     currentCluster: null as ClusterType | null,
-    setCurrentCluster: (currentCluster: ClusterType) => {
-      this.setState({ currentCluster });
+    setCurrentCluster: (currentCluster: ClusterType, callback?: any) => {
+      this.setState({ currentCluster }, () => {
+        callback && callback();
+      });
     },
     currentProject: null as ProjectType | null,
-    setCurrentProject: (currentProject: ProjectType) => {
-      this.setState({ currentProject });
+    setCurrentProject: (currentProject: ProjectType, callback?: any) => {
+      this.setState({ currentProject }, () => {
+        callback && callback();
+      });
     },
     projects: [] as ProjectType[],
     setProjects: (projects: ProjectType[]) => {

dashboard/src/shared/api.tsx

@@ -328,7 +328,7 @@ const createGCR = baseApi<{
 }, {
   project_id: number,
 }>('POST', pathParams => {
-  return `/api/projects/${pathParams.project_id}/provision/test`;
+  return `/api/projects/${pathParams.project_id}/provision/gcr`;
 });
 
 const createGKE = baseApi<{
@@ -337,7 +337,7 @@ const createGKE = baseApi<{
 }, {
   project_id: number,
 }>('POST', pathParams => {
-  return `/api/projects/${pathParams.project_id}/provision/test`;
+  return `/api/projects/${pathParams.project_id}/provision/gke`;
 });
 
 const createInvite = baseApi<{

dashboard/src/shared/common.tsx

@@ -80,13 +80,13 @@ export const getIgnoreCase = (object: any, key: string) => {
   ];
 }
 
-const infraSets = [
-  ['ecr', 'eks'],
-  ['gcr', 'gke'],
-  ['docr', 'doks']
-];
-
 export const includesCompletedInfraSet = (infras: InfraType[]): boolean => {
+  // TODO: declare globally while avoidiing changes to the array on helper call
+  let infraSets = [
+    ['ecr', 'eks'],
+    ['gcr', 'gke'],
+    ['docr', 'doks']
+  ];
   if (infras.length === 0) {
     return false;
   }
@@ -114,6 +114,11 @@ export const includesCompletedInfraSet = (infras: InfraType[]): boolean => {
 }
 
 export const filterOldInfras = (infras: InfraType[]): InfraType[] => {
+  let infraSets = [
+    ['ecr', 'eks'],
+    ['gcr', 'gke'],
+    ['docr', 'doks']
+  ];
   let newestInstances = {} as any;
   let newestId = -1;
   let whitelistedInfras = [] as string[];
@@ -141,6 +146,5 @@ export const filterOldInfras = (infras: InfraType[]): InfraType[] => {
   let result = newestInfras.filter((x: InfraType) => {
     return whitelistedInfras.includes(x.kind)
   });
-  console.log('filtered infras (helper internal): ', result);
   return result;
 }