handle infinite loop on namespace=ALL

dashboard/src/main/home/Home.tsx

@@ -268,7 +268,6 @@ 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)

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

@@ -33,7 +33,7 @@ type StateType = {
 // TODO: add advanced routing (by project, cluster, namespace, and expanded object)
 class ClusterDashboard extends Component<PropsType, StateType> {
   state = {
-    namespace: "default",
+    namespace: null as string,
     sortType: localStorage.getItem("SortType")
       ? localStorage.getItem("SortType")
       : "Newest",
@@ -43,23 +43,7 @@ class ClusterDashboard extends Component<PropsType, StateType> {
 
   componentDidMount() {
     let { currentCluster, currentProject } = this.context;
-    // 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",
-    });
+    pushQueryParams(this.props, { cluster: currentCluster.name });
     api
       .getPrometheusIsInstalled(
         "<token>",
@@ -88,13 +72,12 @@ class ClusterDashboard extends Component<PropsType, StateType> {
           : "Newest",
         currentChart: null,
       }, () =>
-        pushQueryParams(this.props, { namespace: this.state.namespace || "ALL" })
+        pushQueryParams(this.props, { namespace: "default" })
       );
     }
 
     if (prevProps.currentView !== this.props.currentView) {
       this.setState({
-        namespace: "default",
         sortType: "Newest",
         currentChart: null,
       }, () =>
@@ -120,7 +103,7 @@ class ClusterDashboard extends Component<PropsType, StateType> {
   };
 
   renderBody = () => {
-    let { currentCluster, setSidebar, currentView } = this.props;
+    let { currentCluster, currentView } = this.props;
     return (
       <>
         <ControlRow>
@@ -135,11 +118,11 @@ class ClusterDashboard extends Component<PropsType, StateType> {
               sortType={this.state.sortType}
             />
             <NamespaceSelector
-              setNamespace={(namespace) => 
+              setNamespace={(namespace) => {
                 this.setState({ namespace }, () =>
                   pushQueryParams(this.props, { namespace: this.state.namespace || "ALL" })
                 )
-              }
+              }}
               namespace={this.state.namespace}
             />
           </SortFilterWrapper>

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

@@ -39,15 +39,34 @@ export default class NamespaceSelector extends Component<PropsType, StateType> {
           let namespaceOptions: { label: string; value: string }[] = [
             { label: "All", value: "" },
           ];
+          
+          // Set namespace from URL if specified
+          let queryString = window.location.search;
+          let urlParams = new URLSearchParams(queryString);
+          let urlNamespace = urlParams.get("namespace");
+          if (urlNamespace === "ALL") {
+            urlNamespace = "";
+          }
+
+          let defaultNamespace = "default";
           res.data.items.forEach(
             (x: { metadata: { name: string } }, i: number) => {
               namespaceOptions.push({
                 label: x.metadata.name,
                 value: x.metadata.name,
               });
+              if (x.metadata.name === urlNamespace) {
+                defaultNamespace = urlNamespace;
+              }
             }
           );
-          this.setState({ namespaceOptions });
+          this.setState({ namespaceOptions }, () => {
+            if (urlNamespace === "") {
+              this.props.setNamespace("");
+            } else if (this.props.namespace !== defaultNamespace) {
+              this.props.setNamespace(defaultNamespace);
+            }
+          });
         }
       })
       .catch((err) => {
@@ -63,7 +82,7 @@ export default class NamespaceSelector extends Component<PropsType, StateType> {
   }
 
   componentDidUpdate(prevProps: PropsType) {
-    if (prevProps !== this.props) {
+    if (prevProps.namespace !== this.props.namespace) {
       this.updateOptions();
     }
   }

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

@@ -217,7 +217,7 @@ export default class ChartList extends Component<PropsType, StateType> {
   };
 
   componentDidMount() {
-    this.updateCharts(this.getControllers);
+    (this.props.namespace || this.props.namespace === "") && this.updateCharts(this.getControllers);
     this.setControllerWebsockets([
       "deployment",
       "statefulset",
@@ -242,14 +242,14 @@ export default class ChartList extends Component<PropsType, StateType> {
       prevProps.sortType !== this.props.sortType ||
       prevProps.currentView !== this.props.currentView
     ) {
-      this.updateCharts(this.getControllers);
+      (this.props.namespace || this.props.namespace === "") && this.updateCharts(this.getControllers);
     }
   }
 
   renderChartList = () => {
     let { loading, error, charts } = this.state;
 
-    if (loading) {
+    if (loading || (!this.props.namespace && this.props.namespace !== "")) {
       return (
         <LoadingWrapper>
           <Loading />