Skip to content

Commit bbbe86a

Browse files
MZC-CSCMZC-CSC
authored
Merge pull request #62 from seokho-son/main
Enhance spec and image selection feature
2 parents 8f0e71c + 612ee08 commit bbbe86a

3 files changed

Lines changed: 155 additions & 133 deletions

File tree

‎front/assets/js/partials/operation/manage/imagerecommendation.js‎

Lines changed: 60 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -87,74 +87,61 @@ function initRecommendImageTable() {
8787
width: 60,
8888
},
8989
{
90-
title: "connectionName",
91-
field: "connectionName",
92-
headerSort: false,
93-
visible: false
94-
},
95-
{
96-
title: "PROVIDER",
97-
field: "providerName",
90+
title: "BASIC",
91+
field: "isBasicImage",
9892
vertAlign: "middle",
9993
hozAlign: "center",
100-
headerHozAlign: "center",
101-
headerSort: true,
10294
maxWidth: 100,
103-
},
104-
{
105-
title: "REGION",
106-
field: "regionList",
107-
vertAlign: "middle",
108-
hozAlign: "center",
95+
headerSort: true,
10996
formatter: function(cell) {
110-
var regions = cell.getValue();
111-
if (Array.isArray(regions)) {
112-
return regions.join(", ");
97+
var value = cell.getValue();
98+
if (value === true) {
99+
return '<span style="color: green; font-weight: bold;">✓</span>';
100+
} else {
101+
return '<span style="color: gray;">-</span>';
113102
}
114-
return regions;
115103
}
116104
},
117-
{
118-
title: "IMAGE NAME",
119-
field: "name",
120-
vertAlign: "middle",
121-
hozAlign: "left",
122-
maxWidth: 200,
123-
},
124-
{
125-
title: "CSP IMAGE",
126-
field: "cspImageName",
127-
vertAlign: "middle",
128-
hozAlign: "center",
129-
maxWidth: 150,
130-
},
131105
{
132106
title: "OS TYPE",
133107
field: "osType",
134108
vertAlign: "middle",
135109
hozAlign: "center",
136-
maxWidth: 120,
110+
minWidth: 120,
111+
headerSort: true,
137112
},
138113
{
139-
title: "OS ARCH",
140-
field: "osArchitecture",
114+
title: "IMAGE NAME",
115+
field: "name",
141116
vertAlign: "middle",
142-
hozAlign: "center",
143-
maxWidth: 100,
117+
hozAlign: "left",
118+
minWidth: 180,
119+
headerSort: true,
144120
},
145121
{
146-
title: "PLATFORM",
147-
field: "osPlatform",
122+
title: "OS DISTRIBUTION",
123+
field: "osDistribution",
148124
vertAlign: "middle",
149-
hozAlign: "center",
150-
maxWidth: 120,
125+
hozAlign: "left",
126+
minWidth: 300,
127+
tooltip: true,
128+
headerSort: true,
151129
},
152130
{
153-
title: "STATUS",
154-
field: "imageStatus",
131+
title: "GPU",
132+
field: "isGPUImage",
155133
vertAlign: "middle",
156134
hozAlign: "center",
157-
maxWidth: 100,
135+
maxWidth: 80,
136+
headerSort: true,
137+
formatter: function(cell) {
138+
var value = cell.getValue();
139+
if (value === true) {
140+
return '<span style="color: blue; font-weight: bold;">✓</span>';
141+
} else {
142+
return '<span style="color: gray;">-</span>';
143+
}
144+
}
158145
}
159146
];
160147

