Update software catalog & application status

applicationFE/package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@tabler/core": "^1.0.0-beta20",
+    "@tabler/icons-vue": "^3.21.0",
     "ace-builds": "^1.35.2",
     "application-manager-ui": "file:",
     "axios": "^1.7.2",

applicationFE/src/api/softwareCatalog.ts

@@ -2,14 +2,121 @@ import request from "../common/request";
 import type { SoftwareCatalog } from "@/views/type/type";
 
 // software catalog list
-export const getSoftwareCaltalogList = (title:string) => {
+export const getSoftwareCatalogList = (title:string) => {
   return request.get(`/catalog/software/?title=${title}`)
 }
 
-export const getSoftwareCaltalogDetail = (catalogIdx :number) => {
+export const getSoftwareCaltalogDetail = (catalogIdx :number | null) => {
   return request.get(`/catalog/software/${catalogIdx}`)
 }
 
 export const createCatalog = (param: object) => {
   return request.post(`/catalog/software`, param)
+}
+
+export const searchDockerhub = (keyword: string) => {
+  return request.get(`/search/dockerhub/${keyword}`)
+}
+
+export const searchArtifacthubhub = (keyword: string) => {
+  return request.get(`/search/artifacthub/${keyword}`)
+}
+
+// install API 변경됨
+// export const runVmInstall = (params: {
+//   namespace: string,
+//   mciName: string,
+//   vmName: string,
+//   applications: string[]
+// }) => {
+//   return request.post(`/ape/vm/install`, params)
+// }
+export const runVmInstall = (params: {
+  namespace: string,
+  mciId: string,
+  vmId: string,
+  catalogId: number,
+  servicePort: number
+}) => {
+  // 추후 POST 방식으로 변경 필요
+  // return request.post(`/applications/vm/deploy`, params)
+  return request.get(`/applications/vm/deploy?namespace=${params.namespace}&mciId=${params.mciId}&vmId=${params.vmId}&catalogId=${params.catalogId}&servicePort=${params.servicePort}`, )
+}
+
+export const runVmUninstall = (params: {
+  namespace: string,
+  mciName: string,
+  vmName: string,
+  applications: string[]
+}) => {
+  return request.post(`/ape/vm/uninstall`, params)
+}
+
+// install API 변경됨
+// export const runK8SInstall = (params: {
+//   namespace: string,
+//   clusterName: string,
+//   helmCharts: string[]
+// }) => {
+//   return request.post(`/ape/helm/install`, params)
+// }
+export const runK8SInstall = (params: {
+  namespace: string,
+  clusterName: string,
+  helmCharts: string[]
+}) => {
+  return request.post(`/applications/k8s/deploy`, params)
+}
+
+export const runK8SUninstall = (params: {
+  namespace: string,
+  clusterName: string,
+  helmCharts: string[]
+}) => {
+  return request.post(`/ape/helm/uninstall`, params)
+}
+
+export const vmSpecCheck = (params: {
+  namespace: string,
+  mciName: string,
+  vmName: string,
+  catalogId: number
+}) => {
+  return request.get(`/applications/vm/check?namespace=${params.namespace}&mciId=${params.mciName}&vmId=${params.vmName}&catalogId=${params.catalogId}`)
+}
+
+export const k8sSpecCheck = (params: {
+  namespace: string,
+  clusterName: string,
+  catalogId: number
+}) => {
+  return request.get(`/applications/k8s/check?namespace=${params.namespace}&clusterName=${params.clusterName}&catalogId=${params.catalogId}`)
+}
+
+export const getBuildLogList = (jobName: string) => {
+  return request.get(`/ape/log/${jobName}`)
+}
+
+export function createSoftwareCatalog(params: any) {
+  return request.post(`/catalog/software`, params)
+}
+
+export function updateSoftwareCatalog(params: any) {
+  return request.put(`/catalog/software`, params)
+}
+
+export function getVmApplicationsStatus() {
+  return request.get(`/applications/vm/groups`)
+}
+
+export function getK8sApplicationsStatus() {
+  return request.get(`/applications/k8s/groups`)
+}
+
+export function applicationAction(
+  params: {
+  operation: string,
+  applicationStatusId: number
+}) {
+  return request.get(`/applications/vm/action?operation=${params.operation}&applicationStatusId=${params.applicationStatusId}`)
 }

applicationFE/src/api/tumblebug.ts

@@ -0,0 +1,24 @@
+import request from "../common/request";
+
+export const getNsInfo = () => {
+  return request.get(`/cbtumblebug/ns`)
+}
+
+export const getMciInfo = (nsId: string) => {
+  return request.get(`/cbtumblebug/ns/${nsId}/mci`)
+}
+
+export const getVmInfo = (params: {
+  nsId: string,
+  mciId: string
+}) => {
+  return request.get(`/cbtumblebug/ns/${params.nsId}/mci/${params.mciId}`)
+}
+
+export const getClusterInfo = (nsId: string) => {
+  return request.get(`/cbtumblebug/ns/${nsId}/k8scluster`)
+}
+
+
+
+

applicationFE/src/assets/css/application.scss

@@ -0,0 +1,206 @@
+// sequential-workflow-designer import
+@import "~sequential-workflow-designer/css/designer.css";
+@import "~sequential-workflow-designer/css/designer-light.css";
+@import "~sequential-workflow-designer/css/designer-dark.css";
+
+//tabler
+@import "./inter/inter.css"; // font
+@import "./tabler_custom.scss";
+
+// tabulator Custom CSS
+@import "./tabulator_for_tabler.scss";
+
+// tomselect Custom CSS
+@import "./tomselect_for_tabler.scss";
+
+.section {
+  display: none;
+}
+.section.active {
+  display: block;
+}
+
+.sub_section {
+  display: none;
+}
+.sub_section.active {
+  display: block;
+}
+
+.vmStatus-list {
+  max-height: 150px;
+  overflow-y: auto;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.vmStatus-list li {
+  padding: 10px;
+  border: 1px solid #ccc;
+  box-sizing: border-box;
+  width: calc(100% / 2); /* 기본적으로 한 줄에 2개의 아이템을 배치 */
+  height: 100px;
+  display: inline-block;
+  margin: 10px 0;
+  text-align: center;
+
+  font-size: 16px;
+  border-radius: 15px;
+  // transition: background-color 0.3s; /* 배경색 변화 애니메이션 */
+  cursor: pointer; /* 클릭 가능 커서 */
+  overflow: hidden; /* 또는 overflow: auto; */
+  transition: background-color 0.3s;
+}
+.vmStatus-list li.clicked {
+  background-color: #17a2b8; /* 클릭 시 배경색 변경 */
+}
+
+.removebullet {
+  list-style-type: none;
+  padding-left: 0px;
+  flex-wrap: wrap;
+}
+
+// .dashboard .create_box .new_servers_config.active {
+// 	display: block;
+// }
+
+// .dashboard .create_box .express_servers_config.active {
+// 	display: block;
+// }
+
+/* 화면 폭이 1px 이상 400px 미만일 때 */
+@media (max-width: 399px) {
+  .vmStatus-list li {
+    width: calc(100% / 2); /* 한 줄에 3개의 아이템을 배치 */
+  }
+}
+
+/* 화면 폭이 400px 이상 600px 미만일 때 */
+@media (min-width: 400px) and (max-width: 599px) {
+  .vmStatus-list li {
+    width: calc(100% / 3); /* 한 줄에 3개의 아이템을 배치 */
+  }
+}
+
+/* 화면 폭이 600px 이상 900px 미만일 때 */
+@media (min-width: 600px) and (max-width: 899px) {
+  .vmStatus-list li {
+    width: calc(100% / 4); /* 한 줄에 4개의 아이템을 배치 */
+  }
+}
+
+/* 화면 폭이 900px 이상일 때 */
+@media (min-width: 900px) {
+  .vmStatus-list li {
+    width: calc(100% / 5); /* 한 줄에 5개의 아이템을 배치 */
+  }
+}
+
+// 전체 mci / server 박스 스타일
+.mcilistbox {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px; /* 카드 간의 간격 */
+  width: 100%;
+}
+
+.mci-list {
+  border-radius: 15px;
+  border: 2px solid #ddd;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  float: left;
+  position: relative;
+  width: 252px;
+  height: 259px;
+  overflow: hidden; /* 스크롤 가능 영역 설정 */
+  cursor: pointer; /* 버튼 커서 */
+  transition: background-color 0.3s; /* 호버 시 배경색 전환 효과 */
+}
+
+// 전체 mci / server ul 스타일
+.vm-list {
+  display: flex;
+  flex-wrap: wrap;
+  list-style-type: none; /* 기본 불릿 제거 */
+  padding: 10px;
+  width: 100%;
+  max-height: 150px;
+  overflow-y: auto;
+  flex: 1;
+}
+
+// 전체 mci / server li 스타일
+.vm-item {
+  border-radius: 10px;
+  border: 1px solid #ddd;
+  width: 80px; /* 네모 크기 */
+  height: 65px; /* 네모 크기 */
+  border: 1px solid #ccc; /* 테두리 */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 5px; /* 네모들 간의 간격 */
+  text-align: center;
+}
+
+// .vm-item:hover {
+//     background-color: hsl( 80%, 70%); /* 호버 시 배경색 변경 */
+// }
+
+/* 반응형 디자인 */
+@media (max-width: 600px) {
+  .vm-item {
+    width: 40px;
+    height: 40px;
+  }
+}
+
+@media (max-width: 400px) {
+  .vm-item {
+    width: 30px;
+    height: 30px;
+  }
+}
+
+// server Quantity
+
+.input-number-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  // width: 200px;
+  // margin: 50px auto;
+  // border: 1px solid #ccc;
+  border: var(--tblr-border-width) solid #dadfe5;
+  border-radius: 4px;
+  // border-radius: 1px;
+}
+
+.input-number-container button {
+  // width: 40px;
+  // height: 40px;
+  border: none;
+  // background-color: #dadfe5;
+  font-size: 18px;
+  cursor: pointer;
+}
+
+.input-number-container input {
+  // width: 60px;
+  // height: 40px;
+  text-align: center;
+  border: none;
+  // font-size: 18px;
+  outline: none;
+  // -moz-appearance: textfield;
+}
+
+.input-number-container input::-webkit-outer-spin-button,
+.input-number-container input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}