Implement rollback

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

@@ -6,6 +6,7 @@ import React, { useContext, useEffect, useState } from "react";
 import { useParams } from "react-router";
 import api from "shared/api";
 import { Context } from "shared/Context";
+import { useRouting } from "shared/routing";
 import { readableDate } from "shared/string_utils";
 import styled from "styled-components";
 import ChartList from "../../chart/ChartList";
@@ -29,7 +30,12 @@ const ExpandedStack = () => {
     namespace: string;
     stack_id: string;
   }>();
-  const { currentProject, currentCluster } = useContext(Context);
+
+  const { pushFiltered } = useRouting();
+
+  const { currentProject, currentCluster, setCurrentError } = useContext(
+    Context
+  );
 
   const [stack, setStack] = useState<Stack>();
   const [sortType, setSortType] = useState("Alphabetical");
@@ -38,32 +44,33 @@ const ExpandedStack = () => {
 
   const [currentRevision, setCurrentRevision] = useState<FullStackRevision>();
 
+  const getStack = async () => {
+    setIsLoading(true);
+    try {
+      const newStack = await api
+        .getStack<Stack>(
+          "<token>",
+          {},
+          {
+            project_id: currentProject.id,
+            cluster_id: currentCluster.id,
+            stack_id: stack_id,
+            namespace,
+          }
+        )
+        .then((res) => res.data);
+
+      setStack(newStack);
+      setCurrentRevision(newStack.latest_revision);
+      setIsLoading(false);
+    } catch (error) {
+      setCurrentError(error);
+      pushFiltered("/stacks", []);
+    }
+  };
+
   useEffect(() => {
-    console.log(stack_id);
-    let isSubscribed = true;
-
-    api
-      .getStack<Stack>(
-        "<token>",
-        {},
-        {
-          project_id: currentProject.id,
-          cluster_id: currentCluster.id,
-          stack_id: stack_id,
-          namespace,
-        }
-      )
-      .then((res) => {
-        if (isSubscribed) {
-          setStack(res.data);
-          setCurrentRevision(res.data.latest_revision);
-        }
-      })
-      .finally(() => {
-        if (isSubscribed) {
-          setIsLoading(false);
-        }
-      });
+    getStack();
   }, [stack_id]);
 
   if (isLoading) {
@@ -86,6 +93,7 @@ const ExpandedStack = () => {
         stackId={stack.id}
         stackNamespace={namespace}
         onRevisionClick={(revision) => setCurrentRevision(revision)}
+        onRollback={() => getStack()}
       ></RevisionList>
       <Br />
       <InfoWrapper>

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

@@ -13,6 +13,7 @@ type RevisionListProps = {
   stackNamespace: string;
   stackId: string;
   onRevisionClick: (revision: FullStackRevision) => void;
+  onRollback: () => void;
 };
 
 const _RevisionList = ({
@@ -22,8 +23,11 @@ const _RevisionList = ({
   stackNamespace,
   stackId,
   onRevisionClick,
+  onRollback,
 }: RevisionListProps) => {
-  const { currentProject, currentCluster } = useContext(Context);
+  const { currentProject, currentCluster, setCurrentError } = useContext(
+    Context
+  );
   const [isLoading, setIsLoading] = useState(false);
   const [isExpanded, setIsExpanded] = useState(false);
 
@@ -58,12 +62,40 @@ const _RevisionList = ({
         };
         onRevisionClick(newRevision);
       })
+      .catch((err) => {
+        setCurrentError(err);
+      })
       .finally(() => {
         setIsLoading(false);
       });
   };
 
-  const handleRevisionRollback = (revision: StackRevision) => {};
+  const handleRevisionRollback = (revision: StackRevision) => {
+    setIsLoading(true);
+
+    api
+      .rollbackStack(
+        "<token>",
+        {
+          target_revision: revision.id,
+        },
+        {
+          project_id: currentProject.id,
+          cluster_id: currentCluster.id,
+          namespace: stackNamespace,
+          stack_id: stackId,
+        }
+      )
+      .then(() => {
+        onRollback();
+      })
+      .catch((err) => {
+        setCurrentError(err);
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  };
 
   const revisionList = () => {
     if (revisions.length === 0) {
@@ -83,7 +115,10 @@ const _RevisionList = ({
           <Td>
             <RollbackButton
               disabled={isCurrent}
-              onClick={() => handleRevisionRollback(revision)}
+              onClick={(e) => {
+                e.stopPropagation();
+                handleRevisionRollback(revision);
+              }}
             >
               {isCurrent ? "Current" : "Revert"}
             </RollbackButton>

dashboard/src/shared/api.tsx

@@ -1982,7 +1982,9 @@ const getStackRevision = baseApi<
 );
 
 const rollbackStack = baseApi<
-  {},
+  {
+    target_revision: number;
+  },
   {
     project_id: number;
     cluster_id: number;