Merge pull request #16945 from davelopez/storage_dashboard_set_curren…

…t_history Allow switching histories from Storage Dashboard Visualizations
galaxyproject · Oct 31, 2023 · 5b44e84 · 5b44e84
2 parents 67cf270 + 1a3e0a1
commit 5b44e84
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 5 deletions.
diff --git a/client/src/components/User/DiskUsage/Visualizations/HistoriesStorageOverview.vue b/client/src/components/User/DiskUsage/Visualizations/HistoriesStorageOverview.vue
@@ -4,6 +4,7 @@ import { useRouter } from "vue-router/composables";
 
 import { useConfirmDialog } from "@/composables/confirmDialog";
 import { useToast } from "@/composables/toast";
+import { useHistoryStore } from "@/stores/historyStore";
 import localize from "@/utils/localization";
 
 import type { DataValuePoint } from "./Charts";
@@ -16,6 +17,7 @@ import SelectedItemActions from "./SelectedItemActions.vue";
 import Heading from "@/components/Common/Heading.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
+const historyStore = useHistoryStore();
 const router = useRouter();
 const { success: successToast, error: errorToast } = useToast();
 const { confirm } = useConfirmDialog();
@@ -98,6 +100,11 @@ function isArchivedDataPoint(dataPoint: DataValuePoint): boolean {
     return false;
 }
 
+async function onSetCurrentHistory(historyId: string) {
+    await historyStore.setCurrentHistory(historyId);
+    router.push({ path: "/" });
+}
+
 function onViewHistory(historyId: string) {
     router.push({ name: "HistoryOverview", params: { historyId } });
 }
@@ -187,6 +194,7 @@ async function onPermanentlyDeleteHistory(historyId: string) {
                 </template>
                 <template v-slot:tooltip="{ data }">
                     <RecoverableItemSizeTooltip
+                        v-if="data"
                         :data="data"
                         :is-recoverable="isRecoverableDataPoint(data)"
                         :is-archived="isArchivedDataPoint(data)" />
@@ -197,6 +205,7 @@ async function onPermanentlyDeleteHistory(historyId: string) {
                         item-type="history"
                         :is-recoverable="isRecoverableDataPoint(data)"
                         :is-archived="isArchivedDataPoint(data)"
+                        @set-current-history="onSetCurrentHistory"
                         @view-item="onViewHistory"
                         @undelete-item="onUndeleteHistory"
                         @permanently-delete-item="onPermanentlyDeleteHistory" />
@@ -214,7 +223,10 @@ async function onPermanentlyDeleteHistory(historyId: string) {
                 :label-formatter="bytesLabelFormatter"
                 :value-formatter="bytesValueFormatter">
                 <template v-slot:tooltip="{ data }">
-                    <RecoverableItemSizeTooltip :data="data" :is-recoverable="isRecoverableDataPoint(data)" />
+                    <RecoverableItemSizeTooltip
+                        v-if="data"
+                        :data="data"
+                        :is-recoverable="isRecoverableDataPoint(data)" />
                 </template>
             </BarChart>
         </div>

diff --git a/client/src/components/User/DiskUsage/Visualizations/HistoryStorageOverview.vue b/client/src/components/User/DiskUsage/Visualizations/HistoryStorageOverview.vue
@@ -196,7 +196,10 @@ async function onPermanentlyDeleteDataset(datasetId: string) {
                     </b-form-select>
                 </template>
                 <template v-slot:tooltip="{ data }">
-                    <RecoverableItemSizeTooltip :data="data" :is-recoverable="isRecoverableDataPoint(data)" />
+                    <RecoverableItemSizeTooltip
+                        v-if="data"
+                        :data="data"
+                        :is-recoverable="isRecoverableDataPoint(data)" />
                 </template>
                 <template v-slot:selection="{ data }">
                     <SelectedItemActions
@@ -221,7 +224,10 @@ async function onPermanentlyDeleteDataset(datasetId: string) {
                 :label-formatter="bytesLabelFormatter"
                 :value-formatter="bytesValueFormatter">
                 <template v-slot:tooltip="{ data }">
-                    <RecoverableItemSizeTooltip :data="data" :is-recoverable="isRecoverableDataPoint(data)" />
+                    <RecoverableItemSizeTooltip
+                        v-if="data"
+                        :data="data"
+                        :is-recoverable="isRecoverableDataPoint(data)" />
                 </template>
             </BarChart>
         </div>

diff --git a/client/src/components/User/DiskUsage/Visualizations/SelectedItemActions.vue b/client/src/components/User/DiskUsage/Visualizations/SelectedItemActions.vue
@@ -1,10 +1,18 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faArchive, faChartBar, faInfoCircle, faTrash, faUndo } from "@fortawesome/free-solid-svg-icons";
+import {
+    faArchive,
+    faChartBar,
+    faInfoCircle,
+    faLocationArrow,
+    faTrash,
+    faUndo,
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton } from "bootstrap-vue";
 import { computed } from "vue";
 
+import { useHistoryStore } from "@/stores/historyStore";
 import localize from "@/utils/localization";
 import { bytesToString } from "@/utils/utils";
 
@@ -19,17 +27,23 @@ interface SelectedItemActionsProps {
     isArchived?: boolean;
 }
 
+const { currentHistoryId } = useHistoryStore();
+
 const props = withDefaults(defineProps<SelectedItemActionsProps>(), {
     isArchived: false,
 });
 
-library.add(faChartBar, faUndo, faTrash, faInfoCircle, faArchive);
+library.add(faArchive, faChartBar, faInfoCircle, faLocationArrow, faTrash, faUndo);
 
 const label = computed(() => props.data?.label ?? "No data");
 const prettySize = computed(() => bytesToString(props.data?.value ?? 0));
 const viewDetailsIcon = computed(() => (props.itemType === "history" ? "chart-bar" : "info-circle"));
+const canSetAsCurrent = computed(
+    () => props.itemType === "history" && !props.isArchived && props.data.id !== currentHistoryId
+);
 
 const emit = defineEmits<{
+    (e: "set-current-history", historyId: string): void;
     (e: "view-item", itemId: string): void;
     (e: "undelete-item", itemId: string): void;
     (e: "permanently-delete-item", itemId: string): void;
@@ -39,6 +53,10 @@ function onUndeleteItem() {
     emit("undelete-item", props.data.id);
 }
 
+function onSetCurrentHistory() {
+    emit("set-current-history", props.data.id);
+}
+
 function onViewItem() {
     emit("view-item", props.data.id);
 }
@@ -63,6 +81,15 @@ function onPermanentlyDeleteItem() {
         </div>
 
         <div class="my-2">
+            <BButton
+                v-if="canSetAsCurrent"
+                variant="outline-primary"
+                size="sm"
+                class="mx-2"
+                :title="localize('Set this history as current')"
+                @click="onSetCurrentHistory">
+                <FontAwesomeIcon icon="location-arrow" />
+            </BButton>
             <BButton
                 variant="outline-primary"
                 size="sm"