From 1c07b630be885c431cf35bbcd07139821c7f2fc7 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Mon, 19 Feb 2024 12:07:23 -0500
Subject: [PATCH] OverviewPage component for re-use.

---
 .../HistoriesStorageOverview.vue              |  8 +++-----
 .../Visualizations/HistoryStorageOverview.vue | 19 ++++++++-----------
 .../DiskUsage/Visualizations/OverviewPage.vue | 19 +++++++++++++++++++
 3 files changed, 30 insertions(+), 16 deletions(-)
 create mode 100644 client/src/components/User/DiskUsage/Visualizations/OverviewPage.vue

diff --git a/client/src/components/User/DiskUsage/Visualizations/HistoriesStorageOverview.vue b/client/src/components/User/DiskUsage/Visualizations/HistoriesStorageOverview.vue
index ae6a131ae39..9d63b587c5e 100644
--- a/client/src/components/User/DiskUsage/Visualizations/HistoriesStorageOverview.vue
+++ b/client/src/components/User/DiskUsage/Visualizations/HistoriesStorageOverview.vue
@@ -12,9 +12,9 @@ import { bytesLabelFormatter, bytesValueFormatter } from "./Charts/formatters";
 import { fetchAllHistoriesSizeSummary, type ItemSizeSummary, purgeHistoryById, undeleteHistoryById } from "./service";
 
 import BarChart from "./Charts/BarChart.vue";
+import OverviewPage from "./OverviewPage.vue";
 import RecoverableItemSizeTooltip from "./RecoverableItemSizeTooltip.vue";
 import SelectedItemActions from "./SelectedItemActions.vue";
-import Heading from "@/components/Common/Heading.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
 const historyStore = useHistoryStore();
@@ -151,9 +151,7 @@ async function onPermanentlyDeleteHistory(historyId: string) {
 }
 </script>
 <template>
-    <div class="mx-3">
-        <router-link :to="{ name: 'StorageDashboard' }">{{ localize("Back to Dashboard") }}</router-link>
-        <Heading h1 bold class="my-3"> Histories Storage Overview </Heading>
+    <OverviewPage title="Histories Storage Overview">
         <p class="text-justify">
             Here you can find various graphs displaying the storage size taken by <b>all your histories</b>.
         </p>
@@ -230,5 +228,5 @@ async function onPermanentlyDeleteHistory(historyId: string) {
                 </template>
             </BarChart>
         </div>
-    </div>
+    </OverviewPage>
 </template>
diff --git a/client/src/components/User/DiskUsage/Visualizations/HistoryStorageOverview.vue b/client/src/components/User/DiskUsage/Visualizations/HistoryStorageOverview.vue
index 42129841b95..f6bf8c8434d 100644
--- a/client/src/components/User/DiskUsage/Visualizations/HistoryStorageOverview.vue
+++ b/client/src/components/User/DiskUsage/Visualizations/HistoryStorageOverview.vue
@@ -17,9 +17,9 @@ import {
 } from "./service";
 
 import BarChart from "./Charts/BarChart.vue";
+import OverviewPage from "./OverviewPage.vue";
 import RecoverableItemSizeTooltip from "./RecoverableItemSizeTooltip.vue";
 import SelectedItemActions from "./SelectedItemActions.vue";
-import Heading from "@/components/Common/Heading.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
 const router = useRouter();
@@ -27,12 +27,11 @@ const { success: successToast, error: errorToast } = useToast();
 const { confirm } = useConfirmDialog();
 const { getHistoryNameById } = useHistoryStore();
 
-const props = defineProps({
-    historyId: {
-        type: String,
-        required: true,
-    },
-});
+interface Props {
+    historyId: string;
+}
+
+const props = defineProps<Props>();
 
 const datasetsSizeSummaryMap = new Map<string, ItemSizeSummary>();
 const topTenDatasetsBySizeData = ref<DataValuePoint[] | null>(null);
@@ -149,9 +148,7 @@ async function onPermanentlyDeleteDataset(datasetId: string) {
 }
 </script>
 <template>
-    <div class="mx-3 history-storage-overview">
-        <router-link :to="{ name: 'StorageDashboard' }">{{ localize("Back to Dashboard") }}</router-link>
-        <Heading h1 bold class="my-3"> History Storage Overview </Heading>
+    <OverviewPage class="history-storage-overview" title="History Storage Overview">
         <p class="text-justify">
             Here you will find some Graphs displaying the storage taken by datasets in your history:
             <b>{{ getHistoryNameById(props.historyId) }}</b
@@ -231,5 +228,5 @@ async function onPermanentlyDeleteDataset(datasetId: string) {
                 </template>
             </BarChart>
         </div>
-    </div>
+    </OverviewPage>
 </template>
diff --git a/client/src/components/User/DiskUsage/Visualizations/OverviewPage.vue b/client/src/components/User/DiskUsage/Visualizations/OverviewPage.vue
new file mode 100644
index 00000000000..932742f5baf
--- /dev/null
+++ b/client/src/components/User/DiskUsage/Visualizations/OverviewPage.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import localize from "@/utils/localization";
+
+import Heading from "@/components/Common/Heading.vue";
+
+interface Props {
+    title: string;
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+    <div class="mx-3">
+        <router-link :to="{ name: 'StorageDashboard' }">{{ localize("Back to Dashboard") }}</router-link>
+        <Heading h1 bold class="my-3">{{ localize(title) }}</Heading>
+        <slot />
+    </div>
+</template>