feat: apply additional feedback

apps/web/src/common/modules/workspace/WorkspaceSelectDropdown.vue

@@ -101,6 +101,7 @@ watch(() => workspaceState.selectedItems, (selectedItems) => {
                        parent-id="workspace-role-form"
                        show-select-marker
                        show-select-header
+                       is-fixed-width
                        is-filterable
                        show-delete-all-button
                        class="workspace-select-dropdown"

apps/web/src/schema/inventory/metric/model.ts

@@ -7,6 +7,7 @@ export interface MetricModel {
     name: string;
     metric_type: MetricType;
     resource_type: string;
+    resource_group: 'DOMAIN' | 'WORKSPACE',
     query_options: Record<string, any>;
     date_field: string;
     unit: string;

apps/web/src/services/advanced/components/WorkspaceGroupAddWorkspacesModal.vue

@@ -159,6 +159,7 @@ watch([() => state.menuIds, () => state.isSelectDropdownVisible], async (menuIds
                                 use-fixed-menu-style
                                 show-select-marker
                                 disable-handler
+                                is-fixed-width
                                 :visible-menu.sync="state.isSelectDropdownVisible"
                                 :menu="menuList"
                                 :selected.sync="selectedItems"

apps/web/src/services/advanced/components/WorkspaceGroupCreateModal.vue

@@ -188,6 +188,7 @@ watch([() => state.menuIds, () => state.isSelectDropdownVisible], async (menuIds
                                 use-fixed-menu-style
                                 show-select-marker
                                 disable-handler
+                                is-fixed-width
                                 :visible-menu.sync="state.isSelectDropdownVisible"
                                 :menu="menuList"
                                 :selected.sync="selectedItems"

apps/web/src/services/advanced/pages/admin/AdminDomainSettingsDomainInformationPage.vue

@@ -112,6 +112,7 @@ watch(() => domainConfigGetters.language, (val) => {
                                    :selected.sync="state.selectedTimezone"
                                    :page-size="10"
                                    :disabled="!state.hasReadWriteAccess"
+                                   is-fixed-width
                                    is-filterable
                 />
             </div>

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

@@ -570,7 +570,6 @@ onMounted(() => {
                                        required
                         >
                             <workspace-select-dropdown class="action-workspace"
-                                                       is-fixed-width
                                                        :selected-workspace-ids="state.selectedWorkspaceId"
                                                        @update:selected-workspace-ids="handleSelectWorkspaceId"
                             />

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

@@ -24,6 +24,7 @@
         <div class="dropdown-container">
             <p-select-dropdown :selected="state.selectedProvider"
                                :menu="state.providerList"
+                               is-fixed-width
                                class="select-dropdown"
                                @update:selected="handleChangeProvider"
             >

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

@@ -60,6 +60,7 @@
                 <p-select-dropdown :selected="state.selectedProvider"
                                    :menu="state.providerList"
                                    class="select-dropdown"
+                                   is-fixed-width
                                    @update:selected="handleChangeProvider"
                 >
                     <template #dropdown-button="item">
@@ -91,6 +92,7 @@
             <div class="repository">
                 <p-select-dropdown :selected.sync="state.selectedRepository"
                                    :menu="state.repositoryList"
+                                   is-fixed-width
                                    class="select-dropdown"
                 >
                     <template #dropdown-button="item">

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

@@ -3,7 +3,7 @@ import { useWindowSize } from '@vueuse/core';
 import type { TranslateResult } from 'vue-i18n';
 
 import {
-    PButton, PHeading, PIconButton, screens,
+    PButton, PHeading, PIconButton, screens, PHeadingLayout,
 } from '@cloudforet/mirinae';
 
 const props = defineProps<{
@@ -24,12 +24,14 @@ const handleClickEdit = () => {
 </script>
 
 <template>
-    <p-heading class="pt-8 px-4 pb-4"
-               :title="props.title"
-               heading-type="sub"
-               :use-total-count="props.totalCount !== undefined"
-               :total-count="props.totalCount"
-    >
+    <p-heading-layout class="pt-8 px-4 pb-4">
+        <template #heading>
+            <p-heading :title="props.title"
+                       heading-type="sub"
+                       :use-total-count="props.totalCount !== undefined"
+                       :total-count="props.totalCount"
+            />
+        </template>
         <template v-if="!props.editMode && !props.hideEditButton"
                   #extra
         >
@@ -49,5 +51,5 @@ const handleClickEdit = () => {
                            @click="handleClickEdit"
             />
         </template>
-    </p-heading>
+    </p-heading-layout>
 </template>

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

@@ -339,7 +339,8 @@ const handleOpenEditQuery = () => {
                         >
                             {{ $t('INVENTORY.METRIC_EXPLORER.DUPLICATE') }}
                         </p-button>
-                        <p-button style-type="tertiary"
+                        <p-button v-if="!storeState.isAdminMode"
+                                  style-type="tertiary"
                                   icon-left="ic_plus_bold"
                                   @click="handleOpenAddExampleModal"
                         >

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

@@ -269,7 +269,7 @@ watch(() => route.params, async () => {
         const targetNamespace = namespaceState.namespaces.find((item) => item.key === namespaceState.selectedMetric?.data.namespace_id);
         metricExplorerPageStore.setSelectedNamespace({
             label: targetNamespace?.name,
-            name: namespaceState.selectedMetric.data.namespace_id,
+            name: namespaceState.selectedMetric?.data.namespace_id,
             group: targetNamespace?.data.group,
             category: targetNamespace.data.category,
             icon: targetNamespace.data.group === 'common' ? 'COMMON' : targetNamespace.data.icon,
@@ -311,7 +311,8 @@ watch(() => storeState.selectedNamespace, (selectedNamespace) => {
                         <p-tooltip v-for="(item, idx) of state.starredMenuSet"
                                    :key="`asset-analysis-starred-${idx}`"
                                    position="bottom"
-                                   :contents="item.favoriteOptions?.type === FAVORITE_TYPE.METRIC_EXAMPLE ? `${storeState.metrics[item.to?.params?.metricId || '']?.name} > ${item.label}` : item.label"
+                                   :contents="item.favoriteOptions?.type === FAVORITE_TYPE.METRIC_EXAMPLE ? `${storeState.metrics[item.to?.params?.metricId
+                                       || '']?.name} > ${item.label}` : item.label"
                         >
                             <l-s-b-router-menu-item :item="item"
                                                     :idx="idx"

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

@@ -74,8 +74,9 @@ const state = reactive({
     }),
     hasReadWriteAccess: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[state.selectedMenuId]?.write),
     selectedId: computed<string|undefined>(() => {
+        const routeName = getProperRouteLocation({ name: ASSET_INVENTORY_ROUTE.METRIC_EXPLORER.DETAIL._NAME }).name;
         if (!props.isDetailPage) return undefined;
-        if (route.name === ASSET_INVENTORY_ROUTE.METRIC_EXPLORER.DETAIL._NAME) return route.params.metricId;
+        if (route.name === routeName) return route.params.metricId;
         return route.params.metricExampleId;
     }),
     inputValue: '',

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

@@ -1,14 +1,21 @@
 <script setup lang="ts">
-
+import {
+    computed, reactive, watchEffect, ref, watch,
+} from 'vue';
 
 import { PTreeView, PI, PTextHighlighting } from '@cloudforet/mirinae';
 import type { TreeDisplayMap, TreeNode } from '@cloudforet/mirinae/src/data-display/tree/tree-view/type';
 
+import { useAppContextStore } from '@/store/app-context/app-context-store';
+
 import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
 import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 
 import { gray } from '@/styles/colors';
 
+
+const appContextStore = useAppContextStore();
+
 interface Props {
     metricItems: TreeNode[];
     selectedId?: string;
@@ -18,10 +25,37 @@ interface Props {
 
 const props = defineProps<Props>();
 
+const storeState = reactive({
+    isAdminMode: computed<boolean>(() => appContextStore.getters.isAdminMode),
+});
+
+const filteredMetricItems = ref<TreeNode[]>([]);
+
+watch(() => props.metricItems, (updatedMetricItems) => {
+    filteredMetricItems.value = updatedMetricItems.filter(((metricItem) => {
+        if (metricItem.data.is_managed) {
+            return true;
+        }
+        if (storeState.isAdminMode) {
+            return metricItem.data.data.resource_group === 'DOMAIN';
+        }
+        return metricItem.data.data.resource_group === 'WORKSPACE';
+    }));
+}, { immediate: true, deep: true });
+
+watchEffect(() => {
+    if (storeState.isAdminMode) {
+        props.metricItems.forEach((metricItem: TreeNode) => {
+            if (Object.keys(metricItem).includes(('children'))) {
+                delete metricItem.children;
+            }
+        });
+    }
+});
 </script>
 
 <template>
-    <p-tree-view :tree-data="props.metricItems"
+    <p-tree-view :tree-data="filteredMetricItems"
                  :selected-id="props.selectedId"
                  :tree-display-map="props.treeDisplayMap"
                  use-default-indent

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

@@ -134,6 +134,7 @@ watch(() => state.searchText, debounce(async (searchText) => {
                        :selected="state.selected"
                        disable-handler
                        use-fixed-menu-style
+                       is-fixed-width
                        is-filterable
                        @click-button="handleClickCreateButton"
                        @click-show-more="handleClickShowMore"

apps/web/src/services/asset-inventory/pages/MetricExplorerDetailPage.vue

@@ -18,7 +18,6 @@ import type { NamespaceReferenceMap } from '@/store/reference/namespace-referenc
 import { queryStringToArray, queryStringToObject, queryStringToString } from '@/lib/router-query-string';
 
 import { useBreadcrumbs } from '@/common/composables/breadcrumbs';
-import { useProperRouteLocation } from '@/common/composables/proper-route-location';
 import type { FavoriteOptions } from '@/common/modules/favorites/favorite-button/type';
 import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
@@ -36,7 +35,6 @@ import type { MetricExplorerPageUrlQuery } from '@/services/asset-inventory/type
 
 const gnbStore = useGnbStore();
 const { breadcrumbs } = useBreadcrumbs();
-const { getProperRouteLocation } = useProperRouteLocation();
 const route = useRoute();
 const router = useRouter();
 
@@ -56,10 +54,10 @@ const state = reactive({
         const _targetMetric = metricExplorerPageState.metric;
         return [
             ...(breadcrumbs.value.slice(0, breadcrumbs.value.length - 1)),
-            getProperRouteLocation({
+            {
                 name: `[${targetNamespace?.name}] ${state.currentMetricExample?.name ?? _targetMetric?.name}`,
                 path: state.currentMetricExampleId ? ASSET_INVENTORY_ROUTE.METRIC_EXPLORER.DETAIL.EXAMPLE._NAME : ASSET_INVENTORY_ROUTE.METRIC_EXPLORER.DETAIL._NAME,
-            }),
+            },
         ];
     }),
     metricFavoriteOptions: computed<FavoriteOptions>(() => ({

apps/web/src/services/asset-inventory/routes/admin/routes.ts

@@ -226,13 +226,6 @@ const adminAssetInventoryRoute: RouteConfig = {
                             props: true,
                             component: MetricExplorerDetailPage as any,
                         },
-                        {
-                            path: ':metricExampleId',
-                            name: makeAdminRouteName(ASSET_INVENTORY_ROUTE.METRIC_EXPLORER.DETAIL.EXAMPLE._NAME),
-                            meta: { label: ({ params }) => params.metricExampleId, lsbVisible: true },
-                            props: true,
-                            component: MetricExplorerDetailPage as any,
-                        },
                     ],
                 },
             ],

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

@@ -149,6 +149,7 @@ const workspaceMenuHandler: AutocompleteHandler = async (inputText: string, page
                                    :search-text.sync="dropdownState.searchText"
                                    show-select-marker
                                    is-filterable
+                                   is-fixed-width
                                    :handler="workspaceMenuHandler"
                                    class="workspace-select-dropdown"
                                    @select="handleSelectDropdownItem"
@@ -161,7 +162,7 @@ const workspaceMenuHandler: AutocompleteHandler = async (inputText: string, page
                                                  :theme="getWorkspaceInfo(dropdownState.selectedMenuId)?.tags?.theme"
                                                  size="xs"
                             />
-                            <span>{{ getWorkspaceInfo(dropdownState.selectedMenuId)?.name || '' }}</span>
+                            <span class="label">{{ getWorkspaceInfo(dropdownState.selectedMenuId)?.name || '' }}</span>
                         </div>
                         <span v-else
                               class="select"
@@ -173,7 +174,7 @@ const workspaceMenuHandler: AutocompleteHandler = async (inputText: string, page
                                                  :theme="getWorkspaceInfo(item.name)?.tags?.theme"
                                                  size="xs"
                             />
-                            <span>{{ item.label }}</span>
+                            <span class="label">{{ item.label }}</span>
                             <span class="state"
                                   :class="[getWorkspaceInfo(item.name)?.state.toLowerCase()]"
                             />
@@ -202,7 +203,11 @@ const workspaceMenuHandler: AutocompleteHandler = async (inputText: string, page
         .workspace-select-dropdown {
             .workspace-wrapper {
                 @apply flex items-center;
+                width: 100%;
                 gap: 0.25rem;
+                .label {
+                    @apply truncate;
+                }
             }
             .select {
                 @apply text-gray-600;
@@ -221,6 +226,10 @@ const workspaceMenuHandler: AutocompleteHandler = async (inputText: string, page
                         @apply bg-gray-300;
                     }
                 }
+                .label {
+                    @apply truncate;
+                    max-width: 21rem;
+                }
                 .description {
                     @apply text-label-md text-gray-500;
                 }

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

@@ -9,7 +9,7 @@ import { getApiQueryWithToolboxOptions } from '@cloudforet/core-lib/component-ut
 import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 import {
-    PButton, PHeading,
+    PButton, PHeading, PHeadingLayout,
 } from '@cloudforet/mirinae';
 import type { ToolboxOptions } from '@cloudforet/mirinae/types/controls/toolbox/type';
 
@@ -152,14 +152,16 @@ onUnmounted(() => {
 
 <template>
     <div class="data-source-management-tab-linked-account">
-        <p-heading heading-type="sub"
-                   use-total-count
-                   use-selected-count
-                   :selected-count="storeState.selectedLinkedAccountsIndices.length"
-                   :title="$t('BILLING.COST_MANAGEMENT.DATA_SOURCES.TAB_LINKED_ACCOUNT_TITLE')"
-                   :total-count="storeState.linkedAccountsTotalCount"
-                   class="pt-8 px-4 pb-4"
-        >
+        <p-heading-layout class="pt-8 px-4 pb-4">
+            <template #heading>
+                <p-heading heading-type="sub"
+                           use-total-count
+                           use-selected-count
+                           :selected-count="storeState.selectedLinkedAccountsIndices.length"
+                           :title="$t('BILLING.COST_MANAGEMENT.DATA_SOURCES.TAB_LINKED_ACCOUNT_TITLE')"
+                           :total-count="storeState.linkedAccountsTotalCount"
+                />
+            </template>
             <template v-if="props.hasReadWriteAccess"
                       #extra
             >
@@ -178,7 +180,7 @@ onUnmounted(() => {
                     </p-button>
                 </div>
             </template>
-        </p-heading>
+        </p-heading-layout>
         <data-source-management-tab-linked-account-table :has-read-write-access="props.hasReadWriteAccess"
                                                          @confirm="handleChangeLinkedAccountToolbox"
                                                          @select-filter="handleChangedSelectFilter"
@@ -191,13 +193,9 @@ onUnmounted(() => {
 
 <style lang="postcss" scoped>
 .data-source-management-tab-linked-account {
-    .title {
-        @apply items-center;
-        margin-bottom: 0;
-        .extra-wrapper {
-            @apply flex;
-            gap: 0.5rem;
-        }
+    .extra-wrapper {
+        @apply flex;
+        gap: 0.5rem;
     }
 }
 </style>

apps/web/src/services/info/components/NoticeForm.vue

@@ -215,6 +215,7 @@ watch([() => noticeDetailState.post, () => noticeDetailState.loading], async ([n
                     <notice-workspace-dropdown v-if="workspaceState.selectedRadioIdx === 1"
                                                :selected-items.sync="workspaceState.selectedItems"
                                                :type="props.type"
+                                               class="workspace-dropdown"
                     />
                 </p-field-group>
                 <p-field-group class="notice-label-wrapper"
@@ -293,6 +294,10 @@ watch([() => noticeDetailState.post, () => noticeDetailState.loading], async ([n
     .notice-create-options-wrapper {
         @apply flex flex-col gap-2;
     }
+
+    .workspace-dropdown {
+        width: 50%;
+    }
 }
 .notice-create-buttons-wrapper {
     @apply inline-flex float-right mt-4;