feat(web): partially adapt storage UI to queries (#1577)

Trello: https://trello.com/c/nV7mjrf9/

This is the first step towards adapting the storage code to use queries.
As this part of the code is rather complex, we decided to move as many
components as possible to TypeScript to have a kind of security net.

## What is included

* Add a set of types from from our OpenAPI docs (see #1564) in
`api/storage/types`.
* Add a set of storage UI types in `types/storage`. We should unify the
types, but let's do it later.
* Define a new `api/storage` module moving big chunks of the
`StorageClient` code.
* Define a set of queries under `queries/storage`.
* Adapt the `ProposalPage` component to use queries. It retrieves a lot
of information that injects to nested components.
* Convert `ProposalPage` and `InstallationDeviceField` to TypeScript.

## What is missing

* As you may see, the front end is not building. That problems (and
other subtle bugs) will be fixed as we adapt the rest of storage
components to TypeScript. So a bunch of additional pull requests will
follow.
* Additionally, we are removing all those skeletons from the UI. We will
use a unified mechanism.

web/src/api/storage.ts

@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) [2024] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of version 2 of the GNU General Public License as published
+ * by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, contact SUSE LLC.
+ *
+ * To contact SUSE LLC about this file by physical or electronic mail, you may
+ * find current contact information at www.suse.com.
+ */
+
+import { post } from "~/api/http";
+
+/**
+ * Starts the storage probing process.
+ */
+const probe = (): Promise<any> => post("/api/storage/probe");
+
+export {
+  probe
+}

web/src/api/storage/devices.ts

@@ -0,0 +1,162 @@
+/*
+ * Copyright (c) [2024] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of version 2 of the GNU General Public License as published
+ * by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, contact SUSE LLC.
+ *
+ * To contact SUSE LLC about this file by physical or electronic mail, you may
+ * find current contact information at www.suse.com.
+ */
+
+import { get } from "~/api/http";
+import { Component, Device, DevicesDirtyResponse, Drive, Filesystem, LvmLv, LvmVg, Md, Multipath, Partition, PartitionTable, Raid } from "./types";
+import { StorageDevice } from "~/types/storage";
+
+/**
+ * Returns the list of devices in the given scope
+ *
+ * @param scope - "system": devices in the current state of the system; "result":
+ *   devices in the proposal ("stage")
+ */
+const fetchDevices = async (scope: "result" | "system") => {
+  const buildDevice = (jsonDevice: Device, jsonDevices: Device[]) => {
+    const buildDefaultDevice = (): StorageDevice => {
+      return {
+        sid: 0,
+        name: "",
+        description: "",
+        isDrive: false,
+        type: "drive",
+      };
+    };
+
+    const buildCollectionFromNames = (names: string[]): StorageDevice[] => {
+      return names.map((name) => ({ ...buildDefaultDevice(), name }));
+    };
+
+    const buildCollection = (sids: number[], jsonDevices: Device[]): StorageDevice[] => {
+      if (sids === null || sids === undefined) return [];
+
+      return sids.map((sid) =>
+        buildDevice(
+          jsonDevices.find((dev) => dev.deviceInfo?.sid === sid),
+          jsonDevices,
+        ),
+      );
+    };
+
+    const addDriveInfo = (device: StorageDevice, info: Drive) => {
+      device.isDrive = true;
+      device.type = info.type;
+      device.vendor = info.vendor;
+      device.model = info.model;
+      device.driver = info.driver;
+      device.bus = info.bus;
+      device.busId = info.busId;
+      device.transport = info.transport;
+      device.sdCard = info.info.sdCard;
+      device.dellBOSS = info.info.dellBOSS;
+    };
+
+    const addRaidInfo = (device: StorageDevice, info: Raid) => {
+      device.devices = buildCollectionFromNames(info.devices);
+    };
+
+    const addMultipathInfo = (device: StorageDevice, info: Multipath) => {
+      device.wires = buildCollectionFromNames(info.wires);
+    };
+
+    const addMDInfo = (device: StorageDevice, info: Md) => {
+      device.type = "md";
+      device.level = info.level;
+      device.uuid = info.uuid;
+      device.devices = buildCollection(info.devices, jsonDevices);
+    };
+
+    const addPartitionInfo = (device: StorageDevice, info: Partition) => {
+      device.type = "partition";
+      device.isEFI = info.efi;
+    };
+
+    const addVgInfo = (device: StorageDevice, info: LvmVg) => {
+      device.type = "lvmVg";
+      device.size = info.size;
+      device.physicalVolumes = buildCollection(info.physicalVolumes, jsonDevices);
+      device.logicalVolumes = buildCollection(info.logicalVolumes, jsonDevices);
+    };
+
+    const addLvInfo = (device: StorageDevice, _info: LvmLv) => {
+      device.type = "lvmLv";
+    };
+
+    const addPTableInfo = (device: StorageDevice, tableInfo: PartitionTable) => {
+      const partitions = buildCollection(tableInfo.partitions, jsonDevices);
+      device.partitionTable = {
+        type: tableInfo.type,
+        partitions,
+        unpartitionedSize: device.size - partitions.reduce((s, p) => s + p.size, 0),
+        unusedSlots: tableInfo.unusedSlots.map((s) => Object.assign({}, s)),
+      };
+    };
+
+    const addFilesystemInfo = (device: StorageDevice, filesystemInfo: Filesystem) => {
+      const buildMountPath = (path: string) => (path.length > 0 ? path : undefined);
+      const buildLabel = (label: string) => (label.length > 0 ? label : undefined);
+      device.filesystem = {
+        sid: filesystemInfo.sid,
+        type: filesystemInfo.type,
+        mountPath: buildMountPath(filesystemInfo.mountPath),
+        label: buildLabel(filesystemInfo.label),
+      };
+    };
+
+    const addComponentInfo = (device: StorageDevice, info: Component) => {
+      device.component = {
+        type: info.type,
+        deviceNames: info.deviceNames,
+      };
+    };
+
+    const device = buildDefaultDevice();
+
+    const process = (jsonProperty: string, method: Function) => {
+      const info = jsonDevice[jsonProperty];
+      if (info === undefined || info === null) return;
+
+      method(device, info);
+    };
+
+    process("deviceInfo", Object.assign);
+    process("drive", addDriveInfo);
+    process("raid", addRaidInfo);
+    process("multipath", addMultipathInfo);
+    process("md", addMDInfo);
+    process("blockDevice", Object.assign);
+    process("partition", addPartitionInfo);
+    process("lvmVg", addVgInfo);
+    process("lvmLv", addLvInfo);
+    process("partitionTable", addPTableInfo);
+    process("filesystem", addFilesystemInfo);
+    process("component", addComponentInfo);
+
+    return device;
+  };
+
+  const jsonDevices: Device[] = await get(`/api/storage/devices/${scope}`);
+  return jsonDevices.map((d) => buildDevice(d, jsonDevices));
+}
+
+const fetchDevicesDirty = (): Promise<DevicesDirtyResponse> => get("/api/storage/devices/dirty");
+
+export { fetchDevices, fetchDevicesDirty };

web/src/api/storage/proposal.ts

@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) [2024] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of version 2 of the GNU General Public License as published
+ * by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, contact SUSE LLC.
+ *
+ * To contact SUSE LLC about this file by physical or electronic mail, you may
+ * find current contact information at www.suse.com.
+ */
+
+import { get, put } from "../http";
+import { Action, ProductParams, ProposalSettings, ProposalSettingsPatch, Volume } from "./types";
+
+const fetchUsableDevices = (): Promise<number[]> => get(`/api/storage/proposal/usable_devices`);
+
+const fetchProductParams = (): Promise<ProductParams> => get("/api/storage/product/params");
+
+const fetchDefaultVolume = (mountPath: string): Promise<Volume | undefined> => {
+  const path = encodeURIComponent(mountPath);
+  return get(`/api/storage/product/volume_for?mount_path=${path}`);
+};
+
+const fetchSettings = (): Promise<ProposalSettings> => get("/api/storage/proposal/settings");
+
+const fetchActions = (): Promise<Action[]> => get("/api/storage/proposal/actions");
+
+const calculate = (settings: ProposalSettingsPatch) => put("/api/storage/proposal/settings", settings);
+
+export {
+  fetchUsableDevices,
+  fetchProductParams,
+  fetchDefaultVolume,
+  fetchSettings,
+  fetchActions,
+  calculate,
+}