feat(instance) show creating instances in instance table

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

Hide file tree

Showing 15 changed files with 426 additions and 151 deletions.
diff --git a/src/api/operations.tsx b/src/api/operations.tsx
@@ -1,5 +1,9 @@
 import { handleResponse } from "util/helpers";
-import { LxdOperationList, LxdOperationResponse } from "types/operation";
+import {
+  LxdOperation,
+  LxdOperationList,
+  LxdOperationResponse,
+} from "types/operation";
 import { LxdApiResponse } from "types/apiResponse";
 
 export const TIMEOUT_300 = 300;
@@ -25,6 +29,8 @@ export const watchOperation = (
           throw Error(
             "Timeout while waiting for the operation to succeed. Watched operation continues in the background."
           );
+        } else if (data.metadata.status === "Cancelled") {
+          throw new Error("Cancelled");
         } else {
           throw Error(data.metadata.err);
         }
@@ -37,7 +43,19 @@ 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))
+      .then((data: LxdApiResponse<LxdOperationList>) => {
+        const newestFirst = (a: LxdOperation, b: LxdOperation) => {
+          return (
+            new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+          );
+        };
+
+        data.metadata.failure?.sort(newestFirst);
+        data.metadata.success?.sort(newestFirst);
+        data.metadata.running?.sort(newestFirst);
+
+        return resolve(data.metadata);
+      })
       .catch(reject);
   });
 };

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

diff --git a/src/components/SelectableMainTable.tsx b/src/components/SelectableMainTable.tsx
@@ -88,6 +88,7 @@ const SelectableMainTable: FC<Props> = ({
         </>
       ),
       className: "select select-header",
+      "aria-label": "select",
     },
     ...(headers ?? []),
   ];
@@ -113,7 +114,7 @@ const SelectableMainTable: FC<Props> = ({
             labelClassName="u-no-margin--bottom"
             checked={isRowSelected}
             onChange={toggleRow}
-            disabled={isRowProcessing}
+            disabled={isRowProcessing || !row.name}
           />
         ),
         role: "rowheader",

diff --git a/src/pages/instances/CreateInstanceForm.tsx b/src/pages/instances/CreateInstanceForm.tsx
@@ -135,18 +135,15 @@ const CreateInstanceForm: FC = () => {
 
   const submit = (values: CreateInstanceFormValues, shouldStart = true) => {
     const formUrl = location.pathname + location.search;
-    navigate(
-      `/ui/${project}/instances`,
-      notify.queue(notify.info("Creating the instance.", "Processing"))
-    );
+    navigate(`/ui/${project}/instances`);
 
     const instancePayload = values.yaml
       ? yamlToObject(values.yaml)
       : getPayload(values);
 
     createInstance(JSON.stringify(instancePayload), project)
       .then((operation) => {
-        const instanceName = operation.metadata.resources.instances?.[0]
+        const instanceName = operation.metadata.resources?.instances?.[0]
           .split("/")
           .pop();
         if (!instanceName) {
@@ -178,6 +175,9 @@ const CreateInstanceForm: FC = () => {
         }
       })
       .catch((e: Error) => {
+        if (e.message === "Cancelled") {
+          return;
+        }
         notifyLaunchFailed(e, formUrl, values);
       })
       .finally(() => {