Explorar el Código

basic r/w namespace routing and fixed project routing -> move follow up actions to callback

jusrhee hace 5 años
padre
commit
a990225a62

+ 11 - 8
dashboard/src/main/home/Home.tsx

@@ -137,8 +137,9 @@ class Home extends Component<PropsType, StateType> {
                   foundProject = project;
                 }
               });
-              setCurrentProject(foundProject || res.data[0]);
-              this.initializeView();
+              setCurrentProject(foundProject || res.data[0], () => 
+                this.initializeView()
+              );
             }
           }
         }
@@ -267,6 +268,7 @@ class Home extends Component<PropsType, StateType> {
   // 2. Make sure switching projects shows appropriate initial view (dashboard || provisioner)
   // 3. Make sure initializing from URL (DO oauth) displays the appropriate initial view
   componentDidUpdate(prevProps: PropsType) {
+    console.log(this.props.location)
     if (
       prevProps.currentProject !== this.props.currentProject ||
       (!prevProps.currentCluster && this.props.currentCluster)
@@ -283,15 +285,15 @@ class Home extends Component<PropsType, StateType> {
   // TODO: move into ClusterDashboard
   renderDashboard = () => {
     let { currentCluster } = this.context;
-    if (!currentCluster || !currentCluster.name) {
+    if (currentCluster?.id === -1) {
+      return <Loading />;
+    } else if (!currentCluster || !currentCluster.name) {
       return (
         <DashboardWrapper>
           <PageNotFound />
         </DashboardWrapper>
       );
-    } else if (!currentCluster) {
-      return <Loading />;
-    }
+    } 
     return (
       <DashboardWrapper>
         <ClusterDashboard
@@ -364,8 +366,9 @@ class Home extends Component<PropsType, StateType> {
           if (res.data.length > 0) {
             setCurrentProject(res.data[0]);
           } else {
-            setCurrentProject(null);
-            pushFiltered(this.props, "/new-project", ["project_id"]);
+            setCurrentProject(null, () => 
+              pushFiltered(this.props, "/new-project", ["project_id"])
+            );
           }
           this.context.setCurrentModal(null, null);
         }

+ 29 - 5
dashboard/src/main/home/cluster-dashboard/ClusterDashboard.tsx

@@ -4,7 +4,7 @@ import monojob from "assets/monojob.png";
 import monoweb from "assets/monoweb.png";
 
 import { Context } from "shared/Context";
-import { ChartType, ClusterType, ProjectType } from "shared/types";
+import { ChartType, ClusterType } from "shared/types";
 import { PorterUrl, pushFiltered, pushQueryParams } from "shared/routing";
 
 import ChartList from "./chart/ChartList";
@@ -43,7 +43,23 @@ class ClusterDashboard extends Component<PropsType, StateType> {
 
   componentDidMount() {
     let { currentCluster, currentProject } = this.context;
-    pushQueryParams(this.props, { cluster: currentCluster.name });
+    // Set namespace from URL if specified
+    let queryString = window.location.search;
+    let urlParams = new URLSearchParams(queryString);
+    let defaultNamespace = urlParams.get("namespace");
+    if (defaultNamespace) {
+      if (defaultNamespace === "ALL") {
+        defaultNamespace = "";
+      }
+      this.setState({ namespace: defaultNamespace });
+    } else {
+      defaultNamespace = this.state.namespace;
+    }
+
+    pushQueryParams(this.props, { 
+      cluster: currentCluster.name,
+      namespace: defaultNamespace || "ALL",
+    });
     api
       .getPrometheusIsInstalled(
         "<token>",
@@ -71,7 +87,9 @@ class ClusterDashboard extends Component<PropsType, StateType> {
           ? localStorage.getItem("SortType")
           : "Newest",
         currentChart: null,
-      });
+      }, () =>
+        pushQueryParams(this.props, { namespace: this.state.namespace || "ALL" })
+      );
     }
 
     if (prevProps.currentView !== this.props.currentView) {
@@ -79,7 +97,9 @@ class ClusterDashboard extends Component<PropsType, StateType> {
         namespace: "default",
         sortType: "Newest",
         currentChart: null,
-      });
+      }, () =>
+        pushQueryParams(this.props, { namespace: this.state.namespace || "ALL" })
+      );
     }
   }
 
@@ -115,7 +135,11 @@ class ClusterDashboard extends Component<PropsType, StateType> {
               sortType={this.state.sortType}
             />
             <NamespaceSelector
-              setNamespace={(namespace) => this.setState({ namespace })}
+              setNamespace={(namespace) => 
+                this.setState({ namespace }, () =>
+                  pushQueryParams(this.props, { namespace: this.state.namespace || "ALL" })
+                )
+              }
               namespace={this.state.namespace}
             />
           </SortFilterWrapper>

+ 3 - 2
dashboard/src/main/home/provisioner/DOFormSection.tsx

@@ -152,8 +152,9 @@ export default class DOFormSection extends Component<PropsType, StateType> {
           }
         );
         setProjects(res_1.data);
-        setCurrentProject(proj);
-        callback && callback(proj.id);
+        setCurrentProject(proj, () =>
+          callback && callback(proj.id)
+        );
       })
       .catch(this.catchError);
   };

+ 5 - 4
dashboard/src/main/home/provisioner/ExistingClusterSection.tsx

@@ -46,10 +46,11 @@ class ExistingClusterSection extends Component<PropsType, StateType> {
             let proj = res.data.find((el: ProjectType) => {
               return el.name === projectName;
             });
-            setCurrentProject(proj);
-            pushFiltered(this.props, "/dashboard", ["project_id"], {
-              tab: "overview",
-            });
+            setCurrentProject(proj, () =>
+              pushFiltered(this.props, "/dashboard", ["project_id"], {
+                tab: "overview",
+              })
+            );
           }
         }
       })

+ 3 - 2
dashboard/src/main/home/provisioner/GCPFormSection.tsx

@@ -185,8 +185,9 @@ class GCPFormSection extends Component<PropsType, StateType> {
           )
           .then((res) => {
             setProjects(res.data);
-            setCurrentProject(proj);
-            callback && callback();
+            setCurrentProject(proj, () => 
+              callback && callback()
+            );
           })
           .catch(this.catchError);
       })

+ 3 - 2
dashboard/src/main/home/sidebar/ProjectSection.tsx

@@ -53,8 +53,9 @@ class ProjectSection extends Component<PropsType, StateType> {
           selected={project.name === this.props.currentProject.name}
           onClick={() => {
             this.setState({ expanded: false });
-            setCurrentProject(project);
-            pushFiltered(this.props, "/dashboard", ["project_id"]);
+            setCurrentProject(project, () => 
+              pushFiltered(this.props, "/dashboard", ["project_id"])
+            );
           }}
         >
           <ProjectIcon>