cache adv route changes

dashboard/src/main/home/Home.tsx

@@ -44,6 +44,7 @@ type StateType = {
 };
 
 // TODO: Handle cluster connected but with some failed infras (no successful set)
+// TODO: Set up current view / sidebar tab as dynamic Routes
 class Home extends Component<PropsType, StateType> {
   state = {
     forceSidebar: true,

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

@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import styled from "styled-components";
 import monojob from "assets/monojob.png";
 import monoweb from "assets/monoweb.png";
+import { Switch, Route } from "react-router-dom";
 
 import { Context } from "shared/Context";
 import { ChartType, ClusterType } from "shared/types";
@@ -12,7 +13,7 @@ import EnvGroupDashboard from "./env-groups/EnvGroupDashboard";
 import NamespaceSelector from "./NamespaceSelector";
 import SortSelector from "./SortSelector";
 import ExpandedChart from "./expanded-chart/ExpandedChart";
-import ExpandedJobChart from "./expanded-chart/ExpandedJobChart";
+import ExpandedJobChartWrapper from "./expanded-chart/ExpandedJobChartWrapper";
 import { RouteComponentProps, withRouter } from "react-router";
 
 import api from "shared/api";
@@ -30,7 +31,7 @@ type StateType = {
   isMetricsInstalled: boolean;
 };
 
-// TODO: add advanced routing (by project, cluster, namespace, and expanded object)
+// TODO: should try to maintain single source of truth b/w router and context/state (ex: namespace -> being managed in parallel right now so highly inextensible and routing is fragile)
 class ClusterDashboard extends Component<PropsType, StateType> {
   state = {
     namespace: null as string,
@@ -140,9 +141,6 @@ class ClusterDashboard extends Component<PropsType, StateType> {
           currentCluster={currentCluster}
           namespace={this.state.namespace}
           sortType={this.state.sortType}
-          setCurrentChart={(x: ChartType | null) =>
-            this.setState({ currentChart: x })
-          }
         />
       </>
     );
@@ -150,17 +148,7 @@ class ClusterDashboard extends Component<PropsType, StateType> {
 
   renderContents = () => {
     let { currentCluster, setSidebar, currentView } = this.props;
-    if (this.state.currentChart && currentView === "jobs") {
-      return (
-        <ExpandedJobChart
-          namespace={this.state.namespace}
-          currentCluster={this.props.currentCluster}
-          currentChart={this.state.currentChart}
-          closeChart={() => this.setState({ currentChart: null })}
-          setSidebar={setSidebar}
-        />
-      );
-    } else if (this.state.currentChart) {
+    if (this.state.currentChart) {
       return (
         <ExpandedChart
           namespace={this.state.namespace}
@@ -176,7 +164,7 @@ class ClusterDashboard extends Component<PropsType, StateType> {
     }
 
     return (
-      <div>
+      <>
         <TitleSection>
           {this.renderDashboardIcon()}
           <Title>{currentView}</Title>
@@ -194,12 +182,25 @@ class ClusterDashboard extends Component<PropsType, StateType> {
         <LineBreak />
 
         {this.renderBody()}
-      </div>
+      </>
     );
   };
 
   render() {
-    return <div>{this.renderContents()}</div>;
+    let { setSidebar } = this.props;
+    return (
+      <Switch>
+        <Route path="/jobs/:clusterName/:namespace/:chartName">
+          <ExpandedJobChartWrapper setSidebar={setSidebar} />
+        </Route>
+        <Route path="/applications/:application">
+          <h1>Application!</h1>
+        </Route>
+        <Route path={["/jobs", "/applications", "/env-groups"]}>
+          {this.renderContents()}
+        </Route>
+      </Switch>
+    );
   }
 }
 

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

@@ -1,13 +1,14 @@
 import React, { Component } from "react";
 import styled from "styled-components";
 
-import { ChartType, StorageType } from "shared/types";
+import { ChartType } from "shared/types";
 import { Context } from "shared/Context";
 import StatusIndicator from "components/StatusIndicator";
+import { pushFiltered, pushQueryParams } from "shared/routing";
+import { RouteComponentProps, withRouter } from "react-router";
 
-type PropsType = {
+type PropsType = RouteComponentProps & {
   chart: ChartType;
-  setCurrentChart: (c: ChartType) => void;
   controllers: Record<string, any>;
 };
 
@@ -16,7 +17,7 @@ type StateType = {
   update: any[];
 };
 
-export default class Chart extends Component<PropsType, StateType> {
+class Chart extends Component<PropsType, StateType> {
   state = {
     expand: false,
     update: [] as any[],
@@ -43,14 +44,21 @@ export default class Chart extends Component<PropsType, StateType> {
   };
 
   render() {
-    let { chart, setCurrentChart } = this.props;
+    let { chart } = this.props;
 
     return (
       <StyledChart
         onMouseEnter={() => this.setState({ expand: true })}
         onMouseLeave={() => this.setState({ expand: false })}
         expand={this.state.expand}
-        onClick={() => setCurrentChart(chart)}
+        onClick={() => {
+          let { location, match } = this.props;
+          let urlParams = new URLSearchParams(location.search);
+          let cluster = urlParams.get("cluster");
+          let namespace = urlParams.get("namespace");
+          let route = `${match.url}/${cluster}/${namespace}/${chart.name}`;
+          pushFiltered(this.props, route, ["project_id"]);
+        }}
       >
         <Title>
           <IconWrapper>{this.renderIcon()}</IconWrapper>
@@ -84,6 +92,8 @@ export default class Chart extends Component<PropsType, StateType> {
 
 Chart.contextType = Context;
 
+export default withRouter(Chart);
+
 const BottomWrapper = styled.div`
   display: flex;
   justify-content: space-between;

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

@@ -13,7 +13,6 @@ type PropsType = {
   currentCluster: ClusterType;
   namespace: string;
   sortType: string;
-  setCurrentChart: (c: ChartType) => void;
   currentView: PorterUrl;
 };
 
@@ -278,7 +277,6 @@ export default class ChartList extends Component<PropsType, StateType> {
         <Chart
           key={`${chart.namespace}-${chart.name}`}
           chart={chart}
-          setCurrentChart={this.props.setCurrentChart}
           controllers={
             this.state.controllers[`${chart.namespace}-${chart.name}`] ||
             ({} as Record<string, any>)

dashboard/src/main/home/cluster-dashboard/expanded-chart/ExpandedJobChartWrapper.tsx

@@ -0,0 +1,59 @@
+import React, { Component } from "react";
+import styled from "styled-components";
+import { RouteComponentProps, withRouter } from "react-router";
+
+import api from "shared/api";
+import { PorterUrl, pushQueryParams, pushFiltered } from "shared/routing";
+import ExpandedJobChart from "./ExpandedJobChart";
+import Loading from "components/Loading";
+
+type PropsType = RouteComponentProps & {
+  setSidebar: (x: boolean) => void;
+};
+
+type StateType = {
+  loading: boolean;
+};
+
+class ExpandedJobChartWrapper extends Component<PropsType, StateType> {
+  state = {
+    loading: true,
+  };
+
+  getClusterFromName = (clusterName: string) => {
+    api
+      .getClusters("<token>", {}, { id: currentProject.id })
+      .then((res) => {
+        window.analytics.identify(user.userId, {
+          currentProject,
+          clusters: res.data,
+        });
+
+        this.props.setWelcome(false);
+        // TODO: handle uninitialized kubeconfig
+        if (res.data) {
+          let clusters = res.data;
+  }
+
+  getChartFromName = (chartName: string) => {
+
+  }
+
+  componentDidMount() {
+    let { setSidebar, location, match } = this.props;
+    let { clusterName, namespace, chartName } = match.params as any;
+    console.log(clusterName, namespace, chartName);
+  } 
+
+  render() {
+    let { loading } = this.state;
+    if (loading) {
+      return <Loading />
+    }
+    return (
+      <h1>lil ol me</h1>
+    );
+  }
+}
+
+export default withRouter(ExpandedJobChartWrapper);