feat: use supported storage driver options from server settings

Signed-off-by: Mason Hu <[email protected]>

src/pages/storage/forms/StoragePoolFormMain.tsx

@@ -3,22 +3,24 @@ import { Row, Input, Select, Col } from "@canonical/react-components";
 import { FormikProps } from "formik";
 import {
   zfsDriver,
-  storageDrivers,
   dirDriver,
   btrfsDriver,
   getSourceHelpForDriver,
   cephDriver,
+  getStorageDriverOptions,
 } from "util/storageOptions";
 import { StoragePoolFormValues } from "./StoragePoolForm";
 import DiskSizeSelector from "components/forms/DiskSizeSelector";
 import AutoExpandingTextArea from "components/AutoExpandingTextArea";
 import { cephStoragePoolDefaults } from "util/storagePool";
+import { useSettings } from "context/useSettings";
 
 interface Props {
   formik: FormikProps<StoragePoolFormValues>;
 }
 
 const StoragePoolFormMain: FC<Props> = ({ formik }) => {
+  const { data: settings } = useSettings();
   const getFormProps = (id: "name" | "description" | "size" | "source") => {
     return {
       id: id,
@@ -33,6 +35,7 @@ const StoragePoolFormMain: FC<Props> = ({ formik }) => {
 
   const isCephDriver = formik.values.driver === cephDriver;
   const isDirDriver = formik.values.driver === dirDriver;
+  const storageDriverOptions = getStorageDriverOptions(settings);
 
   return (
     <>
@@ -67,7 +70,7 @@ const StoragePoolFormMain: FC<Props> = ({ formik }) => {
                   : undefined
             }
             label="Driver"
-            options={storageDrivers}
+            options={storageDriverOptions}
             onChange={(target) => {
               const val = target.target.value;
               if (val === dirDriver) {

src/types/server.d.ts

@@ -1,6 +1,11 @@
 import { LxdConfigPair } from "./config";
 
 type LXDAuthMethods = "tls" | "oidc" | "unix";
+type SupportedStorageDriver = {
+  Name: string;
+  Version: string;
+  Remote: boolean;
+};
 
 export interface LxdSettings {
   api_status: string;
@@ -10,6 +15,7 @@ export interface LxdSettings {
     os_name?: string;
     server_version: ?string;
     server_clustered: boolean;
+    storage_supported_drivers: SupportedStorageDriver[];
   };
   auth?: "trusted" | "untrusted";
   auth_methods?: LXDAuthMethods;

src/util/storageOptions.tsx

@@ -1,31 +1,33 @@
+import { OptionHTMLAttributes } from "react";
+import { LxdSettings } from "types/server";
+
 export const dirDriver = "dir";
 export const btrfsDriver = "btrfs";
 export const lvmDriver = "lvm";
 export const zfsDriver = "zfs";
 export const cephDriver = "ceph";
 
-export const storageDrivers = [
-  {
-    label: "Directory",
-    value: dirDriver,
-  },
-  {
-    label: "Btrfs",
-    value: btrfsDriver,
-  },
-  {
-    label: "LVM",
-    value: lvmDriver,
-  },
-  {
-    label: "ZFS",
-    value: zfsDriver,
-  },
-  {
-    label: "Ceph",
-    value: cephDriver,
-  },
-];
+const storageDriverLabels: { [key: string]: string } = {
+  [dirDriver]: "Directory",
+  [btrfsDriver]: "Btrfs",
+  [lvmDriver]: "LVM",
+  [zfsDriver]: "ZFS",
+  [cephDriver]: "Ceph",
+};
+
+export const getStorageDriverOptions = (settings?: LxdSettings) => {
+  const serverSupportedStorageDrivers =
+    settings?.environment?.storage_supported_drivers || [];
+  const storageDriverOptions: OptionHTMLAttributes<HTMLOptionElement>[] = [];
+  for (const driver of serverSupportedStorageDrivers) {
+    const label = storageDriverLabels[driver.Name];
+    if (label) {
+      storageDriverOptions.push({ label, value: driver.Name });
+    }
+  }
+
+  return storageDriverOptions;
+};
 
 const storageDriverToSourceHelp: Record<string, string> = {
   dir: "Optional, path to an existing directory",