feat(storage) add warning for project snapshot restriction [WD-7885]

Signed-off-by: Mason Hu <mason.hu@canonical.com>
canonical · Dec 13, 2023 · 550e703 · 550e703
1 parent 29ff659
commit 550e703
Show file tree

Hide file tree

Showing 4 changed files with 150 additions and 181 deletions.
diff --git a/src/components/forms/InstanceSnapshotsForm.tsx b/src/components/forms/InstanceSnapshotsForm.tsx
@@ -1,12 +1,15 @@
 import React, { FC, ReactNode } from "react";
-import { Input, Select } from "@canonical/react-components";
+import { Icon, Input, Notification, Select } from "@canonical/react-components";
 import { optionYesNo } from "util/instanceOptions";
 import { SharedFormikTypes, SharedFormTypes } from "./sharedFormTypes";
 import { getInstanceConfigurationRow } from "components/forms/InstanceConfigurationRow";
 import InstanceConfigurationTable from "components/forms/InstanceConfigurationTable";
 import { getInstanceKey } from "util/instanceConfigFields";
 import { optionRenderer } from "util/formFields";
 import SnapshotScheduleInput from "components/SnapshotScheduleInput";
+import { useProject } from "context/project";
+import { isSnapshotsDisabled } from "util/snapshots";
+import { useDocs } from "context/useDocs";
 
 export interface SnapshotFormValues {
   snapshots_pattern?: string;
@@ -31,50 +34,74 @@ interface Props {
 }
 
 const InstanceSnapshotsForm: FC<Props> = ({ formik }) => {
+  const { project } = useProject();
+  const snapshotDisabled = isSnapshotsDisabled(project);
+  const docBaseLink = useDocs();
+
   return (
-    <InstanceConfigurationTable
-      rows={[
-        getInstanceConfigurationRow({
-          formik,
-          label: "Snapshot name pattern",
-          name: "snapshots_pattern",
-          defaultValue: "",
-          children: <Input placeholder="Enter name pattern" type="text" />,
-        }),
+    <>
+      {snapshotDisabled && (
+        <Notification
+          severity="caution"
+          title="Snapshot creation blocked for the current project"
+        >
+          Snapshot scheduling settings may not work as expected.{" "}
+          <a
+            href={`${docBaseLink}/reference/projects/#project-restrictions`}
+            target="_blank"
+            rel="noreferrer"
+          >
+            Learn more about project restrictions
+            <Icon className="external-link-icon" name="external-link" />
+          </a>
+        </Notification>
+      )}
+      <InstanceConfigurationTable
+        rows={[
+          getInstanceConfigurationRow({
+            formik,
+            label: "Snapshot name pattern",
+            name: "snapshots_pattern",
+            defaultValue: "",
+            children: <Input placeholder="Enter name pattern" type="text" />,
+          }),
 
-        getInstanceConfigurationRow({
-          formik,
-          label: "Expire after",
-          name: "snapshots_expiry",
-          defaultValue: "",
-          children: <Input placeholder="Enter expiry expression" type="text" />,
-        }),
+          getInstanceConfigurationRow({
+            formik,
+            label: "Expire after",
+            name: "snapshots_expiry",
+            defaultValue: "",
+            children: (
+              <Input placeholder="Enter expiry expression" type="text" />
+            ),
+          }),
 
-        getInstanceConfigurationRow({
-          formik,
-          label: "Snapshot stopped instances",
-          name: "snapshots_schedule_stopped",
-          defaultValue: "",
-          readOnlyRenderer: (val) => optionRenderer(val, optionYesNo),
-          children: <Select options={optionYesNo} />,
-        }),
+          getInstanceConfigurationRow({
+            formik,
+            label: "Snapshot stopped instances",
+            name: "snapshots_schedule_stopped",
+            defaultValue: "",
+            readOnlyRenderer: (val) => optionRenderer(val, optionYesNo),
+            children: <Select options={optionYesNo} />,
+          }),
 
-        getInstanceConfigurationRow({
-          formik,
-          label: "Schedule",
-          name: "snapshots_schedule",
-          defaultValue: "",
-          children: (
-            <SnapshotScheduleInput
-              value={formik.values.snapshots_schedule}
-              setValue={(val) =>
-                void formik.setFieldValue("snapshots_schedule", val)
-              }
-            />
-          ),
-        }),
-      ]}
-    />
+          getInstanceConfigurationRow({
+            formik,
+            label: "Schedule",
+            name: "snapshots_schedule",
+            defaultValue: "",
+            children: (
+              <SnapshotScheduleInput
+                value={formik.values.snapshots_schedule}
+                setValue={(val) =>
+                  void formik.setFieldValue("snapshots_schedule", val)
+                }
+              />
+            ),
+          }),
+        ]}
+      />
+    </>
   );
 };
 

diff --git a/src/pages/storage/actions/snapshots/VolumeConfigureSnapshotModal.tsx b/src/pages/storage/actions/snapshots/VolumeConfigureSnapshotModal.tsx
@@ -11,7 +11,7 @@ import {
 } from "pages/storage/forms/StorageVolumeForm";
 import { getStorageVolumeEditValues } from "util/storageVolumeEdit";
 import { updateStorageVolume } from "api/storage-pools";
-import StorageVolumeSnapshotsForm from "../../forms/StorageVolumeSnapshotsForm";
+import StorageVolumeFormSnapshots from "pages/storage/forms/StorageVolumeFormSnapshots";
 
 interface Props {
   volume: LxdStorageVolume;
@@ -105,7 +105,7 @@ const VolumeConfigureSnapshotModal: FC<Props> = ({
       }
       onKeyDown={handleEscKey}
     >
-      <StorageVolumeSnapshotsForm formik={formik} />
+      <StorageVolumeFormSnapshots formik={formik} />
     </Modal>
   );
 };

diff --git a/src/pages/storage/forms/StorageVolumeFormSnapshots.tsx b/src/pages/storage/forms/StorageVolumeFormSnapshots.tsx
@@ -1,79 +1,101 @@
 import React, { FC } from "react";
-import { Input } from "@canonical/react-components";
+import { Icon, Input, Notification } from "@canonical/react-components";
 import { FormikProps } from "formik/dist/types";
 import ConfigurationTable from "components/ConfigurationTable";
 import { getStorageConfigurationRow } from "pages/storage/forms/StorageConfigurationRow";
 import { StorageVolumeFormValues } from "pages/storage/forms/StorageVolumeForm";
 import SnapshotScheduleInput from "components/SnapshotScheduleInput";
 import { useDocs } from "context/useDocs";
+import { useProject } from "context/project";
+import { isSnapshotsDisabled } from "util/snapshots";
 
 interface Props {
   formik: FormikProps<StorageVolumeFormValues>;
 }
 
 const StorageVolumeFormSnapshots: FC<Props> = ({ formik }) => {
   const docBaseLink = useDocs();
+  const { project } = useProject();
+  const snapshotDisabled = isSnapshotsDisabled(project);
 
   return (
-    <ConfigurationTable
-      rows={[
-        getStorageConfigurationRow({
-          formik,
-          label: "Snapshot name pattern",
-          name: "snapshots_pattern",
-          defaultValue: "",
-          children: (
-            <Input
-              placeholder="Enter name pattern"
-              help={
-                <>
-                  Pongo2 template string that represents the snapshot name (used
-                  for scheduled snapshots and unnamed snapshots), see{" "}
-                  <a
-                    href={`${docBaseLink}/reference/instance_options/#instance-options-snapshots-names`}
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    Automatic snapshot names
-                  </a>
-                </>
-              }
-              type="text"
-            />
-          ),
-        }),
+    <>
+      {snapshotDisabled && (
+        <Notification
+          severity="caution"
+          title="Snapshot creation blocked for the current project"
+        >
+          Snapshot scheduling settings may not work as expected.{" "}
+          <a
+            href={`${docBaseLink}/reference/projects/#project-restrictions`}
+            target="_blank"
+            rel="noreferrer"
+          >
+            Learn more about project restrictions
+            <Icon className="external-link-icon" name="external-link" />
+          </a>
+        </Notification>
+      )}
+      <ConfigurationTable
+        rows={[
+          getStorageConfigurationRow({
+            formik,
+            label: "Snapshot name pattern",
+            name: "snapshots_pattern",
+            defaultValue: "",
+            children: (
+              <Input
+                placeholder="Enter name pattern"
+                help={
+                  <>
+                    Pongo2 template string that represents the snapshot name
+                    (used for scheduled snapshots and unnamed snapshots), see{" "}
+                    <a
+                      href={`${docBaseLink}/reference/instance_options/#instance-options-snapshots-names`}
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      Automatic snapshot names
+                    </a>
+                  </>
+                }
+                type="text"
+              />
+            ),
+          }),
 
-        getStorageConfigurationRow({
-          formik,
-          label: "Expire after",
-          name: "snapshots_expiry",
-          help: "Controls when snapshots are to be deleted",
-          defaultValue: "",
-          children: (
-            <Input
-              placeholder="Enter expiry expression"
-              type="text"
-              help="Expects an expression like 1M 2H 3d 4w 5m 6y"
-            />
-          ),
-        }),
+          getStorageConfigurationRow({
+            formik,
+            label: "Expire after",
+            name: "snapshots_expiry",
+            help: "Controls when snapshots are to be deleted",
+            defaultValue: "",
+            children: (
+              <Input
+                placeholder="Enter expiry expression"
+                type="text"
+                help="Expects an expression like 1M 2H 3d 4w 5m 6y"
+              />
+            ),
+          }),
 
-        getStorageConfigurationRow({
-          formik,
-          label: "Schedule",
-          name: "snapshots_schedule",
-          defaultValue: "",
-          children: (
-            <SnapshotScheduleInput
-              value={formik.values.snapshots_schedule}
-              setValue={(val) =>
-                void formik.setFieldValue("snapshots_schedule", val)
-              }
-            />
-          ),
-        }),
-      ]}
-    />
+          getStorageConfigurationRow({
+            formik,
+            label: "Schedule",
+            name: "snapshots_schedule",
+            defaultValue: "",
+            children: (
+              <SnapshotScheduleInput
+                value={formik.values.snapshots_schedule}
+                setValue={(val) =>
+                  void formik.setFieldValue("snapshots_schedule", val)
+                }
+              />
+            ),
+          }),
+        ]}
+      />
+    </>
   );
 };
 

diff --git a/src/pages/storage/forms/StorageVolumeSnapshotsForm.tsx b/src/pages/storage/forms/StorageVolumeSnapshotsForm.tsx