From 02cf2fe1d9aff084aec377fad86dd72587044959 Mon Sep 17 00:00:00 2001 From: cloudforet-admin Date: Thu, 7 Nov 2024 08:29:28 +0000 Subject: [PATCH 01/11] chore: version 2.0.dev232 Signed-off-by: cloudforet-admin --- apps/web/package.json | 2 +- package-lock.json | 6 +++--- package.json | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/web/package.json b/apps/web/package.json index cf3516b93d..15e0708581 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -1,6 +1,6 @@ { "name": "web", - "version": "2.0.0-dev231", + "version": "2.0.0-dev232", "private": true, "description": "Cloudforet Console Web Application", "author": "Cloudforet", diff --git a/package-lock.json b/package-lock.json index 7ed9b30a15..4f7d6bcc83 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "cloudforet-console", - "version": "2.0.0-dev231", + "version": "2.0.0-dev232", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "cloudforet-console", - "version": "2.0.0-dev231", + "version": "2.0.0-dev232", "workspaces": [ "apps/*", "packages/*" @@ -166,7 +166,7 @@ } }, "apps/web": { - "version": "2.0.0-dev231", + "version": "2.0.0-dev232", "license": "Apache-2.0", "dependencies": { "@amcharts/amcharts5": "^5.4.7", diff --git a/package.json b/package.json index 2920c89599..abfd20b5a2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cloudforet-console", - "version": "2.0.0-dev231", + "version": "2.0.0-dev232", "private": true, "workspaces": [ "apps/*", From e8b02ff64b89d2bbf5680889c246c7152c583bff Mon Sep 17 00:00:00 2001 From: nayeongkim Date: Tue, 12 Nov 2024 09:33:22 +0900 Subject: [PATCH 02/11] chore: apply mobile responsiveness Signed-off-by: NaYeong,Kim --- .../common/components/bookmark/BookmarkDeleteModal.vue | 1 + .../modules/top-bar-favorite/TopBarFavorite.vue | 8 ++++++++ .../modules/top-bar-integration/TopBarIntegration.vue | 8 ++++++++ .../modules/top-bar-notice/TopBarNotice.vue | 8 ++++++++ .../modules/top-bar-notifications/TopBarNotifications.vue | 8 ++++++++ 5 files changed, 33 insertions(+) diff --git a/apps/web/src/common/components/bookmark/BookmarkDeleteModal.vue b/apps/web/src/common/components/bookmark/BookmarkDeleteModal.vue index 9744cc8621..dedab39e70 100644 --- a/apps/web/src/common/components/bookmark/BookmarkDeleteModal.vue +++ b/apps/web/src/common/components/bookmark/BookmarkDeleteModal.vue @@ -196,6 +196,7 @@ const handleClose = () => { } .text-wrapper { @apply flex flex-col text-label-md; + max-width: calc(100% - 3rem); .link { @apply truncate text-label-sm text-gray-500; max-width: 22rem; diff --git a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-favorite/TopBarFavorite.vue b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-favorite/TopBarFavorite.vue index 20fc3a9c48..002a0c4e55 100644 --- a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-favorite/TopBarFavorite.vue +++ b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-favorite/TopBarFavorite.vue @@ -107,5 +107,13 @@ const handleRecentFavoriteButtonClick = () => { margin-right: -0.5rem; z-index: 1000; } + + @screen mobile { + position: initial; + .favorite-content { + width: 100%; + left: 0; + } + } } diff --git a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-integration/TopBarIntegration.vue b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-integration/TopBarIntegration.vue index 46331bff59..cb910ea6b8 100644 --- a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-integration/TopBarIntegration.vue +++ b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-integration/TopBarIntegration.vue @@ -116,5 +116,13 @@ const handleIntegrationButtonClick = () => { margin-right: -0.5rem; z-index: 1000; } + + @screen mobile { + position: initial; + .integration-content { + width: 100%; + left: 0; + } + } } diff --git a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-notice/TopBarNotice.vue b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-notice/TopBarNotice.vue index b6fb586c3c..67b3807b7e 100644 --- a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-notice/TopBarNotice.vue +++ b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-notice/TopBarNotice.vue @@ -166,5 +166,13 @@ watch(() => store.state.user.isSessionExpired, (isSessionExpired) => { margin-right: -0.5rem; z-index: 1000; } + + @screen mobile { + position: initial; + .notice-content { + width: 100%; + left: 0; + } + } } diff --git a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-notifications/TopBarNotifications.vue b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-notifications/TopBarNotifications.vue index 5590a5f5db..7573012ed1 100644 --- a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-notifications/TopBarNotifications.vue +++ b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-notifications/TopBarNotifications.vue @@ -178,5 +178,13 @@ watch(() => store.state.user.isSessionExpired, (isSessionExpired) => { margin-right: -0.5rem; z-index: 1000; } + + @screen mobile { + position: initial; + .notification-content { + width: 100%; + left: 0; + } + } } From 5c1763e7bd0191bae17a4b27de6ad4e89cb480ac Mon Sep 17 00:00:00 2001 From: nayeongkim Date: Tue, 12 Nov 2024 09:34:21 +0900 Subject: [PATCH 03/11] chore: apply error modal message Signed-off-by: NaYeong,Kim --- .../src/services/iam/components/UserManagementStatusModal.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/src/services/iam/components/UserManagementStatusModal.vue b/apps/web/src/services/iam/components/UserManagementStatusModal.vue index 72b9710ba6..70a13df664 100644 --- a/apps/web/src/services/iam/components/UserManagementStatusModal.vue +++ b/apps/web/src/services/iam/components/UserManagementStatusModal.vue @@ -85,7 +85,7 @@ const checkModalConfirm = async () => { ErrorHandler.handleRequestError(new Error(''), vm.$tc(languageCode, failCount)); } } catch (e: any) { - ErrorHandler.handleError(e); + ErrorHandler.handleError(e, true); } finally { state.loading = false; handleClose(); From 369d7c10f35dbd83b67731453d2b689172766c5c Mon Sep 17 00:00:00 2001 From: nayeongkim Date: Tue, 12 Nov 2024 09:42:39 +0900 Subject: [PATCH 04/11] fix: fixed build error Signed-off-by: NaYeong,Kim --- .../components/CollectorAdditionalRuleForm.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/web/src/services/asset-inventory/components/CollectorAdditionalRuleForm.vue b/apps/web/src/services/asset-inventory/components/CollectorAdditionalRuleForm.vue index 438351483a..ca93b6f9b5 100644 --- a/apps/web/src/services/asset-inventory/components/CollectorAdditionalRuleForm.vue +++ b/apps/web/src/services/asset-inventory/components/CollectorAdditionalRuleForm.vue @@ -26,7 +26,7 @@ import type { } from '@/schema/inventory/collector-rule/type'; import type { RegionListParameters } from '@/schema/inventory/region/api-verbs/list'; import type { RegionModel } from '@/schema/inventory/region/model'; -import { i18n, i18n as _i18n } from '@/translations'; +import { i18n } from '@/translations'; import { useAppContextStore } from '@/store/app-context/app-context-store'; import { useAllReferenceStore } from '@/store/reference/all-reference-store'; @@ -108,8 +108,8 @@ const state = reactive({ return isConditionTooltipVisible; }), conditionPolicies: computed(() => ({ - [COLLECTOR_RULE_CONDITION_POLICY.ALL]: _i18n.t('INVENTORY.COLLECTOR.COLLECTOR_RULE.ALL'), - [COLLECTOR_RULE_CONDITION_POLICY.ANY]: _i18n.t('INVENTORY.COLLECTOR.COLLECTOR_RULE.ANY'), + [COLLECTOR_RULE_CONDITION_POLICY.ALL]: i18n.t('INVENTORY.COLLECTOR.COLLECTOR_RULE.ALL'), + [COLLECTOR_RULE_CONDITION_POLICY.ANY]: i18n.t('INVENTORY.COLLECTOR.COLLECTOR_RULE.ANY'), })), selectedConditionRadioIdx: props.data?.conditions_policy ?? COLLECTOR_RULE_CONDITION_POLICY.ALL as CollectorRuleConditionPolicy, conditionKeyMenu: computed(() => { From 5a1af6ccf0dce70b37e1e1520dddf48738dc7e43 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piggy=20Park=20=28=EB=B0=95=EC=9A=A9=ED=83=9C=29?= Date: Tue, 12 Nov 2024 13:29:44 +0900 Subject: [PATCH 05/11] refactor: refactor dashboard store state management (#5015) * refactor: refactor dashboard store state management Signed-off-by: samuel.park * chore: apply change dashboardInfo (getters -> state) Signed-off-by: samuel.park * chore: apply review Signed-off-by: samuel.park --------- Signed-off-by: samuel.park --- .../_components/WidgetFormOverlayStep2.vue | 2 +- .../widgets/_store/widget-generate-store.ts | 11 ++-- .../DashboardDetailHeader.vue | 8 +-- .../DashboardGlobalVariableFilterEnum.vue | 2 +- ...shboardGlobalVariableFilterNumberInput.vue | 4 +- ...hboardGlobalVariableFilterNumberSlider.vue | 4 +- ...DashboardGlobalVariableFilterReference.vue | 2 +- ...DashboardGlobalVariableFilterTextInput.vue | 2 +- .../DashboardManageVariableOverlay.vue | 6 +-- .../DashboardRefreshDropdown.vue | 2 +- .../DashboardToolsetDateDropdown.vue | 2 +- .../DashboardVariablesFormModal.vue | 4 +- .../DashboardVariablesMoreButton.vue | 2 +- .../dashboard-detail/DashboardVariablesV2.vue | 6 +-- .../DashboardWidgetContainerV2.vue | 53 ++++--------------- .../components/legacy/DashboardVariables.vue | 8 +-- .../dashboards/pages/DashboardDetailPage.vue | 12 +++-- .../stores/dashboard-detail-info-store.ts | 33 ++++++------ .../dashboards/stores/widget-form-store.ts | 2 +- .../project/pages/ProjectDashboardPage.vue | 10 ++-- 20 files changed, 73 insertions(+), 102 deletions(-) diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue index 107624b7d7..af2458b3ea 100644 --- a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue +++ b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue @@ -88,7 +88,7 @@ const state = reactive({ // varsSnapshot: {} as DashboardVars, dashboardOptionsSnapshot: {} as DashboardOptions, - isSharedDashboard: computed(() => !!dashboardDetailGetters.dashboardInfo?.shared && !storeState.isAdminMode), + isSharedDashboard: computed(() => !!dashboardDetailState.dashboardInfo?.shared && !storeState.isAdminMode), }); const { diff --git a/apps/web/src/common/modules/widgets/_store/widget-generate-store.ts b/apps/web/src/common/modules/widgets/_store/widget-generate-store.ts index 2fcf176d18..bea3ce1f7a 100644 --- a/apps/web/src/common/modules/widgets/_store/widget-generate-store.ts +++ b/apps/web/src/common/modules/widgets/_store/widget-generate-store.ts @@ -44,7 +44,8 @@ type DataTableModel = PublicDataTableModel|PrivateDataTableModel; type WidgetModel = PublicWidgetModel|PrivateWidgetModel; type WidgetUpdateParameters = PublicWidgetUpdateParameters|PrivateWidgetUpdateParameters; export const useWidgetGenerateStore = defineStore('widget-generate', () => { - const dashboardDetailGetters = useDashboardDetailInfoStore().getters; + const dashboardDetailStore = useDashboardDetailInfoStore(); + const dashboardDetailState = dashboardDetailStore.state; const state = reactive({ // display showOverlay: false, @@ -169,7 +170,7 @@ export const useWidgetGenerateStore = defineStore('widget-generate', () => { createAddDataTable: async (addParams: Partial):Promise => { const parameters = { widget_id: state.widgetId, - vars: dashboardDetailGetters.dashboardInfo?.vars || {}, + vars: dashboardDetailState.dashboardInfo?.vars || {}, ...addParams, } as DataTableAddParameters; const isPrivate = state.widgetId.startsWith('private'); @@ -190,7 +191,7 @@ export const useWidgetGenerateStore = defineStore('widget-generate', () => { createTransformDataTable: async (transformParams: Partial, unsavedId: string): Promise => { const parameters = { widget_id: state.widgetId, - vars: dashboardDetailGetters.dashboardInfo?.vars || {}, + vars: dashboardDetailState.dashboardInfo?.vars || {}, ...transformParams, } as DataTableTransformParameters; const isPrivate = state.widgetId.startsWith('private'); @@ -259,7 +260,7 @@ export const useWidgetGenerateStore = defineStore('widget-generate', () => { } else { result = await fetcher({ ...updateParams, - vars: dashboardDetailGetters.dashboardInfo?.vars || {}, + vars: dashboardDetailState.dashboardInfo?.vars || {}, }); if (state.widget?.state === 'ACTIVE') { await actions.updateWidget({ state: 'INACTIVE' }); @@ -356,7 +357,7 @@ export const useWidgetGenerateStore = defineStore('widget-generate', () => { ...loadParams, sort: _sort, data_table_id: loadParams.data_table_id || state.selectedDataTableId as string, // for fetching without data_table_id - vars: dashboardDetailGetters.dashboardInfo?.vars || {}, + vars: dashboardDetailState.dashboardInfo?.vars || {}, }); state.previewData = { results: results ?? [], total_count: total_count ?? 0 }; setDataTableLoadFailed(false); diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardDetailHeader.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardDetailHeader.vue index 4422fa7a3a..47693099e7 100644 --- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardDetailHeader.vue +++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardDetailHeader.vue @@ -45,11 +45,11 @@ const { getControlMenuItems } = useDashboardControlMenuItems({ dashboardList: computed(() => dashboardPageControlGetters.allDashboardItems), }); const state = reactive({ - isSharedDashboard: computed(() => !!dashboardDetailGetters.dashboardInfo?.shared), - sharedScope: computed(() => dashboardDetailGetters.dashboardInfo?.scope), + isSharedDashboard: computed(() => !!dashboardDetailState.dashboardInfo?.shared), + sharedScope: computed(() => dashboardDetailState.dashboardInfo?.scope), selectedSharedScope: 'WORKSPACE' as DashboardScope, showBadge: computed(() => { - if (dashboardDetailGetters.dashboardInfo?.user_id) return true; + if (dashboardDetailState.dashboardInfo?.user_id) return true; // TODO: is admin type dashboard, return true return state.isSharedDashboard; }), @@ -65,7 +65,7 @@ const state = reactive({ if (dashboardDetailState.dashboardId?.startsWith('private')) return i18n.t('DASHBOARDS.ALL_DASHBOARDS.PRIVATE'); if (state.isSharedDashboard) { if (storeState.isAdminMode) { - if (dashboardDetailGetters.dashboardInfo?.scope === 'PROJECT') { + if (dashboardDetailState.dashboardInfo?.scope === 'PROJECT') { return i18n.t('DASHBOARDS.DETAIL.SHARED_TO_ALL_PROJECTS'); } return i18n.t('DASHBOARDS.DETAIL.SHARED_TO_WORKSPACES'); diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterEnum.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterEnum.vue index f650eaf42f..3c2fcd6313 100644 --- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterEnum.vue +++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterEnum.vue @@ -83,7 +83,7 @@ watch(() => dashboardDetailGetters.dashboardVarsSchemaProperties, async (varsSch const _variable = props.variable as TextEnumVariable|NumberEnumVariable; if (isEqual(varsSchema[_variable.key], prevVarsSchema?.[varsSchema[_variable.key]])) return; - const value = dashboardDetailGetters.dashboardInfo?.vars?.[_variable.key]; + const value = dashboardDetailState.dashboardInfo?.vars?.[_variable.key]; if (value) { await initSelected(value); } else { diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberInput.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberInput.vue index dc528ea954..6bab5190da 100644 --- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberInput.vue +++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberInput.vue @@ -149,10 +149,10 @@ watch(() => dashboardDetailGetters.dashboardVarsSchemaProperties, (varsSchema, p const _variable = props.variable as NumberAnyVariable; if (isEqual(varsSchema[_variable.key], prevVarsSchema?.[varsSchema[_variable.key]])) return; - state.value = (dashboardDetailGetters.dashboardInfo?.vars?.[_variable.key] as number) || _variable.options.min; + state.value = (dashboardDetailState.dashboardInfo?.vars?.[_variable.key] as number) || _variable.options.min; changeVariables(state.value); - state.keyword = (dashboardDetailGetters.dashboardInfo?.vars?.[_variable.key] as number) || _variable.options.min; + state.keyword = (dashboardDetailState.dashboardInfo?.vars?.[_variable.key] as number) || _variable.options.min; }, { immediate: true }); diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberSlider.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberSlider.vue index c94edf8ec6..dbce99cde9 100644 --- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberSlider.vue +++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberSlider.vue @@ -57,10 +57,10 @@ watch(() => dashboardDetailGetters.dashboardVarsSchemaProperties, (varsSchema, p const _variable = props.variable as NumberAnyVariable; if (isEqual(varsSchema[_variable.key], prevVarsSchema?.[varsSchema[_variable.key]])) return; - state.value = dashboardDetailGetters.dashboardInfo?.vars?.[_variable.key] || _variable.options.min; + state.value = dashboardDetailState.dashboardInfo?.vars?.[_variable.key] || _variable.options.min; changeVariables(state.value); - state.keyword = dashboardDetailGetters.dashboardInfo?.vars?.[_variable.key] || _variable.options.min; + state.keyword = dashboardDetailState.dashboardInfo?.vars?.[_variable.key] || _variable.options.min; }, { immediate: true }); diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterReference.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterReference.vue index 0ed93e05bf..aada3aa269 100644 --- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterReference.vue +++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterReference.vue @@ -141,7 +141,7 @@ watch(() => dashboardDetailGetters.dashboardVarsSchemaProperties, async (varsSch const _variable = props.variable as ReferenceVariable; if (isEqual(varsSchema[_variable.key], prevVarsSchema?.[varsSchema[_variable.key]])) return; - const value = dashboardDetailGetters.dashboardInfo?.vars?.[_variable.key]; + const value = dashboardDetailState.dashboardInfo?.vars?.[_variable.key]; if (value) { await initSelected(value); } else { diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterTextInput.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterTextInput.vue index 9c68d43549..227e46f19b 100644 --- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterTextInput.vue +++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterTextInput.vue @@ -71,7 +71,7 @@ const changeVariables = (changedSelected?: string) => { watch(() => dashboardDetailGetters.dashboardVarsSchemaProperties, (varsSchema, prevVarsSchema) => { const _variable = props.variable as TextAnyVariable; if (isEqual(varsSchema[_variable.key], prevVarsSchema?.[_variable.key])) return; - state.value = dashboardDetailGetters.dashboardInfo?.vars?.[_variable.key] || _variable.options?.defaultValue; + state.value = dashboardDetailState.dashboardInfo?.vars?.[_variable.key] || _variable.options?.defaultValue; changeVariables(state.value); }, { immediate: true }); diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableOverlay.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableOverlay.vue index 3f8811237a..abac997607 100644 --- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableOverlay.vue +++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableOverlay.vue @@ -87,7 +87,7 @@ const state = reactive({ { name: 'buttons', label: ' ', width: '144px' }, ] as DataTableField[], showDeleteWarning: computed(() => { - const _varsKeys = Object.keys(dashboardDetailGetters.dashboardInfo?.vars || {}); + const _varsKeys = Object.keys(dashboardDetailState.dashboardInfo?.vars || {}); return _varsKeys.includes(state.selectedVariableKey); }), }); @@ -108,7 +108,7 @@ const deleteDashboardVarsSchema = async (dashboardId: string, variableKey: strin try { const _varsSchemaProperties = cloneDeep(dashboardDetailGetters.dashboardVarsSchemaProperties); delete _varsSchemaProperties[variableKey]; - const _vars = cloneDeep(dashboardDetailGetters.dashboardInfo?.vars || {}); + const _vars = cloneDeep(dashboardDetailState.dashboardInfo?.vars || {}); const _tempVars = cloneDeep(dashboardDetailState.vars); delete _vars[variableKey]; delete _tempVars[variableKey]; @@ -152,7 +152,7 @@ const cloneDashboardVarsSchema = async (dashboardId: string, variableKey: string }; const updateUseDashboardVarsSchema = async (dashboardId: string, variableKey: string, use: boolean) => { try { - const _vars = cloneDeep(dashboardDetailGetters.dashboardInfo?.vars || {}); + const _vars = cloneDeep(dashboardDetailState.dashboardInfo?.vars || {}); const _tempVars = cloneDeep(dashboardDetailState.vars); delete _vars[variableKey]; delete _tempVars[variableKey]; diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardRefreshDropdown.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardRefreshDropdown.vue index 12b0b5a831..04b84eccab 100644 --- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardRefreshDropdown.vue +++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardRefreshDropdown.vue @@ -93,7 +93,7 @@ const handleSelectRefreshIntervalOption = (option) => { if (!dashboardDetailGetters.disableManageButtons) { dashboardStore.updateDashboard(dashboardDetailState.dashboardId, { options: { - ...dashboardDetailGetters.dashboardInfo?.options || {}, + ...dashboardDetailState.dashboardInfo?.options || {}, refresh_interval_option: option, }, }); diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardToolsetDateDropdown.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardToolsetDateDropdown.vue index bb834a6170..98c0260a27 100644 --- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardToolsetDateDropdown.vue +++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardToolsetDateDropdown.vue @@ -102,7 +102,7 @@ const handleSelectMonthMenuItem = (selected: string) => { if (!dashboardDetailGetters.disableManageButtons && !props.widgetMode) { dashboardStore.updateDashboard(dashboardDetailState.dashboardId, { options: { - ...dashboardDetailGetters.dashboardInfo?.options || {}, + ...dashboardDetailState.dashboardInfo?.options || {}, date_range: state.selectedDateRange, }, }); diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormModal.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormModal.vue index 4a572e25a8..28e07d96e5 100644 --- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormModal.vue +++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormModal.vue @@ -81,7 +81,7 @@ const state = reactive({ isDynamicFormValid: false, showUpdateWarning: computed(() => { if (props.modalType === 'CREATE') return false; - const _varsKeys = Object.keys(dashboardDetailGetters.dashboardInfo?.vars || {}); + const _varsKeys = Object.keys(dashboardDetailState.dashboardInfo?.vars || {}); return _varsKeys.includes(props.variableKey || ''); }), // @@ -186,7 +186,7 @@ const updateDashboardVarsSchema = async (dashboardId: string) => { use: state.targetVariable?.use || false, created_by: state.targetVariable?.created_by, }; - const _vars = cloneDeep(dashboardDetailGetters.dashboardInfo?.vars || {}); + const _vars = cloneDeep(dashboardDetailState.dashboardInfo?.vars || {}); const _tempVars = cloneDeep(dashboardDetailState.vars); delete _vars[_originalKey]; delete _tempVars[_originalKey]; diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesMoreButton.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesMoreButton.vue index 9aa197f163..c1cf6d27d5 100644 --- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesMoreButton.vue +++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesMoreButton.vue @@ -92,7 +92,7 @@ const toggleUseDashboardVarsSchema = debounce(async (dashboardId: string, variab try { const _dashboardVarsSchemaProperties: Record = cloneDeep(dashboardDetailGetters.dashboardVarsSchemaProperties); const _use = !_dashboardVarsSchemaProperties[variableKey].use; - const _vars = cloneDeep(dashboardDetailGetters.dashboardInfo?.vars || {}); + const _vars = cloneDeep(dashboardDetailState.dashboardInfo?.vars || {}); const _tempVars = cloneDeep(dashboardDetailState.vars); if (!_use) { delete _vars[variableKey]; diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesV2.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesV2.vue index 4a5f9508a0..58e80e7595 100644 --- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesV2.vue +++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesV2.vue @@ -72,7 +72,7 @@ const state = reactive({ modifiedVariablesSchemaProperties: computed(() => { const results: string[] = []; state.newGlobalVariables.forEach((_var) => { - if (!isEqual(dashboardDetailGetters.dashboardInfo?.vars?.[_var.key], dashboardDetailState.vars?.[_var.key])) { + if (!isEqual(dashboardDetailState.dashboardInfo?.vars?.[_var.key], dashboardDetailState.vars?.[_var.key])) { results.push(_var.key); } }); @@ -80,7 +80,7 @@ const state = reactive({ }), showSaveButton: computed(() => !props.disableSaveButton && state.modifiedVariablesSchemaProperties.length > 0), notChanged: computed(() => state.modifiedVariablesSchemaProperties.length === 0), - isSharedDashboard: computed(() => !!dashboardDetailGetters.dashboardInfo?.shared && !storeState.isAdminMode), + isSharedDashboard: computed(() => !!dashboardDetailState.dashboardInfo?.shared && !storeState.isAdminMode), }); const handleClickSaveButton = () => { @@ -88,7 +88,7 @@ const handleClickSaveButton = () => { dashboardDetailStore.setVars(dashboardDetailState.vars); }; const handleResetVariables = () => { - const _originVars = props.originVars ?? dashboardDetailGetters.dashboardInfo?.vars ?? {}; + const _originVars = props.originVars ?? dashboardDetailState.dashboardInfo?.vars ?? {}; dashboardDetailStore.setVars(_originVars); }; diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardWidgetContainerV2.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardWidgetContainerV2.vue index 1e617a56bf..01a98fc222 100644 --- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardWidgetContainerV2.vue +++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardWidgetContainerV2.vue @@ -74,8 +74,6 @@ const widgetGenerateStore = useWidgetGenerateStore(); const widgetGenerateState = widgetGenerateStore.state; const allReferenceTypeInfoStore = useAllReferenceTypeInfoStore(); const allReferenceStore = useAllReferenceStore(); -// const dashboardSettings = useDashboardSettingsStore(); -// const dashboardSettingsState = dashboardSettings.state; /* State */ const containerRef = ref(null); @@ -88,8 +86,7 @@ const state = reactive({ mountedWidgetMap: {} as Record, intersectedWidgetMap: {} as Record, isAllWidgetsMounted: computed(() => Object.values(state.mountedWidgetMap).every((d) => d)), - refinedWidgetInfoList: computed(() => getRefinedWidgetInfoList(dashboardDetailState.dashboardWidgets)), - widgetLoading: true, + refinedWidgetInfoList: undefined as RefinedWidgetInfo[]|undefined, overlayType: 'EDIT' as 'EDIT' | 'EXPAND', showExpandOverlay: false, remountWidgetId: undefined as string|undefined, @@ -102,9 +99,8 @@ const widgetDeleteState = reactive({ /* Util */ const { containerWidth } = useDashboardContainerWidth({ containerRef, observeResize: true }); -const getRefinedWidgetInfoList = (dashboardWidgets: Array): RefinedWidgetInfo[] => { +const getRefinedWidgetInfoList = (dashboardWidgets: Array): RefinedWidgetInfo[]|undefined => { if (!dashboardWidgets.length) { - state.widgetLoading = false; return []; } const _refinedWidgets: RefinedWidgetInfo[] = []; @@ -134,7 +130,6 @@ const getRefinedWidgetInfoList = (dashboardWidgets: Array { @@ -350,18 +345,11 @@ const handleClickAddWidget = () => { widgetGenerateStore.setOverlayType('ADD'); widgetGenerateStore.setShowOverlay(true); }; -// const handleChangeDoNotShowDateRangeWarning = (value: boolean) => { -// dashboardSettings.updateDoNotShowDateRangeWarning(value); -// }; - /* Watcher */ -watch(() => dashboardDetailState.dashboardId, (dashboardId) => { - if (dashboardId) { - state.widgetLoading = true; - dashboardDetailStore.listDashboardWidgets(); - } -}, { immediate: true }); +watch(() => dashboardDetailState.dashboardWidgets, (widgets) => { + state.refinedWidgetInfoList = getRefinedWidgetInfoList(widgets); +}); watch(() => widgetGenerateState.showOverlay, async (showOverlay) => { if (!showOverlay && widgetGenerateState.overlayType !== 'EXPAND') { state.remountWidgetId = widgetGenerateState.latestWidgetId; @@ -413,30 +401,7 @@ defineExpose({
- - - - - - - - - - - - - - - - - - - - - - - -
-
diff --git a/apps/web/src/services/dashboards/components/legacy/DashboardVariables.vue b/apps/web/src/services/dashboards/components/legacy/DashboardVariables.vue index bbb672d911..154763dad2 100644 --- a/apps/web/src/services/dashboards/components/legacy/DashboardVariables.vue +++ b/apps/web/src/services/dashboards/components/legacy/DashboardVariables.vue @@ -36,11 +36,11 @@ const state = reactive({ modifiedVariablesSchemaProperties: computed(() => { if (props.disableSaveButton) return []; const results: string[] = []; - const prevUsedProperties = Object.entries(dashboardDetailGetters.dashboardInfo?.variables_schema.properties ?? {}).filter(([, v]) => v.use); + const prevUsedProperties = Object.entries(dashboardDetailState.dashboardInfo?.variables_schema.properties ?? {}).filter(([, v]) => v.use); const currUsedProperties = Object.entries(dashboardDetailGetters.refinedVariablesSchema.properties).filter(([, v]) => v.use); // check variables changed currUsedProperties.forEach(([k]) => { - if (!isEqual(dashboardDetailGetters.dashboardInfo?.variables?.[k], dashboardDetailState.variables?.[k])) { + if (!isEqual(dashboardDetailState.dashboardInfo?.variables?.[k], dashboardDetailState.variables?.[k])) { results.push(k); } }); @@ -58,8 +58,8 @@ const handleClickSaveButton = () => { }); }; const handleResetVariables = () => { - const _originVariables = props.originVariables ?? dashboardDetailGetters.dashboardInfo?.variables; - const _originVariablesSchema = props.originVariablesSchema ?? dashboardDetailGetters.dashboardInfo?.variables_schema; + const _originVariables = props.originVariables ?? dashboardDetailState.dashboardInfo?.variables; + const _originVariablesSchema = props.originVariablesSchema ?? dashboardDetailState.dashboardInfo?.variables_schema; dashboardDetailStore.resetVariables(_originVariables, _originVariablesSchema); }; diff --git a/apps/web/src/services/dashboards/pages/DashboardDetailPage.vue b/apps/web/src/services/dashboards/pages/DashboardDetailPage.vue index be263697b0..342681fdcb 100644 --- a/apps/web/src/services/dashboards/pages/DashboardDetailPage.vue +++ b/apps/web/src/services/dashboards/pages/DashboardDetailPage.vue @@ -60,9 +60,9 @@ const state = reactive({ dashboardVariablesLoading: false, }); -const getDashboardData = async (dashboardId: string) => { +const getDashboardDataAndListWidget = async (dashboardId: string) => { try { - await dashboardDetailStore.getDashboardInfo(dashboardId); + await dashboardDetailStore.getDashboardInfo({ dashboardId, fetchWidgets: true }); } catch (e) { ErrorHandler.handleError(e); await SpaceRouter.router.push(getProperRouteLocation({ name: DASHBOARDS_ROUTE._NAME })); @@ -71,7 +71,7 @@ const getDashboardData = async (dashboardId: string) => { /* Event */ const handleRefresh = async () => { - if (dashboardDetailGetters.dashboardInfo?.version !== '1.0') await dashboardDetailStore.listDashboardWidgets(); + if (dashboardDetailState.dashboardInfo?.version !== '1.0') await dashboardDetailStore.listDashboardWidgets(); // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore if (widgetContainerRef.value) widgetContainerRef.value.refreshAllWidget(); @@ -92,7 +92,7 @@ watch(() => props.dashboardId, async (dashboardId, prevDashboardId) => { if (dashboardId && !prevDashboardId) { // this includes all three cases dashboardDetailStore.reset(); } - await getDashboardData(dashboardId); + await getDashboardDataAndListWidget(dashboardId); // Set Dashboard Detail Custom breadcrumbs gnbStore.setBreadcrumbs(breadcrumbs.value); }, { immediate: true }); @@ -144,7 +144,9 @@ onUnmounted(() => { /> -
+
{ const dashboardStore = useDashboardStore(); - const dashboardState = dashboardStore.state; const appContextStore = useAppContextStore(); const storeState = reactive({ isAdminMode: computed(() => appContextStore.getters.isAdminMode), @@ -97,6 +96,7 @@ export const useDashboardDetailInfoStore = defineStore('dashboard-detail-info', const state = reactive({ loadingDashboard: false, dashboardId: '' as string | undefined, + dashboardInfo: undefined as PublicDashboardModel|PrivateDashboardModel|undefined, projectId: undefined as string | undefined, options: DASHBOARD_DEFAULT.options as DashboardOptions, vars: {} as DashboardVars, @@ -118,25 +118,21 @@ export const useDashboardDetailInfoStore = defineStore('dashboard-detail-info', }); const getters = reactive({ - dashboardInfo: computed(() => { - const _allDashboardItems = [...dashboardState.privateDashboardItems, ...dashboardState.publicDashboardItems]; - return _allDashboardItems.find((d) => d.dashboard_id === state.dashboardId); - }), - dashboardName: computed(() => getters.dashboardInfo?.name || ''), - dashboardLabels: computed(() => getters.dashboardInfo?.labels || []), - dashboardLayouts: computed(() => getters.dashboardInfo?.layouts || []), - dashboardVarsSchema: computed(() => getters.dashboardInfo?.vars_schema || {}), - dashboardVarsSchemaProperties: computed>(() => getters.dashboardInfo?.vars_schema?.properties || {}), + dashboardName: computed(() => state.dashboardInfo?.name || ''), + dashboardLabels: computed(() => state.dashboardInfo?.labels || []), + dashboardLayouts: computed(() => state.dashboardInfo?.layouts || []), + dashboardVarsSchema: computed(() => state.dashboardInfo?.vars_schema || {}), + dashboardVarsSchemaProperties: computed>(() => state.dashboardInfo?.vars_schema?.properties || {}), isPrivate: computed(() => !!state.dashboardId?.startsWith('private')), // isAllVariablesInitialized: computed(() => Object.values(state.variablesInitMap).every((d) => d === true)), - isDeprecatedDashboard: computed(() => getters.dashboardInfo?.version === '1.0'), + isDeprecatedDashboard: computed(() => state.dashboardInfo?.version === '1.0'), disableManageButtons: computed(() => { if (state.projectId) return true; if (state.dashboardId?.startsWith('private')) return false; if (storeState.isAdminMode) return false; if (storeState.isWorkspaceOwner) { - if (getters.dashboardInfo?.workspace_id === '*') return true; + if (state.dashboardInfo?.workspace_id === '*') return true; return false; } return true; @@ -185,7 +181,7 @@ export const useDashboardDetailInfoStore = defineStore('dashboard-detail-info', }), // only for 1.0 legacy dashboard dashboardWidgetInfoList: computed(() => { - const _dashboardWidget: DashboardLayoutWidgetInfo[] = getters.dashboardInfo?.layouts?.[0].widgets || []; + const _dashboardWidget: DashboardLayoutWidgetInfo[] = state.dashboardInfo?.layouts?.[0].widgets || []; return _dashboardWidget.map((info) => ({ ...info, widget_key: info.widget_key ?? getRandomId(), @@ -225,6 +221,7 @@ export const useDashboardDetailInfoStore = defineStore('dashboard-detail-info', return; } state.vars = dashboardInfo.vars ?? {}; + state.dashboardInfo = dashboardInfo; const _dashboardInfo = cloneDeep(dashboardInfo); state.dashboardId = _dashboardInfo.dashboard_id; state.options = { @@ -243,6 +240,7 @@ export const useDashboardDetailInfoStore = defineStore('dashboard-detail-info', const _dashboardInfo = cloneDeep(dashboardInfo); state.dashboardId = _dashboardInfo.dashboard_id; + state.dashboardInfo = _dashboardInfo; state.options = { date_range: { start: _dashboardInfo.options?.date_range?.start, @@ -271,7 +269,7 @@ export const useDashboardDetailInfoStore = defineStore('dashboard-detail-info', }; const privateDashboardGetFetcher = getCancellableFetcher(SpaceConnector.clientV2.dashboard.privateDashboard.get); const publicDashboardGetFetcher = getCancellableFetcher(SpaceConnector.clientV2.dashboard.publicDashboard.get); - const getDashboardInfo = async (dashboardId: undefined|string) => { + const getDashboardInfo = async ({ dashboardId, fetchWidgets = false }: { dashboardId: undefined|string, fetchWidgets?: boolean}) => { if (dashboardId === state.dashboardId || dashboardId === undefined) return; const isPrivate = dashboardId?.startsWith('private'); @@ -288,6 +286,9 @@ export const useDashboardDetailInfoStore = defineStore('dashboard-detail-info', } else { _setDashboardInfoStoreStateV2(response); } + if (fetchWidgets) { + await listDashboardWidgets(); + } } } catch (e) { reset(); @@ -309,8 +310,8 @@ export const useDashboardDetailInfoStore = defineStore('dashboard-detail-info', }; // HACK: only for 1.0 dashboard const resetVariables = (originVariables?: DashboardVariables, originVariablesSchema?: DashboardVariablesSchema) => { - const _originVariables: DashboardVariables = originVariables ?? getters.dashboardInfo?.variables ?? {}; - const _originVariablesSchema: DashboardVariablesSchema = originVariablesSchema ?? getters.dashboardInfo?.variables_schema ?? { properties: {}, order: [] }; + const _originVariables: DashboardVariables = originVariables ?? state.dashboardInfo?.variables ?? {}; + const _originVariablesSchema: DashboardVariablesSchema = originVariablesSchema ?? state.dashboardInfo?.variables_schema ?? { properties: {}, order: [] }; // reset variables schema let _variableSchema = cloneDeep(state.variablesSchema); diff --git a/apps/web/src/services/dashboards/stores/widget-form-store.ts b/apps/web/src/services/dashboards/stores/widget-form-store.ts index 9672cb0fdf..d875a6f1a3 100644 --- a/apps/web/src/services/dashboards/stores/widget-form-store.ts +++ b/apps/web/src/services/dashboards/stores/widget-form-store.ts @@ -77,7 +77,7 @@ export const useWidgetFormStore = defineStore('widget-form', () => { }); const dashboardScope = computed(() => { if (appContextGetters.isAdminMode) return 'DOMAIN'; - return dashboardDetailGetters.dashboardInfo.resource_group; + return dashboardDetailState.dashboardInfo?.resource_group; }); const mergedWidgetState = computed|undefined>(() => { diff --git a/apps/web/src/services/project/pages/ProjectDashboardPage.vue b/apps/web/src/services/project/pages/ProjectDashboardPage.vue index cd867bc070..0f905da673 100644 --- a/apps/web/src/services/project/pages/ProjectDashboardPage.vue +++ b/apps/web/src/services/project/pages/ProjectDashboardPage.vue @@ -57,9 +57,9 @@ const handleRefresh = async () => { if (widgetContainerRef.value) widgetContainerRef.value.refreshAllWidget(); }; /* api */ -const getDashboardData = async (dashboardId: string) => { +const getDashboardDataAndListWidget = async (dashboardId: string) => { try { - await dashboardDetailStore.getDashboardInfo(dashboardId); + await dashboardDetailStore.getDashboardInfo({ dashboardId, fetchWidgets: true }); } catch (e) { ErrorHandler.handleError(e); } @@ -72,7 +72,7 @@ watch(() => props.dashboardId, async (dashboardId, prevDashboardId) => { dashboardDetailStore.reset(); } dashboardDetailStore.setProjectId(props.id); - await getDashboardData(dashboardId); + await getDashboardDataAndListWidget(dashboardId); }, { immediate: true }); onUnmounted(() => { @@ -109,7 +109,9 @@ onUnmounted(() => { @refresh="handleRefresh" />
-
+
Date: Tue, 12 Nov 2024 13:35:36 +0900 Subject: [PATCH 06/11] feat(resource-variable-model): delete unused arguments (#5013) Signed-off-by: yuda --- .../variable-models/_base/resource-variable-model.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/apps/web/src/lib/variable-models/_base/resource-variable-model.ts b/apps/web/src/lib/variable-models/_base/resource-variable-model.ts index dd965cdd34..0414e4782c 100644 --- a/apps/web/src/lib/variable-models/_base/resource-variable-model.ts +++ b/apps/web/src/lib/variable-models/_base/resource-variable-model.ts @@ -44,14 +44,15 @@ export default class ResourceVariableModel implements IResourceVariableMo } generateProperty(options: PropertyOptions): PropertyObject { - const _isDataKey = typeof options.isDataKey === 'boolean' ? options.isDataKey : true; - const _isFilter = typeof options.isFilter === 'boolean' ? options.isFilter : true; + // const _isDataKey = typeof options.isDataKey === 'boolean' ? options.isDataKey : true; + // const _isFilter = typeof options.isFilter === 'boolean' ? options.isFilter : true; const propertyObject: PropertyObject = { key: options.key, name: options.name, - isDataKey: _isDataKey, - isFilter: _isFilter, - values: _isDataKey ? this.stat(options.key as string, options.presetValues) : undefined, + // isDataKey: _isDataKey, + // isFilter: _isFilter, + // values: _isDataKey ? this.stat(options.key as string, options.presetValues) : undefined, + values: this.stat(options.key as string, options.presetValues), }; // TODO: keys method binding From fb4d18d25944d8a85f138368de6438bd84c29afc Mon Sep 17 00:00:00 2001 From: nayeongkim Date: Wed, 13 Nov 2024 15:39:45 +0900 Subject: [PATCH 07/11] fix: apply workspace optional data Signed-off-by: NaYeong,Kim --- .../services/advanced/components/WorkspaceGroupTabWorkspace.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/src/services/advanced/components/WorkspaceGroupTabWorkspace.vue b/apps/web/src/services/advanced/components/WorkspaceGroupTabWorkspace.vue index ba32ae254b..47892b578a 100644 --- a/apps/web/src/services/advanced/components/WorkspaceGroupTabWorkspace.vue +++ b/apps/web/src/services/advanced/components/WorkspaceGroupTabWorkspace.vue @@ -271,7 +271,7 @@ onMounted(async () => {