From 5957a8ceda4c5f77e6fc2f81d8b04370803c8e0f Mon Sep 17 00:00:00 2001 From: "NaYeong,Kim" Date: Tue, 12 Nov 2024 16:03:35 +0900 Subject: [PATCH 01/16] feat: mark-up modal (re-sync, cancel, error) (#5017) * feat: changed tab name Signed-off-by: NaYeong,Kim * refactor: separating modal component Signed-off-by: NaYeong,Kim * feat: mark-up re-sync modal Signed-off-by: NaYeong,Kim * feat: mark-up cancel modal Signed-off-by: NaYeong,Kim * chore: update translations Signed-off-by: NaYeong,Kim --------- Signed-off-by: NaYeong,Kim --- ...rceManagementTabDataCollectionHistory.vue} | 108 +++----- ...anagementTabDataCollectionHistoryModal.vue | 248 ++++++++++++++++++ .../components/DataSourceManagementTabs.vue | 12 +- .../cost-explorer/types/data-sources-type.ts | 2 + .../console-translation-2.8.babel | 212 ++++++++++++++- packages/language-pack/en.json | 12 +- packages/language-pack/ja.json | 12 +- packages/language-pack/ko.json | 12 +- 8 files changed, 534 insertions(+), 84 deletions(-) rename apps/web/src/services/cost-explorer/components/{DataSourceManagementTabDetailJob.vue => DataSourceManagementTabDataCollectionHistory.vue} (69%) create mode 100644 apps/web/src/services/cost-explorer/components/DataSourceManagementTabDataCollectionHistoryModal.vue diff --git a/apps/web/src/services/cost-explorer/components/DataSourceManagementTabDetailJob.vue b/apps/web/src/services/cost-explorer/components/DataSourceManagementTabDataCollectionHistory.vue similarity index 69% rename from apps/web/src/services/cost-explorer/components/DataSourceManagementTabDetailJob.vue rename to apps/web/src/services/cost-explorer/components/DataSourceManagementTabDataCollectionHistory.vue index 962393c255..ed51e126d1 100644 --- a/apps/web/src/services/cost-explorer/components/DataSourceManagementTabDetailJob.vue +++ b/apps/web/src/services/cost-explorer/components/DataSourceManagementTabDataCollectionHistory.vue @@ -5,8 +5,7 @@ import { import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper'; import { - PButton, PButtonModal, - PToolboxTable, PHeading, PI, PTextEditor, + PButton, PToolboxTable, PHeading, PI, PHeadingLayout, } from '@cloudforet/mirinae'; import type { DefinitionField } from '@cloudforet/mirinae/src/data-display/tables/definition-table/type'; import type { ToolboxOptions } from '@cloudforet/mirinae/types/navigation/toolbox/type'; @@ -20,9 +19,12 @@ import { blue, gray, green, red, } from '@/styles/colors'; +import DataSourceManagementTabDataCollectionHistoryModal + from '@/services/cost-explorer/components/DataSourceManagementTabDataCollectionHistoryModal.vue'; import { useDataSourcesPageStore } from '@/services/cost-explorer/stores/data-sources-page-store'; -import type { DataSourceItem, CostJobItem, CostJobStatusInfo } from '@/services/cost-explorer/types/data-sources-type'; - +import type { + DataSourceItem, CostJobItem, CostJobStatusInfo, DataCollectionHistoryModalType, +} from '@/services/cost-explorer/types/data-sources-type'; const dataSourcesPageStore = useDataSourcesPageStore(); const dataSourcesPageState = dataSourcesPageStore.state; @@ -37,6 +39,7 @@ const storeState = reactive({ const state = reactive({ loading: false, modalVisible: false, + modalType: '' as DataCollectionHistoryModalType, selectedJobId: '', selectedJobItem: computed(() => storeState.jobList.find((item) => item.job_id === state.selectedJobId)), }); @@ -97,8 +100,13 @@ const getStatusInfo = (value: CostJobStatus): CostJobStatusInfo => { }; const handleClickErrorDetail = (jobId: string) => { state.modalVisible = true; + state.modalType = 'ERROR'; state.selectedJobId = jobId; }; +const handleClickResyncButton = () => { + state.modalVisible = true; + state.modalType = 'RE-SYNC'; +}; const jobListApiQueryHelper = new ApiQueryHelper(); const handleChangeToolbox = async (options: ToolboxOptions) => { @@ -127,15 +135,24 @@ watch([() => storeState.activeTab, () => storeState.selectedItem], async () => { - - - - + diff --git a/apps/web/src/services/cost-explorer/components/DataSourceManagementTabDataCollectionHistoryModal.vue b/apps/web/src/services/cost-explorer/components/DataSourceManagementTabDataCollectionHistoryModal.vue new file mode 100644 index 0000000000..5fa45b87bf --- /dev/null +++ b/apps/web/src/services/cost-explorer/components/DataSourceManagementTabDataCollectionHistoryModal.vue @@ -0,0 +1,248 @@ + + + + + + diff --git a/apps/web/src/services/cost-explorer/components/DataSourceManagementTabs.vue b/apps/web/src/services/cost-explorer/components/DataSourceManagementTabs.vue index a0bece96c0..ad91ee7702 100644 --- a/apps/web/src/services/cost-explorer/components/DataSourceManagementTabs.vue +++ b/apps/web/src/services/cost-explorer/components/DataSourceManagementTabs.vue @@ -15,16 +15,14 @@ import { MENU_ID } from '@/lib/menu/config'; import DataSourceManagementTabAccessRestriction from '@/services/cost-explorer/components/DataSourceManagementTabAccessRestriction.vue'; +import DataSourceManagementTabDataCollectionHistory from '@/services/cost-explorer/components/DataSourceManagementTabDataCollectionHistory.vue'; import DataSourceManagementTabDetailBaseInformation from '@/services/cost-explorer/components/DataSourceManagementTabDetailBaseInformation.vue'; -import DataSourceManagementTabDetailJob from '@/services/cost-explorer/components/DataSourceManagementTabDetailJob.vue'; import DataSourceManagementTabLinkedAccount from '@/services/cost-explorer/components/DataSourceManagementTabLinkedAccount.vue'; import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant'; import { useDataSourcesPageStore } from '@/services/cost-explorer/stores/data-sources-page-store'; - - const dataSourcesPageStore = useDataSourcesPageStore(); const dataSourcesPageState = dataSourcesPageStore.state; @@ -50,7 +48,7 @@ const tabState = reactive({ tabs: computed(() => [ { name: 'detail', label: i18n.t('BILLING.COST_MANAGEMENT.DATA_SOURCES.TAB_DETAILS_TITLE') }, { name: 'linked_account', label: i18n.t('BILLING.COST_MANAGEMENT.DATA_SOURCES.TAB_LINKED_ACCOUNT_TITLE') }, - { name: 'data_collection_job', label: i18n.t('BILLING.COST_MANAGEMENT.DATA_SOURCES.TAB_DETAILS_COLLECTION_JOB') }, + { name: 'data_collection_history', label: i18n.t('BILLING.COST_MANAGEMENT.DATA_SOURCES.TAB_DETAILS_COLLECTION_HISTORY') }, { name: 'access_restriction', label: i18n.t('BILLING.COST_MANAGEMENT.DATA_SOURCES.TAB_RESTRICTION') }, ]), }); @@ -77,10 +75,10 @@ const handleChangeTab = (tab: string) => { > - - - - - - - + + + + + diff --git a/apps/web/src/services/landing/components/DomainLandingStartBanner.vue b/apps/web/src/services/landing/components/DomainLandingStartBanner.vue index fb83c5d5de..c5caaa60c1 100644 --- a/apps/web/src/services/landing/components/DomainLandingStartBanner.vue +++ b/apps/web/src/services/landing/components/DomainLandingStartBanner.vue @@ -7,10 +7,13 @@ import { clone } from 'lodash'; import { PButton, screens, PTextButton } from '@cloudforet/mirinae'; +import type { WorkspaceModel } from '@/schema/identity/workspace/model'; import { store } from '@/store'; import { makeAdminRouteName } from '@/router/helpers/route-helper'; +import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store'; + import type { PageAccessMap } from '@/lib/access-control/config'; import type { MenuId } from '@/lib/menu/config'; import { MENU_ID } from '@/lib/menu/config'; @@ -20,6 +23,9 @@ import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-const import { IAM_ROUTE } from '@/services/iam/routes/route-constant'; import { LANDING_ROUTE } from '@/services/landing/routes/route-constant'; +const userWorkspaceStore = useUserWorkspaceStore(); +const userWorkspaceGetters = userWorkspaceStore.getters; + const router = useRouter(); const route = useRoute(); @@ -27,6 +33,7 @@ const { width } = useWindowSize(); const storeState = reactive({ pageAccessPermissionMap: computed(() => store.getters['user/pageAccessPermissionMap']), + workspaceList: computed(() => userWorkspaceGetters.workspaceList), }); const state = reactive({ isTabletSize: computed(() => width.value < screens.tablet.max), @@ -60,6 +67,13 @@ const handleClickButton = (type: string) => { }).href, '_blank'); } }; +const handleExploreButton = () => { + if (storeState.workspaceList.length > 0) { + router.push({ name: LANDING_ROUTE.WORKSPACE._NAME }); + } else { + handleClickButton('create'); + } +};