From c743c58264eccc53df3147e535967a10511fa681 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Wed, 7 Feb 2024 12:26:54 -0500
Subject: [PATCH] Modernize DatasetStorage.vue.

---
 client/src/api/datasets.ts                    |   2 +
 client/src/api/index.ts                       |   5 +
 .../Dataset/DatasetStorage/DatasetStorage.vue | 129 ++++++++----------
 3 files changed, 67 insertions(+), 69 deletions(-)

diff --git a/client/src/api/datasets.ts b/client/src/api/datasets.ts
index 642aa0c03a22..63b8b5714d9c 100644
--- a/client/src/api/datasets.ts
+++ b/client/src/api/datasets.ts
@@ -38,6 +38,8 @@ export async function getDatasets(options: GetDatasetsOptions = {}) {
 
 export const fetchDataset = fetcher.path("/api/datasets/{dataset_id}").method("get").create();
 
+export const fetchDatasetStorage = fetcher.path("/api/datasets/{dataset_id}/storage").method("get").create();
+
 export async function fetchDatasetDetails(params: { id: string }): Promise<DatasetDetails> {
     const { data } = await fetchDataset({ dataset_id: params.id, view: "detailed" });
     // We know that the server will return a DatasetDetails object because of the view parameter
diff --git a/client/src/api/index.ts b/client/src/api/index.ts
index 0003833819fa..83da2479adbc 100644
--- a/client/src/api/index.ts
+++ b/client/src/api/index.ts
@@ -27,6 +27,11 @@ export type DatasetSummary = components["schemas"]["HDASummary"];
  */
 export type DatasetDetails = components["schemas"]["HDADetailed"];
 
+/**
+ * Contains storage (object store, quota, etc..) details for a dataset.
+ */
+export type DatasetStorageDetails = components["schemas"]["DatasetStorageDetails"];
+
 /**
  * Represents a HistoryDatasetAssociation with either summary or detailed information.
  */
diff --git a/client/src/components/Dataset/DatasetStorage/DatasetStorage.vue b/client/src/components/Dataset/DatasetStorage/DatasetStorage.vue
index 6e8dd47508e7..584f987f7ab1 100644
--- a/client/src/components/Dataset/DatasetStorage/DatasetStorage.vue
+++ b/client/src/components/Dataset/DatasetStorage/DatasetStorage.vue
@@ -1,3 +1,63 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+
+import { DatasetStorageDetails } from "@/api";
+import { fetchDatasetStorage } from "@/api/datasets";
+import { errorMessageAsString } from "@/utils/simple-error";
+
+import LoadingSpan from "@/components/LoadingSpan.vue";
+import DescribeObjectStore from "@/components/ObjectStore/DescribeObjectStore.vue";
+
+interface DatasetStorageProps {
+    datasetId: string;
+    datasetType: "hda" | "ldda";
+    includeTitle: boolean;
+}
+
+const props = withDefaults(defineProps<DatasetStorageProps>(), {
+    datasetType: "hda",
+    includeTitle: true,
+});
+
+const storageInfo = ref<DatasetStorageDetails | null>(null);
+const errorMessage = ref<string | null>(null);
+
+const discarded = computed(() => {
+    return storageInfo.value?.dataset_state == "discarded";
+});
+
+const deferred = computed(() => {
+    return storageInfo.value?.dataset_state == "deferred";
+});
+
+const sourceUri = computed(() => {
+    const sources = storageInfo.value?.sources;
+    if (!sources) {
+        return null;
+    }
+    const rootSources = sources.filter((source) => !source.extra_files_path);
+    if (rootSources.length == 0) {
+        return null;
+    }
+    return rootSources[0]?.source_uri;
+});
+
+watch(
+    props,
+    async () => {
+        const datasetId = props.datasetId;
+        const datasetType = props.datasetType;
+        try {
+            const { data } = await fetchDatasetStorage({ dataset_id: datasetId, hda_ldda: datasetType });
+            storageInfo.value = data;
+        } catch (error) {
+            errorMessage.value = errorMessageAsString(error);
+        }
+    },
+    { immediate: true }
+);
+</script>
+
 <template>
     <div>
         <h2 v-if="includeTitle" class="h-md">Dataset Storage</h2>
@@ -20,72 +80,3 @@
         </div>
     </div>
 </template>
-
-<script>
-import axios from "axios";
-import LoadingSpan from "components/LoadingSpan";
-import DescribeObjectStore from "components/ObjectStore/DescribeObjectStore";
-import { getAppRoot } from "onload/loadConfig";
-import { errorMessageAsString } from "utils/simple-error";
-
-export default {
-    components: {
-        DescribeObjectStore,
-        LoadingSpan,
-    },
-    props: {
-        datasetId: {
-            type: String,
-        },
-        datasetType: {
-            type: String,
-            default: "hda",
-        },
-        includeTitle: {
-            type: Boolean,
-            default: true,
-        },
-    },
-    data() {
-        return {
-            storageInfo: null,
-            errorMessage: null,
-        };
-    },
-    computed: {
-        discarded() {
-            return this.storageInfo.dataset_state == "discarded";
-        },
-        deferred() {
-            return this.storageInfo.dataset_state == "deferred";
-        },
-        sourceUri() {
-            const sources = this.storageInfo.sources;
-            if (!sources) {
-                return null;
-            }
-            const rootSources = sources.filter((source) => !source.extra_files_path);
-            if (rootSources.length == 0) {
-                return null;
-            }
-            return rootSources[0].source_uri;
-        },
-    },
-    created() {
-        const datasetId = this.datasetId;
-        const datasetType = this.datasetType;
-        axios
-            .get(`${getAppRoot()}api/datasets/${datasetId}/storage`, { hda_ldda: datasetType })
-            .then(this.handleResponse)
-            .catch((errorMessage) => {
-                this.errorMessage = errorMessageAsString(errorMessage);
-            });
-    },
-    methods: {
-        handleResponse(response) {
-            const storageInfo = response.data;
-            this.storageInfo = storageInfo;
-        },
-    },
-};
-</script>