objectstores storage management (UI+API)

client/src/api/datasets.ts

@@ -47,25 +47,21 @@ export async function fetchDatasetDetails(params: { id: string }): Promise<Datas
     return data as unknown as DatasetDetails;
 }
 
-const updateHistoryDataset = fetcher.path("/api/histories/{history_id}/contents/{type}s/{id}").method("put").create();
+const updateDataset = fetcher.path("/api/datasets/{dataset_id}").method("put").create();
 
-export async function undeleteHistoryDataset(historyId: string, datasetId: string) {
-    const { data } = await updateHistoryDataset({
-        history_id: historyId,
+export async function undeleteHistoryDataset(datasetId: string) {
+    const { data } = await updateDataset({
         id: datasetId,
         type: "dataset",
         deleted: false,
     });
     return data;
 }
 
-const deleteHistoryDataset = fetcher
-    .path("/api/histories/{history_id}/contents/{type}s/{id}")
-    .method("delete")
-    .create();
+const deleteDataset = fetcher.path("/api/datasets/{dataset_id}").method("delete").create();
 
-export async function purgeHistoryDataset(historyId: string, datasetId: string) {
-    const { data } = await deleteHistoryDataset({ history_id: historyId, id: datasetId, type: "dataset", purge: true });
+export async function purgeHistoryDataset(datasetId: string) {
+    const { data } = await deleteDataset({ id: datasetId, purge: true });
     return data;
 }
 

client/src/api/users.ts

@@ -3,6 +3,7 @@ import { fetcher } from "@/api/schema";
 export const createApiKey = fetcher.path("/api/users/{user_id}/api_key").method("post").create();
 export const deleteUser = fetcher.path("/api/users/{user_id}").method("delete").create();
 export const fetchQuotaUsages = fetcher.path("/api/users/{user_id}/usage").method("get").create();
+export const fetchObjectStoreUsages = fetcher.path("/api/users/{user_id}/objectstore_usage").method("get").create();
 export const recalculateDiskUsage = fetcher.path("/api/users/current/recalculate_disk_usage").method("put").create();
 export const recalculateDiskUsageByUserId = fetcher
     .path("/api/users/{user_id}/recalculate_disk_usage")

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

@@ -20,14 +20,22 @@ const texts = reactive({
         icon: "fas fa-broom fa-6x",
         buttonText: localize("Free up disk usage"),
     },
-    explore: {
-        title: localize("Visually explore your disk usage"),
+    explore_by_history: {
+        title: localize("Visually explore your disk usage by history"),
         description: localize(
-            "Want to know what histories or datasets take up the most space in your account? Here you can explore your disk usage in a visual way."
+            "Want to know what histories or datasets take up the most space in your account? Here you can explore your disk usage in a visual way by history."
         ),
         icon: "fas fa-chart-pie fa-6x",
         buttonText: localize("Explore now"),
     },
+    explore_by_objectstore: {
+        title: localize("Visually explore your disk usage by object store"),
+        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."
+        ),
+        icon: "fas fa-hdd fa-6x",
+        buttonText: localize("Explore now"),
+    },
 });
 
 function goToStorageManager() {
@@ -37,6 +45,10 @@ function goToStorageManager() {
 function goToHistoriesOverview() {
     router.push({ name: "HistoriesOverview" });
 }
+
+function goToObjectStoresOverview() {
+    router.push({ name: "ObjectStoresOverview" });
+}
 </script>
 
 <template>
@@ -60,10 +72,19 @@ function goToHistoriesOverview() {
         <IconCard
             class="mx-auto mb-3"
             data-description="explore usage card"
-            :title="texts.explore.title"
-            :description="texts.explore.description"
-            :icon="texts.explore.icon"
-            :button-text="texts.explore.buttonText"
+            :title="texts.explore_by_history.title"
+            :description="texts.explore_by_history.description"
+            :icon="texts.explore_by_history.icon"
+            :button-text="texts.explore_by_history.buttonText"
             @onButtonClick="goToHistoriesOverview" />
+
+        <IconCard
+            class="mx-auto mb-3"
+            data-description="explore object store usage card"
+            :title="texts.explore_by_objectstore.title"
+            :description="texts.explore_by_objectstore.description"
+            :icon="texts.explore_by_objectstore.icon"
+            :button-text="texts.explore_by_objectstore.buttonText"
+            @onButtonClick="goToObjectStoresOverview" />
     </div>
 </template>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { ref } from "vue";
 import { useRouter } from "vue-router/composables";
 
 import { useConfirmDialog } from "@/composables/confirmDialog";
@@ -8,13 +8,14 @@ import { useHistoryStore } from "@/stores/historyStore";
 import localize from "@/utils/localization";
 
 import type { DataValuePoint } from "./Charts";
-import { bytesLabelFormatter, bytesValueFormatter } from "./Charts/formatters";
 import { fetchAllHistoriesSizeSummary, type ItemSizeSummary, purgeHistoryById, undeleteHistoryById } from "./service";
+import { byteFormattingForChart, useDataLoading } from "./util";
 
 import BarChart from "./Charts/BarChart.vue";
 import OverviewPage from "./OverviewPage.vue";
 import RecoverableItemSizeTooltip from "./RecoverableItemSizeTooltip.vue";
 import SelectedItemActions from "./SelectedItemActions.vue";
+import WarnDeletedHistories from "./WarnDeletedHistories.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
 const historyStore = useHistoryStore();
@@ -25,17 +26,16 @@ const { confirm } = useConfirmDialog();
 const historiesSizeSummaryMap = new Map<string, ItemSizeSummary>();
 const topTenHistoriesBySizeData = ref<DataValuePoint[] | null>(null);
 const activeVsArchivedVsDeletedTotalSizeData = ref<DataValuePoint[] | null>(null);
-const isLoading = ref(true);
 const numberOfHistoriesToDisplayOptions = [10, 20, 50];
 const numberOfHistoriesToDisplay = ref(numberOfHistoriesToDisplayOptions[0]);
 
-onMounted(async () => {
-    isLoading.value = true;
+const { isLoading, loadDataOnMount } = useDataLoading();
+
+loadDataOnMount(async () => {
     const allHistoriesSizeSummary = await fetchAllHistoriesSizeSummary();
     allHistoriesSizeSummary.forEach((history) => historiesSizeSummaryMap.set(history.id, history));
 
     buildGraphsData();
-    isLoading.value = false;
 });
 
 function buildGraphsData() {
@@ -155,13 +155,7 @@ async function onPermanentlyDeleteHistory(historyId: string) {
         <p class="text-justify">
             Here you can find various graphs displaying the storage size taken by <b>all your histories</b>.
         </p>
-        <p class="text-justify">
-            Note: these graphs include <b>deleted histories</b>. Remember that, even if you delete histories, they still
-            take up storage space. However, you can free up the storage space by permanently deleting them from the
-            <i>Discarded Items</i> section of the
-            <router-link :to="{ name: 'StorageManager' }"><b>Storage Manager</b></router-link> page or by selecting them
-            individually in the graph and clicking the <b>Permanently Delete</b> button.
-        </p>
+        <WarnDeletedHistories />
 
         <div v-if="isLoading" class="text-center">
             <LoadingSpan class="mt-5" :message="localize('Loading your storage data. This may take a while...')" />
@@ -176,8 +170,7 @@ async function onPermanentlyDeleteHistory(historyId: string) {
                 "
                 :data="topTenHistoriesBySizeData"
                 :enable-selection="true"
-                :label-formatter="bytesLabelFormatter"
-                :value-formatter="bytesValueFormatter">
+                v-bind="byteFormattingForChart">
                 <template v-slot:title>
                     <b>{{ localize(`Top ${numberOfHistoriesToDisplay} Histories by Size`) }}</b>
                     <b-form-select
@@ -218,8 +211,7 @@ async function onPermanentlyDeleteHistory(historyId: string) {
                     )
                 "
                 :data="activeVsArchivedVsDeletedTotalSizeData"
-                :label-formatter="bytesLabelFormatter"
-                :value-formatter="bytesValueFormatter">
+                v-bind="byteFormattingForChart">
                 <template v-slot:tooltip="{ data }">
                     <RecoverableItemSizeTooltip
                         v-if="data"