Add ability to filter by object store in History storage summary.

client/src/components/User/DiskUsage/Visualizations/Charts/BarChart.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { BCard } from "bootstrap-vue";
 import * as d3 from "d3";
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, nextTick, onMounted, ref, watch } from "vue";
 
 import type { DataValuePoint } from ".";
 
@@ -63,8 +63,14 @@ watch(
         props.valueFormatter,
     ],
     () => {
-        clearChart();
-        renderBarChart();
+        // make sure v-if to conditionally display the div we're rendering this in
+        // is available in the DOM before actually doing the rendering. Without
+        // nextTick you cannot go from empty data -> chart when tweaking filtering
+        // parameters.
+        nextTick(() => {
+            clearChart();
+            renderBarChart();
+        });
     }
 );
 
@@ -313,6 +319,7 @@ function setTooltipPosition(mouseX: number, mouseY: number): void {
                 </slot>
             </h3>
         </template>
+        <slot name="options" />
         <div v-if="hasData">
             <p class="chart-description">{{ description }}</p>
             <div class="chart-area">

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

@@ -1,19 +1,23 @@
 <script setup lang="ts">
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BButton, BForm, BFormGroup, BFormSelect,BInputGroup } from "bootstrap-vue";
 import { ref } from "vue";
 import { useRouter } from "vue-router/composables";
 
+import { useSelectableObjectStores } from "@/composables/useObjectStores";
 import { useHistoryStore } from "@/stores/historyStore";
 import localize from "@/utils/localization";
 
 import type { DataValuePoint } from "./Charts";
 import { fetchHistoryContentsSizeSummary, type ItemSizeSummary } from "./service";
-import { buildTopNDatasetsBySizeData, byteFormattingForChart, useDataLoading, useDatasetsToDisplay } from "./util";
+import { buildTopNDatasetsBySizeData, byteFormattingForChart, useAdvancedFiltering,useDataLoading, useDatasetsToDisplay } from "./util";
 
 import BarChart from "./Charts/BarChart.vue";
 import OverviewPage from "./OverviewPage.vue";
 import RecoverableItemSizeTooltip from "./RecoverableItemSizeTooltip.vue";
 import SelectedItemActions from "./SelectedItemActions.vue";
 import WarnDeletedDatasets from "./WarnDeletedDatasets.vue";
+import FilterObjectStoreLink from "@/components/Common/FilterObjectStoreLink.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
 const router = useRouter();
@@ -38,16 +42,30 @@ const {
 } = useDatasetsToDisplay();
 
 const { isLoading, loadDataOnMount } = useDataLoading();
+const { isAdvanced, toggleAdvanced, inputGroupClasses, faAngleDoubleDown, faAngleDoubleUp } = useAdvancedFiltering();
+const { selectableObjectStores, hasSelectableObjectStores } = useSelectableObjectStores();
 
