diff --git a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-favorite/modules/TopBarFavoriteContextMenu.vue b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-favorite/modules/TopBarFavoriteContextMenu.vue index bb40506a50..5ca477baf7 100644 --- a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-favorite/modules/TopBarFavoriteContextMenu.vue +++ b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-favorite/modules/TopBarFavoriteContextMenu.vue @@ -123,7 +123,7 @@ const state = reactive({ if (state.favoriteMetricItems.length) { if (results.length !== 0) results.push({ type: 'divider' }); results.push({ - name: 'title', label: i18n.t('MENU.ASSET_INVENTORY_METRIC_EXPLORER'), type: 'header', itemType: FAVORITE_TYPE.METRIC, + name: 'title', label: i18n.t('MENU.ASSET_INVENTORY_ASSET_ANALYSIS'), type: 'header', itemType: FAVORITE_TYPE.METRIC, }); results.push(...state.favoriteMetricItems.slice(0, FAVORITE_LIMIT)); } @@ -208,7 +208,7 @@ const state = reactive({ ) : []; }), favoriteMetricItems: computed(() => { - const isUserAccessible = isUserAccessibleToMenu(MENU_ID.METRIC_EXPLORER, store.getters['user/pageAccessPermissionList']); + const isUserAccessible = isUserAccessibleToMenu(MENU_ID.ASSET_ANALYSIS, store.getters['user/pageAccessPermissionList']); if (!isUserAccessible) return []; const favoriteMetricItems = convertMetricConfigToReferenceData(favoriteGetters.metricItems ?? [], storeState.metrics); const favoriteMetricExampleItems = convertMetricExampleConfigToReferenceData(favoriteGetters.metricExampleItems ?? [], storeState.metricExamples); @@ -297,7 +297,7 @@ const handleSelect = (item: FavoriteMenuItem) => { }).catch(() => {}); } else if (item.itemType === FAVORITE_TYPE.METRIC) { router.push({ - name: ASSET_INVENTORY_ROUTE.METRIC_EXPLORER.DETAIL._NAME, + name: ASSET_INVENTORY_ROUTE.ASSET_ANALYSIS.DETAIL._NAME, params: { metricId: item.name || '', }, @@ -306,7 +306,7 @@ const handleSelect = (item: FavoriteMenuItem) => { const metricId = storeState.metricExamples.find((example) => example.example_id === item.name)?.metric_id; if (!metricId) return; router.push({ - name: ASSET_INVENTORY_ROUTE.METRIC_EXPLORER.DETAIL.EXAMPLE._NAME, + name: ASSET_INVENTORY_ROUTE.ASSET_ANALYSIS.DETAIL.EXAMPLE._NAME, params: { metricId, metricExampleId: item.name || '', diff --git a/apps/web/src/common/modules/navigations/type.ts b/apps/web/src/common/modules/navigations/type.ts index fc7cdb0749..548bbd9dcf 100644 --- a/apps/web/src/common/modules/navigations/type.ts +++ b/apps/web/src/common/modules/navigations/type.ts @@ -10,7 +10,7 @@ export const RECENT_TYPE = { CLOUD_SERVICE: 'CLOUD_SERVICE', CLOUD_SERVICE_TYPE: 'CLOUD_SERVICE_TYPE', COST_ANALYSIS: 'COST_ANALYSIS', - METRIC_EXPLORER: 'METRIC_EXPLORER', + ASSET_ANALYSIS: 'ASSET_ANALYSIS', } as const; export type RecentType = typeof RECENT_TYPE[keyof typeof RECENT_TYPE]; export const recentNSearchTabMap = { @@ -22,7 +22,7 @@ export const recentNSearchTabMap = { cloudService: RECENT_TYPE.CLOUD_SERVICE, cloudServiceType: RECENT_TYPE.CLOUD_SERVICE_TYPE, costAnalysis: RECENT_TYPE.COST_ANALYSIS, - metricExplorer: RECENT_TYPE.METRIC_EXPLORER, + assetAnalysis: RECENT_TYPE.ASSET_ANALYSIS, } as const; export type RecentItem = UserConfigModel<{ diff --git a/apps/web/src/lib/access-control/config.ts b/apps/web/src/lib/access-control/config.ts index 7c3626cb5d..52dcdac820 100644 --- a/apps/web/src/lib/access-control/config.ts +++ b/apps/web/src/lib/access-control/config.ts @@ -20,7 +20,7 @@ export const WORKSPACE_OWNER_DEFAULT_PERMISSIONS: MenuId[] = [ MENU_ID.ASSET_INVENTORY, MENU_ID.CLOUD_SERVICE, MENU_ID.SERVER, - MENU_ID.METRIC_EXPLORER, + MENU_ID.ASSET_ANALYSIS, MENU_ID.SECURITY, MENU_ID.COLLECTOR, MENU_ID.SERVICE_ACCOUNT, @@ -48,7 +48,7 @@ export const WORKSPACE_MEMBER_DEFAULT_PERMISSIONS: MenuId[] = [ MENU_ID.ASSET_INVENTORY, MENU_ID.CLOUD_SERVICE, MENU_ID.SERVER, - MENU_ID.METRIC_EXPLORER, + MENU_ID.ASSET_ANALYSIS, MENU_ID.SECURITY, MENU_ID.SERVICE_ACCOUNT, MENU_ID.COST_EXPLORER, diff --git a/apps/web/src/lib/excel-export/constant.ts b/apps/web/src/lib/excel-export/constant.ts index eed30485d9..6fc574149f 100644 --- a/apps/web/src/lib/excel-export/constant.ts +++ b/apps/web/src/lib/excel-export/constant.ts @@ -12,6 +12,6 @@ export const FILE_NAME_PREFIX = Object.freeze({ budget: 'budget', policy: 'policy', cloudServiceLog: 'cloud_service_log', - metricExplorer: 'metric_explorer', + assetAnalysis: 'asset_analysis', }); // export type FILE_NAME_PREFIX = typeof FILE_NAME_PREFIX[keyof typeof FILE_NAME_PREFIX] diff --git a/apps/web/src/lib/helper/router-recent-helper.ts b/apps/web/src/lib/helper/router-recent-helper.ts index 82331094d3..aa0b13cae7 100644 --- a/apps/web/src/lib/helper/router-recent-helper.ts +++ b/apps/web/src/lib/helper/router-recent-helper.ts @@ -70,10 +70,10 @@ export const getRecentConfig = (to: Route): RecentConfig | undefined => { return { itemType: RECENT_TYPE.COST_ANALYSIS, workspaceId, itemId: costQuerySetId }; } - if (to.name === ASSET_INVENTORY_ROUTE.METRIC_EXPLORER.DETAIL._NAME) { + if (to.name === ASSET_INVENTORY_ROUTE.ASSET_ANALYSIS.DETAIL._NAME) { const metricId = to?.params?.metricId; if (!metricId) return undefined; - return { itemType: RECENT_TYPE.METRIC_EXPLORER, workspaceId, itemId: metricId }; + return { itemType: RECENT_TYPE.ASSET_ANALYSIS, workspaceId, itemId: metricId }; } /* MENU */ diff --git a/apps/web/src/lib/menu/config.ts b/apps/web/src/lib/menu/config.ts index 24eeaf8710..0f4923d9f2 100644 --- a/apps/web/src/lib/menu/config.ts +++ b/apps/web/src/lib/menu/config.ts @@ -31,7 +31,7 @@ export const MENU_ID = Object.freeze({ NOTIFICATIONS: 'notifications', INFO: 'info', NOTICE: 'notice', - METRIC_EXPLORER: 'metric_explorer', + ASSET_ANALYSIS: 'asset_analysis', } as const); export type MenuId = typeof MENU_ID[keyof typeof MENU_ID]; diff --git a/apps/web/src/lib/menu/menu-architecture.ts b/apps/web/src/lib/menu/menu-architecture.ts index a5e77819ff..95f2547da5 100644 --- a/apps/web/src/lib/menu/menu-architecture.ts +++ b/apps/web/src/lib/menu/menu-architecture.ts @@ -18,7 +18,7 @@ export const MENU_LIST: Menu[] = [ { id: MENU_ID.CLOUD_SERVICE, needPermissionByRole: true }, { id: MENU_ID.SERVER, needPermissionByRole: true }, { id: MENU_ID.SECURITY, needPermissionByRole: true }, - { id: MENU_ID.METRIC_EXPLORER, needPermissionByRole: true }, + { id: MENU_ID.ASSET_ANALYSIS, needPermissionByRole: true }, { id: MENU_ID.COLLECTOR, needPermissionByRole: true }, { id: MENU_ID.SERVICE_ACCOUNT, needPermissionByRole: true }, ], diff --git a/apps/web/src/lib/menu/menu-info.ts b/apps/web/src/lib/menu/menu-info.ts index d4f30f31a0..5bd1f14480 100644 --- a/apps/web/src/lib/menu/menu-info.ts +++ b/apps/web/src/lib/menu/menu-info.ts @@ -189,10 +189,10 @@ export const MENU_INFO_MAP: Record = Object.freeze({ translationId: 'MENU.INFO_NOTICE', icon: 'ic_gnb_bell', }, - [MENU_ID.METRIC_EXPLORER]: { - menuId: MENU_ID.METRIC_EXPLORER, - routeName: ASSET_INVENTORY_ROUTE.METRIC_EXPLORER._NAME, - translationId: 'MENU.ASSET_INVENTORY_METRIC_EXPLORER', + [MENU_ID.ASSET_ANALYSIS]: { + menuId: MENU_ID.ASSET_ANALYSIS, + routeName: ASSET_INVENTORY_ROUTE.ASSET_ANALYSIS._NAME, + translationId: 'MENU.ASSET_INVENTORY_ASSET_ANALYSIS', highlightTag: 'new', icon: 'ic_service_metric-explorer', }, diff --git a/apps/web/src/services/asset-inventory/AssetInventoryLSB.vue b/apps/web/src/services/asset-inventory/AssetInventoryLSB.vue index 0655e639af..4b79e3eeb1 100644 --- a/apps/web/src/services/asset-inventory/AssetInventoryLSB.vue +++ b/apps/web/src/services/asset-inventory/AssetInventoryLSB.vue @@ -6,8 +6,8 @@ import { clone } from 'lodash'; import { MENU_ID } from '@/lib/menu/config.js'; +import AssetAnalysisLSB from '@/services/asset-inventory/components/AssetAnalysisLSB.vue'; import CloudServiceLSB from '@/services/asset-inventory/components/CloudServiceLSB.vue'; -import MetricExplorerLSB from '@/services/asset-inventory/components/MetricExplorerLSB.vue'; import SecurityLSB from '@/services/asset-inventory/components/SecurityLSB.vue'; const route = useRoute(); @@ -24,7 +24,7 @@ const state = reactive({ diff --git a/apps/web/src/services/asset-inventory/components/MetricExplorerChart.vue b/apps/web/src/services/asset-inventory/components/AssetAnalysisChart.vue similarity index 63% rename from apps/web/src/services/asset-inventory/components/MetricExplorerChart.vue rename to apps/web/src/services/asset-inventory/components/AssetAnalysisChart.vue index 1c1a416a85..ff5e6f591e 100644 --- a/apps/web/src/services/asset-inventory/components/MetricExplorerChart.vue +++ b/apps/web/src/services/asset-inventory/components/AssetAnalysisChart.vue @@ -20,20 +20,20 @@ import { hideAllSeries, showAllSeries, toggleSeries } from '@/common/composables import { BASIC_CHART_COLORS, MASSIVE_CHART_COLORS } from '@/styles/colorsets'; -import MetricExplorerChartLegends from '@/services/asset-inventory/components/MetricExplorerChartLegends.vue'; -import MetricExplorerDonutChart from '@/services/asset-inventory/components/MetricExplorerDonutChart.vue'; -import MetricExplorerHorizontalColumnChart - from '@/services/asset-inventory/components/MetricExplorerHorizontalColumnChart.vue'; -import MetricExplorerLineChart from '@/services/asset-inventory/components/MetricExplorerLineChart.vue'; -import MetricExplorerTreeMapChart from '@/services/asset-inventory/components/MetricExplorerTreeMapChart.vue'; -import { CHART_TYPE } from '@/services/asset-inventory/constants/metric-explorer-constant'; +import AssetAnalysisChartLegends from '@/services/asset-inventory/components/AssetAnalysisChartLegends.vue'; +import AssetAnalysisDonutChart from '@/services/asset-inventory/components/AssetAnalysisDonutChart.vue'; +import AssetAnalysisHorizontalColumnChart + from '@/services/asset-inventory/components/AssetAnalysisHorizontalColumnChart.vue'; +import AssetAnalysisLineChart from '@/services/asset-inventory/components/AssetAnalysisLineChart.vue'; +import AssetAnalysisTreeMapChart from '@/services/asset-inventory/components/AssetAnalysisTreeMapChart.vue'; +import { CHART_TYPE } from '@/services/asset-inventory/constants/asset-analysis-constant'; import { getFilteredRealtimeData, getMetricChartLegends, getRefinedMetricRealtimeChartData, getRefinedMetricXYChartData, -} from '@/services/asset-inventory/helpers/metric-explorer-chart-data-helper'; -import { useMetricExplorerPageStore } from '@/services/asset-inventory/stores/metric-explorer-page-store'; +} from '@/services/asset-inventory/helpers/asset-analysis-chart-data-helper'; +import { useAssetAnalysisPageStore } from '@/services/asset-inventory/stores/asset-analysis-page-store'; import type { ChartType, Legend, @@ -41,7 +41,7 @@ import type { Period, RealtimeChartData, XYChartData, -} from '@/services/asset-inventory/types/metric-explorer-type'; +} from '@/services/asset-inventory/types/asset-analysis-type'; const QUERY_OPTIONS_TYPE = 'query_options'; @@ -54,9 +54,9 @@ const SELECT_BUTTON_ITEMS = [ ]; const route = useRoute(); -const metricExplorerPageStore = useMetricExplorerPageStore(); -const metricExplorerPageState = metricExplorerPageStore.state; -const metricExplorerPageGetters = metricExplorerPageStore.getters; +const assetAnalysisPageStore = useAssetAnalysisPageStore(); +const assetAnalysisPageState = assetAnalysisPageStore.state; +const assetAnalysisPageGetters = assetAnalysisPageStore.getters; const state = reactive({ loading: true, currentMetricId: computed(() => route.params.metricId), @@ -65,15 +65,15 @@ const state = reactive({ legends: [] as Legend[], chart: null as XYChart|am5percent.PieChart| null, periodText: computed(() => { - if (isEmpty(metricExplorerPageState.period)) return ''; - if (metricExplorerPageGetters.isRealtimeChart) { + if (isEmpty(assetAnalysisPageState.period)) return ''; + if (assetAnalysisPageGetters.isRealtimeChart) { return state.data?.results[0]?.date || ''; } - return `${metricExplorerPageState.period.start} ~ ${metricExplorerPageState.period.end}`; + return `${assetAnalysisPageState.period.start} ~ ${assetAnalysisPageState.period.end}`; }), chartColorSet: computed(() => { const _isMassive = state.legends.length > BASIC_CHART_COLORS.length; - const _index = SELECT_BUTTON_ITEMS.findIndex((item) => item.name === metricExplorerPageState.selectedChartType); + const _index = SELECT_BUTTON_ITEMS.findIndex((item) => item.name === assetAnalysisPageState.selectedChartType); const _sliceIndex = _isMassive ? _index * 4 : _index * 2; let _colorSet = MASSIVE_CHART_COLORS; if (!_isMassive) { @@ -90,21 +90,21 @@ const analyzeApiQueryHelper = new ApiQueryHelper().setPage(1, 15); const fetcher = getCancellableFetcher>(SpaceConnector.clientV2.inventory.metricData.analyze); const analyzeMetricData = async (): Promise|undefined> => { try { - analyzeApiQueryHelper.setFilters(metricExplorerPageGetters.consoleFilters); - const _groupBy = metricExplorerPageState.selectedChartGroupBy ? [metricExplorerPageState.selectedChartGroupBy] : []; - const _sort = metricExplorerPageGetters.isRealtimeChart ? [{ key: 'date', desc: true }] : [{ key: '_total_count', desc: true }]; - const _fieldGroup = metricExplorerPageGetters.isRealtimeChart ? [] : ['date']; + analyzeApiQueryHelper.setFilters(assetAnalysisPageGetters.consoleFilters); + const _groupBy = assetAnalysisPageState.selectedChartGroupBy ? [assetAnalysisPageState.selectedChartGroupBy] : []; + const _sort = assetAnalysisPageGetters.isRealtimeChart ? [{ key: 'date', desc: true }] : [{ key: '_total_count', desc: true }]; + const _fieldGroup = assetAnalysisPageGetters.isRealtimeChart ? [] : ['date']; const { status, response } = await fetcher({ metric_id: state.currentMetricId, query: { - granularity: metricExplorerPageState.granularity, + granularity: assetAnalysisPageState.granularity, group_by: _groupBy, - start: metricExplorerPageState.period?.start, - end: metricExplorerPageState.period?.end, + start: assetAnalysisPageState.period?.start, + end: assetAnalysisPageState.period?.end, fields: { count: { key: 'value', - operator: metricExplorerPageState.selectedOperator, + operator: assetAnalysisPageState.selectedOperator, }, }, sort: _sort, @@ -113,7 +113,7 @@ const analyzeMetricData = async (): Promise { if (!rawData) return; state.data = rawData; - const _granularity = metricExplorerPageState.granularity; - const _period = metricExplorerPageState.period as Period; - const _groupBy = metricExplorerPageState.selectedChartGroupBy; + const _granularity = assetAnalysisPageState.granularity; + const _period = assetAnalysisPageState.period as Period; + const _groupBy = assetAnalysisPageState.selectedChartGroupBy; - state.legends = getMetricChartLegends(metricExplorerPageGetters.labelKeysReferenceMap, metricExplorerPageState.selectedChartType, rawData, _groupBy); - if (metricExplorerPageGetters.isRealtimeChart) { - state.chartData = getRefinedMetricRealtimeChartData(metricExplorerPageGetters.labelKeysReferenceMap, rawData, _groupBy); + state.legends = getMetricChartLegends(assetAnalysisPageGetters.labelKeysReferenceMap, assetAnalysisPageState.selectedChartType, rawData, _groupBy); + if (assetAnalysisPageGetters.isRealtimeChart) { + state.chartData = getRefinedMetricRealtimeChartData(assetAnalysisPageGetters.labelKeysReferenceMap, rawData, _groupBy); } else { state.chartData = getRefinedMetricXYChartData(rawData, _granularity, _period, _groupBy); } @@ -149,7 +149,7 @@ const handleSelectButton = (selected: ChartType|string) => { if (selected !== QUERY_OPTIONS_TYPE) { setChartData(); } - metricExplorerPageStore.setSelectedChartType(selected); + assetAnalysisPageStore.setSelectedChartType(selected); }; const handleToggleSeries = (index: number) => { toggleSeries(state.chart as XYChart, index); @@ -164,32 +164,32 @@ const handleAllSeries = (type: string) => { watch([ () => state.currentMetricId, - () => metricExplorerPageState.period, - () => metricExplorerPageState.selectedOperator, - () => metricExplorerPageState.selectedChartGroupBy, - () => metricExplorerPageGetters.consoleFilters, + () => assetAnalysisPageState.period, + () => assetAnalysisPageState.selectedOperator, + () => assetAnalysisPageState.selectedChartGroupBy, + () => assetAnalysisPageGetters.consoleFilters, ], async ([metricId]) => { if (!metricId) return; await setChartData(); }, { immediate: true }); -watch(() => metricExplorerPageState.refreshMetricData, async (refresh) => { +watch(() => assetAnalysisPageState.refreshMetricData, async (refresh) => { if (refresh) { await setChartData(); - metricExplorerPageStore.setRefreshMetricData(false); + assetAnalysisPageStore.setRefreshMetricData(false); } }, { immediate: false });