update workflow frontend

front/src/app/i18n/en.json

@@ -31,7 +31,7 @@
   },
   "USER": {
     "REGISTER": {
-      "PASSWORD_CONFIRM" : "Please check confirm password"
+      "PASSWORD_CONFIRM": "Please check confirm password"
     }
   },
   "CLOUD_RESOURCES": {
@@ -66,14 +66,14 @@
       "CLEAR_ALL": "CLEAR"
     },
     "DATA_TABLE": {
-      "NO_DATA" : "NO_DATA"
+      "NO_DATA": "NO_DATA"
     },
     "FIELD_GROUP": {
       "OPTIONAL": "optional"
     },
     "BUTTON_MODAL": {
-      "CANCEL" : "Cancel",
-      "CONFIRM" : "OK",
+      "CANCEL": "Cancel",
+      "CONFIRM": "OK",
       "REMOVE": "Remove",
       "EDIT": "Edit",
       "APPLY": "Apply",
@@ -84,17 +84,24 @@
       "ADD": "Add"
     },
     "CONTEXT_MENU": {
-      "SHOW_MORE" : "show more",
-      "NO_ITEM" : "NO ITEM"
+      "SHOW_MORE": "show more",
+      "NO_ITEM": "NO ITEM"
     },
     "DEFINITION_TABLE": {
-      "NO_DATA" : "NO DATA"
+      "NO_DATA": "NO DATA"
     },
     "COPY_BUTTON": {
       "COPIED": "Copy!"
     },
     "SELECT_DROPDOWN": {
-      "SELECT" : "select item"
+      "SELECT": "select item"
+    },
+    "VERTICAL_LAYOUT": {
+      "EXPAND": "Expand",
+      "COLLAPSE": "Collapse"
+    },
+    "DATA_LOADER": {
+      "NO_DATA": "NO DATA"
     }
   }
 }

front/src/entities/mci/api/index.ts

@@ -3,29 +3,39 @@ import {
   RequestBodyWrapper,
   useAxiosPost,
 } from '../../../shared/libs';
-import { IMci } from '../model';
+import { IMci, MciResponseData } from '@/entities/mci/model';
 
 export interface IMciRequestParams {
   nsId: string | null;
   mciId: string | null;
+  option?: string | null;
 }
 
 const GET_ALL_MCI = 'GetAllMci';
 const GET_MCI_INFO = 'GetMci';
 
