Merge remote-tracking branch 'origin/feature-dashboard-v2' into featu…

…re/spin-dashboard Signed-off-by: yuda <[email protected]>
cloudforet-io · Aug 27, 2024 · 16ac677 · 16ac677
2 parents 322ce6a + 07176c0
commit 16ac677
Show file tree

Hide file tree

Showing 89 changed files with 2,380 additions and 633 deletions.
diff --git a/...s/top-bar/modules/top-bar-search/modules/top-bar-search-dropdown/TopBarSearchDropdown.vue b/...s/top-bar/modules/top-bar-search/modules/top-bar-search-dropdown/TopBarSearchDropdown.vue
@@ -56,7 +56,7 @@ const tabRef = ref<null | Vue>(null);
 
 const getTabHeaderHeight = () => {
     const tabHeaderHeight = tabRef.value?.$el.firstElementChild?.clientHeight;
-    if (tabHeaderHeight) return (tabHeaderHeight + 4) ?? 0;
+    if (tabHeaderHeight) return tabHeaderHeight + 4;
     return 0;
 };
 

diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue
@@ -181,6 +181,7 @@ const handleSelectPopperCondition = (condition: DataTableDataType) => {
 };
 const handleConfirmDataSource = async () => {
     state.loading = true;
+    widgetGenerateStore.setDataTableCreateLoading(true);
     // create widget
     if (widgetGenerateState.overlayType === 'ADD' && !widgetGenerateState.widgetId) {
         const createdWidget = await createWidget();
@@ -235,6 +236,7 @@ const handleConfirmDataSource = async () => {
         }
     }
     state.loading = false;
+    widgetGenerateStore.setDataTableCreateLoading(false);
 };
 
 watch(() => state.showPopover, (val) => {

diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCard.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCard.vue
@@ -8,14 +8,18 @@ import type { PublicDataTableModel } from '@/schema/dashboard/public-data-table/
 
 import WidgetFormDataTableCardAddContents
     from '@/common/modules/widgets/_components/WidgetFormDataTableCardAddContents.vue';
+import WidgetFormDataTableCardLoadingContents
+    from '@/common/modules/widgets/_components/WidgetFormDataTableCardLoadingContents.vue';
 import WidgetFormDataTableCardTransformContents
     from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue';
 import { DATA_TABLE_TYPE } from '@/common/modules/widgets/_constants/data-table-constant';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import type { DataTableDataType } from '@/common/modules/widgets/types/widget-model';
 
+const LOADING_STATE = 'LOADING';
 interface Props {
-    item: PublicDataTableModel|PrivateDataTableModel;
+    item?: PublicDataTableModel|PrivateDataTableModel;
+    loadingCard?: boolean;
 }
 
 const props = defineProps<Props>();
@@ -26,8 +30,8 @@ const addContents = ref<WidgetFormDataTableCardAddContents|null>(null);
 const transformContents = ref<WidgetFormDataTableCardTransformContents|null>(null);
 
 const state = reactive({
-    dataTableId: computed<string>(() => props.item.data_table_id),
-    dataType: computed<DataTableDataType>(() => props.item.data_type),
+    dataTableId: computed<string|undefined>(() => props.item?.data_table_id),
+    dataType: computed<DataTableDataType | 'LOADING' | undefined>(() => (props.loadingCard ? LOADING_STATE : props.item?.data_type)),
     selected: computed<boolean>(() => widgetGenerateState.selectedDataTableId === state.dataTableId),
 });
 
@@ -47,6 +51,7 @@ defineExpose({
 
 <template>
     <div class="widget-form-data-table-card">
+        <widget-form-data-table-card-loading-contents v-if="!props.item || props.loadingCard" />
         <widget-form-data-table-card-add-contents v-if="state.dataType === DATA_TABLE_TYPE.ADDED"
                                                   ref="addContents"
                                                   :item="props.item"

diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddContents.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddContents.vue
@@ -64,6 +64,7 @@ const storeState = reactive({
 });
 
 const state = reactive({
+    loading: false,
     dataTableId: computed(() => props.item.data_table_id),
     sourceType: computed(() => props.item.source_type),
     options: computed(() => props.item.options),
@@ -290,13 +291,17 @@ const handleCancelModal = () => {
     modalState.visible = false;
 };
 const handleUpdateDataTable = async () => {
+    state.loading = true;
     const result = await updateDataTable();
     if (result) {
         showSuccessMessage(i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.UPDATE_DATA_TALBE_INVALID_SUCCESS'), '');
         widgetGenerateStore.setSelectedDataTableId(state.dataTableId);
         widgetGenerateStore.setDataTableUpdating(true);
         await widgetGenerateStore.loadDataTable({});
     }
+    setTimeout(() => {
+        state.loading = false;
+    }, 1000);
 };
 
 /* Utils */
@@ -401,6 +406,7 @@ defineExpose({
         />
         <widget-form-data-table-card-footer :disabled="validationState.dataTableApplyInvalid"
                                             :changed="state.optionsChanged"
+                                            :loading="state.loading"
                                             @delete="handleClickDeleteDataTable"
                                             @reset="handleClickResetDataTable"
                                             @update="handleUpdateDataTable"

diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFooter.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFooter.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { PButton } from '@cloudforet/mirinae';
+import { PButton, PSpinner } from '@cloudforet/mirinae';
 
 interface Props {
    disabled: boolean;
    changed: boolean;
+   loading: boolean;
 }
 const props = defineProps<Props>();
 const emit = defineEmits<{(e: 'delete'): void;
@@ -18,6 +19,7 @@ const handleClickResetDataTable = () => {
     emit('reset');
 };
 const handleUpdateDataTable = () => {
+    if (props.loading) return;
     emit('update');
 };
 </script>
@@ -43,10 +45,15 @@ const handleUpdateDataTable = () => {
                       :disabled="props.disabled"
                       @click="handleUpdateDataTable"
             >
-                {{ $t('COMMON.WIDGETS.APPLY') }}
-                <div v-if="props.changed"
-                     class="update-dot"
-                />
+                <div class="button-contents-wrapper">
+                    <p-spinner v-if="props.loading"
+                               size="sm"
+                    />
+                    {{ $t('COMMON.WIDGETS.APPLY') }}
+                    <div v-if="props.changed"
+                         class="update-dot"
+                    />
+                </div>
             </p-button>
         </div>
     </div>
@@ -59,12 +66,15 @@ const handleUpdateDataTable = () => {
 
     .apply-button {
         @apply relative;
-        .update-dot {
-            @apply absolute rounded-full bg-blue-500 border-2 border-white;
-            width: 0.75rem;
-            height: 0.75rem;
-            right: -0.375rem;
-            top: -0.375rem;
+        .button-contents-wrapper {
+            @apply relative flex items-center gap-1;
+            .update-dot {
+                @apply absolute rounded-full bg-blue-500 border-2 border-white;
+                width: 0.75rem;
+                height: 0.75rem;
+                right: -0.375rem;
+                top: -0.375rem;
+            }
         }
     }
     .form-button-wrapper {

diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardLoadingContents.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardLoadingContents.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { PSkeleton, PDivider } from '@cloudforet/mirinae';
+</script>
+
+<template>
+    <div class="widget-form-data-table-card-loading-contents"
+         :class="{ 'selected': true }"
+    >
+        <div class="card-header">
+            <p-skeleton class="skeleton-a"
+                        width="80%"
+                        height="1rem"
+            />
+            <p-skeleton class="skeleton-b"
+                        width="30%"
+                        height="1rem"
+            />
+            <p-skeleton width="100%"
+                        height="2rem"
+            />
+        </div>
+        <div class="card-body">
+            <div class="body-item">
+                <p-skeleton class="skeleton-b"
+                            width="30%"
+                            height="1rem"
+                />
+                <p-skeleton width="100%"
+                            height="2rem"
+                />
+            </div>
+            <div class="body-item">
+                <p-skeleton class="skeleton-b"
+                            width="25%"
+                            height="1rem"
+                />
+                <p-skeleton width="50%"
+                            height="2rem"
+                />
+            </div>
+            <div class="body-item">
+                <p-skeleton class="skeleton-b"
+                            width="30%"
+                            height="1rem"
+                />
+                <p-skeleton width="100%"
+                            height="2rem"
+                />
+            </div>
+            <div class="body-item">
+                <p-skeleton class="skeleton-b"
+                            width="30%"
+                            height="1rem"
+                />
+                <p-skeleton class="mb-4"
+                            width="70%"
+                            height="2rem"
+                />
+            </div>
+        </div>
+        <p-divider />
+        <div class="card-footer">
+            <p-skeleton class="ml-4"
+                        width="25%"
+                        height="2rem"
+            />
+            <div class="footer-right">
+                <p-skeleton width="50%"
+                            height="2rem"
+                />
+                <p-skeleton width="50%"
+                            height="2rem"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.widget-form-data-table-card-loading-contents {
+    @apply border border-gray-200 rounded-lg w-full bg-white;
+    width: 25vw;
+    min-width: 21rem;
+    max-width: 24rem;
+    padding-top: 0.125rem;
+    margin-bottom: 2rem;
+
+    &.selected {
+        @apply border-violet-600;
+        box-shadow: 0 0 0 0.1875rem rgba(137, 124, 214, 0.6);
+        .card-header {
+            @apply bg-violet-100 border border-violet-200;
+        }
+    }
+
+    .card-header {
+        @apply flex flex-col gap-1 bg-gray-100 rounded-lg border border-gray-200;
+        width: calc(100% - 0.5rem);
+        padding: 0.75rem;
+    }
+    .card-body {
+        @apply flex flex-col gap-4;
+        padding: 0.75rem;
+        .body-item {
+            @apply flex flex-col gap-1;
+        }
+    }
+    .card-footer {
+        @apply flex justify-between;
+        padding: 0.75rem 0;
+        .footer-right {
+            @apply inline-flex gap-2;
+            width: calc(50% + 0.5rem);
+            margin-right: 1rem;
+        }
+    }
+}
+.skeleton-a {
+    margin: 0.5rem 0;
+}
+.skeleton-b {
+    margin: 0.375rem 0;
+}
+
+</style>
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue
@@ -52,6 +52,7 @@ const storeState = reactive({
 });
 
 const state = reactive({
+    loading: false,
     dataTableId: computed(() => props.item.data_table_id),
     options: computed(() => props.item.options),
     dataTableName: props.item.name ? props.item.name : `${props.item.operator} Data`,
@@ -242,13 +243,17 @@ const handleCancelModal = () => {
     modalState.visible = false;
 };
 const handleUpdateDataTable = async () => {
+    state.loading = true;
     const result = await updateDataTable();
     if (result) {
         showSuccessMessage(i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.UPDATE_DATA_TALBE_INVALID_SUCCESS'), '');
         widgetGenerateStore.setSelectedDataTableId(result.data_table_id);
         widgetGenerateStore.setDataTableUpdating(true);
         await widgetGenerateStore.loadDataTable({});
     }
+    setTimeout(() => {
+        state.loading = false;
+    }, 1000);
 };
 
 /* Utils */
@@ -300,6 +305,7 @@ defineExpose({
         />
         <widget-form-data-table-card-footer :disabled="state.applyDisabled"
                                             :changed="state.optionsChanged"
+                                            :loading="state.loading"
                                             @delete="handleClickDeleteDataTable"
                                             @reset="handleClickResetDataTable"
                                             @update="handleUpdateDataTable"

diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep1.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep1.vue
@@ -140,6 +140,9 @@ onMounted(async () => {
                                                      :key="`data-table-${dataTable.data_table_id}`"
                                                      :item="dataTable"
                         />
+                        <widget-form-data-table-card v-if="widgetGenerateState.dataTableCreateLoading"
+                                                     loading-card
+                        />
                         <widget-form-data-source-popover />
                         <div v-if="!storeState.dataTables.length"
                              class="empty-data-table-guide"

diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {
-    computed, onBeforeMount, onUnmounted, reactive, ref, watch,
+    computed, nextTick, onBeforeMount, onUnmounted, reactive, ref, watch,
 } from 'vue';
 
 import { cloneDeep, isEqual } from 'lodash';
@@ -190,6 +190,10 @@ watch(() => state.mounted, async (mounted) => {
         state.mounted = false;
     }
 });
+watch(() => dashboardDetailState.vars, async () => {
+    await nextTick();
+    await loadOverlayWidget();
+});
 
 onBeforeMount(() => {
     initSnapshot();
@@ -325,7 +329,7 @@ onUnmounted(() => {
                 gap: 0.5rem;
                 align-items: center;
                 justify-content: end;
-                min-width: 14rem;
+                min-width: 9rem;
                 .divider {
                     height: 1.5rem;
                 }

diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2WidgetForm.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2WidgetForm.vue
@@ -24,6 +24,8 @@ import type { DataTableAddOptions } from '@/common/modules/widgets/types/widget-
 
 import { red } from '@/styles/colors';
 
+import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
+
 
 const FORM_TITLE_MAP = {
     WIDGET_HEADER: 'WIDGET_HEADER',
@@ -41,6 +43,8 @@ const props = defineProps<Props>();
 const widgetGenerateStore = useWidgetGenerateStore();
 const widgetGenerateState = widgetGenerateStore.state;
 const widgetGenerateGetters = widgetGenerateStore.getters;
+const dashboardDetailInfoStore = useDashboardDetailInfoStore();
+const dashboardDetailInfoState = dashboardDetailInfoStore.state;
 const state = reactive({
     chartTypeMenuItems: computed<MenuItem[]>(() => Object.values(CONSOLE_WIDGET_CONFIG).map((d) => ({
         name: d.widgetName,
@@ -261,6 +265,8 @@ onMounted(() => {
                                :key="`${fieldName}-${widgetGenerateState.selectedWidgetName}`"
                                :widget-field-schema="fieldSchema"
                                :data-table="widgetGenerateGetters.selectedDataTable"
+                               :widget-id="widgetGenerateState.widgetId"
+                               :date-range="dashboardDetailInfoState.options.date_range"
                                :all-value-map="widgetGenerateState.widgetFormValueMap"
                                :value="widgetGenerateState.widgetFormValueMap[fieldName]"
                                :is-valid="widgetGenerateState.widgetValidMap[fieldName]"