feat(operations) add operations

canonical · May 23, 2023 · a7cc992 · a7cc992
1 parent c49f136
commit a7cc992
Show file tree

Hide file tree

Showing 14 changed files with 280 additions and 29 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -14,6 +14,7 @@ const Settings = lazy(() => import("pages/settings/Settings"));
 const InstanceDetail = lazy(() => import("pages/instances/InstanceDetail"));
 const StorageList = lazy(() => import("pages/storage/StorageList"));
 const ProfileDetail = lazy(() => import("pages/profiles/ProfileDetail"));
+const OperationList = lazy(() => import("pages/operations/OperationList"));
 const CertificateGenerate = lazy(
   () => import("pages/certificates/CertificateGenerate")
 );
@@ -104,6 +105,10 @@ const App: FC = () => {
           path="/ui/:project/networks/map"
           element={<ProtectedRoute outlet={<NetworkMap />} />}
         />
+        <Route
+          path="/ui/:project/operations"
+          element={<ProtectedRoute outlet={<OperationList />} />}
+        />
         <Route
           path="/ui/:project/configuration"
           element={<ProtectedRoute outlet={<ProjectConfiguration />} />}

diff --git a/src/api/images.tsx b/src/api/images.tsx
@@ -2,7 +2,7 @@ import { TIMEOUT_300, watchOperation } from "./operations";
 import { handleResponse } from "util/helpers";
 import { ImportImage, LxdImage } from "types/image";
 import { LxdApiResponse } from "types/apiResponse";
-import { LxdOperation } from "types/operation";
+import { LxdOperationResponse } from "types/operation";
 
 export const fetchImage = (
   image: string,
@@ -31,7 +31,7 @@ export const deleteImage = (image: LxdImage) => {
       method: "DELETE",
     })
       .then(handleResponse)
-      .then((data: LxdOperation) => {
+      .then((data: LxdOperationResponse) => {
         watchOperation(data.operation).then(resolve).catch(reject);
       })
       .catch(reject);
@@ -54,7 +54,7 @@ export const importImage = (remoteImage: ImportImage) => {
       }),
     })
       .then(handleResponse)
