fix: add datatable footer (#5034)

* fix: update datatable footer with slot Signed-off-by: 이승연 <[email protected]> * fix: datattable component footer slot update Signed-off-by: 이승연 <[email protected]> * fix: add workspace datatable 'Total' Footer Signed-off-by: 이승연 <[email protected]> * fix: add workspace group datatable 'Total' Footer Signed-off-by: 이승연 <[email protected]> * fix: add metric explorer datatable 'Total' Footer Signed-off-by: 이승연 <[email protected]> * fix: add cost analysis datatable 'Total' Footer Signed-off-by: 이승연 <[email protected]> * fix: add datatable spec (footer about summary of each column) Signed-off-by: 이승연 <[email protected]> * fix: add datatable spec (footer about summary of each column) Signed-off-by: 이승연 <[email protected]> * chore: delete unnecessary log Signed-off-by: 이승연 <[email protected]> * fix: change isExpandable from 'function' to 'computed api' Signed-off-by: 이승연 <[email protected]> --------- Signed-off-by: 이승연 <[email protected]>
cloudforet-io · Nov 15, 2024 · e02bb7c · e02bb7c
1 parent d6ca353
commit e02bb7c
Show file tree

Hide file tree

Showing 8 changed files with 774 additions and 238 deletions.
diff --git a/apps/web/src/services/advanced/components/WorkspaceGroupTabWorkspace.vue b/apps/web/src/services/advanced/components/WorkspaceGroupTabWorkspace.vue
@@ -183,6 +183,14 @@ watch(() => workspaceGroupPageGetters.selectedWorkspaceGroupId, () => {
 onMounted(async () => {
     await workspaceGroupPageStore.fetchCostReportConfig();
 });
+
+const reduce = (arr: (number | undefined)[] | any) => arr.reduce((acc, value) => acc + (value ?? 0), 0);
+
+const costInfoReduce = (arr: (number | {month: any})[] | any) => {
+    const result = arr.reduce((acc, cur) => (acc + Object.keys(cur).includes('month') ? cur?.month : 0), 0);
+
+    return result;
+};
 </script>
 
 <template>
@@ -236,7 +244,7 @@ onMounted(async () => {
                 <div class="th-tooltip">
                     <span>{{ field.label }}</span>
                     <p-tooltip
-                        :contents="$t('IAM.WORKSPACE_GROUP.TOOLTIP_STATE')"
+                        :contents="String($t('IAM.WORKSPACE_GROUP.TOOLTIP_STATE'))"
                         position="bottom"
                         class="tooltip-wrapper"
                         content-class="custom-tooltip-content"
@@ -254,7 +262,7 @@ onMounted(async () => {
                 <div class="th-tooltip">
                     <span>{{ field.label }}</span>
                     <p-tooltip
-                        :contents="$t('IAM.WORKSPACE_GROUP.TOOLTIP_COST')"
+                        :contents="String($t('IAM.WORKSPACE_GROUP.TOOLTIP_COST'))"
                         position="bottom"
                         class="tooltip-wrapper"
                         content-class="custom-tooltip-content"
@@ -317,6 +325,20 @@ onMounted(async () => {
                     {{ $t('IAM.WORKSPACE_GROUP.TAB.REMOVE') }}
                 </p-button>
             </template>
+            <template v-if="tableState.tableItems.length > 0"
+                      #tf-col-format="{field, colIndex, values}"
+            >
+                <span v-if="colIndex === 0">Total</span>
+                <span v-else-if="field.name === 'user_count'">{{ reduce(values) }}</span>
+                <span v-else-if="field.name === 'service_account_count'">{{ reduce(values) }}</span>
+                <p
+                    v-else-if="field.name === 'cost_info'"
+                >
+                    <span>{{ CURRENCY_SYMBOL[state.currency ?? 'USD'] }}</span>
+                    {{ costInfoReduce(values) }}
+                </p>
+                <span v-else-if="field.name === 'state' && field.name === 'created_at'" />
+            </template>
         </p-toolbox-table>
     </section>
 </template>

diff --git a/apps/web/src/services/advanced/components/WorkspaceManagementTable.vue b/apps/web/src/services/advanced/components/WorkspaceManagementTable.vue
@@ -217,6 +217,14 @@ const getServiceAccountRouteLocationByWorkspaceName = (item: WorkspaceModel) =>
 onMounted(async () => {
     await workspacePageStore.fetchCostReportConfig();
 });
+
+const reduce = (arr: (number & undefined)[]) => arr.reduce((acc, value) => acc + (value ?? 0), 0);
+
+const costInfoReduce = (arr: (number | {month: any})[] | any) => {
+    const result = arr.reduce((acc, cur) => (acc + Object.keys(cur).includes('month') ? cur?.month : 0), 0);
+
+    return result;
+};
 </script>
 
 <template>
@@ -274,7 +282,7 @@ onMounted(async () => {
                 <div class="th-tooltip">
                     <span>{{ field.label }}</span>
                     <p-tooltip
-                        :contents="$t('IAM.WORKSPACES.TOOLTIP_STATE')"
+                        :contents="String($t('IAM.WORKSPACES.TOOLTIP_STATE'))"
                         position="bottom"
                         class="tooltip-wrapper"
                         content-class="custom-tooltip-content"
@@ -292,7 +300,7 @@ onMounted(async () => {
                 <div class="th-tooltip">
                     <span>{{ field.label }}</span>
                     <p-tooltip
-                        :contents="$t('IAM.WORKSPACES.TOOLTIP_COST')"
+                        :contents="String($t('IAM.WORKSPACES.TOOLTIP_COST'))"
                         position="bottom"
                         class="tooltip-wrapper"
                     >
@@ -342,13 +350,22 @@ onMounted(async () => {
             </template>
             <template #col-cost_info-format="{value}">
                 <p>
-                    <span>{{ CURRENCY_SYMBOL[storeState.currency] }}</span>
+                    <span>{{ CURRENCY_SYMBOL[String(storeState.currency)] }}</span>
                     {{ numberFormatter(value?.month) || 0 }}
                 </p>
             </template>
             <template #col-created_at-format="{value}">
                 {{ iso8601Formatter(value, storeState.timezone) }}
             </template>
+            <template #tf-col-format="{field, colIndex, values}">
+                <span v-if="colIndex === 0">Total</span>
+                <span v-if="field.name === 'user_count'">{{ reduce(values) }}</span>
+                <span v-if="field.name === 'service_account_count'">{{ reduce(values) }}</span>
+                <span v-if="field.name === 'cost_info'">
+                    <span>{{ CURRENCY_SYMBOL[storeState.currency ?? 'USD'] }}</span>
+                    {{ costInfoReduce(values) }}
+                </span>
+            </template>
         </p-toolbox-table>
     </section>
 </template>

diff --git a/apps/web/src/services/asset-inventory/components/MetricExplorerDataTable.vue b/apps/web/src/services/asset-inventory/components/MetricExplorerDataTable.vue
@@ -1,5 +1,7 @@
 <script lang="ts" setup>
-import { computed, reactive, watch } from 'vue';
+import {
+    computed, reactive, watch,
+} from 'vue';
 import { useRoute, useRouter } from 'vue-router/composables';
 
 import bytes from 'bytes';
@@ -46,6 +48,9 @@ import {
 } from '@/services/dashboards/stores/all-reference-type-info-store';
 
 
+
+
+
 const DATE_FORMAT_MAP = {
     [GRANULARITY.DAILY]: 'M/D',
     [GRANULARITY.MONTHLY]: 'MMM',
@@ -268,6 +273,19 @@ watch(() => metricExplorerPageState.refreshMetricData, async (refresh) => {
         metricExplorerPageStore.setRefreshMetricData(false);
     }
 }, { immediate: false });
+
+// TODO: type definition
+const reduce = (arr: any[]) => {
+    const result = arr.reduce((acc, cur) => {
+        if (typeof cur === 'number') {
+            return acc + cur;
+        }
+
+        return acc;
+    }, 0);
+
+    return result;
+};
 </script>
 
 <template>
@@ -300,6 +318,15 @@ watch(() => metricExplorerPageState.refreshMetricData, async (refresh) => {
                 {{ getRefinedColumnValue(field, value) }}
             </span>
         </template>
+
+        <template v-if="state.items.length > 0"
+                  #tf-col-format="{field, colIndex, values}"
+        >
+            <span v-if="colIndex === 0">Total</span>
+            <span v-else-if="!state.groupByFields.map((d) => d.name).includes(field.name)">
+                {{ values.length > 0 ? numberFormatter(reduce(values), {notation: 'compact'}) : 0 }}
+            </span>
+        </template>
     </p-toolbox-table>
 </template>