-export function useGetMciList(projectId: string | null) {
+export function useGetMciList(projectId: string | null, option: string | null) {
   const requestBodyWrapper: Required<
-    Pick<RequestBodyWrapper<Pick<IMciRequestParams, 'nsId'>>, 'pathParams'>
+    Pick<
+      RequestBodyWrapper<{ nsId: string | null } | { option: string | null }>,
+      'pathParams' | 'queryParams'
+    >
   > = {
     pathParams: {
       nsId: projectId,
     },
+    queryParams: {
+      option: option,
+    },
   };
 
   return useAxiosPost<
-    IAxiosResponse<IMci[]>,
+    IAxiosResponse<MciResponseData>,
     Required<
-      Pick<RequestBodyWrapper<Pick<IMciRequestParams, 'nsId'>>, 'pathParams'>
+      Pick<
+        RequestBodyWrapper<{ nsId: string | null } | { option: string | null }>,
+        'pathParams' | 'queryParams'
+      >
     >
   >(GET_ALL_MCI, requestBodyWrapper);
 }

front/src/entities/mci/model/stores.ts

@@ -1,38 +1,43 @@
 import { defineStore } from 'pinia';
 import { ref, Ref } from 'vue';
-import { IMci } from './types.ts';
-
-// api 요청은 실제 사용하는 page에서 실행.
-// list도 여기서
-// 다른 store 참조가능
-// 각각의 store load는 feature에서 진행.
+import { IMci, IVm } from './types.ts';
 
 const NAMESPACE = 'MCI';
 
-export interface IMciStore {
-  mcis: Ref<IMci[]>;
-  setMcis: (val: IMci[]) => void;
-  loadMciById: (id: string) => IMci | null;
-}
-
-export const useMCIStore = defineStore(NAMESPACE, (): IMciStore => {
+export const useMCIStore = defineStore(NAMESPACE, () => {
   const mcis = ref<IMci[]>([]);
 
   function setMcis(_mcis: IMci[]) {
     mcis.value = _mcis;
   }
 
-  function loadMciById(mciId: string) {
+  function getMciById(mciId: string) {
     return (
       mcis.value.find((mci: IMci) => {
         return mci.id === mciId;
       }) || null
     );
   }
 
+  function setVmsInfo(mciID: string, vm: Array<IVm>) {
+    const mci = getMciById(mciID);
+    if (mci) {
+      mci.vm = vm;
+    }
+  }
+
+  function setVmInfo(mciID: string, vm: IVm) {
+    const mci = getMciById(mciID);
+    const targetVm = mci?.vm.find(_vm => _vm.id === vm.id);
+    if (targetVm) {
+      Object.assign(targetVm, vm);
+    }
+  }
   return {
     mcis,
     setMcis,
-    loadMciById,
+    getMciById,
+    setVmsInfo,
+    setVmInfo,
   };
 });

front/src/entities/mci/model/types.ts

@@ -1,28 +1,10 @@
-import { IVm } from '../../vm/model';
-
-export interface IMci extends IVm, IMciStatus {
-  id: string;
-  name: string;
-  alias: string;
-  type: string;
-  deploymentAlgorithm: string;
-  action: string;
-  vm: IVm[];
-}
-
-export interface IMciStatus {
-  status: string;
-  statusCount: {
-    countTotal: number;
-    countRunning: number;
-    countSuspended: number;
-    countTerminated: number;
-  };
+export interface MciResponseData {
+  mci: IMci[];
 }
 
 export type McisTableType =
   | 'name'
-  | 'alias'
+  | 'id'
   | 'status'
   | 'provider'
   | 'countTotal'
@@ -33,3 +15,125 @@ export type McisTableType =
   | 'deploymentAlgorithm'
   | 'type'
   | 'action';
+
+interface Location {
+  display: string;
+  latitude: number;
+  longitude: number;
+}
+
+interface RegionZoneInfo {
+  assignedRegion: string;
+  assignedZone: string;
+}
+
+interface RegionDetail {
+  regionId: string;
+  regionName: string;
+  description: string;
+  location: Location;
+  zones: string[];
+}
+
+interface ConnectionConfig {
+  configName: string;
+  providerName: string;
+  driverName: string;
+  credentialName: string;
+  credentialHolder: string;
+  regionZoneInfoName: string;
+  regionZoneInfo: RegionZoneInfo;
+  regionDetail: RegionDetail;
+  regionRepresentative: boolean;
+  verified: boolean;
+}
+
+export interface IVm {
+  resourceType: string;
+  id: string;
+  uid: string;
+  name: string;
+  subGroupId: string;
+  location: Location;
+  status: string;
+  targetStatus: string;
+  targetAction: string;
+  monAgentStatus: string;
+  networkAgentStatus: string;
+  systemMessage: string;
+  createdTime: string;
+  label: any; // Assuming label can be any type
+  description: string;
+  region: {
+    Region: string;
+    Zone: string;
+  };
+  publicIP: string;
+  sshPort: string;
+  publicDNS: string;
+  privateIP: string;
+  privateDNS: string;
+  rootDiskType: string;
+  rootDiskSize: string;
+  rootDeviceName: string;
+  connectionName: string;
+  connectionConfig: ConnectionConfig;
+  specId: string;
+  cspSpecName: string;
+  imageId: string;
+  cspImageName: string;
+  vNetId: string;
+  cspVNetId: string;
+  subnetId: string;
+  cspSubnetId: string;
+  networkInterface: string;
+  securityGroupIds: string[];
+  dataDiskIds: any; // Assuming dataDiskIds can be any type
+  sshKeyId: string;
+  cspSshKeyId: string;
+}
+
+interface StatusCount {
+  countTotal: number;
+  countCreating: number;
+  countRunning: number;
+  countFailed: number;
+  countSuspended: number;
+  countRebooting: number;
+  countTerminated: number;
+  countSuspending: number;
+  countResuming: number;
+  countTerminating: number;
+  countUndefined: number;
+}
+
+interface Label {
+  'sys.description': string;
+  'sys.id': string;
+  'sys.labelType': string;
+  'sys.manager': string;
+  'sys.name': string;
+  'sys.namespace': string;
+  'sys.uid': string;
+}
+
+export interface IMci {
+  resourceType: string;
+  id: string;
+  uid: string;
+  name: string;
+  status: string;
+  statusCount: StatusCount;
+  targetStatus: string;
+  targetAction: string;
+  installMonAgent: string;
+  configureCloudAdaptiveNetwork: string;
+  label: Label;
+  systemLabel: string;
+  systemMessage: string;
+  description: string;
+  vm: IVm[];
+  newVmList: any; // Assuming newVmList can be any type
+}
+
+// Usage example:

front/src/entities/vm/api/index.ts

@@ -3,7 +3,7 @@ import {
   RequestBodyWrapper,
   useAxiosPost,
 } from '../../../shared/libs';
-import { IVm } from '../model';
+import { IVm } from '@/entities/mci/model';
 
 export interface IVmRequestParams {
   nsId: string;
@@ -25,3 +25,5 @@ export function useGetVmInfo(params: IVmRequestParams | null) {
     Required<Pick<RequestBodyWrapper<IVmRequestParams | null>, 'pathParams'>>
   >(GET_VM_Info, requestBodyWrapper);
 }
+
+export const t = {};