-      .then((data: LxdOperation) => {
+      .then((data: LxdOperationResponse) => {
         watchOperation(data.operation, TIMEOUT_300).then(resolve).catch(reject);
       })
       .catch(reject);

diff --git a/src/api/instances.tsx b/src/api/instances.tsx
@@ -7,7 +7,7 @@ import {
 import { LxdInstance, LxdInstanceAction } from "types/instance";
 import { LxdTerminal, TerminalConnectPayload } from "types/terminal";
 import { LxdApiResponse } from "types/apiResponse";
-import { LxdOperation } from "types/operation";
+import { LxdOperationResponse } from "types/operation";
 
 export const fetchInstance = (
   name: string,
@@ -34,14 +34,14 @@ export const fetchInstances = (project: string): Promise<LxdInstance[]> => {
 export const createInstance = (
   body: string,
   project: string
-): Promise<LxdOperation> => {
+): Promise<LxdOperationResponse> => {
   return new Promise((resolve, reject) => {
     fetch(`/1.0/instances?project=${project}`, {
       method: "POST",
       body: body,
     })
       .then(handleResponse)
-      .then((data: LxdOperation) => {
+      .then((data: LxdOperationResponse) => {
         watchOperation(data.operation, TIMEOUT_120).then(resolve).catch(reject);
       })
       .catch(reject);
@@ -58,7 +58,7 @@ export const updateInstance = (instance: LxdInstance, project: string) => {
       },
     })
       .then(handleResponse)
-      .then((data: LxdOperation) => {
+      .then((data: LxdOperationResponse) => {
         watchOperation(data.operation, TIMEOUT_120).then(resolve).catch(reject);
       })
       .catch(reject);
@@ -78,7 +78,7 @@ export const renameInstance = (
       }),
     })
       .then(handleResponse)
-      .then((data: LxdOperation) => {
+      .then((data: LxdOperationResponse) => {
         watchOperation(data.operation, TIMEOUT_120).then(resolve).catch(reject);
       })
       .catch(reject);
@@ -120,7 +120,7 @@ const putInstanceAction = (
       }),
     })
       .then(handleResponse)
-      .then((data: LxdOperation) => {
+      .then((data: LxdOperationResponse) => {
         watchOperation(data.operation, TIMEOUT_60).then(resolve).catch(reject);
       })
       .catch(reject);
@@ -154,7 +154,7 @@ export const deleteInstance = (instance: LxdInstance) => {
       method: "DELETE",
     })
       .then(handleResponse)
-      .then((data: LxdOperation) => {
+      .then((data: LxdOperationResponse) => {
         watchOperation(data.operation, TIMEOUT_120).then(resolve).catch(reject);
       })
       .catch(reject);

diff --git a/src/api/operations.tsx b/src/api/operations.tsx
@@ -1,5 +1,6 @@
 import { handleResponse } from "util/helpers";
-import { LxdOperation } from "types/operation";
+import { LxdOperationList, LxdOperationResponse } from "types/operation";
+import { LxdApiResponse } from "types/apiResponse";
 
 export const TIMEOUT_300 = 300;
 export const TIMEOUT_120 = 120;
@@ -9,14 +10,14 @@ export const TIMEOUT_10 = 10;
 export const watchOperation = (
   operationUrl: string,
   timeout = TIMEOUT_10
-): Promise<LxdOperation> => {
+): Promise<LxdOperationResponse> => {
   return new Promise((resolve, reject) => {
     const operationParts = operationUrl.split("?");
     const baseUrl = operationParts[0];
     const queryString = operationParts.length === 1 ? "" : operationParts[1];
     fetch(`${baseUrl}/wait?timeout=${timeout}&${queryString}`)
       .then(handleResponse)
-      .then((data: LxdOperation) => {
+      .then((data: LxdOperationResponse) => {
         if (data.metadata.status === "Success") {
           return resolve(data);
         }
@@ -31,3 +32,23 @@ export const watchOperation = (
       .catch(reject);
   });
 };
+
+export const fetchOperations = (project: string): Promise<LxdOperationList> => {
+  return new Promise((resolve, reject) => {
+    fetch(`/1.0/operations?project=${project}&recursion=1`)
+      .then(handleResponse)
+      .then((data: LxdApiResponse<LxdOperationList>) => resolve(data.metadata))
+      .catch(reject);
+  });
+};
+
+export const cancelOperation = (id: string): Promise<LxdOperationList> => {
+  return new Promise((resolve, reject) => {
+    fetch(`/1.0/operations/${id}`, {
+      method: "DELETE",
+    })
+      .then(handleResponse)
+      .then(resolve)
+      .catch(reject);
+  });
+};
diff --git a/src/api/projects.tsx b/src/api/projects.tsx
@@ -1,7 +1,7 @@
 import { handleEtagResponse, handleResponse } from "util/helpers";
 import { LxdProject } from "types/project";
 import { LxdApiResponse } from "types/apiResponse";
-import { LxdOperation } from "types/operation";
+import { LxdOperationResponse } from "types/operation";
 import { TIMEOUT_60, watchOperation } from "api/operations";
 
 export const fetchProjects = (recursion: number): Promise<LxdProject[]> => {
@@ -58,7 +58,7 @@ export const renameProject = (oldName: string, newName: string) => {
       }),
     })
       .then(handleResponse)
-      .then((data: LxdOperation) => {
+      .then((data: LxdOperationResponse) => {
         watchOperation(data.operation, TIMEOUT_60).then(resolve).catch(reject);
       })
       .catch(reject);

diff --git a/src/api/snapshots.tsx b/src/api/snapshots.tsx
@@ -1,7 +1,7 @@
 import { TIMEOUT_120, TIMEOUT_60, watchOperation } from "./operations";
 import { handleResponse } from "util/helpers";
 import { LxdInstance, LxdSnapshot } from "types/instance";
-import { LxdOperation } from "types/operation";
+import { LxdOperationResponse } from "types/operation";
 
 export const createSnapshot = (
   instance: LxdInstance,
@@ -22,7 +22,7 @@ export const createSnapshot = (
       }
     )
       .then(handleResponse)
-      .then((data: LxdOperation) => {
+      .then((data: LxdOperationResponse) => {
         watchOperation(data.operation, TIMEOUT_60).then(resolve).catch(reject);
       })
       .catch(reject);
@@ -41,7 +41,7 @@ export const deleteSnapshot = (
       }
     )
       .then(handleResponse)
-      .then((data: LxdOperation) => {
+      .then((data: LxdOperationResponse) => {
         watchOperation(data.operation, TIMEOUT_120).then(resolve).catch(reject);
       })
       .catch(reject);
@@ -88,7 +88,7 @@ export const restoreSnapshot = (
       }),
     })
       .then(handleResponse)
-      .then((data: LxdOperation) => {
+      .then((data: LxdOperationResponse) => {
         watchOperation(data.operation).then(resolve).catch(reject);
       })
       .catch(reject);
@@ -111,7 +111,7 @@ export const renameSnapshot = (
       }
     )
       .then(handleResponse)
-      .then((data: LxdOperation) => {
+      .then((data: LxdOperationResponse) => {
         watchOperation(data.operation).then(resolve).catch(reject);
       })
       .catch(reject);
@@ -134,7 +134,7 @@ export const updateSnapshot = (
       }
     )
       .then(handleResponse)
-      .then((data: LxdOperation) => {
+      .then((data: LxdOperationResponse) => {
         watchOperation(data.operation).then(resolve).catch(reject);
       })
       .catch(reject);

diff --git a/src/components/EmptyState.tsx b/src/components/EmptyState.tsx
@@ -6,7 +6,7 @@ interface Props {
   iconClass: string;
   title: string;
   message: string | ReactNode;
-  children: ReactNode;
+  children?: ReactNode;
 }
 
 const EmptyState: FC<Props> = ({

diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
@@ -140,6 +140,19 @@ const Navigation: FC = () => {
                           Storage pools
                         </NavLink>
                       </li>
+                      <li className="p-side-navigation__item--title secondary">
+                        <NavLink
+                          className="p-side-navigation__link"
+                          to={`/ui/${project}/operations`}
+                          title="Operations"
+                        >
+                          <Icon
+                            className="is-light p-side-navigation__icon"
+                            name="status"
+                          />{" "}
+                          Ongoing operations
+                        </NavLink>
+                      </li>
                       <li className="p-side-navigation__item--title secondary">
                         <NavLink
                           className="p-side-navigation__link"