@@ -196,32 +183,41 @@ export async function getRecommendImageInfo() {
196183
var isGPUImage = $("#gpu_image_value").val()
197184

198185
// 전역 변수에서 정보 가져오기
186+
var specId = window.selectedSpecInfo.id; // spec의 전체 ID (예: "aws+ap-northeast-2+t2.small")
199187
var provider = window.selectedSpecInfo.provider;
200188
var region = window.selectedSpecInfo.regionName;
201189
var connectionName = window.selectedSpecInfo.connectionName;
202-
var osArchitecture = window.selectedSpecInfo.osArchitecture;
190+
203191
// 현재 workspace/project 정보 가져오기
204192
try {
205193
var selectedWorkspaceProject = await webconsolejs["partials/layout/navbar"].workspaceProjectInit();
206194
var nsId = selectedWorkspaceProject.nsId;
207195

208-
// API 호출을 위한 파라미터 구성
196+
// API 호출을 위한 파라미터 구성 (간단화된 방식)
209197
var searchParams = {
210-
includeDeprecatedImage: false,
211-
isGPUImage: isGPUImage === "true",
212-
isKubernetesImage: false,
213-
isRegisteredByAsset: false,
214-
osArchitecture: osArchitecture,
215-
osType: osType,
216-
providerName: provider.toLowerCase() || "",
217-
regionName: region || ""
198+
matchedSpecId: specId, // spec ID를 사용하여 provider, region, architecture 자동 매칭
199+
osType: osType
218200
};
201+
202+
// GPU 이미지가 필요한 경우에만 추가
203+
if (isGPUImage === "true") {
204+
searchParams.isGPUImage = true;
205+
}
219206

220207
// 이미지 검색 API 호출
221208
var response = await webconsolejs["common/api/services/mci_api"].searchImage(nsId, searchParams);
222209

223210
if (response.status && response.status.code === 200) {
224211
var imageList = response.responseData.imageList || [];
212+
213+
// 이미지가 없는 경우 안내 메시지
214+
if (imageList.length === 0) {
215+
console.warn("No images found for the selected spec and OS type");
216+
alert("No images found for the selected specification and OS type. Please try different criteria.");
217+
safeSetTableData([]);
218+
return;
219+
}
220+
225221
// API 응답을 테이블 형식에 맞게 변환
226222
var processedImageList = imageList.map(function(image) {
227223
return {
@@ -235,14 +231,16 @@ export async function getRecommendImageInfo() {
235231
fetchedTime: image.fetchedTime || new Date().toLocaleString(),
236232
creationDate: image.creationDate || new Date().toISOString(),
237233
osType: image.osType || osType,
238-
osArchitecture: image.osArchitecture || osArchitecture,
234+
osArchitecture: image.osArchitecture,
239235
osPlatform: image.osPlatform || "Linux/UNIX",
240236
osDistribution: image.osDistribution || "",
241-
osDiskType: image.osDiskType || "ebs",
242-
osDiskSizeGB: image.osDiskSizeGB || -1,
243-
imageStatus: image.imageStatus || "Available",
244-
description: image.description || image.name
245-
};
237+
osDiskType: image.osDiskType || "ebs",
238+
osDiskSizeGB: image.osDiskSizeGB || -1,
239+
imageStatus: image.imageStatus || "Available",
240+
description: image.description || image.name,
241+
isBasicImage: image.isBasicImage || false,
242+
isGPUImage: image.isGPUImage || false
243+
};
246244
});
247245

248246
recommendImageListObj = processedImageList;

‎front/assets/js/partials/operation/manage/pmk_imagerecommendation.js‎

Lines changed: 65 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -84,74 +84,77 @@ function initRecommendImageTablePmk() {
8484
width: 60,
8585
},
8686
{
87-
title: "connectionName",
88-
field: "connectionName",
89-
headerSort: false,
90-
visible: false
91-
},
92-
{
93-
title: "PROVIDER",
94-
field: "providerName",
87+
title: "BASIC",
88+
field: "isBasicImage",
9589
vertAlign: "middle",
9690
hozAlign: "center",
97-
headerHozAlign: "center",
98-
headerSort: true,
9991
maxWidth: 100,
100-
},
101-
{
102-
title: "REGION",
103-
field: "regionList",
104-
vertAlign: "middle",
105-
hozAlign: "center",
92+
headerSort: true,
10693
formatter: function(cell) {
107-
var regions = cell.getValue();
108-
if (Array.isArray(regions)) {
109-
return regions.join(", ");
94+
var value = cell.getValue();
95+
if (value === true) {
96+
return '<span style="color: green; font-weight: bold;">✓</span>';
97+
} else {
98+
return '<span style="color: gray;">-</span>';
11099
}
111-
return regions;
112100
}
113101
},
114102
{
115-
title: "IMAGE NAME",
116-
field: "name",
117-
vertAlign: "middle",
118-
hozAlign: "left",
119-
maxWidth: 200,
120-
},
121-
{
122-
title: "CSP IMAGE",
123-
field: "cspImageName",
103+
title: "OS TYPE",
104+
field: "osType",
124105
vertAlign: "middle",
125106
hozAlign: "center",
126-
maxWidth: 150,
107+
minWidth: 120,
108+
headerSort: true,
127109
},
128110
{
129-
title: "OS TYPE",
130-
field: "osType",
111+
title: "IMAGE NAME",
112+
field: "name",
131113
vertAlign: "middle",
132-
hozAlign: "center",
133-
maxWidth: 120,
114+
hozAlign: "left",
115+
minWidth: 180,
116+
headerSort: true,
134117
},
135118
{
136-
title: "OS ARCH",
137-
field: "osArchitecture",
119+
title: "OS DISTRIBUTION",
120+
field: "osDistribution",
138121
vertAlign: "middle",
139-
hozAlign: "center",
140-
maxWidth: 100,
122+
hozAlign: "left",
123+
minWidth: 300,
124+
tooltip: true,
125+
headerSort: true,
141126
},
142127
{
143-
title: "PLATFORM",
144-
field: "osPlatform",
128+
title: "GPU",
129+
field: "isGPUImage",
145130
vertAlign: "middle",
146131
hozAlign: "center",
147-
maxWidth: 120,
132+
maxWidth: 80,
133+
headerSort: true,
134+
formatter: function(cell) {
135+
var value = cell.getValue();
136+
if (value === true) {
137+
return '<span style="color: blue; font-weight: bold;">✓</span>';
138+
} else {
139+
return '<span style="color: gray;">-</span>';
140+
}
141+
}
148142
},
149143
{
150-
title: "STATUS",
151-
field: "imageStatus",
144+
title: "K8S",
145+
field: "isKubernetesImage",
152146
vertAlign: "middle",
153147
hozAlign: "center",
154-
maxWidth: 100,
148+
maxWidth: 80,
149+
headerSort: true,
150+
formatter: function(cell) {
151+
var value = cell.getValue();
152+
if (value === true) {
153+
return '<span style="color: purple; font-weight: bold;">✓</span>';
154+
} else {
155+
return '<span style="color: gray;">-</span>';
156+
}
157+
}
155158
}
156159
];
157160

@@ -191,30 +194,27 @@ export async function getRecommendImageInfoPmk() {
191194
var isGPUImage = $("#gpu_image_value-pmk").val()
192195

193196
// 전역 변수에서 정보 가져오기
197+
var specId = window.selectedPmkSpecInfo.id; // spec의 전체 ID (예: "aws+ap-northeast-2+t2.small")
194198
var provider = window.selectedPmkSpecInfo.provider;
195199
var region = window.selectedPmkSpecInfo.regionName;
196200
var connectionName = window.selectedPmkSpecInfo.connectionName;
197-
var osArchitecture = window.selectedPmkSpecInfo.osArchitecture;
198-
199-
200201

201202
// 현재 workspace/project 정보 가져오기
202203
try {
203204
var selectedWorkspaceProject = await webconsolejs["partials/layout/navbar"].workspaceProjectInit();
204205
var nsId = selectedWorkspaceProject.nsId;
205206

206-
207-
// API 호출을 위한 파라미터 구성
207+
// API 호출을 위한 파라미터 구성 (간단화된 방식)
208208
var searchParams = {
209-
includeDeprecatedImage: false,
210-
isGPUImage: isGPUImage === "true",
211-
isKubernetesImage: true,
212-
isRegisteredByAsset: false,
213-
osArchitecture: osArchitecture,
209+
matchedSpecId: specId, // spec ID를 사용하여 provider, region, architecture 자동 매칭
214210
osType: osType,
215-
providerName: provider.toLowerCase() || "",
216-
regionName: region || ""
211+
isKubernetesImage: true // PMK는 Kubernetes 이미지 필수
217212
};
213+
214+
// GPU 이미지가 필요한 경우에만 추가
215+
if (isGPUImage === "true") {
216+
searchParams.isGPUImage = true;
217+
}
218218

219219

220220

@@ -237,14 +237,17 @@ export async function getRecommendImageInfoPmk() {
237237
fetchedTime: image.fetchedTime || new Date().toLocaleString(),
238238
creationDate: image.creationDate || new Date().toISOString(),
239239
osType: image.osType || osType,
240-
osArchitecture: image.osArchitecture || osArchitecture,
240+
osArchitecture: image.osArchitecture,
241241
osPlatform: image.osPlatform || "Linux/UNIX",
242242
osDistribution: image.osDistribution || "",
243-
osDiskType: image.osDiskType || "ebs",
244-
osDiskSizeGB: image.osDiskSizeGB || -1,
245-
imageStatus: image.imageStatus || "Available",
246-
description: image.description || image.name
247-
};
243+
osDiskType: image.osDiskType || "ebs",
244+
osDiskSizeGB: image.osDiskSizeGB || -1,
245+
imageStatus: image.imageStatus || "Available",
246+
description: image.description || image.name,
247+
isBasicImage: image.isBasicImage || false,
248+
isGPUImage: image.isGPUImage || false,
249+
isKubernetesImage: image.isKubernetesImage || false
250+
};
248251
});
249252

250253
recommendImageListObjPmk = processedImageList;

0 commit comments

Comments
 (0)