feat: set query filter only if there're value & fix qa things

apps/web/src/schema/cost-analysis/cost-query-set/type.ts

@@ -1,7 +1,7 @@
 import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
 
 import type {
-    Granularity, GroupBy, Period, RelativePeriod,
+    Granularity, GroupBy, Period, RelativePeriod, DisplayDataType,
 } from '@/services/cost-explorer/types/cost-explorer-query-type';
 
 
@@ -11,6 +11,7 @@ export interface CostQuerySetOption {
     period?: Period;
     relative_period?: RelativePeriod;
     filters?: ConsoleFilter[];
+    display_data_type?: DisplayDataType;
     metadata?: {
         filters_schema?: {
             enabled_properties?: string[];

apps/web/src/services/asset-inventory/components/AssetAnalysisChart.vue

@@ -85,6 +85,19 @@ const state = reactive({
     }),
 });
 
+/* Util */
+const setPeriodText = () => {
+    let periodText = '';
+    if (isEmpty(assetAnalysisPageState.period)) {
+        periodText = '';
+    } else if (assetAnalysisPageGetters.isRealtimeChart) {
+        periodText = state.data?.results[0]?.date || '';
+    } else {
+        periodText = `${assetAnalysisPageState.period.start} ~ ${assetAnalysisPageState.period.end}`;
+    }
+    assetAnalysisPageStore.setPeriodText(periodText);
+};
+
 /* Api */
 const analyzeApiQueryHelper = new ApiQueryHelper().setPage(1, 15);
 const fetcher = getCancellableFetcher<MetricDataAnalyzeParameters, AnalyzeResponse<MetricDataAnalyzeResult>>(SpaceConnector.clientV2.inventory.metricData.analyze);
@@ -129,6 +142,7 @@ const setChartData = debounce(async () => {
     const rawData = await analyzeMetricData();
     if (!rawData) return;
     state.data = rawData;
+    setPeriodText();
 
     const _granularity = assetAnalysisPageState.granularity;
     const _period = assetAnalysisPageState.period as Period;
@@ -183,9 +197,6 @@ watch(() => assetAnalysisPageState.refreshMetricData, async (refresh) => {
 <template>
     <div class="asset-analysis-chart">
         <div class="top-part">
-            <div class="period-text">
-                <span v-if="assetAnalysisPageState.selectedChartType !== QUERY_OPTIONS_TYPE">{{ state.periodText }}</span>
-            </div>
             <div class="select-button-wrapper">
                 <p-select-button v-for="item in SELECT_BUTTON_ITEMS"
                                  :key="`chart-select-button-${item.name}`"
@@ -270,14 +281,9 @@ watch(() => assetAnalysisPageState.refreshMetricData, async (refresh) => {
     margin-bottom: 1rem;
     .top-part {
         display: flex;
-        justify-content: space-between;
+        justify-content: flex-end;
         align-items: center;
         padding-bottom: 0.75rem;
-        .period-text {
-            @apply text-label-md text-gray-600;
-            font-weight: 400;
-            padding-right: 0.125rem;
-        }
         .select-button-wrapper {
             display: flex;
             gap: 0.375rem;

apps/web/src/services/asset-inventory/components/AssetAnalysisDataTable.vue

@@ -167,7 +167,9 @@ const handleClickRow = (item) => {
         const _targetLabelKey = state.hasSearchKeyLabelKeys.find((k) => k.key === d);
         if (_targetLabelKey) {
             const _fieldName = _targetLabelKey.key.replace('labels.', '');
-            _filters.push({ k: _targetLabelKey.search_key, v: item[_fieldName], o: '=' });
+            if (item[_fieldName]) {
+                _filters.push({ k: _targetLabelKey.search_key, v: item[_fieldName], o: '=' });
+            }
         }
     });
 
@@ -176,7 +178,7 @@ const handleClickRow = (item) => {
         .filter(([key]) => !assetAnalysisPageState.selectedGroupByList.includes(key))
         .forEach(([key, value]) => {
             const _targetLabelKey = state.hasSearchKeyLabelKeys.find((k) => k.key === key);
-            if (_targetLabelKey) {
+            if (_targetLabelKey && value?.length) {
                 _filters.push({ k: _targetLabelKey.search_key, v: value, o: '=' });
             }
         });

apps/web/src/services/asset-inventory/components/AssetAnalysisDonutChart.vue

@@ -5,10 +5,10 @@ import {
 
 import type * as am5percent from '@amcharts/amcharts5/percent';
 
-import { numberFormatter } from '@cloudforet/utils';
-
 import { useAmcharts5 } from '@/common/composables/amcharts5';
 
+import { gray } from '@/styles/colors';
+
 import type { Legend, RealtimeChartData } from '@/services/asset-inventory/types/asset-analysis-type';
 
 
@@ -33,33 +33,22 @@ const emit = defineEmits<{(e: 'update:chart', value): void;
 const chartContext = ref<HTMLElement | null>(null);
 const chartHelper = useAmcharts5(chartContext);
 
-const valueFormatter = (val) => numberFormatter(val, { maximumFractionDigits: 0 }) as string;
 const drawChart = () => {
     const chart = chartHelper.createDonutChart();
     const seriesSettings = {
         categoryField: 'category',
         valueField: 'value',
+        alignLabels: false,
     };
     const series = chartHelper.createPieSeries(seriesSettings);
     series.labels.template.set('forceHidden', false);
     series.ticks.template.set('forceHidden', false);
+    series.ticks.template.set('visible', true);
     series.labels.template.setAll({
-        text: '{category} ({valuePercentTotal.formatNumber("0.00")}%)',
-        fontSize: 14,
-    });
-    series.labels.template.adapters.add('y', (y, target) => {
-        const dataItem = target.dataItem;
-        if (dataItem) {
-            const tick = dataItem.get('tick');
-            if (tick) {
-                if (dataItem.get('valuePercentTotal') < 5) {
-                    target.set('forceHidden', true);
-                    tick.set('forceHidden', true);
-                }
-            }
-            return y;
-        }
-        return undefined;
+        text: '{category}',
+        fontSize: 12,
+        fill: chartHelper.color(gray[700]),
+
     });
     chart.series.push(series);
 
@@ -69,7 +58,7 @@ const drawChart = () => {
     // tooltip
     if (props.chartData.some((d) => typeof d.value === 'number' && d.value > 0)) {
         const tooltip = chartHelper.createTooltip();
-        chartHelper.setPieTooltipText(series, tooltip, valueFormatter);
+        chartHelper.setPieTooltipText(series, tooltip);
         series.slices.template.set('tooltip', tooltip);
         series.data.setAll(props.chartData);
     }

apps/web/src/services/asset-inventory/components/AssetAnalysisHeader.vue

@@ -281,7 +281,7 @@ const handleOpenEditQuery = () => {
                 <template v-if="!state.currentMetricExampleId">
                     <p-button v-if="!state.isManagedMetric"
                               class="mr-2"
-                              style-type="substitutive"
+                              style-type="tertiary"
                               icon-left="ic_editor-code"
                               @click="handleOpenEditQuery"
                     >

apps/web/src/services/asset-inventory/components/AssetAnalysisHorizontalColumnChart.vue

@@ -6,12 +6,7 @@ import {
 import type * as am5xy from '@amcharts/amcharts5/xy';
 import { cloneDeep } from 'lodash';
 
-import { numberFormatter } from '@cloudforet/utils';
-
 import { useAmcharts5 } from '@/common/composables/amcharts5';
-import {
-    setXYSharedTooltipText,
-} from '@/common/composables/amcharts5/xy-chart-helper';
 
 import type { RealtimeChartData } from '@/services/asset-inventory/types/asset-analysis-type';
 
@@ -35,7 +30,6 @@ const emit = defineEmits<{(e: 'update:chart', value): void;
 const chartContext = ref<HTMLElement | null>(null);
 const chartHelper = useAmcharts5(chartContext);
 
-const valueFormatter = (val) => numberFormatter(val, { maximumFractionDigits: 0 }) as string;
 const drawChart = () => {
     // create chart and axis
     const { chart, xAxis, yAxis } = chartHelper.createXYHorizontalChart();
@@ -49,7 +43,6 @@ const drawChart = () => {
         xAxis,
         yAxis,
         baseAxis: yAxis,
-        stacked: true,
         stroke: undefined,
     };
 
@@ -64,7 +57,15 @@ const drawChart = () => {
 
     // set tooltip if showPassFindings is true
     const tooltip = chartHelper.createTooltip();
-    setXYSharedTooltipText(chart, tooltip, valueFormatter);
+    tooltip.label.adapters.add('text', (_, target) => {
+        let fieldName;
+        chart.series.each((s) => {
+            fieldName = s.get('valueXField') || '';
+        });
+        const targetName = target.dataItem?.dataContext?.category;
+        const value = target.dataItem?.dataContext?.[fieldName];
+        return `[fontSize: 14px;}]${targetName}:[/] [fontSize: 14px; bold]${value}[/]`;
+    });
     series.set('tooltip', tooltip);
 
     // add series to chart

apps/web/src/services/asset-inventory/components/AssetAnalysisLineChart.vue

@@ -7,8 +7,6 @@ import type * as am5xy from '@amcharts/amcharts5/xy';
 import dayjs from 'dayjs';
 import { cloneDeep } from 'lodash';
 
-import { numberFormatter } from '@cloudforet/utils';
-
 import { useAmcharts5 } from '@/common/composables/amcharts5';
 
 import { GRANULARITY } from '@/services/asset-inventory/constants/asset-analysis-constant';
@@ -39,7 +37,6 @@ const chartHelper = useAmcharts5(chartContext);
 const assetAnalysisPageStore = useAssetAnalysisPageStore();
 const assetAnalysisPageState = assetAnalysisPageStore.state;
 
-const valueFormatter = (val) => numberFormatter(val, { maximumFractionDigits: 0 }) as string;
 const drawChart = () => {
     const _dateAxisSettings = assetAnalysisPageState.granularity === GRANULARITY.DAILY ? {
         min: dayjs.utc(assetAnalysisPageState.period?.start).valueOf(),
@@ -89,7 +86,7 @@ const drawChart = () => {
 
         // create tooltip and set on series
         const tooltip = chartHelper.createTooltip();
-        chartHelper.setXYSharedTooltipText(chart, tooltip, valueFormatter);
+        chartHelper.setXYSharedTooltipText(chart, tooltip);
         series.set('tooltip', tooltip);
 
         // set data on series

apps/web/src/services/asset-inventory/components/AssetAnalysisNameFormModal.vue

@@ -88,6 +88,7 @@ const {
 }, {
     name(value) {
         if (!value) return i18n.t('INVENTORY.ASSET_ANALYSIS.NAME_REQUIRED');
+        if (value.length > 40) return i18n.t('INVENTORY.ASSET_ANALYSIS.MAX_LENGTH_INVALID', { max: 40 });
         if (state.existingNameList.find((d) => d === value)) return i18n.t('INVENTORY.ASSET_ANALYSIS.NAME_DUPLICATED');
         return true;
     },
@@ -128,8 +129,8 @@ const updateMetricName = async () => {
             metric_id: state.currentMetricId,
             name: name.value,
         });
-        await assetAnalysisPageStore.loadMetric(state.currentMetricId);
         state.proxyVisible = false;
+        await assetAnalysisPageStore.loadMetric(state.currentMetricId);
         showSuccessMessage(i18n.t('INVENTORY.ASSET_ANALYSIS.ALT_S_UPDATE_METRIC_NAME'), '');
     } catch (e) {
         ErrorHandler.handleRequestError(e, i18n.t('INVENTORY.ASSET_ANALYSIS.ALT_E_UPDATE_METRIC_NAME'));
@@ -141,8 +142,8 @@ const updateMetricExampleName = async () => {
             example_id: state.currentMetricExampleId,
             name: name.value,
         });
-        await assetAnalysisPageStore.loadMetricExamples(assetAnalysisPageGetters.namespaceId);
         state.proxyVisible = false;
+        await assetAnalysisPageStore.loadMetricExamples(assetAnalysisPageGetters.namespaceId);
         showSuccessMessage(i18n.t('INVENTORY.ASSET_ANALYSIS.ALT_S_UPDATE_METRIC_NAME'), '');
     } catch (e) {
         ErrorHandler.handleRequestError(e, i18n.t('INVENTORY.ASSET_ANALYSIS.ALT_E_UPDATE_METRIC_NAME'));

apps/web/src/services/asset-inventory/components/AssetAnalysisQuerySection.vue

@@ -91,6 +91,9 @@ watch(() => route.params, async () => {
                 </p-popover>
             </div>
             <div class="right-part">
+                <span class="period-text">
+                    {{ assetAnalysisPageState.periodText }}
+                </span>
                 <p-icon-button name="ic_renew"
                                style-type="tertiary"
                                shape="square"
@@ -117,8 +120,9 @@ watch(() => route.params, async () => {
             display: flex;
             align-items: center;
             gap: 0.5rem;
-            .period-label-text {
+            .period-text {
                 @apply text-label-md text-gray-700;
+                font-weight: 400;
             }
         }
         .filters-button {

apps/web/src/services/asset-inventory/components/AssetAnalysisTreeMapChart.vue

@@ -5,8 +5,6 @@ import {
 
 import { cloneDeep } from 'lodash';
 
-import { numberFormatter } from '@cloudforet/utils';
-
 import { useAmcharts5 } from '@/common/composables/amcharts5';
 
 import type {
@@ -34,7 +32,6 @@ const chartHelper = useAmcharts5(chartContext);
 const getRefinedTreemapChartData = (data: RealtimeChartData[]): TreemapChartData[] => [{
     children: data,
 }];
-const valueFormatter = (val) => numberFormatter(val, { maximumFractionDigits: 0 }) as string;
 const drawChart = () => {
     if (!props.chartData?.length) return;
     const seriesSettings = {
@@ -48,7 +45,7 @@ const drawChart = () => {
     // tooltip
     const tooltip = chartHelper.createTooltip();
     series.set('tooltip', tooltip);
-    chartHelper.setTreemapTooltipText(series, tooltip, valueFormatter);
+    chartHelper.setTreemapTooltipText(series, tooltip);
     chartHelper.setTreemapLabelText(series, {
         oversizedBehavior: 'truncate',
     });

apps/web/src/services/asset-inventory/stores/asset-analysis-page-store.ts

@@ -56,6 +56,7 @@ export const useAssetAnalysisPageStore = defineStore('page-asset-analysis', () =
         metricQueryFormMode: 'CREATE' as QueryFormMode,
         showMetricQueryFormSidebar: false,
         refreshMetricPeriodDropdown: false,
+        periodText: undefined as string|undefined,
     });
     const getters = reactive({
         namespaceId: computed<string|undefined>(() => state.metric?.namespace_id),
@@ -144,6 +145,9 @@ export const useAssetAnalysisPageStore = defineStore('page-asset-analysis', () =
     const setRefreshMetricPeriodDropdown = (refresh: boolean) => {
         state.refreshMetricPeriodDropdown = refresh;
     };
+    const setPeriodText = (periodText: string) => {
+        state.periodText = periodText;
+    };
 
     /* Actions */
     const reset = () => {
@@ -225,6 +229,7 @@ export const useAssetAnalysisPageStore = defineStore('page-asset-analysis', () =
         setShowMetricQueryFormSidebar,
         setRefreshMetricPeriodDropdown,
         setSelectedChartType,
+        setPeriodText,
     };
 
     return {

apps/web/src/services/cost-explorer/components/BudgetDetailInfo.vue

@@ -23,17 +23,14 @@ import { useProperRouteLocation } from '@/common/composables/proper-route-locati
 import { gray } from '@/styles/colors';
 
 import BudgetDetailInfoAmountPlanningTypePopover from '@/services/cost-explorer/components/BudgetDetailInfoAmountPlanningTypePopover.vue';
-import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 import { useBudgetDetailPageStore } from '@/services/cost-explorer/stores/budget-detail-page-store';
 
 
 const changeToLabelList = (providerList: string[]): string => providerList.map((provider) => storeState.providers[provider]?.label ?? '').join(', ') || 'All';
 
-const { isAdminMode } = useProperRouteLocation();
 const allReferenceStore = useAllReferenceStore();
 const { getProperRouteLocation } = useProperRouteLocation();
 
-
 const budgetPageStore = useBudgetDetailPageStore();
 const budgetPageState = budgetPageStore.$state;
 
@@ -74,14 +71,15 @@ const state = reactive({
                 { resource_type: 'identity.Project' },
             );
         }
-        if (isAdminMode.value) {
-            return ({
-                name: COST_EXPLORER_ROUTE.COST_ANALYSIS._NAME,
-                params: {
-                    workspaceId: state.budgetData?.workspace_id,
-                },
-            });
-        }
+        // HACK: This is a temporary solution. It should be changed to the proper route.
+        // if (isAdminMode.value) {
+        //     return ({
+        //         name: COST_EXPLORER_ROUTE.COST_ANALYSIS._NAME,
+        //         params: {
+        //             workspaceId: state.budgetData?.workspace_id,
+        //         },
+        //     });
+        // }
         return undefined;
     }),
     isTextTruncate: undefined as boolean|undefined,

apps/web/src/services/cost-explorer/components/CostAnalysisQuerySection.vue

@@ -99,6 +99,7 @@ const handleSaveQuerySet = async () => {
                 relative_period: costAnalysisPageState.relativePeriod,
                 group_by: costAnalysisPageState.groupBy,
                 filters: costAnalysisPageGetters.consoleFilters,
+                display_data_type: costAnalysisPageState.displayDataType,
                 metadata: { filters_schema: { enabled_properties: costAnalysisPageState.enabledFiltersProperties ?? [] } },
             },
         });