Merge pull request #18525 from davelopez/24.1_fix_use_label_for_objec…

…t_stores_usage_display

[24.1] Use name instead of ID for displaying object stores + revise user-facing language in UI

client/src/components/Common/FilterObjectStoreLink.vue

@@ -5,33 +5,36 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { computed, ref } from "vue";
 
 import { ConcreteObjectStoreModel } from "@/api";
+import { useObjectStoreStore } from "@/stores/objectStoreStore";
 
 import ObjectStoreSelect from "./ObjectStoreSelect.vue";
 import SelectModal from "@/components/Dataset/DatasetStorage/SelectModal.vue";
 
 library.add(faTimes);
 
 interface FilterObjectStoreLinkProps {
-    value: String | null;
+    value?: string;
     objectStores: ConcreteObjectStoreModel[];
 }
 
 const props = defineProps<FilterObjectStoreLinkProps>();
 
+const { getObjectStoreNameById } = useObjectStoreStore();
+
 const showModal = ref(false);
 
 const emit = defineEmits<{
-    (e: "change", objectStoreId: string | null): void;
+    (e: "change", objectStoreId?: string): void;
 }>();
 
-function onSelect(objectStoreId: string | null) {
+function onSelect(objectStoreId?: string) {
     emit("change", objectStoreId);
     showModal.value = false;
 }
 
 const selectionText = computed(() => {
     if (props.value) {
-        return props.value;
+        return getObjectStoreNameById(props.value);
     } else {
         return "(any)";
     }
@@ -45,7 +48,7 @@ const selectionText = computed(() => {
         </SelectModal>
         <b-link href="#" @click="showModal = true">{{ selectionText }}</b-link>
         <span v-if="value" v-b-tooltip.hover title="Remove Filter">
-            <FontAwesomeIcon icon="times" @click="onSelect(null)" />
+            <FontAwesomeIcon icon="times" @click="onSelect(undefined)" />
         </span>
     </span>
 </template>

client/src/components/FileSources/FileSourceTypeSpan.vue

@@ -2,7 +2,7 @@
 import { computed } from "vue";
 
 const MESSAGES = {
-    posix: "This is a simple path based object store that assumes the all the relevant paths are already mounted on the Galaxy server and target worker nodes.",
+    posix: "This is a simple path based storage location that assumes the all the relevant paths are already mounted on the Galaxy server and target worker nodes.",
     s3fs: "This is an remote file source plugin based on the Amazon Simple Storage Service (S3) interface. The AWS interface has become an industry standard and many storage vendors support it and use it to expose 'object' based storage.",
 };
 

client/src/components/ObjectStore/Instances/ManageIndex.vue

@@ -59,9 +59,9 @@ function reload() {
             :fixed="true"
             :show-empty="true">
             <template v-slot:empty>
-                <LoadingSpan v-if="loading" message="Loading object store instances" />
+                <LoadingSpan v-if="loading" message="Loading storage location instances" />
                 <b-alert v-else id="no-object-store-instances" variant="info" show>
-                    <div>No object store instances found, click the create button to configure a new one.</div>
+                    <div>No storage location instances found, click the create button to configure a new one.</div>
                 </b-alert>
             </template>
             <template v-slot:cell(badges)="row">

client/src/components/ObjectStore/ObjectStoreTypeSpan.vue

@@ -4,13 +4,13 @@ import { computed } from "vue";
 import { ObjectStoreTemplateType } from "@/api/objectStores";
 
 const MESSAGES = {
-    aws_s3: "This is an object store based on the Amazon Simple Storage Service (S3). Data here is hosted by Amazon.",
+    aws_s3: "This is a storage location based on the Amazon Simple Storage Service (S3). Data here is hosted by Amazon.",
     azure_blob:
-        "This is a Microsoft Azure Blob based object store. More information on Microsoft's Azure Blob Storage can be found at https://azure.microsoft.com/en-us/products/storage/blobs/.",
-    disk: "This is a simple path based object store that assumes the all the relevant paths are already mounted on the Galaxy server and target worker nodes.",
-    boto3: "This is an object store based on the Amazon Simple Storage Service (S3) interface, but likely not stored by Amazon. The AWS interface has become an industry standard and many storage vendors support it and use it to expose object based storage.",
+        "This is a Microsoft Azure Blob based storage location. More information on Microsoft's Azure Blob Storage can be found at https://azure.microsoft.com/en-us/products/storage/blobs/.",
+    disk: "This is a simple path based storage location that assumes the all the relevant paths are already mounted on the Galaxy server and target worker nodes.",
+    boto3: "This is a storage location based on the Amazon Simple Storage Service (S3) interface, but likely not stored by Amazon. The AWS interface has become an industry standard and many storage vendors support it and use it to expose object based storage.",
     generic_s3:
-        "This is an object store based on the Amazon Simple Storage Service (S3) interface, but likely not stored by Amazon. The AWS interface has become an industry standard and many storage vendors support it and use it to expose object based storage.",
+        "This is a storage location based on the Amazon Simple Storage Service (S3) interface, but likely not stored by Amazon. The AWS interface has become an industry standard and many storage vendors support it and use it to expose object based storage.",
 };
 
 interface Props {

client/src/components/User/DiskUsage/StorageDashboard.vue

@@ -29,9 +29,9 @@ const texts = reactive({
         buttonText: localize("Explore now"),
     },
     explore_by_objectstore: {
-        title: localize("Visually explore your disk usage by object store"),
+        title: localize("Visually explore your disk usage by storage location"),
         description: localize(
-            "Want to know how the space in your account is being distributed by object store? Here you can explore your disk usage in a visual way by object store."
+            "Want to know how the space in your account is being distributed across storage locations? Here you can explore your disk usage in a visual way by where it is physically stored."
         ),
         icon: "fas fa-hdd fa-6x",
         buttonText: localize("Explore now"),

client/src/components/User/DiskUsage/Visualizations/HistoryStorageOverview.vue

@@ -51,14 +51,14 @@ const { isLoading, loadDataOnMount } = useDataLoading();
 const { isAdvanced, toggleAdvanced, inputGroupClasses, faAngleDoubleDown, faAngleDoubleUp } = useAdvancedFiltering();
 const { selectableObjectStores, hasSelectableObjectStores } = useSelectableObjectStores();
 
-const objectStore = ref<string | null>(null);
+const objectStore = ref<string>();
 
 const canEditHistory = computed(() => {
     const history = getHistoryById(props.historyId);
     return (history && !history.purged && !history.archived) ?? false;
 });
 
-function onChangeObjectStore(value: string | null) {
+function onChangeObjectStore(value?: string) {
     objectStore.value = value;
     reloadDataFromServer();
 }
@@ -190,11 +190,11 @@ function onUndelete(datasetId: string) {
                                 </BFormSelect>
                             </BFormGroup>
                             <BFormGroup
-                                v-if="hasSelectableObjectStores"
+                                v-if="selectableObjectStores && hasSelectableObjectStores"
                                 id="input-group-object-store"
                                 label="Storage location:"
                                 label-for="input-object-store"
-                                description="This will constrain history size calculations to a particular object store.">
+                                description="This will constrain history size calculations to a particular storage location.">
                                 <FilterObjectStoreLink
                                     :object-stores="selectableObjectStores"
                                     :value="objectStore"

client/src/components/User/DiskUsage/Visualizations/ObjectStoreActions.vue

@@ -39,7 +39,7 @@ function onViewItem() {
                 variant="outline-primary"
                 size="sm"
                 class="mx-2"
-                :title="localize(`Go to the details of this object store`)"
+                :title="localize(`Go to the details of this storage location`)"
                 @click="onViewItem">
                 <FontAwesomeIcon :icon="viewDetailsIcon" />
             </BButton>

client/src/components/User/DiskUsage/Visualizations/ObjectStoreStorageOverview.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { useRouter } from "vue-router/composables";
 
+import { useObjectStoreStore } from "@/stores/objectStoreStore";
+import localize from "@/utils/localization";
+
 import { fetchObjectStoreContentsSizeSummary } from "./service";
 import { buildTopNDatasetsBySizeData, byteFormattingForChart, useDataLoading, useDatasetsToDisplay } from "./util";
 
@@ -19,6 +22,8 @@ const props = defineProps<Props>();
 
 const router = useRouter();
 
+const { getObjectStoreNameById } = useObjectStoreStore();
+
 const {
     numberOfDatasetsToDisplayOptions,
     numberOfDatasetsToDisplay,
@@ -69,11 +74,11 @@ function onUndelete(datasetId: string) {
 </script>
 
 <template>
-    <OverviewPage title="Object Store Storage Overview">
+    <OverviewPage title="Storage overview by location">
         <p class="text-justify">
-            Here you will find some Graphs displaying the storage taken by datasets in the object store:
-            <b>{{ objectStoreId }}</b
-            >. You can use these graphs to identify the datasets that take the most space in this object store.
+            Here you will find some Graphs displaying the storage taken by datasets in the storage location:
+            <b>{{ getObjectStoreNameById(objectStoreId) }}</b
+            >. You can use these graphs to identify the datasets that take the most space in this storage location.
         </p>
         <WarnDeletedDatasets />
         <div v-if="isLoading" class="text-center">

client/src/components/User/DiskUsage/Visualizations/ObjectStoresStorageOverview.vue

@@ -3,6 +3,7 @@ import { ref } from "vue";
 import { useRouter } from "vue-router/composables";
 
 import { fetchObjectStoreUsages } from "@/api/users";
+import { useObjectStoreStore } from "@/stores/objectStoreStore";
 import localize from "@/utils/localization";
 
 import type { DataValuePoint } from "./Charts";
@@ -19,14 +20,16 @@ const router = useRouter();
 
 const objectStoresBySizeData = ref<DataValuePoint[] | null>(null);
 
+const { getObjectStoreNameById } = useObjectStoreStore();
+
 const { isLoading, loadDataOnMount } = useDataLoading();
 
 loadDataOnMount(async () => {
     const { data } = await fetchObjectStoreUsages({ user_id: "current" });
     const objectStoresBySize = data.sort((a, b) => b.total_disk_usage - a.total_disk_usage);
     objectStoresBySizeData.value = objectStoresBySize.map((objectStore) => ({
         id: objectStore.object_store_id,
-        label: objectStore.object_store_id,
+        label: getObjectStoreNameById(objectStore.object_store_id) ?? objectStore.object_store_id,
         value: objectStore.total_disk_usage,
     }));
 });
@@ -36,10 +39,10 @@ function onViewObjectStore(objectStoreId: string) {
 }
 </script>
 <template>
-    <OverviewPage title="Object Stores Storage Overview">
+    <OverviewPage title="Storage overview by location">
         <p class="text-justify">
-            Here you can find various graphs displaying the storage size taken by all your histories grouped by object
-            store.
+            Here you can find various graphs displaying the storage size taken by all your histories grouped by where
+            they are physically stored.
         </p>
         <WarnDeletedHistories />
         <div v-if="isLoading" class="text-center">
@@ -50,14 +53,14 @@ function onViewObjectStore(objectStoreId: string) {
                 v-if="objectStoresBySizeData"
                 :description="
                     localize(
-                        `This graph displays how your Galaxy data is stored sorted into the object store is stored in. Click on a bar to see more information about the object store.`
+                        `This graph displays how your Galaxy data is stored sorted into the location is stored in. Click on a bar to see more information about the storage location.`
                     )
                 "
                 :data="objectStoresBySizeData"
                 :enable-selection="true"
                 v-bind="byteFormattingForChart">
                 <template v-slot:title>
-                    <b>{{ localize(`Object Stores by Usage`) }}</b>
+                    <b>{{ localize(`Storage locations by Usage`) }}</b>
                 </template>
                 <template v-slot:tooltip="{ data }">
                     <ShowObjectStore v-if="data" :object-store-id="data.id" />

client/src/components/User/DiskUsage/Visualizations/ShowObjectStore.vue

@@ -36,13 +36,13 @@ watch(
     }
 );
 fetch();
-const loadingMessage = "Loading object store details";
-const forWhat = "This object store is";
+const loadingMessage = "Loading storage location details";
+const forWhat = "This storage location is";
 </script>
 
 <template>
     <div style="width: 300px">
-        <LoadingSpan v-if="loading" :message="loadingMessage | localize" />
+        <LoadingSpan v-if="loading" v-localize :message="loadingMessage" />
         <DescribeObjectStore v-else-if="objectStore != null" :what="forWhat" :storage-info="objectStore">
         </DescribeObjectStore>
         <b-alert v-else-if="error" show variant="danger">{{ error }}</b-alert>

client/src/stores/objectStoreStore.ts

@@ -27,12 +27,18 @@ export const useObjectStoreStore = defineStore("objectStoreStore", () => {
         }
     }
 
+    function getObjectStoreNameById(objectStoreId: string): string | null {
+        const objectStore = selectableObjectStores.value?.find((store) => store.object_store_id === objectStoreId);
+        return objectStore?.name ?? null;
+    }
+
     loadObjectStores();
 
     return {
         isLoaded,
         isLoading,
         loadErrorMessage,
         selectableObjectStores,
+        getObjectStoreNameById,
     };
 });