-loadDataOnMount(async () => {
+const objectStore = ref<string | null>(null);
+
+function onChangeObjectStore(value: string | null) {
+    objectStore.value = value;
+    reloadDataFromServer();
+}
+
+async function reloadDataFromServer() {
+    console.log("reloading with " + objectStore.value);
     const allDatasetsInHistorySizeSummary = await fetchHistoryContentsSizeSummary(
         props.historyId,
-        numberOfDatasetsLimit
+        numberOfDatasetsLimit,
+        objectStore.value,
     );
+    datasetsSizeSummaryMap.clear();
     allDatasetsInHistorySizeSummary.forEach((dataset) => datasetsSizeSummaryMap.set(dataset.id, dataset));
 
     buildGraphsData();
-});
+}
+
+loadDataOnMount(reloadDataFromServer);
 
 function buildGraphsData() {
     const allDatasetsInHistorySizeSummary = Array.from(datasetsSizeSummaryMap.values());
@@ -124,15 +142,55 @@ function onUndelete(datasetId: string) {
                 v-bind="byteFormattingForChart">
                 <template v-slot:title>
                     <b>{{ localize(`Top ${numberOfDatasetsToDisplay} Datasets by Size`) }}</b>
-                    <b-form-select
-                        v-model="numberOfDatasetsToDisplay"
-                        :options="numberOfDatasetsToDisplayOptions"
-                        :disabled="isLoading"
-                        title="Number of datasets to show"
-                        class="float-right w-auto"
-                        size="sm"
-                        @change="buildGraphsData()">
-                    </b-form-select>
+                    <BInputGroup size="sm" :class="inputGroupClasses">
+                        <BFormSelect
+                            v-if="!isAdvanced"
+                            v-model="numberOfDatasetsToDisplay"
+                            :options="numberOfDatasetsToDisplayOptions"
+                            :disabled="isLoading"
+                            title="Number of histories to show"
+                            size="sm"
+                            @change="buildGraphsData()">
+                        </BFormSelect>
+                        <BButton
+                            v-b-tooltip.hover.bottom.noninteractive
+                            aria-haspopup="true"
+                            size="sm"
+                            title="Toggle Advanced Filtering"
+                            data-description="wide toggle advanced filter"
+                            @click="toggleAdvanced">
+                            <FontAwesomeIcon :icon="isAdvanced ? faAngleDoubleUp : faAngleDoubleDown" />
+                        </BButton>
+                    </BInputGroup>
+                </template>
+                <template v-slot:options>
+                    <div v-if="isAdvanced" class="clear-fix">
+                        <BForm>
+                            <BFormGroup
+                                id="input-group-num-histories"
+                                label="Number of histories:"
+                                label-for="input-num-histories"
+                                description="This is the maximum number of histories that will be displayed."
+                            >
+                                <BFormSelect
+                                    v-model="numberOfDatasetsToDisplay"
+                                    :options="numberOfDatasetsToDisplayOptions"
+                                    :disabled="isLoading"
+                                    title="Number of histories to show"
+                                    @change="buildGraphsData()">
+                                </BFormSelect>
+                            </BFormGroup>
+                            <BFormGroup
+                                v-if="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."
+                            >
+                                <FilterObjectStoreLink :object-stores="selectableObjectStores" :value="objectStore" @change="onChangeObjectStore" />
+                            </BFormGroup>
+                        </BForm>
+                    </div>
                 </template>
                 <template v-slot:tooltip="{ data }">
                     <RecoverableItemSizeTooltip

client/src/components/User/DiskUsage/Visualizations/service.ts

@@ -33,14 +33,22 @@ export async function fetchAllHistoriesSizeSummary(): Promise<ItemSizeSummary[]>
     return allHistoriesTakingStorageResponse;
 }
 
-export async function fetchHistoryContentsSizeSummary(historyId: string, limit = 5000) {
+export async function fetchHistoryContentsSizeSummary(historyId: string, limit : number = 5000, objectStoreId : string | null = null) {
+    const q = ["purged", "history_content_type"];
+    const qv = ["false", "dataset"];
+
+    if (objectStoreId) {
+        q.push("object_store_id");
+        qv.push(objectStoreId);
+    }
+
     const response = await datasetsFetcher({
         history_id: historyId,
         keys: itemSizeSummaryFields,
         limit,
         order: "size-dsc",
-        q: ["purged", "history_content_type"],
-        qv: ["false", "dataset"],
+        q: q,
+        qv: qv,
     });
     return response.data as unknown as ItemSizeSummary[];
 }

client/src/components/User/DiskUsage/Visualizations/util.ts

@@ -1,4 +1,6 @@
-import { onMounted, ref } from "vue";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faAngleDoubleDown,faAngleDoubleUp } from "@fortawesome/free-solid-svg-icons";
+import { computed, onMounted, ref } from "vue";
 
 import { useConfirmDialog } from "@/composables/confirmDialog";
 import { useToast } from "@/composables/toast";
@@ -8,6 +10,8 @@ import type { DataValuePoint } from "./Charts";
 import { bytesLabelFormatter, bytesValueFormatter } from "./Charts/formatters";
 import { type ItemSizeSummary, purgeDatasetById, undeleteDatasetById } from "./service";
 
+library.add(faAngleDoubleUp, faAngleDoubleDown);
+
 interface DataLoader {
     (): Promise<void>;
 }
@@ -117,3 +121,23 @@ export const byteFormattingForChart = {
     labelFormatter: bytesLabelFormatter,
     valueFormatter: bytesValueFormatter,
 };
+
+export function useAdvancedFiltering() {
+    const isAdvanced = ref<boolean>(false);
+
+    function toggleAdvanced() {
+        isAdvanced.value = !isAdvanced.value;
+    }
+
+    const inputGroupClasses = computed(() => {
+        return ["float-right", "auto"];
+    });
+
+    return {
+        faAngleDoubleUp,
+        faAngleDoubleDown,
+        isAdvanced,
+        inputGroupClasses,
+        toggleAdvanced,
+    };
+}