fix: popover target slot width changes according to lsb width change in metricLSB, verification message when adding a user

apps/web/src/common/modules/monitoring/Monitoring.vue

@@ -104,9 +104,9 @@
 
 <script lang="ts">
 import {
-    computed, getCurrentInstance, reactive, toRefs, watch,
+    computed, reactive, toRefs, watch,
 } from 'vue';
-import type { Vue } from 'vue/types/vue';
+import { useRouter } from 'vue-router/composables';
 
 import dayjs from 'dayjs';
 import {
@@ -180,7 +180,7 @@ export default {
         },
     },
     setup(props) {
-        const vm = getCurrentInstance()?.proxy as Vue;
+        const router = useRouter();
         const userStore = useUserStore();
         const state = reactive({
             showLoader: computed(() => props.loading || state.metricsLoading),
@@ -213,7 +213,7 @@ export default {
             resources = resources.map((resource, idx) => ({
                 ...resource,
                 color: COLORS[idx],
-                link: vm.$router.resolve(referenceRouter(resource.id, { resource_type: 'inventory.Server' })).href,
+                link: router.resolve(referenceRouter(resource.id, { resource_type: 'inventory.Server' })).href,
             }));
             state.availableResources = sortBy(resources, (m) => m.name);
         };

apps/web/src/common/modules/page-layouts/VerticalPageLayout.vue

@@ -4,11 +4,16 @@ import { useWindowSize } from '@vueuse/core/index';
 import {
     computed, reactive, ref, watch,
 } from 'vue';
+import { useRoute } from 'vue-router/composables';
+
+import { clone } from 'lodash';
 
 import { PVerticalLayout } from '@cloudforet/mirinae';
 
 import { useGlobalUIStore } from '@/store/global-ui/global-ui-store';
 
+import { MENU_ID } from '@/lib/menu/config';
+
 import FNB from '@/common/modules/navigations/FNB.vue';
 import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
 import type { Breadcrumb } from '@/common/modules/page-layouts/type';
@@ -35,12 +40,20 @@ const { width: contentsWidth } = useElementSize(contentRef);
 const storeState = reactive({
     isMinimizeNavRail: computed(() => gnbGetters.isMinimizeNavRail),
 });
+
+const route = useRoute();
+
 const state = reactive({
     padding: computed(() => {
         if (contentsWidth.value <= 1920) return '0';
         if (storeState.isMinimizeNavRail) return width.value - 1980;
         return width.value - 2180;
     }),
+    menuId: computed<string>(() => {
+        const reversedMatched = clone(route.matched).reverse();
+        const closestRoute = reversedMatched.find((d) => d.meta?.menuId !== undefined);
+        return closestRoute?.meta?.menuId;
+    }),
 });
 
 watch(() => props.breadcrumbs, () => {
@@ -52,10 +65,13 @@ watch(() => props.breadcrumbs, () => {
 </script>
 
 <template>
-    <p-vertical-layout v-bind="$props"
-                       ref="contentRef"
-                       class="vertical-page-layout"
-                       v-on="$listeners"
+    <p-vertical-layout
+        v-bind="$props"
+        ref="contentRef"
+        class="vertical-page-layout"
+        :width="width"
+        :enable-double-click-resize="state.menuId === MENU_ID.METRIC_EXPLORER"
+        v-on="$listeners"
     >
         <template #sidebar="prop">
             <slot name="sidebar"

apps/web/src/services/alert-manager/components/AlertDashboardProjectSearchWidget.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import {
-    computed, getCurrentInstance, reactive, watch,
+    computed, reactive, watch,
 } from 'vue';
-import type { Vue } from 'vue/types/vue';
+import { useRouter } from 'vue-router/composables';
 
 
 import { makeReferenceValueHandler } from '@cloudforet/core-lib/component-util/query-search';
@@ -29,7 +29,8 @@ import { PROJECT_ROUTE } from '@/services/project/routes/route-constant';
 const props = defineProps<{
     activatedProjects: string[];
 }>();
-const vm = getCurrentInstance()?.proxy as Vue;
+const router = useRouter();
+
 const allReferenceStore = useAllReferenceStore();
 const userWorkspaceStore = useUserWorkspaceStore();
 const storeState = reactive({
@@ -98,7 +99,7 @@ const onChange = async (options?: any) => {
     await listAlertByProject();
 };
 const onClickProjectBox = (item) => {
-    vm.$router.push({ name: PROJECT_ROUTE.DETAIL.TAB.ALERT._NAME, params: { id: item.project_id } });
+    router.push({ name: PROJECT_ROUTE.DETAIL.TAB.ALERT._NAME, params: { id: item.project_id } });
 };
 
 /* init */

apps/web/src/services/alert-manager/components/AlertDashboardTop5ProjectActivityWidget.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import {
-    computed, getCurrentInstance, reactive, watch,
+    computed, reactive, watch,
 } from 'vue';
-import type { Vue } from 'vue/types/vue';
+import { useRouter } from 'vue-router/composables';
 
 import dayjs from 'dayjs';
 import { find } from 'lodash';
@@ -55,7 +55,7 @@ interface Activity {
     status?: string;
 }
 
-const vm = getCurrentInstance()?.proxy as Vue;
+const router = useRouter();
 
 const userWorkspaceStore = useUserWorkspaceStore();
 const storeState = reactive({
@@ -155,7 +155,7 @@ const onClickBox = (projectId, date) => {
         { k: 'project_id', v: projectId, o: '=' },
         { k: 'created_at', v: date.split(' ')[0], o: '=t' },
     ]);
-    vm.$router.replace({
+    router.replace({
         name: ALERT_MANAGER_ROUTE.ALERT._NAME,
         query: {
             filters: urlQueryHelper.rawQueryStrings,

apps/web/src/services/alert-manager/components/AlertDetailNote.vue

@@ -142,7 +142,7 @@ const handleDeleteNote = async () => {
                             <span class="date">{{ iso8601Formatter(state.noteList[index].created_at, state.timezone) }}</span>
                         </p>
                         <p-select-dropdown style-type="icon-button"
-                                           button-icon="ic_chevron-down"
+                                           button-icon="ic_ellipsis-horizontal"
                                            :menu="state.menuItems"
                                            menu-position="right"
                                            use-fixed-menu-style

apps/web/src/services/asset-inventory/AssetInventoryContainer.vue

@@ -57,8 +57,8 @@ onUnmounted(() => {
 <template>
     <fragment>
         <vertical-page-layout v-if="state.lsbVisible">
-            <template #sidebar>
-                <asset-inventory-l-s-b />
+            <template #sidebar="prop">
+                <asset-inventory-l-s-b :width="prop.width" />
             </template>
             <template #default>
                 <router-view />

apps/web/src/services/asset-inventory/AssetInventoryLSB.vue

@@ -10,6 +10,13 @@ import CloudServiceLSB from '@/services/asset-inventory/components/CloudServiceL
 import MetricExplorerLSB from '@/services/asset-inventory/components/MetricExplorerLSB.vue';
 import SecurityLSB from '@/services/asset-inventory/components/SecurityLSB.vue';
 
+
+interface props {
+  width: number;
+}
+
+const props = defineProps<props>();
+
 const route = useRoute();
 
 const state = reactive({
@@ -19,12 +26,15 @@ const state = reactive({
         return closestRoute?.meta?.menuId;
     }),
 });
+
 </script>
 
 <template>
     <fragment>
         <cloud-service-l-s-b v-if="state.menuId === MENU_ID.CLOUD_SERVICE" />
-        <metric-explorer-l-s-b v-else-if="state.menuId === MENU_ID.METRIC_EXPLORER" />
+        <metric-explorer-l-s-b v-else-if="state.menuId === MENU_ID.METRIC_EXPLORER"
+                               :width="width"
+        />
         <security-l-s-b v-else-if="state.menuId === MENU_ID.SECURITY" />
     </fragment>
 </template>

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

@@ -95,9 +95,9 @@
 <script lang="ts">
 import { useInfiniteScroll } from '@vueuse/core';
 import {
-    computed, getCurrentInstance, onMounted, reactive, toRefs, watch,
+    computed, onMounted, reactive, toRefs, watch,
 } from 'vue';
-import type { Vue } from 'vue/types/vue';
+import { useRoute } from 'vue-router/composables';
 
 import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
@@ -190,7 +190,7 @@ export default {
         },
     },
     setup(props) {
-        const vm = getCurrentInstance()?.proxy as Vue;
+        const route = useRoute();
         const userStore = useUserStore();
         const state = reactive({
             loading: true,
@@ -202,7 +202,7 @@ export default {
             noteItemMap: {} as { [key: string]: NoteModel[] },
             selectedHistoryItem: undefined as undefined | CloudServiceHistoryItem,
             selectedKeyName: undefined as undefined | string,
-            showDetailOverlay: computed(() => vm.$route.hash === `#${HISTORY_OVERLAY_HASH_NAME}`),
+            showDetailOverlay: computed(() => route.hash === `#${HISTORY_OVERLAY_HASH_NAME}`),
             totalCount: 0,
             pageStart: 1,
             searchText: '',

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

@@ -41,6 +41,11 @@ import { useAssetInventorySettingsStore } from '@/services/asset-inventory/store
 import { useMetricExplorerPageStore } from '@/services/asset-inventory/stores/metric-explorer-page-store';
 import type { NamespaceSubItemType } from '@/services/asset-inventory/types/asset-analysis-type';
 
+interface props {
+  width : number
+}
+const props = defineProps<props>();
+
 const lsbRef = ref<HTMLElement|null>(null);
 const { width: lsbWidth } = useElementSize(lsbRef);
 
@@ -295,16 +300,18 @@ watch(() => storeState.selectedNamespace, (selectedNamespace) => {
 <template>
     <div class="metric-explorer-l-s-b">
         <p-popover class="metric-select-guide-popover"
-                   :is-visible="guidePopoverState.metricGuideVisible"
+                   :is-visible.sync="guidePopoverState.metricGuideVisible"
                    position="right"
                    ignore-outside-click
                    ignore-target-click
                    boundary=".metric-explorer-l-s-b"
                    :trigger="POPOVER_TRIGGER.NONE"
+                   min-width="21.5rem"
                    :style="{ left: `${lsbWidth}px`}"
         >
             <l-s-b ref="lsbRef"
                    :menu-set="state.menuSet"
+                   :style="{ width: `${props.width}px` }"
             >
                 <template #collapsible-contents-starred>
                     <div v-if="state.starredMenuSet.length > 0">
@@ -418,6 +425,7 @@ watch(() => storeState.selectedNamespace, (selectedNamespace) => {
                     />
                 </template>
             </l-s-b>
+
             <template #content>
                 <div class="metric-select-guide-content">
                     <p class="title">

apps/web/src/services/auth/authenticator/external/KEYCLOAK_OIDC/template/KEYCLOAK_OIDC.vue

@@ -14,27 +14,29 @@
 
 <script lang="ts">
 import {
-    defineComponent, getCurrentInstance, reactive, toRefs,
+    defineComponent, reactive, toRefs,
 } from 'vue';
-import type { Vue } from 'vue/types/vue';
+import { useRouter } from 'vue-router/composables';
 
 import { PButton } from '@cloudforet/mirinae';
 
 import { AUTH_ROUTE } from '@/services/auth/routes/route-constant';
 
+
+
 export default defineComponent({
     name: 'KEYCLOAKODIC',
     components: {
         PButton,
     },
     setup() {
-        const vm = getCurrentInstance()?.proxy as Vue;
+        const router = useRouter();
         const state = reactive({
             keycloakVisible: false,
         });
 
         const openKeycloakSignIn = () => {
-            vm.$router.push({ name: AUTH_ROUTE.SIGN_IN.KEYCLOAK._NAME });
+            router.push({ name: AUTH_ROUTE.SIGN_IN.KEYCLOAK._NAME });
         };
         return {
             openKeycloakSignIn,

apps/web/src/services/auth/components/SignInRightContainer.vue

@@ -31,9 +31,9 @@
 <script lang="ts">
 import { useWindowSize } from '@vueuse/core/index';
 import {
-    computed, getCurrentInstance, reactive, toRefs,
+    computed, reactive, toRefs,
 } from 'vue';
-import type { Vue } from 'vue/types/vue';
+import { useRoute, useRouter } from 'vue-router/composables';
 
 import {
     PI, screens,
@@ -58,7 +58,9 @@ export default {
         },
     },
     setup() {
-        const vm = getCurrentInstance()?.proxy as Vue;
+        const router = useRouter();
+        const route = useRoute();
+
         const domainStore = useDomainStore();
         const displayStore = useDisplayStore();
         const { width } = useWindowSize();
@@ -69,7 +71,7 @@ export default {
 
         /* event */
         const hideErrorMessage = () => {
-            if (vm.$route.query.error) vm.$router.replace({ query: { error: null } });
+            if (route.query.error) router.replace({ query: { error: null } });
             displayStore.setIsSignInFailed(false);
         };
 

apps/web/src/services/auth/pages/PasswordPage.vue

@@ -86,11 +86,9 @@
 <script setup lang="ts">
 import type { ComponentPublicInstance, ComputedRef } from 'vue';
 import {
-    computed,
-    getCurrentInstance, onMounted, reactive, ref,
+    computed, onMounted, reactive, ref,
 } from 'vue';
 import { useRoute, useRouter } from 'vue-router/composables';
-import type { Vue } from 'vue/types/vue';
 
 import dayjs from 'dayjs';
 import type { JwtPayload } from 'jwt-decode';
@@ -135,7 +133,6 @@ const props = withDefaults(defineProps<Props>(), {
 
 const passwordFormEl = ref<ComponentPublicInstance<PasswordFormExpose>>();
 
-const vm = getCurrentInstance()?.proxy as Vue;
 const router = useRouter();
 const route = useRoute();
 
@@ -195,7 +192,7 @@ const handleClickButton = () => {
     resetInputs();
 };
 const getSSOTokenFromUrl = (): string|undefined => {
-    const query = vm.$router.currentRoute.query;
+    const query = router.currentRoute.query;
     return query.sso_access_token as string;
 };
 const getUserIdFromToken = (ssoAccessToken: string): string | undefined => {