Expanded job run will open based on job query param

dashboard/src/main/home/cluster-dashboard/expanded-chart/jobs/ExpandedJobRun.tsx

@@ -13,6 +13,7 @@ import { ChartType } from "shared/types";
 import DeploymentType from "../DeploymentType";
 import JobMetricsSection from "../metrics/JobMetricsSection";
 import Logs from "../status/Logs";
+import { useRouting } from "shared/routing";
 
 const readableDate = (s: string) => {
   let ts = new Date(s);
@@ -59,6 +60,7 @@ const ExpandedJobRun = ({
   >("logs");
   const [pods, setPods] = useState<any>(null);
   const [isLoading, setIsLoading] = useState(true);
+  const { pushQueryParams } = useRouting();
 
   let chart = currentChart;
   let run = jobRun;
@@ -90,6 +92,12 @@ const ExpandedJobRun = ({
     };
   }, [jobRun]);
 
+  useEffect(() => {
+    return () => {
+      pushQueryParams({}, ["job"]);
+    };
+  }, []);
+
   const renderConfigSection = (job: any) => {
     let commandString = job?.spec?.template?.spec?.containers[0]?.command?.join(
       " "

dashboard/src/main/home/cluster-dashboard/expanded-chart/jobs/useJobs.ts

@@ -6,6 +6,7 @@ import { NewWebsocketOptions, useWebsockets } from "shared/hooks/useWebsockets";
 import { ChartType } from "shared/types";
 import yaml from "js-yaml";
 import { usePrevious } from "shared/hooks/usePrevious";
+import { useRouting } from "shared/routing";
 
 const PORTER_IMAGE_TEMPLATES = [
   "porterdev/hello-porter-job",
@@ -29,6 +30,8 @@ export const useJobs = (chart: ChartType) => {
 
   const previousChart = usePrevious(chart, null);
 
+  const { pushQueryParams, getQueryParam } = useRouting();
+
   const {
     newWebsocket,
     openWebsocket,
@@ -201,6 +204,18 @@ export const useJobs = (chart: ChartType) => {
     openWebsocket(websocketId);
   };
 
+  const loadJobFromurl = () => {
+    const jobName = getQueryParam("job");
+
+    const job: any = jobs.find((tmpJob) => tmpJob.metadata.name === jobName);
+
+    if (!job) {
+      return;
+    }
+
+    setSelectedJob(job);
+  };
+
   useEffect(() => {
     let isSubscribed = true;
 
@@ -248,6 +263,14 @@ export const useJobs = (chart: ChartType) => {
     };
   }, [chart]);
 
+  useEffect(() => {
+    if (!jobs.length) {
+      return;
+    }
+
+    loadJobFromurl();
+  }, [jobs]);
+
   useEffect(() => {
     return () => {
       closeAllWebsockets();
@@ -305,6 +328,11 @@ export const useJobs = (chart: ChartType) => {
       });
   };
 
+  const handleSetSelectedJob = (job: any) => {
+    setSelectedJob(job);
+    pushQueryParams({ job: job?.metadata?.name });
+  };
+
   return {
     jobs,
     hasPorterImageTemplate,
@@ -312,6 +340,6 @@ export const useJobs = (chart: ChartType) => {
     triggerRunStatus,
     runJob,
     selectedJob,
-    setSelectedJob,
+    setSelectedJob: handleSetSelectedJob,
   };
 };

dashboard/src/shared/routing.tsx

@@ -28,12 +28,19 @@ export const PorterUrls = [
 ];
 
 // TODO: consolidate with pushFiltered
-export const pushQueryParams = (props: any, params: any) => {
+export const pushQueryParams = (
+  props: any,
+  params: any,
+  removedParams?: string[]
+) => {
   let { location, history } = props;
   const urlParams = new URLSearchParams(location.search);
   Object.keys(params)?.forEach((key: string) => {
     params[key] && urlParams.set(key, params[key]);
   });
+
+  removedParams?.map((deletedParam) => urlParams.delete(deletedParam));
+
   history.push({
     pathname: location.pathname,
     search: urlParams.toString(),
@@ -78,8 +85,11 @@ export const useRouting = () => {
   const history = useHistory();
 
   return {
-    pushQueryParams: (params: { [key: string]: unknown }) => {
-      return pushQueryParams({ location, history }, params);
+    pushQueryParams: (
+      params: { [key: string]: unknown },
+      removedParams?: string[]
+    ) => {
+      return pushQueryParams({ location, history }, params, removedParams);
     },
     pushFiltered: (
       pathname: string,