Merge remote-tracking branch 'cloudforet-io/master' into feature-additional-feedback

Signed-off-by: NaYeong,Kim <[email protected]>

Author: skdud4659

README.md

@@ -70,19 +70,16 @@ The final configuration file will be generated by merging the default configurat
 
 ### 3. Add your chart license keys to your config file (Optional)
 
-The Web Console internally uses amCharts(both 4 and 5 versions) for charts. <br/>
+The Web Console internally uses amCharts 5 for charts. <br/>
 Before using the Console, look carefully at [amCharts' license](https://www.amcharts.com/online-store/licenses-explained/). <br/>
-You can download and use all amCharts 4 and 5 products for free. <br/>
+You can download and use all amCharts 5 products for free. <br/>
 The only limitation of the free version is that a small amCharts logo will be displayed in the corner of your charts. <br/>
 If you’d rather have your charts without any branding, please purchase a [commercial license](https://www.amcharts.com/online-store/) and configure it to your config file with the following format: <br/>
 
 ```json
 {
  "AMCHARTS_LICENSE": {
   "ENABLED": true,
-  "CHARTS": "",
-  "MAPS": "",
-  "TIMELINE": "",
   "AM5_CHARTS": "",
   "AM5_MAPS": ""
  }

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web",
-  "version": "2.0.0-dev237",
+  "version": "2.0.0-dev241",
   "private": true,
   "description": "Cloudforet Console Web Application",
   "author": "Cloudforet",

apps/web/public/config/default.json

@@ -6,9 +6,6 @@
   "ADMIN_DOMAIN": "root",
   "AMCHARTS_LICENSE": {
     "ENABLED": false,
-    "CHARTS": "",
-    "MAPS": "",
-    "TIMELINE": "",
     "AM5_CHARTS": "",
     "AM5_MAPS": ""
   },

apps/web/src/App.vue

@@ -185,7 +185,6 @@ watch(() => state.userId, (userId) => {
                 :modal-type="MODAL_TYPE.SEND"
             />
             <notice-popup v-if="!state.globalGrantLoading" />
-            <!--            <survey-modal />-->
         </template>
         <!-- Modal for Cross Browsing -->
         <recommended-browser-modal v-if="showsBrowserRecommendation()" />

apps/web/src/common/composables/data-source/use-cost-data-source-filter-menu-items.ts

@@ -1,7 +1,7 @@
 import type { ComputedRef } from 'vue';
 import { computed, reactive, watch } from 'vue';
 
-import { isEmpty, sortBy } from 'lodash';
+import { sortBy } from 'lodash';
 
 import type { MenuItem } from '@cloudforet/mirinae/src/controls/context-menu/type';
 
@@ -16,39 +16,57 @@ import { GROUP_BY_ITEM_MAP } from '@/services/cost-explorer/constants/cost-explo
 
 
 
+interface CostDataSourceFilterMenuItem extends MenuItem {
+    presetKeys?: string[];
+    visible?: boolean;
+}
 interface UseCostDataSourceFilterMenuItems {
     isAdminMode: ComputedRef<boolean>;
     costDataSource: ComputedRef<CostDataSourceItems|undefined>;
 }
 interface UseCostDataSourceFiltersReturn {
-    menuItems: ComputedRef<MenuItem[]>;
+    managedGroupByItems: ComputedRef<CostDataSourceFilterMenuItem[]>;
+    additionalInfoGroupByItems: ComputedRef<CostDataSourceFilterMenuItem[]>; // metadataAdditionalInfoItems or costAdditionalInfoKeysItems
+    metadataAdditionalInfoItems: ComputedRef<CostDataSourceFilterMenuItem[]>;
+    costAdditionalInfoKeysItems: ComputedRef<CostDataSourceFilterMenuItem[]>;
+    tagsFilterItems: ComputedRef<CostDataSourceFilterMenuItem[]>;
+    allItems: ComputedRef<CostDataSourceFilterMenuItem[]>;
 }
 export const useCostDataSourceFilterMenuItems = ({
     isAdminMode, costDataSource,
 }: UseCostDataSourceFilterMenuItems): UseCostDataSourceFiltersReturn => {
     const state = reactive({
-        managedGroupByItems: computed<MenuItem[]>(() => {
-            if (isAdminMode) return Object.values(GROUP_BY_ITEM_MAP);
+        managedGroupByItems: computed<CostDataSourceFilterMenuItem[]>(() => {
+            if (isAdminMode.value) return Object.values(GROUP_BY_ITEM_MAP);
             return Object.values(GROUP_BY_ITEM_MAP).filter((item) => item.name !== 'workspace_id');
         }),
-        additionalInfoGroupByItems: computed<MenuItem[]>(() => {
-            if (!costDataSource) return [];
-            const additionalInfo = costDataSource.value?.data?.plugin_info?.metadata?.additional_info;
-            if (additionalInfo && !isEmpty(additionalInfo)) {
-                return sortBy(Object.entries(additionalInfo).map(([k]) => ({
+        additionalInfoGroupByItems: computed<CostDataSourceFilterMenuItem[]>(() => {
+            if (state.metadataAdditionalInfoItems.length) return state.metadataAdditionalInfoItems;
+            return state.costAdditionalInfoKeysItems;
+        }),
+        metadataAdditionalInfoItems: computed<CostDataSourceFilterMenuItem[]>(() => {
+            if (!costDataSource?.value) return [];
+            const metadataAdditionalInfo = costDataSource.value?.data?.plugin_info?.metadata?.additional_info || {};
+            const metadataAdditionalInfoItems: CostDataSourceFilterMenuItem[] = Object.entries(metadataAdditionalInfo)
+                .map(([k]) => ({
                     name: `additional_info.${k}`,
                     label: k,
-                    presetKeys: additionalInfo[k].enums,
-                })), 'label');
-            }
-            return sortBy((costDataSource.value?.data?.cost_additional_info_keys ?? [])
-                .map((key) => ({
-                    name: `additional_info.${key}`,
-                    label: key,
-                })), 'label');
+                    presetKeys: metadataAdditionalInfo[k].enums,
+                    visible: metadataAdditionalInfo[k].visible,
+                }));
+            return sortBy(metadataAdditionalInfoItems, 'label');
+        }),
+        costAdditionalInfoKeysItems: computed<CostDataSourceFilterMenuItem[]>(() => {
+            if (!costDataSource?.value) return [];
+            const costAdditionalInfoKeys: string[] = costDataSource.value?.data?.cost_additional_info_keys ?? [];
+            const costAdditionalInfoKeysItems: CostDataSourceFilterMenuItem[] = costAdditionalInfoKeys.map((key) => ({
+                name: `additional_info.${key}`,
+                label: key,
+            }));
+            return sortBy(costAdditionalInfoKeysItems, 'label');
         }),
-        tagsFilterItems: [] as MenuItem[],
-        menuItems: computed<MenuItem[]>(() => ([
+        tagsFilterItems: [] as CostDataSourceFilterMenuItem[],
+        allItems: computed<CostDataSourceFilterMenuItem[]>(() => ([
             ...state.managedGroupByItems,
             ...state.additionalInfoGroupByItems,
             ...state.tagsFilterItems,
@@ -76,6 +94,11 @@ export const useCostDataSourceFilterMenuItems = ({
     }, { immediate: true });
 
     return {
-        menuItems: computed(() => state.menuItems),
+        managedGroupByItems: computed(() => state.managedGroupByItems),
+        additionalInfoGroupByItems: computed(() => state.additionalInfoGroupByItems),
+        metadataAdditionalInfoItems: computed(() => state.metadataAdditionalInfoItems),
+        costAdditionalInfoKeysItems: computed(() => state.costAdditionalInfoKeysItems),
+        tagsFilterItems: computed(() => state.tagsFilterItems),
+        allItems: computed(() => state.allItems),
     };
 };

apps/web/src/common/modules/navigations/gnb/GNBToolbox.vue

@@ -60,7 +60,7 @@ const state = reactive({
             routes.push({
                 name: i18n.t('MENU.CONSOLE_HOME'),
                 to: {
-                    name: LANDING_ROUTE._NAME,
+                    name: LANDING_ROUTE.DOMAIN._NAME,
                 },
             });
         } else if (!storeState.isAdminMode && storeState.currentWorkspaceId) {

apps/web/src/common/modules/navigations/top-bar/constants/constant.ts

@@ -1,4 +1,4 @@
-import { DOMAIN_CONFIG_TYPE } from '@/store/domain/type';
+import { DOMAIN_CONFIG_TYPE } from '@/store/domain/constant';
 
 import type { MenuId } from '@/lib/menu/config';
 import { MENU_ID } from '@/lib/menu/config';

apps/web/src/common/modules/navigations/top-bar/modules/top-bar-header/TopBarWorkspaces.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Vue, {
+import {
     computed, onMounted, reactive, ref, watch,
 } from 'vue';
 import type { Location } from 'vue-router';
@@ -8,20 +8,18 @@ import { useRouter } from 'vue-router/composables';
 import { clone, sortBy } from 'lodash';
 
 import {
-    PSelectDropdown, PTooltip, PI, PButton, PDivider, PTextHighlighting, PEmpty,
+    PSelectDropdown, PTooltip, PI, PButton, PTextHighlighting, PEmpty,
 } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/src/controls/context-menu/type';
 import { CONTEXT_MENU_TYPE } from '@cloudforet/mirinae/src/controls/context-menu/type';
 
 import type { WorkspaceModel } from '@/schema/identity/workspace/model';
-import { store } from '@/store';
 import { i18n } from '@/translations';
 
-import { makeAdminRouteName } from '@/router/helpers/route-helper';
-
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
 
+import type { ReferenceData } from '@/lib/helper/config-data-helper';
 import { convertWorkspaceConfigToReferenceData } from '@/lib/helper/config-data-helper';
 import type { MenuId } from '@/lib/menu/config';
 import { MENU_ID } from '@/lib/menu/config';
@@ -37,7 +35,6 @@ import { RECENT_TYPE } from '@/common/modules/navigations/type';
 
 import { gray, violet } from '@/styles/colors';
 
-import { ADVANCED_ROUTE } from '@/services/advanced/routes/route-constant';
 import { LANDING_ROUTE } from '@/services/landing/routes/route-constant';
 
 const PAGE_SIZE = 9;
@@ -62,18 +59,16 @@ const router = useRouter();
 const selectDropdownRef = ref<PSelectDropdown|null>(null);
 
 const storeState = reactive({
-    isDomainAdmin: computed(() => store.getters['user/isDomainAdmin']),
     workspaceList: computed<WorkspaceModel[]>(() => workspaceStoreGetters.workspaceList),
     selectedWorkspace: computed<WorkspaceModel|undefined>(() => workspaceStoreGetters.currentWorkspace),
     currentWorkspaceId: computed<string|undefined>(() => userWorkspaceStore.getters.currentWorkspaceId),
-    favoriteItems: computed<FavoriteItem[]>(() => {
+    favoriteItems: computed<ReferenceData[]>(() => {
         const sortedList = sortBy(favoriteGetters.workspaceItems, 'label');
         return convertWorkspaceConfigToReferenceData(
             sortedList ?? [],
             storeState.workspaceList,
         );
     }),
-    isRootRoleReadonly: computed<boolean>(() => store.getters['user/isRootRoleReadonly']),
 });
 const state = reactive({
     visibleSelectDropdown: false,
@@ -91,24 +86,6 @@ const selectWorkspace = (name: string): void => {
     userWorkspaceStore.setCurrentWorkspace(workspaceId);
     router.push({ name: MENU_INFO_MAP[targetMenuId].routeName, params: { workspaceId } }).catch(() => {});
 };
-const handleClickButton = (hasNoWorkspace?: string) => {
-    const selectedWorkspaceId = !hasNoWorkspace && storeState.selectedWorkspace?.workspace_id || '';
-    appContextStore.enterAdminMode();
-    router.push({
-        name: makeAdminRouteName(ADVANCED_ROUTE.WORKSPACES._NAME),
-        query: {
-            hasNoWorkspace,
-            selectedWorkspaceId: !hasNoWorkspace ? selectedWorkspaceId : undefined,
-        },
-    });
-    Vue.notify({
-        group: 'toastTopCenter',
-        type: 'info',
-        title: i18n.t('COMMON.GNB.ADMIN.SWITCH_ADMIN') as string,
-        duration: 2000,
-        speed: 1,
-    });
-};
 const formatMenuItems = (menuItems: WorkspaceModel[] = []): MenuItem[] => {
     const result = menuItems.length > 0 ? [
         { type: CONTEXT_MENU_TYPE.header, name: 'workspace_header', label: `${i18n.t('COMMON.GNB.WORKSPACE.WORKSPACES')} (${storeState.workspaceList.length})` },
@@ -143,7 +120,7 @@ const filterStarredItems = (menuItems: FavoriteItem[] = []): MenuItem[] => {
 };
 const handleClickAllWorkspaceButton = () => {
     router.push({
-        name: LANDING_ROUTE._NAME,
+        name: LANDING_ROUTE.WORKSPACE._NAME,
     });
 };
 const checkFavoriteItem = (id: string) => {
@@ -197,7 +174,7 @@ onMounted(() => {
         </div>
         <p-select-dropdown v-if="!props.isAdminMode"
                            ref="selectDropdownRef"
-                           :class="{'workspace-dropdown': true, 'is-domain-admin': storeState.isDomainAdmin}"
+                           :class="{'workspace-dropdown': true}"
                            style-type="transparent"
                            menu-width="20rem"
                            :visible-menu.sync="state.visibleSelectDropdown"
@@ -280,28 +257,6 @@ onMounted(() => {
                     >
                         {{ $t("COMMON.GNB.WORKSPACE.VIEW_WORKSPACES") }}
                     </p-button>
-                    <div v-if="storeState.isDomainAdmin && !storeState.isRootRoleReadonly"
-                         class="workspace-toolbox"
-                    >
-                        <p-divider />
-                        <p-button style-type="substitutive"
-                                  size="sm"
-                                  class="create-new-button tool"
-                                  icon-left="ic_plus_bold"
-                                  @click="handleClickButton('true')"
-                        >
-                            {{ $t("COMMON.GNB.WORKSPACE.CREATE_WORKSPACE") }}
-                        </p-button>
-                        <p-divider class="tools-divider" />
-                        <p-button style-type="tertiary"
-                                  size="sm"
-                                  class="manage-button tool"
-                                  icon-left="ic_settings"
-                                  @click="handleClickButton()"
-                        >
-                            {{ $t("COMMON.GNB.WORKSPACE.MANAGE_WORKSPACE") }}
-                        </p-button>
-                    </div>
                 </div>
             </template>
             <template #no-data-area>
@@ -478,12 +433,6 @@ onMounted(() => {
             }
         }
 
-        &.is-domain-admin {
-            .workspace-toolbox-wrapper {
-                padding-bottom: 1rem;
-            }
-        }
-
         .selected-workspace {
             @apply text-label-lg text-gray-800 inline-block font-medium;
             max-width: 16rem;

apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-admin-toggle-button/TopBarAdminToggleButton.vue

@@ -37,7 +37,7 @@ const handleToggleAdminMode = throttle(async () => {
     if (state.isAdminMode) {
         await userWorkspaceStore.load();
         if (state.workspaceList.length === 0) {
-            await router.push({ name: LANDING_ROUTE._NAME });
+            await router.push({ name: LANDING_ROUTE.DOMAIN._NAME });
             return;
         }
         appContextStore.exitAdminMode();

apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-profile/TopBarProfile.vue

@@ -159,12 +159,7 @@ const handleClickGoToMyPage = () => {
 };
 const handleClickGoToConsoleHome = () => {
     appContextStore.setGlobalGrantLoading(true);
-    router.push({
-        name: LANDING_ROUTE.DOMAIN._NAME,
-        params: {
-            force: 'true',
-        },
-    }).catch(() => {});
+    router.push({ name: LANDING_ROUTE.DOMAIN._NAME }).catch(() => {});
     hideProfileMenu();
 };