Initialized expanded stack

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

@@ -28,6 +28,7 @@ type Props = {
   disableBottomPadding?: boolean;
   closeChartRedirectUrl?: string;
   selectedTag?: any;
+  appFilters?: string[];
 };
 
 interface JobStatusWithTimeAndVersion extends JobStatusWithTimeType {
@@ -42,6 +43,7 @@ const ChartList: React.FunctionComponent<Props> = ({
   disableBottomPadding,
   closeChartRedirectUrl,
   selectedTag,
+  appFilters,
 }) => {
   const {
     newWebsocket,
@@ -356,6 +358,15 @@ const ChartList: React.FunctionComponent<Props> = ({
           { status: null } as any
         );
         return status.status === lastRunStatus;
+      })
+      .filter((chart: ChartType) => {
+        if (!Array.isArray(appFilters) || appFilters?.length === 0) {
+          return true;
+        }
+
+        return appFilters.some((filter) => {
+          return chart.name.toLowerCase().includes(filter.toLowerCase());
+        });
       });
 
     if (sortType == "Newest") {

dashboard/src/main/home/cluster-dashboard/stacks/ExpandedStack.tsx

@@ -0,0 +1,80 @@
+import Loading from "components/Loading";
+import React, { useContext, useEffect, useState } from "react";
+import { useParams } from "react-router";
+import api from "shared/api";
+import { Context } from "shared/Context";
+import ChartList from "../chart/ChartList";
+import DashboardHeader from "../DashboardHeader";
+import SortSelector from "../SortSelector";
+import { Stack } from "./types";
+
+const ExpandedStack = () => {
+  const { namespace, stack_id } = useParams<{
+    namespace: string;
+    stack_id: string;
+  }>();
+  const { currentProject, currentCluster } = useContext(Context);
+
+  const [stack, setStack] = useState<Stack>();
+  const [sortType, setSortType] = useState("Alphabetical");
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    console.log(stack_id);
+    let isSubscribed = true;
+
+    api
+      .getStack(
+        "<token>",
+        {},
+        {
+          project_id: currentProject.id,
+          cluster_id: currentCluster.id,
+          stack_id: stack_id,
+          namespace,
+        }
+      )
+      .then((res) => {
+        if (isSubscribed) {
+          setStack(res.data);
+        }
+      })
+      .finally(() => {
+        if (isSubscribed) {
+          setIsLoading(false);
+        }
+      });
+  }, [stack_id]);
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  return (
+    <div>
+      <DashboardHeader
+        title={stack?.name}
+        materialIconClass="material-icons-outlined"
+        image="lan"
+      />
+
+      <SortSelector
+        setSortType={setSortType}
+        sortType={sortType}
+        currentView="stacks"
+      />
+
+      <ChartList
+        currentCluster={currentCluster}
+        currentView="stacks"
+        namespace={namespace}
+        sortType="Alphabetical"
+        appFilters={
+          stack?.latest_revision?.resources?.map((res) => res.name) || []
+        }
+      />
+    </div>
+  );
+};
+
+export default ExpandedStack;

dashboard/src/main/home/cluster-dashboard/stacks/_StackList.tsx

@@ -61,9 +61,9 @@ const StackList = ({ namespace }: { namespace: string }) => {
   return (
     <>
       {stacks.map((stack) => (
-        <Card to={`/stacks/${stack.id}`} key={stack.id}>
+        <Card to={`/stacks/${namespace}/${stack?.id}`} key={stack?.id}>
           {stack.name} -{" "}
-          {stack.latest_revision
+          {!stack.latest_revision?.id
             ? `No revision available for this stack`
             : `Current Revision: ${stack.latest_revision.id}`}
         </Card>

dashboard/src/main/home/cluster-dashboard/stacks/routes.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Route, Switch, useLocation, useRouteMatch } from "react-router";
 import Dashboard from "./Dashboard";
+import ExpandedStack from "./ExpandedStack";
 import LaunchRoutes from "./launch";
 
 const routes = () => {
@@ -11,6 +12,9 @@ const routes = () => {
       <Route path={`${path}/launch`}>
         <LaunchRoutes />
       </Route>
+      <Route path={`${path}/:namespace/:stack_id`}>
+        <ExpandedStack />
+      </Route>
       <Route path={`${path}/`} exact>
         <Dashboard />
       </Route>