Merge remote-tracking branch 'origin/master' into feature-itsm

Signed-off-by: Wanjin Noh <[email protected]>
cloudforet-io · Dec 2, 2024 · f399c5e · f399c5e
2 parents f8d2d70 + 076d837
commit f399c5e
Show file tree

Hide file tree

Showing 13 changed files with 180 additions and 31 deletions.
diff --git a/apps/web/src/common/components/modals/ConfirmBackModal.vue b/apps/web/src/common/components/modals/ConfirmBackModal.vue
@@ -2,10 +2,13 @@
 import DeleteModal from '@/common/components/modals/DeleteModal.vue';
 
 const props = defineProps<{
-    visible: boolean
+    visible: boolean;
+    hideCloseButton?: boolean;
 }>();
 const emit = defineEmits<{(e: 'update:visible', value: boolean): void;
     (e: 'confirm'): void;
+    (e: 'close'): void;
+    (e: 'cancel'): void;
 }>();
 const handleClickConfirm = () => {
     emit('update:visible', false);
@@ -18,7 +21,10 @@ const handleClickConfirm = () => {
                   :header-title="$t('COMMON.CONFIRM_BACK_MODAL.TITLE')"
                   :visible="props.visible"
                   :contents="$t('COMMON.CONFIRM_BACK_MODAL.CANNOT_CANCEL')"
+                  :hide-close-button="props.hideCloseButton"
                   @update:visible="emit('update:visible', $event)"
                   @confirm="handleClickConfirm"
+                  @close="emit('close')"
+                  @cancel="emit('cancel')"
     />
 </template>
diff --git a/apps/web/src/common/components/modals/DeleteModal.vue b/apps/web/src/common/components/modals/DeleteModal.vue
@@ -9,6 +9,7 @@
                     :hide-footer="hideFooter"
                     theme-color="alert"
                     :loading="loading"
+                    :hide-header-close-button="hideCloseButton"
                     @confirm="handleConfirm"
                     @close="$emit('close')"
                     @cancel="$emit('cancel')"
@@ -96,6 +97,10 @@ export default {
             type: Boolean,
             default: false,
         },
+        hideCloseButton: {
+            type: Boolean,
+            default: false,
+        },
     },
     setup(props, { emit }: SetupContext) {
         const state = reactive({

diff --git a/apps/web/src/common/composables/confirm-route-leave/index.ts b/apps/web/src/common/composables/confirm-route-leave/index.ts
@@ -0,0 +1,52 @@
+import type { Ref } from 'vue';
+import {
+    ref, readonly,
+} from 'vue';
+import type { Location } from 'vue-router';
+
+// CAUTION: Do not change to useRouter() because useRouter is only available in script setup
+import { SpaceRouter } from '@/router';
+
+export const useConfirmRouteLeave = ({
+    passConfirmation,
+}: {
+    passConfirmation?: Ref<boolean>
+} = {}) => {
+    const isConfirmLeaveModalVisible = ref(false);
+    const isConfirmed = ref(false);
+    let nextRoute: Location|undefined;
+
+    const openConfirmBackModal = () => {
+        isConfirmLeaveModalVisible.value = true;
+    };
+    const confirmRouteLeave = () => {
+        isConfirmed.value = true;
+        isConfirmLeaveModalVisible.value = false;
+        if (nextRoute) SpaceRouter.router.push(nextRoute);
+    };
+    const stopRouteLeave = () => {
+        isConfirmLeaveModalVisible.value = false;
+        nextRoute = undefined;
+    };
+
+    const handleBeforeRouteLeave = (to, from, next) => {
+        if (passConfirmation?.value) {
+            next();
+            return;
+        }
+        if (!isConfirmed.value) {
+            nextRoute = to;
+            openConfirmBackModal();
+            next(false);
+        } else {
+            next();
+        }
+    };
+
+    return {
+        isConfirmLeaveModalVisible: readonly(isConfirmLeaveModalVisible),
+        confirmRouteLeave,
+        stopRouteLeave,
+        handleBeforeRouteLeave,
+    };
+};
diff --git a/apps/web/src/common/composables/go-back/index.ts b/apps/web/src/common/composables/go-back/index.ts
@@ -1,5 +1,6 @@
 import type { Location } from 'vue-router';
 
+// CAUTION: Do not change to useRouter() because useRouter is only available in script setup
 import { SpaceRouter } from '@/router';
 
 export const useGoBack = (mainRoute: Location) => {
@@ -21,5 +22,6 @@ export const useGoBack = (mainRoute: Location) => {
     return {
         setPathFrom,
         handleClickBackButton,
+        goBack: handleClickBackButton,
     };
 };
diff --git a/apps/web/src/common/modules/navigations/new-lsb/LSBLoadingSpinner.vue b/apps/web/src/common/modules/navigations/new-lsb/LSBLoadingSpinner.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+    PSpinner,
+} from '@cloudforet/mirinae';
+
+const props = defineProps<{
+    loading: boolean;
+}>();
+</script>
+
+<template>
+    <div class="relative">
+        <div v-show="props.loading"
+             class="absolute flex flex-col px-4 w-full"
+        >
+            <p-spinner size="md" />
+        </div>
+    </div>
+</template>
diff --git a/apps/web/src/services/cost-explorer/components/BudgetDetailSummaryChart.vue b/apps/web/src/services/cost-explorer/components/BudgetDetailSummaryChart.vue
@@ -51,6 +51,8 @@ const state = reactive({
             show: false,
         },
         tooltip: {
+            confine: true,
+            valueFormatter: (val) => numberFormatter(val) || '',
         },
         xAxis: {
             type: 'category',

diff --git a/apps/web/src/services/cost-explorer/components/BudgetDetailSummaryTable.vue b/apps/web/src/services/cost-explorer/components/BudgetDetailSummaryTable.vue
@@ -86,8 +86,6 @@ const getBudgetUsageDataWithRatioAndLink = (accumulatedBudgetData, budgetTimeUni
             end: dayjs.utc(d.date).format('YYYY-MM'),
         };
         const ratio = getBudgetRatio(budgetTimeUnit, d.cost, totalBudgetLimit, d.limit);
-        // const ratio = (budgetTimeUnit === 'TOTAL') ? `${Math.round((d.cost / totalBudgetLimit) * 100)}%`
-        //     : `${Math.round((d.cost / d.limit) * 100)}%`;
         const link = getProperRouteLocation({
             name: COST_EXPLORER_ROUTE.COST_ANALYSIS.QUERY_SET._NAME,
             params: {
@@ -107,24 +105,6 @@ const getBudgetUsageDataWithRatioAndLink = (accumulatedBudgetData, budgetTimeUni
     });
 };
 
-const getEnrichedBudgetUsageData = (
-    budgetUsageData: BudgetUsageModel[],
-    period: Period,
-    budgetTimeUnit: BudgetTimeUnit,
-    totalBudgetLimit: number,
-    providers: Providers,
-): EnrichedBudgetUsageData[] => {
-    const _budgetUsageData = cloneDeep(budgetUsageData);
-    const accumulatedBudgetData = getAccumulatedBudgetUsageData(_budgetUsageData, period);
-    const budgetUsageDataWithRatioAndLink = getBudgetUsageDataWithRatioAndLink(
-        accumulatedBudgetData,
-        budgetTimeUnit,
-        totalBudgetLimit,
-        providers,
-    );
-    return [firstColumnData, ...budgetUsageDataWithRatioAndLink] as unknown as EnrichedBudgetUsageData[];
-};
-
 const state = reactive({
     budgetUsageData: computed<BudgetUsageModel[]|null>(() => budgetPageState.budgetUsageData),
     budgetData: computed<BudgetModel|null>(() => budgetPageState.budgetData),
@@ -135,20 +115,21 @@ const state = reactive({
     })),
     providers: computed<Providers>(() => state.budgetData?.provider_filter?.providers ?? []),
     totalBudgetLimit: computed<number>(() => state.budgetData?.limit ?? 0),
-    enrichedBudgetUsageData: computed<EnrichedBudgetUsageData[]>(
-        () => getEnrichedBudgetUsageData(
-            state.budgetUsageData,
-            state.budgetPeriod,
+    enrichedBudgetUsageData: computed<EnrichedBudgetUsageData[]>(() => {
+        const _budgetUsageData = state.budgetTimeUnit === 'TOTAL' ? getAccumulatedBudgetUsageData(state.budgetUsageData, state.budgetPeriod)
+            : cloneDeep(state.budgetUsageData);
+        const budgetUsageDataWithRatioAndLink = getBudgetUsageDataWithRatioAndLink(
+            _budgetUsageData,
             state.budgetTimeUnit,
             state.totalBudgetLimit,
             state.providers,
-        ),
-    ),
+        );
+        return [firstColumnData, ...budgetUsageDataWithRatioAndLink] as unknown as EnrichedBudgetUsageData[];
+    }),
     data: [],
     fields: computed(() => state.enrichedBudgetUsageData.map((d) => ({
         name: d.date,
         label: d.date ? dayjs.utc(d.date).format('MMM YYYY') : ' ',
-        // textAlign: 'right',
     }))),
     loading: true,
     showFormattedBudgetData: true,
@@ -199,7 +180,7 @@ setTableKeysAndItems();
                     ) }}
                 </template>
                 <template v-else-if="field.name && value.path === 'cost'">
-                    <p-link v-if="dayjs.utc(value.date).isSameOrBefore(dayjs.utc())"
+                    <p-link v-if="value[value.path] && dayjs.utc(value.date).isSameOrBefore(dayjs.utc())"
                             :to="value.link"
                             highlight
                     >

diff --git a/packages/mirinae/src/controls/forms/field-group/PFieldGroup.mdx b/packages/mirinae/src/controls/forms/field-group/PFieldGroup.mdx
@@ -37,6 +37,11 @@ import * as PFieldGroupStories from './PFieldGroup.stories';
 
 <br/>
 
+## No Spacing
+<Canvas of={PFieldGroupStories.NoSpacing} />
+
+<br/>
+
 ## Playground
 <Canvas of={PFieldGroupStories.Playground} />
 <Controls of={PFieldGroupStories.Playground} />

diff --git a/packages/mirinae/src/controls/forms/field-group/PFieldGroup.stories.ts b/packages/mirinae/src/controls/forms/field-group/PFieldGroup.stories.ts
@@ -38,6 +38,7 @@ const Template: Story = {
                             :help-text="helpText" :required="required"
                             :label="label"
                             :style-type="styleType"
+                           :no-spacing="noSpacing"
             >
                 <template v-if="labelSlot" #label>
                     <div v-html="labelSlot"/>
@@ -135,6 +136,32 @@ export const StyleType: Story = {
     }),
 };
 
+export const NoSpacing: Story = {
+    render: () => ({
+        components: { PFieldGroup, PTextInput },
+        template: `
+            <div>
+                <p-field-group label="Primary" style-type="primary" no-spacing>
+                    <p-text-input value="Wanjin"/>
+                </p-field-group>
+                <br/>
+                <p-field-group label="Secondary" style-type="secondary" no-spacing>
+                    <p-text-input value="Wanjin"/>
+                </p-field-group>
+                <br/>
+                <p-field-group label="Invalid Text" invalid invalid-text="name is required field." no-spacing>
+                        <p-text-input placeholder="Name" invalid value=""/>
+                </p-field-group>
+                <br/>
+                <p-field-group label="Valid Text" valid valid-text="this is an appropriate name." no-spacing>
+                    <p-text-input placeholder="Name" value="Wanjin"/>
+                </p-field-group>
+                <br/>
+            </div>
+        `,
+    }),
+};
+
 export const Playground: Story = {
     ...Template,
 };
diff --git a/packages/mirinae/src/controls/forms/field-group/PFieldGroup.vue b/packages/mirinae/src/controls/forms/field-group/PFieldGroup.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="p-field-group"
-         :class="[styleType]"
+         :class="{[styleType]: true, 'no-spacing': noSpacing}"
     >
         <div class="field-title-box">
             <p-field-title v-if="label || $scopedSlots.label"
@@ -61,6 +61,7 @@ interface Props {
     valid?: boolean;
     required?: boolean;
     styleType?: FieldGroupStyleType;
+    noSpacing?: boolean;
 }
 
 export default defineComponent<Props>({
@@ -99,6 +100,10 @@ export default defineComponent<Props>({
             type: String,
             default: 'primary',
         },
+        noSpacing: {
+            type: Boolean,
+            default: false,
+        },
     },
 });
 </script>
@@ -124,8 +129,8 @@ export default defineComponent<Props>({
         font-size: 0.75rem;
         line-height: 1.4;
         margin-left: 0.25rem;
-        margin-bottom: 0.25rem;
         font-weight: normal;
+        margin-bottom: 0.25rem;
     }
     .help-msg {
         @apply block mb-2;
@@ -148,6 +153,29 @@ export default defineComponent<Props>({
     .is-invalid {
         @apply border border-alert;
     }
+    &.no-spacing {
+        &.primary {
+            margin-bottom: 0;
+        }
+        &.secondary {
+            margin-bottom: 0;
+        }
+        .form-label {
+            padding-bottom: 0;
+        }
+        .optional-mark {
+            margin-bottom: 0;
+        }
+        .help-msg {
+            margin-bottom: 0;
+        }
+        .invalid-feedback {
+            margin-top: 0;
+        }
+        .valid-feedback {
+            margin-top: 0;
+        }
+    }
 }
 
 </style>
diff --git a/packages/mirinae/src/controls/forms/field-group/story-helper.ts b/packages/mirinae/src/controls/forms/field-group/story-helper.ts
@@ -9,6 +9,7 @@ export const getPFieldGroupArgs = (): Args => ({
     valid: false,
     required: false,
     styleType: 'primary',
+    noSpacing: false,
     labelSlot: null,
     labelExtraSlot: null,
     validSlot: null,
@@ -147,6 +148,21 @@ export const getPFieldGroupArgTypes = (): ArgTypes => ({
         control: 'select',
         options: ['primary', 'secondary'],
     },
+    noSpacing: {
+        name: 'noSpacing',
+        type: { name: 'boolean' },
+        description: 'Props for hide spacing',
+        table: {
+            type: {
+                summary: 'boolean',
+            },
+            category: 'props',
+            defaultValue: {
+                summary: false,
+            },
+        },
+        control: 'boolean',
+    },
     labelSlot: {
         name: 'label',
         description: 'Slot for label',

diff --git a/packages/mirinae/src/data-display/badge/PBadge.vue b/packages/mirinae/src/data-display/badge/PBadge.vue
@@ -130,6 +130,9 @@ const state = reactive({
     @mixin subtle gray200, theme('colors.gray.200'), theme('colors.gray.900');
     @mixin subtle yellow200, theme('colors.yellow.200'), theme('colors.gray.900');
     @mixin subtle red100, theme('colors.red.100'), theme('colors.red.500');
+    @mixin subtle peacock200, theme('colors.peacock.200'), theme('colors.peacock.700');
+    @mixin subtle coral200, theme('colors.coral.200'), theme('colors.coral.700');
+    @mixin subtle red200, theme('colors.red.200'), theme('colors.red.700');
 }
 
 </style>
diff --git a/packages/mirinae/src/data-display/badge/type.ts b/packages/mirinae/src/data-display/badge/type.ts
@@ -42,6 +42,9 @@ export const SUBTLE_STYLE_TYPE = {
     gray200: 'gray200',
     yellow200: 'yellow200',
     red100: 'red100',
+    peacock200: 'peacock200',
+    coral200: 'coral200',
+    red200: 'red200',
 } as const;
 export const BADGE_STYLE_TYPE = {
     ...SOLID_STYLE_TYPE,