parent
f4ea2f30b7
commit
fe5c03229b
@ -1,3 +1,3 @@
|
||||
NODE_ENV = "dev"
|
||||
VITE_APP_API_SERVER_URL = "http://10.10.11.144:8080"
|
||||
VITE_APP_API_SERVER_URL = "http://localhost:80"
|
||||
VITE_ROOT_PATH = ""
|
||||
@ -1,13 +1,46 @@
|
||||
import { request } from "@/components/service/index";
|
||||
import { ApiProject } from "@/components/models/project/Project";
|
||||
import {
|
||||
ApiProject,
|
||||
ProjectAuthority,
|
||||
ProjectSearchParams,
|
||||
} from "@/components/models/project/Project";
|
||||
|
||||
export const ProjectService = {
|
||||
search: () => request.get("/api/projects", {}),
|
||||
add: (payload: ApiProject) => {
|
||||
return request.post("/api/projects", payload);
|
||||
// ID로 프로젝트 조회
|
||||
fetchProjectById: (id: number) => {
|
||||
return request.get(`/api/projects/${id}`, {});
|
||||
},
|
||||
// 프로젝트 수정
|
||||
update: (id: number, payload: ApiProject) => {
|
||||
return request.put(`/api/projects/${id}`, payload);
|
||||
},
|
||||
delete: (id: number) => request.delete(`/api/projects/${id}`, {}),
|
||||
// 프로젝트 삭제
|
||||
delete: (id: number) => {
|
||||
return request.delete(`/api/projects/${id}`, {});
|
||||
},
|
||||
// 전체 프로젝트 목록 조회
|
||||
search: () => {
|
||||
return request.get("/api/projects", {});
|
||||
},
|
||||
// 프로젝트 생성
|
||||
add: (payload: ApiProject) => {
|
||||
return request.post("/api/projects", payload);
|
||||
},
|
||||
// 검색 및 페이지네이션 프로젝트 목록 조회
|
||||
searchProjects: (params: ProjectSearchParams) =>
|
||||
request.get("/api/projects/search", params),
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
// 프로젝트 권한
|
||||
projectAuthority: (projectId: number, payload: ProjectAuthority) => {
|
||||
return request.post(`/api/projects/${projectId}/users`, payload);
|
||||
},
|
||||
|
||||
deleteProjectAuthority: (projectId: number, userId: number) => {
|
||||
return request.delete(
|
||||
`/api/projects/${projectId}/users/${userId}/permissions`,
|
||||
{},
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import IconDeleteBtn from "@/components/button/IconDeleteBtn.vue";
|
||||
import IconModifyBtn from "@/components/button/IconModifyBtn.vue";
|
||||
import IconInfoBtn from "@/components/button/IconInfoBtn.vue";
|
||||
import IconDeleteBtn from "@/components/atoms/button/IconDeleteBtn.vue";
|
||||
import IconModifyBtn from "@/components/atoms/button/IconModifyBtn.vue";
|
||||
import IconInfoBtn from "@/components/atoms/button/IconInfoBtn.vue";
|
||||
// import FormComponent from "@/components/device/FormComponent.vue";
|
||||
import { onMounted, ref, watch } from "vue";
|
||||
import ViewComponent from "@/components/Datasets/ViewComponent.vue";
|
||||
import ViewComponent from "@/components/templates/Datasets/ViewComponent.vue";
|
||||
import DatasetsBaseDoalog from "@/components/atoms/organisms/DatasetsBaseDoalog.vue";
|
||||
import WorkflowsUploadDialog from "@/components/atoms/organisms/WorkflowsUploadDialog.vue";
|
||||
// const store = commonStore();
|
||||
@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import IconDeleteBtn from "@/components/button/IconDeleteBtn.vue";
|
||||
import IconModifyBtn from "@/components/button/IconModifyBtn.vue";
|
||||
import IconDeleteBtn from "@/components/atoms/button/IconDeleteBtn.vue";
|
||||
import IconModifyBtn from "@/components/atoms/button/IconModifyBtn.vue";
|
||||
// import FormComponent from "@/components/device/FormComponent.vue";
|
||||
import { onMounted, ref } from "vue";
|
||||
// const store = commonStore();
|
||||
@ -0,0 +1,599 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch, computed } from "vue";
|
||||
import { commonStore } from "@/stores/commonStore";
|
||||
import { storage } from "@/utils/storage.js";
|
||||
|
||||
import { ProjectService } from "@/components/service/project/projectService";
|
||||
import { UserManagerService } from "@/components/service/management/userManagerService";
|
||||
|
||||
import type {
|
||||
Permission,
|
||||
ApiProject,
|
||||
} from "@/components/models/project/Project";
|
||||
|
||||
// ──────────────────────────────────────────────────────────────
|
||||
// 권한/공통
|
||||
// ──────────────────────────────────────────────────────────────
|
||||
const store = commonStore();
|
||||
|
||||
const DEFAULT_PERMISSIONS: Permission[] = [
|
||||
"CREATE",
|
||||
"READ",
|
||||
"UPDATE",
|
||||
"DELETE",
|
||||
];
|
||||
|
||||
const roles = ref<string[]>([]);
|
||||
const refreshRoles = () => {
|
||||
const auth = storage.getAuth?.() ?? storage.get?.("vpp-Auth") ?? null;
|
||||
const r = auth?.userInfo?.roles ?? auth?.roles ?? [];
|
||||
roles.value = Array.isArray(r) ? r : [];
|
||||
};
|
||||
const isAdmin = computed(() => roles.value.includes("ROLE_ADMIN"));
|
||||
|
||||
// ──────────────────────────────────────────────────────────────
|
||||
// 테이블/검색 상태 (UI 그대로 사용)
|
||||
// ──────────────────────────────────────────────────────────────
|
||||
const tableHeader = [
|
||||
{ label: "No", width: "5%", style: "word-break: keep-all;" },
|
||||
{ label: "Project Name", width: "20%", style: "word-break: keep-all;" },
|
||||
{ label: "Description", width: "10%", style: "word-break: keep-all;" },
|
||||
{ label: "Select Users", width: "12%", style: "word-break: keep-all;" },
|
||||
{ label: "Created DateTime", width: "18%", style: "word-break: keep-all;" },
|
||||
{ label: "Action", width: "13%", style: "word-break: keep-all;" },
|
||||
];
|
||||
|
||||
const searchOptions = [
|
||||
{ searchType: "전체", searchText: "" },
|
||||
{ searchType: "프로젝트명", searchText: "prjNm" },
|
||||
{ searchType: "설명", searchText: "prjDesc" },
|
||||
{ searchType: "생성자", searchText: "regUserId" },
|
||||
];
|
||||
|
||||
const pageSizeOptions = [
|
||||
{ text: "10 페이지", value: 10 },
|
||||
{ text: "50 페이지", value: 50 },
|
||||
{ text: "100 페이지", value: 100 },
|
||||
];
|
||||
|
||||
type Row = {
|
||||
no: number;
|
||||
name: string;
|
||||
desc: string;
|
||||
users: string[];
|
||||
registDt: string;
|
||||
deviceKey: number;
|
||||
};
|
||||
|
||||
const data = ref({
|
||||
params: { pageNum: 1, pageSize: 10, searchType: "", searchText: "" },
|
||||
results: [] as Row[],
|
||||
totalDataLength: 0,
|
||||
pageLength: 0,
|
||||
modalMode: "" as "create" | "edit" | "",
|
||||
selectedData: null as Row | null,
|
||||
allSelected: false,
|
||||
selected: [] as Array<{ deviceKey: number }>,
|
||||
isCreateVisible: false,
|
||||
isUploadVisible: false,
|
||||
isModalVisible: false,
|
||||
isConfirmDialogVisible: false,
|
||||
});
|
||||
|
||||
const fmtDate = (v?: string) => (v ? v.replace("T", " ").slice(0, 19) : "-");
|
||||
const splitCsv = (v?: string) =>
|
||||
String(v ?? "")
|
||||
.split(",")
|
||||
.map((s) => s.trim())
|
||||
.filter(Boolean);
|
||||
|
||||
// ──────────────────────────────────────────────────────────────
|
||||
/** 사용자 목록 (v-select items) */
|
||||
// ──────────────────────────────────────────────────────────────
|
||||
type UserOption = { id: number | string; username: string };
|
||||
const userOptions = ref<UserOption[]>([]);
|
||||
|
||||
async function loadUsers() {
|
||||
const { data } = await UserManagerService.getAll();
|
||||
const raw = data as Array<{ id: number | string; username: string }>;
|
||||
userOptions.value = raw.map((u) => ({ id: u.id, username: u.username }));
|
||||
}
|
||||
|
||||
// ──────────────────────────────────────────────────────────────
|
||||
/** 목록 로드: 카드형 로직과 동일한 응답을 테이블 Row로 매핑 */
|
||||
// ──────────────────────────────────────────────────────────────
|
||||
function toRow(p: any, index: number, offset: number): Row {
|
||||
return {
|
||||
no: offset + index + 1,
|
||||
name: p.prjNm ?? "-",
|
||||
desc: p.prjDesc ?? "-",
|
||||
users: splitCsv(p.regUserId ?? p.regUserNm),
|
||||
registDt: fmtDate(p.regDate ?? p.prjStartDt),
|
||||
deviceKey: p.id,
|
||||
};
|
||||
}
|
||||
|
||||
async function getData() {
|
||||
const { pageNum, pageSize } = data.value.params;
|
||||
const startIndex = (pageNum - 1) * pageSize;
|
||||
|
||||
const res = await ProjectService.search();
|
||||
const raw = Array.isArray(res.data) ? res.data : (res.data?.content ?? []);
|
||||
|
||||
data.value.totalDataLength = Array.isArray(res.data)
|
||||
? raw.length
|
||||
: (res.data?.totalElements ?? raw.length);
|
||||
|
||||
const slice = Array.isArray(res.data)
|
||||
? raw.slice(startIndex, startIndex + pageSize)
|
||||
: raw;
|
||||
data.value.results = slice.map((p: any, i: number) =>
|
||||
toRow(p, i, startIndex),
|
||||
);
|
||||
|
||||
const total = data.value.totalDataLength || 0;
|
||||
data.value.pageLength =
|
||||
total % data.value.params.pageSize === 0
|
||||
? total / data.value.params.pageSize
|
||||
: Math.ceil(total / data.value.params.pageSize);
|
||||
}
|
||||
|
||||
// ──────────────────────────────────────────────────────────────
|
||||
/** 폼 & 권한 부여 & 저장 흐름 (카드형과 동일) */
|
||||
// ──────────────────────────────────────────────────────────────
|
||||
const form = ref({
|
||||
prjCd: "",
|
||||
prjNm: "",
|
||||
prjDesc: "",
|
||||
selectedUsers: [] as string[],
|
||||
});
|
||||
const editingProjectId = ref<number | null>(null);
|
||||
|
||||
const resetForm = () => {
|
||||
form.value.prjCd = `PRJ${Date.now()}`;
|
||||
form.value.prjNm = "";
|
||||
form.value.prjDesc = "";
|
||||
form.value.selectedUsers = [];
|
||||
};
|
||||
|
||||
const buildApiPayload = (): ApiProject => {
|
||||
const today = new Date().toISOString().slice(0, 10);
|
||||
const nowIso = new Date().toISOString();
|
||||
const namesCsv = form.value.selectedUsers.join(",");
|
||||
return {
|
||||
id: data.value.modalMode === "edit" ? editingProjectId.value! : null,
|
||||
prjCd: form.value.prjCd,
|
||||
prjNm: form.value.prjNm,
|
||||
prjDesc: form.value.prjDesc,
|
||||
prjStartDt: today,
|
||||
prjEndDt: today,
|
||||
delYn: "N",
|
||||
regDate: nowIso,
|
||||
regUserId: namesCsv,
|
||||
regUserNm: namesCsv,
|
||||
modDate: nowIso,
|
||||
modUserId: namesCsv,
|
||||
modUserNm: namesCsv,
|
||||
};
|
||||
};
|
||||
|
||||
async function grantDefaultPermissions(projectId: number, usernames: string[]) {
|
||||
if (!usernames?.length) return;
|
||||
const set = new Set(usernames);
|
||||
const numericIds = userOptions.value
|
||||
.filter((u) => set.has(u.username))
|
||||
.map((u) => Number(u.id))
|
||||
.filter((n) => Number.isFinite(n));
|
||||
|
||||
await Promise.all(
|
||||
numericIds.map((uid) =>
|
||||
ProjectService.projectAuthority(projectId, {
|
||||
projectId,
|
||||
userId: uid,
|
||||
permissions: DEFAULT_PERMISSIONS,
|
||||
}),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
async function saveProject() {
|
||||
try {
|
||||
const payload = buildApiPayload();
|
||||
let projectId: number;
|
||||
|
||||
if (data.value.modalMode === "create") {
|
||||
const res = await ProjectService.add(payload);
|
||||
projectId = res.data.id;
|
||||
} else {
|
||||
await ProjectService.update(editingProjectId.value!, payload);
|
||||
projectId = editingProjectId.value!;
|
||||
}
|
||||
|
||||
await grantDefaultPermissions(projectId, form.value.selectedUsers);
|
||||
await getData();
|
||||
data.value.isCreateVisible = false;
|
||||
} catch (e) {
|
||||
console.error(`${data.value.modalMode} 실패:`, e);
|
||||
}
|
||||
}
|
||||
|
||||
// ──────────────────────────────────────────────────────────────
|
||||
// 삭제
|
||||
// ──────────────────────────────────────────────────────────────
|
||||
async function deleteRows(targetList?: Array<{ deviceKey: number }>) {
|
||||
const removeList = targetList ?? data.value.selected;
|
||||
if (!removeList?.length) return;
|
||||
|
||||
const ids = removeList.map((x) => x.deviceKey);
|
||||
|
||||
const remove = (id: number) =>
|
||||
ProjectService.delete(id).then((res) => {
|
||||
if (res.status < 200 || res.status >= 300) return Promise.reject(res);
|
||||
});
|
||||
|
||||
const after = async () => {
|
||||
if (
|
||||
ids.length >= data.value.results.length &&
|
||||
data.value.params.pageNum > 1
|
||||
) {
|
||||
data.value.params.pageNum -= 1;
|
||||
}
|
||||
await getData();
|
||||
data.value.isConfirmDialogVisible = false;
|
||||
data.value.selected = [];
|
||||
data.value.allSelected = false;
|
||||
};
|
||||
|
||||
if (ids.length === 1) {
|
||||
try {
|
||||
await remove(ids[0]);
|
||||
store.setSnackbarMsg?.({
|
||||
color: "success",
|
||||
text: "삭제되었습니다.",
|
||||
result: 200,
|
||||
});
|
||||
} catch (err) {
|
||||
store.setSnackbarMsg?.({
|
||||
color: "warning",
|
||||
text: "삭제 실패",
|
||||
result: 500,
|
||||
});
|
||||
console.error(err);
|
||||
} finally {
|
||||
after();
|
||||
}
|
||||
} else {
|
||||
Promise.all(ids.map(remove))
|
||||
.then(() =>
|
||||
store.setSnackbarMsg?.({
|
||||
color: "success",
|
||||
text: "모두 삭제되었습니다.",
|
||||
result: 200,
|
||||
}),
|
||||
)
|
||||
.catch((err) => {
|
||||
store.setSnackbarMsg?.({
|
||||
color: "warning",
|
||||
text: "일부 삭제 실패",
|
||||
result: 500,
|
||||
});
|
||||
console.error(err);
|
||||
})
|
||||
.finally(after);
|
||||
}
|
||||
}
|
||||
|
||||
// ──────────────────────────────────────────────────────────────
|
||||
// UI 핸들러 (모달 열기/수정 열기 등)
|
||||
// ──────────────────────────────────────────────────────────────
|
||||
function getSelectedAllData() {
|
||||
data.value.selected = data.value.allSelected
|
||||
? data.value.results.map((r) => ({ deviceKey: r.deviceKey }))
|
||||
: [];
|
||||
}
|
||||
|
||||
function changePageNum(page: number) {
|
||||
data.value.params.pageNum = page;
|
||||
getData();
|
||||
}
|
||||
|
||||
function openCreateModal() {
|
||||
data.value.modalMode = "create";
|
||||
editingProjectId.value = null;
|
||||
resetForm();
|
||||
data.value.isCreateVisible = true;
|
||||
}
|
||||
|
||||
function openEditModal(row: Row) {
|
||||
data.value.modalMode = "edit";
|
||||
editingProjectId.value = row.deviceKey;
|
||||
|
||||
form.value.prjCd = row.name;
|
||||
form.value.prjNm = row.name;
|
||||
form.value.prjDesc = row.desc === "-" ? "" : row.desc;
|
||||
form.value.selectedUsers = Array.isArray(row.users) ? [...row.users] : [];
|
||||
|
||||
// v-select에 없는 사용자명이 있으면 임시 아이템으로 추가해 칩이 보이게 함
|
||||
const known = new Set(userOptions.value.map((u) => u.username));
|
||||
const missing = form.value.selectedUsers
|
||||
.filter((u) => !known.has(u))
|
||||
.map((u) => ({ id: u, username: u }));
|
||||
if (missing.length) userOptions.value = [...userOptions.value, ...missing];
|
||||
|
||||
data.value.isCreateVisible = true;
|
||||
}
|
||||
|
||||
function openDetailModal(row: Row) {
|
||||
data.value.selectedData = row;
|
||||
}
|
||||
|
||||
function closeDetail() {
|
||||
data.value.selectedData = null;
|
||||
}
|
||||
|
||||
// 모달 닫힐 때 리프레시
|
||||
watch(
|
||||
() => data.value.isCreateVisible,
|
||||
(now, prev) => {
|
||||
if (prev && !now) getData();
|
||||
},
|
||||
);
|
||||
|
||||
// ──────────────────────────────────────────────────────────────
|
||||
// 초기 로딩
|
||||
// ──────────────────────────────────────────────────────────────
|
||||
onMounted(async () => {
|
||||
refreshRoles();
|
||||
await Promise.all([loadUsers(), getData()]);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-100">
|
||||
<v-container fluid class="h-100 pa-5 d-flex flex-column align-center">
|
||||
<v-card
|
||||
flat
|
||||
class="bg-shades-transparent d-flex flex-column align-center justify-center w-100"
|
||||
>
|
||||
<!-- 헤더 -->
|
||||
<v-card flat class="bg-shades-transparent w-100">
|
||||
<v-card-item class="text-h5 font-weight-bold pt-0 pa-5 pl-0">
|
||||
<div class="d-flex flex-row justify-start align-center">
|
||||
<div class="text-primary">Project</div>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
|
||||
<!-- 검색/페이지 -->
|
||||
<v-card flat class="bg-shades-transparent w-100">
|
||||
<v-card flat class="bg-shades-transparent mb-4">
|
||||
<div class="d-flex justify-center flex-wrap align-center">
|
||||
<v-responsive
|
||||
max-width="180"
|
||||
min-width="180"
|
||||
class="mr-3 mt-3 mb-3"
|
||||
>
|
||||
<v-select
|
||||
v-model="data.params.searchType"
|
||||
label="검색조건"
|
||||
density="compact"
|
||||
:items="searchOptions"
|
||||
item-title="searchType"
|
||||
item-value="searchText"
|
||||
hide-details
|
||||
/>
|
||||
</v-responsive>
|
||||
|
||||
<v-responsive min-width="540" max-width="540">
|
||||
<v-text-field
|
||||
v-model="data.params.searchText"
|
||||
label="검색어"
|
||||
density="compact"
|
||||
clearable
|
||||
required
|
||||
class="mt-3 mb-3"
|
||||
hide-details
|
||||
@keyup.enter="changePageNum(1)"
|
||||
/>
|
||||
</v-responsive>
|
||||
|
||||
<div class="ml-3">
|
||||
<v-btn
|
||||
size="large"
|
||||
color="primary"
|
||||
:rounded="5"
|
||||
@click="changePageNum(1)"
|
||||
>
|
||||
<v-icon>mdi-magnify</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</v-card>
|
||||
|
||||
<v-sheet
|
||||
class="bg-shades-transparent d-flex flex-wrap align-center mb-2"
|
||||
>
|
||||
<v-sheet class="d-flex flex-wrap me-auto bg-shades-transparent">
|
||||
<v-sheet
|
||||
class="d-flex align-center mr-3 mb-2 bg-shades-transparent"
|
||||
>
|
||||
<v-chip color="primary"
|
||||
>총 {{ data.totalDataLength.toLocaleString() }}개</v-chip
|
||||
>
|
||||
</v-sheet>
|
||||
<v-sheet class="bg-shades-transparent">
|
||||
<v-responsive max-width="140" min-width="140" class="mb-2">
|
||||
<v-select
|
||||
v-model="data.params.pageSize"
|
||||
density="compact"
|
||||
:items="pageSizeOptions"
|
||||
item-title="text"
|
||||
item-value="value"
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
hide-details
|
||||
@update:model-value="changePageNum(1)"
|
||||
/>
|
||||
</v-responsive>
|
||||
</v-sheet>
|
||||
</v-sheet>
|
||||
|
||||
<v-sheet class="justify-end mb-2">
|
||||
<v-btn color="info" @click="openCreateModal"
|
||||
>Create Project</v-btn
|
||||
>
|
||||
</v-sheet>
|
||||
</v-sheet>
|
||||
|
||||
<!-- 테이블 -->
|
||||
<v-card class="rounded-lg pa-8">
|
||||
<v-col cols="12">
|
||||
<v-sheet>
|
||||
<v-table
|
||||
density="comfortable"
|
||||
fixed-header
|
||||
height="625"
|
||||
overflow-x-auto
|
||||
>
|
||||
<colgroup>
|
||||
<col style="width: 5%" />
|
||||
<col
|
||||
v-for="(item, i) in tableHeader"
|
||||
:key="i"
|
||||
:style="`width:${item.width}`"
|
||||
/>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<v-checkbox
|
||||
v-model="data.allSelected"
|
||||
style="min-width: 36px"
|
||||
:indeterminate="data.allSelected === true"
|
||||
hide-details
|
||||
@change="getSelectedAllData"
|
||||
/>
|
||||
</th>
|
||||
<th
|
||||
v-for="(item, i) in tableHeader"
|
||||
:key="i"
|
||||
class="text-center font-weight-bold"
|
||||
:style="`${item.style}`"
|
||||
>
|
||||
{{ item.label }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody class="text-body-2">
|
||||
<tr
|
||||
v-for="(item, i) in data.results"
|
||||
:key="i"
|
||||
class="text-center"
|
||||
>
|
||||
<td>
|
||||
<v-checkbox
|
||||
v-model="data.selected"
|
||||
hide-details
|
||||
:value="{ deviceKey: item.deviceKey }"
|
||||
/>
|
||||
</td>
|
||||
|
||||
<td>{{ item.no }}</td>
|
||||
<td>{{ item.name }}</td>
|
||||
|
||||
<!-- ✅ Description -->
|
||||
<td>
|
||||
<div class="truncate-2">{{ item.desc }}</div>
|
||||
</td>
|
||||
|
||||
<!-- ✅ Select Users -->
|
||||
<td>
|
||||
<template v-if="item.users?.length">
|
||||
<v-chip
|
||||
v-for="u in item.users"
|
||||
:key="u"
|
||||
size="small"
|
||||
class="ma-1"
|
||||
color="blue-lighten-2"
|
||||
text-color="white"
|
||||
>
|
||||
{{ u }}
|
||||
</v-chip>
|
||||
</template>
|
||||
<span v-else>-</span>
|
||||
</td>
|
||||
|
||||
<td>{{ item.registDt }}</td>
|
||||
|
||||
<td style="white-space: nowrap">
|
||||
<IconModifyBtn @on-click="openEditModal(item)" />
|
||||
<IconDeleteBtn
|
||||
@on-click="
|
||||
deleteRows([{ deviceKey: item.deviceKey }])
|
||||
"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
</v-sheet>
|
||||
|
||||
<v-card-actions class="text-center mt-8 justify-center">
|
||||
<v-pagination
|
||||
v-model="data.params.pageNum"
|
||||
:length="data.pageLength"
|
||||
:total-visible="10"
|
||||
color="primary"
|
||||
rounded="circle"
|
||||
@update:model-value="changePageNum"
|
||||
/>
|
||||
</v-card-actions>
|
||||
</v-col>
|
||||
</v-card>
|
||||
</v-card>
|
||||
</v-card>
|
||||
</v-container>
|
||||
|
||||
<!-- 생성/수정 다이얼로그 -->
|
||||
<v-dialog v-model="data.isCreateVisible" max-width="560" persistent>
|
||||
<v-card>
|
||||
<v-card-title class="headline">
|
||||
{{
|
||||
data.modalMode === "create" ? "Create Project" : "Modify Project"
|
||||
}}
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<v-form>
|
||||
<v-text-field label="Project Name" v-model="form.prjNm" required />
|
||||
<v-textarea
|
||||
label="Description"
|
||||
v-model="form.prjDesc"
|
||||
rows="3"
|
||||
required
|
||||
/>
|
||||
<v-select
|
||||
label="Select Users"
|
||||
v-model="form.selectedUsers"
|
||||
:items="userOptions"
|
||||
item-title="username"
|
||||
item-value="username"
|
||||
multiple
|
||||
chips
|
||||
closable-chips
|
||||
/>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer />
|
||||
<v-btn text @click="data.isCreateVisible = false">Cancel</v-btn>
|
||||
<v-btn color="primary" @click="saveProject">
|
||||
{{ data.modalMode === "create" ? "Create" : "Save" }}
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@ -1,10 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import IconDeleteBtn from "@/components/button/IconDeleteBtn.vue";
|
||||
import IconModifyBtn from "@/components/button/IconModifyBtn.vue";
|
||||
import IconSettingBtn from "@/components/button/IconSettingBtn.vue";
|
||||
import IconDeleteBtn from "@/components/atoms/button/IconDeleteBtn.vue";
|
||||
import IconModifyBtn from "@/components/atoms/button/IconModifyBtn.vue";
|
||||
import IconSettingBtn from "@/components/atoms/button/IconSettingBtn.vue";
|
||||
// import FormComponent from "@/components/device/FormComponent.vue";
|
||||
import { onMounted, ref, watch } from "vue";
|
||||
import ViewComponent from "@/components/deployment/ViewComponent.vue";
|
||||
import ViewComponent from "@/components/templates/deployment/ViewComponent.vue";
|
||||
import DeploymentDialog from "@/components/atoms/organisms/DeploymentDialog.vue";
|
||||
// const store = commonStore();
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import IconDeleteBtn from "@/components/button/IconDeleteBtn.vue";
|
||||
import IconModifyBtn from "@/components/button/IconModifyBtn.vue";
|
||||
import IconDeleteBtn from "@/components/atoms/button/IconDeleteBtn.vue";
|
||||
import IconModifyBtn from "@/components/atoms/button/IconModifyBtn.vue";
|
||||
// import FormComponent from "@/components/device/FormComponent.vue";
|
||||
import { onMounted, ref, watch } from "vue";
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import IconDeleteBtn from "@/components/button/IconDeleteBtn.vue";
|
||||
import IconDeleteBtn from "@/components/atoms/button/IconDeleteBtn.vue";
|
||||
import { onMounted, ref, watch } from "vue";
|
||||
import IconDownloadBtn from "@/components/button/IconDownloadBtn.vue";
|
||||
import CompareComponent from "@/components/run/executions/CompareComponent.vue";
|
||||
import ViewComponent from "@/components/run/executions/ViewComponent.vue";
|
||||
import IconDownloadBtn from "@/components/atoms/button/IconDownloadBtn.vue";
|
||||
import CompareComponent from "@/components/templates/run/executions/CompareComponent.vue";
|
||||
import ViewComponent from "@/components/templates/run/executions/ViewComponent.vue";
|
||||
import ExecutionBaseDialog from "@/components/atoms/organisms/ExecutionBaseDialog.vue";
|
||||
// const store = commonStore();
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import IconDeleteBtn from "@/components/button/IconDeleteBtn.vue";
|
||||
import IconModifyBtn from "@/components/button/IconModifyBtn.vue";
|
||||
import IconDeleteBtn from "@/components/atoms/button/IconDeleteBtn.vue";
|
||||
import IconModifyBtn from "@/components/atoms/button/IconModifyBtn.vue";
|
||||
// import FormComponent from "@/components/device/FormComponent.vue";
|
||||
import { onMounted, ref, watch } from "vue";
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import IconDeleteBtn from "@/components/button/IconDeleteBtn.vue";
|
||||
import IconInfoBtn from "@/components/button/IconInfoBtn.vue";
|
||||
import IconDeleteBtn from "@/components/atoms/button/IconDeleteBtn.vue";
|
||||
import IconInfoBtn from "@/components/atoms/button/IconInfoBtn.vue";
|
||||
import { onMounted, ref, watch } from "vue";
|
||||
|
||||
import ViewComponent from "@/components/run/experiment/ViewComponent.vue";
|
||||
import ViewComponent from "@/components/templates/run/experiment/ViewComponent.vue";
|
||||
import ExperimentCreateDialog from "@/components/atoms/organisms/ExperimentCreateDialog.vue";
|
||||
|
||||
// const store = commonStore();
|
||||
@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import IconDeleteBtn from "@/components/button/IconDeleteBtn.vue";
|
||||
import IconModifyBtn from "@/components/button/IconModifyBtn.vue";
|
||||
import IconDeleteBtn from "@/components/atoms/button/IconDeleteBtn.vue";
|
||||
import IconModifyBtn from "@/components/atoms/button/IconModifyBtn.vue";
|
||||
// import FormComponent from "@/components/device/FormComponent.vue";
|
||||
import { onMounted, ref, watch } from "vue";
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import IconDeleteBtn from "@/components/button/IconDeleteBtn.vue";
|
||||
import IconModifyBtn from "@/components/button/IconModifyBtn.vue";
|
||||
import IconInfoBtn from "@/components/button/IconInfoBtn.vue";
|
||||
import IconDeleteBtn from "@/components/atoms/button/IconDeleteBtn.vue";
|
||||
import IconModifyBtn from "@/components/atoms/button/IconModifyBtn.vue";
|
||||
import IconInfoBtn from "@/components/atoms/button/IconInfoBtn.vue";
|
||||
// import FormComponent from "@/components/device/FormComponent.vue";
|
||||
import { onMounted, ref, watch } from "vue";
|
||||
import ViewComponent from "@/components/trainingscript/ViewComponent.vue";
|
||||
import ViewComponent from "@/components/templates/trainingscript/ViewComponent.vue";
|
||||
import TrainingScriptBaseDoalog from "@/components/atoms/organisms/TrainingScriptBaseDoalog.vue";
|
||||
import WorkflowsUploadDialog from "@/components/atoms/organisms/WorkflowsUploadDialog.vue";
|
||||
// const store = commonStore();
|
||||
@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import IconDeleteBtn from "@/components/button/IconDeleteBtn.vue";
|
||||
import IconModifyBtn from "@/components/button/IconModifyBtn.vue";
|
||||
import IconDeleteBtn from "@/components/atoms/button/IconDeleteBtn.vue";
|
||||
import IconModifyBtn from "@/components/atoms/button/IconModifyBtn.vue";
|
||||
// import FormComponent from "@/components/device/FormComponent.vue";
|
||||
import { onBeforeUnmount, onMounted, ref, watch } from "vue";
|
||||
import * as monaco from "monaco-editor";
|
||||
@ -0,0 +1,262 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch, onBeforeUnmount } from "vue";
|
||||
import * as monaco from "monaco-editor";
|
||||
import "monaco-editor/min/vs/editor/editor.main.css";
|
||||
import { AutoflowService } from "@/components/service/management/AutoflowService";
|
||||
|
||||
type TabKey = "details" | "yaml";
|
||||
|
||||
const props = defineProps<{ id: number | string }>();
|
||||
const emit = defineEmits<{ (e: "close"): void }>();
|
||||
|
||||
const activeTab = ref<TabKey>("details");
|
||||
const editorRef = ref<HTMLDivElement | null>(null);
|
||||
let editorInstance: monaco.editor.IStandaloneCodeEditor | null = null;
|
||||
|
||||
const detail = ref({
|
||||
workflowName: "",
|
||||
version: "",
|
||||
workflowDescription: "",
|
||||
createdDate: "",
|
||||
createdId: "",
|
||||
});
|
||||
|
||||
const stepHeaders = [
|
||||
{ title: "Order", key: "order", width: "10%", align: "center" },
|
||||
{ title: "Step Name", key: "name", width: "40%", align: "center" },
|
||||
{
|
||||
title: "Component Type",
|
||||
key: "componentType",
|
||||
width: "30%",
|
||||
align: "center",
|
||||
},
|
||||
{ title: "Status", key: "status", width: "20%", align: "center" },
|
||||
];
|
||||
const steps = ref<
|
||||
Array<{ order: number; name: string; componentType: string; status: string }>
|
||||
>([]);
|
||||
|
||||
const defaultYaml = `# YAML not provided by server
|
||||
apiVersion: argoproj.io/v1alpha1
|
||||
kind: Workflow
|
||||
metadata:
|
||||
generateName: dummy-
|
||||
spec:
|
||||
entrypoint: main
|
||||
templates:
|
||||
- name: main
|
||||
container:
|
||||
image: alpine:latest
|
||||
command: [sh, -c]
|
||||
args: ["echo hello"]
|
||||
`;
|
||||
|
||||
/** ===== 상세 조회 ===== */
|
||||
async function fetchDetail(id: number | string) {
|
||||
try {
|
||||
const res = await AutoflowService.view(Number(id));
|
||||
const d = res.data;
|
||||
|
||||
detail.value.workflowName = d.workflowName || "";
|
||||
detail.value.version = String(d.version || 1);
|
||||
detail.value.workflowDescription = d.workflowDescription || "";
|
||||
detail.value.createdDate = d.regDt || d.regDate || "-";
|
||||
detail.value.createdId = d.regUserId || "-";
|
||||
|
||||
if (Array.isArray(d.steps)) {
|
||||
steps.value = d.steps.map((s: any, idx: number) => ({
|
||||
order: idx + 1,
|
||||
name: s.stepName || s.name || `Step ${idx + 1}`,
|
||||
componentType: s.componentType || s.type || "-",
|
||||
status: s.status || "Not Configured",
|
||||
}));
|
||||
} else {
|
||||
steps.value = [];
|
||||
}
|
||||
|
||||
// YAML 표시 (서버 필드 이름에 맞춰 하나라도 있으면 사용)
|
||||
const yamlFromServer =
|
||||
d.workflowYaml ||
|
||||
d.yaml ||
|
||||
d.pipelineYaml ||
|
||||
d.specYaml ||
|
||||
d.yamlStr ||
|
||||
"";
|
||||
if (editorInstance) {
|
||||
editorInstance.setValue(yamlFromServer || defaultYaml);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("[Child] view API failed:", e);
|
||||
}
|
||||
}
|
||||
|
||||
/** ===== 마운트 & 변경 감지 ===== */
|
||||
onMounted(() => {
|
||||
if (editorRef.value) {
|
||||
editorInstance = monaco.editor.create(editorRef.value, {
|
||||
value: defaultYaml,
|
||||
language: "yaml",
|
||||
theme: "vs-dark",
|
||||
readOnly: true,
|
||||
automaticLayout: true,
|
||||
minimap: { enabled: false },
|
||||
lineNumbers: "on",
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// props.id가 바뀌면 재조회
|
||||
watch(
|
||||
() => props.id,
|
||||
(val) => {
|
||||
if (val !== null && val !== undefined && val !== "") {
|
||||
fetchDetail(val);
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (editorInstance) {
|
||||
editorInstance.dispose();
|
||||
editorInstance = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-container class="h-100 w-100 pa-5 d-flex flex-column align-center">
|
||||
<v-card
|
||||
flat
|
||||
class="bg-shades-transparent d-flex flex-column justify-center w-100"
|
||||
>
|
||||
<!-- 헤더 -->
|
||||
<v-card flat class="bg-shades-transparent w-100">
|
||||
<v-card-item class="text-h5 font-weight-bold pt-0 pa-5 pl-0">
|
||||
<div class="d-flex flex-row justify-start align-center">
|
||||
<div class="text-primary">View Details</div>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
|
||||
<!-- 탭 -->
|
||||
<v-tabs
|
||||
v-model="activeTab"
|
||||
background-color="grey lighten-4"
|
||||
style="max-width: 360px"
|
||||
grow
|
||||
>
|
||||
<v-tab value="details">Details</v-tab>
|
||||
<v-tab value="yaml">YAML</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<!-- Details 탭 -->
|
||||
<template v-if="activeTab === 'details'">
|
||||
<v-card class="bordered-box mb-6 w-100 rounded-lg pa-8 step-card">
|
||||
<v-card-title class="grey lighten-4 py-2 px-4">
|
||||
<span class="font-weight-bold">Workflow Information</span>
|
||||
</v-card-title>
|
||||
<v-card-text class="px-6 pb-6 pt-4">
|
||||
<v-row align="center" class="py-2">
|
||||
<v-col cols="3" class="text-h6 font-weight-bold"
|
||||
>Workflow Name</v-col
|
||||
>
|
||||
<v-col cols="3">{{ detail.workflowName }}</v-col>
|
||||
<v-col cols="3" class="text-h6 font-weight-bold">Version</v-col>
|
||||
<v-col cols="3">{{ detail.version }}</v-col>
|
||||
</v-row>
|
||||
<v-divider class="my-2" />
|
||||
<v-row align="center" class="py-2">
|
||||
<v-col cols="3" class="text-h6 font-weight-bold"
|
||||
>Workflow Description</v-col
|
||||
>
|
||||
<v-col cols="9">{{ detail.workflowDescription }}</v-col>
|
||||
</v-row>
|
||||
<v-divider class="my-2" />
|
||||
<v-row align="center" class="py-2">
|
||||
<v-col cols="3" class="text-h6 font-weight-bold"
|
||||
>Created Date</v-col
|
||||
>
|
||||
<v-col cols="3">{{ detail.createdDate }}</v-col>
|
||||
<v-col cols="3" class="text-h6 font-weight-bold"
|
||||
>Created ID</v-col
|
||||
>
|
||||
<v-col cols="3">{{ detail.createdId }}</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<!-- Steps -->
|
||||
<v-card
|
||||
flat
|
||||
class="bordered-box mb-6 w-100 rounded-lg pa-8"
|
||||
style="min-height: 500px"
|
||||
>
|
||||
<v-card-title class="grey lighten-4 py-2 px-4">
|
||||
<span class="font-weight-bold">Step Overview</span>
|
||||
</v-card-title>
|
||||
|
||||
<v-data-table
|
||||
:headers="stepHeaders"
|
||||
:items="steps"
|
||||
dense
|
||||
class="text-center"
|
||||
hide-default-footer
|
||||
:items-per-page="5"
|
||||
header-color="primary"
|
||||
disable-sort
|
||||
>
|
||||
<template #item.order="{ index }">{{ index + 1 }}</template>
|
||||
<template #item.status="{ item }">
|
||||
<v-chip
|
||||
:color="
|
||||
{ Configured: 'success', 'Not Configured': 'warning' }[
|
||||
item.status
|
||||
] || 'default'
|
||||
"
|
||||
small
|
||||
dark
|
||||
>
|
||||
{{ item.status }}
|
||||
</v-chip>
|
||||
</template>
|
||||
</v-data-table>
|
||||
|
||||
<v-sheet class="d-flex justify-end mt-4">
|
||||
<v-btn class="back-to-list" color="primary" @click="emit('close')"
|
||||
>Back to List</v-btn
|
||||
>
|
||||
</v-sheet>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<!-- YAML 탭 -->
|
||||
<div
|
||||
v-show="activeTab === 'yaml'"
|
||||
ref="editorRef"
|
||||
class="editor-container"
|
||||
/>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.editor-container {
|
||||
width: 100%;
|
||||
height: 900px;
|
||||
max-height: 900px;
|
||||
border: 1px solid #444;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.step-card {
|
||||
position: relative;
|
||||
min-height: 500px;
|
||||
padding-bottom: 84px;
|
||||
}
|
||||
|
||||
.back-to-list {
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
bottom: 24px;
|
||||
}
|
||||
</style>
|
||||
@ -1,497 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
// import FormComponent from "@/components/device/FormComponent.vue";
|
||||
import { onMounted, ref, watch, onBeforeUnmount } from "vue";
|
||||
import * as monaco from "monaco-editor";
|
||||
import "monaco-editor/min/vs/editor/editor.main.css";
|
||||
// const store = commonStore();
|
||||
const activeTab = ref<"details" | "yaml">("details");
|
||||
const editorRef = ref<HTMLDivElement | null>(null);
|
||||
let editorInstance: monaco.editor.IStandaloneCodeEditor | null = null;
|
||||
const tableHeader = [
|
||||
{
|
||||
label: "Run Name",
|
||||
width: "20%",
|
||||
style: "word-break: keep-all;",
|
||||
},
|
||||
{
|
||||
label: "Status",
|
||||
width: "20%",
|
||||
style: "word-break: keep-all;",
|
||||
},
|
||||
{
|
||||
label: "Duration",
|
||||
width: "20%",
|
||||
style: "word-break: keep-all;",
|
||||
},
|
||||
{
|
||||
label: "Pipeline",
|
||||
width: "20%",
|
||||
style: "word-break: keep-all;",
|
||||
},
|
||||
{
|
||||
label: "Start Time",
|
||||
width: "20%",
|
||||
style: "word-break: keep-all;",
|
||||
},
|
||||
];
|
||||
const experimentInfo = ref({
|
||||
workflowName: "sentiment-analysis",
|
||||
version: "v2.0",
|
||||
workflowDescription: "감정 분석 모델 학습 워크플로우",
|
||||
createdDate: "2025-02-06",
|
||||
createdId: "ADMIN_001",
|
||||
});
|
||||
const stepHeaders = [
|
||||
{ title: "Order", key: "order", width: "10%", align: "center" },
|
||||
{ title: "Step Name", key: "name", width: "40%", align: "center" },
|
||||
{
|
||||
title: "Component Type",
|
||||
key: "componentType",
|
||||
width: "30%",
|
||||
align: "center",
|
||||
},
|
||||
{ title: "Status", key: "status", width: "20%", align: "center" },
|
||||
];
|
||||
|
||||
const steps = ref([
|
||||
{ name: "Data loading", componentType: "DataPrep", status: "Configured" },
|
||||
{
|
||||
name: "Preprocessing",
|
||||
componentType: "Preprocess",
|
||||
status: "Not Configured",
|
||||
},
|
||||
{
|
||||
name: "Preprocessing",
|
||||
componentType: "Preprocess",
|
||||
status: "Not Configured",
|
||||
},
|
||||
{
|
||||
name: "Preprocessing",
|
||||
componentType: "Preprocess",
|
||||
status: "Not Configured",
|
||||
},
|
||||
|
||||
{ name: "Train Model", componentType: "Train", status: "Not Configured" },
|
||||
]);
|
||||
const data = ref({
|
||||
params: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
searchType: "",
|
||||
searchText: "",
|
||||
},
|
||||
results: [],
|
||||
totalDataLength: 0,
|
||||
pageLength: 0,
|
||||
modalMode: "",
|
||||
selectedData: null,
|
||||
allSelected: false,
|
||||
selected: [],
|
||||
isModalVisible: false,
|
||||
isConfirmDialogVisible: false,
|
||||
userOption: [],
|
||||
});
|
||||
|
||||
const getCodeList = () => {
|
||||
// UserService.search(data.value.params).then((d) => {
|
||||
// if (d.status === 200) {
|
||||
// data.value.userOption = d.data.userList;
|
||||
// }
|
||||
// });
|
||||
};
|
||||
|
||||
const getData = () => {
|
||||
const params = { ...data.value.params };
|
||||
if (params.searchType === "" || params.searchText === "") {
|
||||
delete params.searchType;
|
||||
delete params.searchText;
|
||||
}
|
||||
data.value.results = [
|
||||
{
|
||||
name: "run-batch32-lr0.001",
|
||||
status: "Succeeded",
|
||||
Duration: "0:00:21",
|
||||
configProgress: "0/2",
|
||||
Pipeline: "baseline_train_pipeline",
|
||||
registDt: "2025-06-10T00:00:00Z",
|
||||
},
|
||||
{
|
||||
name: "run-batch64-lr0.001",
|
||||
status: "Failed",
|
||||
Duration: "0:00:21",
|
||||
configProgress: "1/3",
|
||||
Pipeline: "baseline_train_pipeline",
|
||||
registDt: "2025-06-09T00:00:00Z",
|
||||
},
|
||||
{
|
||||
name: "run-batch32-lr0.0005",
|
||||
status: "Succeeded",
|
||||
Duration: "0:00:21",
|
||||
configProgress: "0/3",
|
||||
Pipeline: "baseline_train_pipeline",
|
||||
registDt: "2025-06-01T00:00:00Z",
|
||||
},
|
||||
{
|
||||
name: "run-batch64-lr0.0005",
|
||||
status: "Running",
|
||||
Duration: "0:00:21",
|
||||
configProgress: "1/3",
|
||||
Pipeline: "baseline_train_pipeline",
|
||||
registDt: "2025-05-29T00:00:00Z",
|
||||
},
|
||||
{
|
||||
name: "run-augmented-data",
|
||||
status: "Succeeded",
|
||||
Duration: "0:00:21",
|
||||
configProgress: "0/3",
|
||||
Pipeline: "baseline_train_pipeline",
|
||||
registDt: "2025-05-31T00:00:00Z",
|
||||
},
|
||||
];
|
||||
data.value.totalDataLength = 5;
|
||||
|
||||
// DeviceService.search(params).then((d) => {
|
||||
// if (d.status === 200) {
|
||||
// data.value.results = d.data.deviceList;
|
||||
// data.value.totalDataLength = d.data.totalCount;
|
||||
// setTimeout(() => {
|
||||
// setPaginationLength();
|
||||
// }, 200);
|
||||
// } else {
|
||||
// store.setSnackbarMsg({
|
||||
// text: "디바이스 조회 실패",
|
||||
// color: "error",
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
// DeviceService.search().then((d) => {
|
||||
// data.value.totalDataLength = d.data.totalCount;
|
||||
// setTimeout(() => {
|
||||
// setPaginationLength();
|
||||
// }, 200);
|
||||
// });
|
||||
};
|
||||
const yamlContent = `apiVersion: argoproj.io/v1alpha1
|
||||
kind: Workflow
|
||||
metadata:
|
||||
generateName: dummy-workflow-
|
||||
namespace: default
|
||||
labels:
|
||||
workflows.argoproj.io/archive-strategy: "true"
|
||||
spec:
|
||||
entrypoint: main
|
||||
arguments:
|
||||
parameters:
|
||||
- name: message
|
||||
value: "Hello, Monaco YAML Highlight!"
|
||||
templates:
|
||||
|
||||
# 1) Main steps orchestration
|
||||
- name: main
|
||||
steps:
|
||||
- - name: print
|
||||
template: whalesay
|
||||
arguments:
|
||||
parameters:
|
||||
- name: message
|
||||
value: "{{workflow.parameters.message}}"
|
||||
- - name: wait
|
||||
template: sleep
|
||||
arguments:
|
||||
parameters:
|
||||
- name: duration
|
||||
value: "5"
|
||||
- - name: finalize
|
||||
template: next
|
||||
|
||||
# 2) Whalesay container
|
||||
- name: whalesay
|
||||
inputs:
|
||||
parameters:
|
||||
- name: message
|
||||
container:
|
||||
image: docker/whalesay:latest
|
||||
command: [cowsay]
|
||||
args: ["{{inputs.parameters.message}}"]
|
||||
resources:
|
||||
limits:
|
||||
memory: "64Mi"
|
||||
cpu: "100m"
|
||||
|
||||
# 3) Simple sleep step
|
||||
- name: sleep
|
||||
inputs:
|
||||
parameters:
|
||||
- name: duration
|
||||
container:
|
||||
image: alpine:latest
|
||||
command: [sh, -c]
|
||||
args:
|
||||
- |
|
||||
echo "Sleeping for {{inputs.parameters.duration}} seconds..."
|
||||
sleep {{inputs.parameters.duration}}
|
||||
|
||||
# 4) Final step
|
||||
- name: next
|
||||
container:
|
||||
image: alpine:latest
|
||||
command: [sh, -c]
|
||||
args:
|
||||
- echo "Workflow complete at $(date)!"
|
||||
|
||||
# Optional: retention policy
|
||||
ttlStrategy:
|
||||
secondsAfterCompletion: 3600
|
||||
`;
|
||||
|
||||
onMounted(() => {
|
||||
if (editorRef.value) {
|
||||
editorInstance = monaco.editor.create(editorRef.value, {
|
||||
value: yamlContent,
|
||||
language: "yaml",
|
||||
theme: "vs-dark",
|
||||
readOnly: true,
|
||||
automaticLayout: true,
|
||||
minimap: { enabled: false },
|
||||
lineNumbers: "on",
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (editorInstance) {
|
||||
editorInstance.dispose();
|
||||
editorInstance = null;
|
||||
}
|
||||
});
|
||||
|
||||
// const setPaginationLength = () => {
|
||||
// if (data.value.totalDataLength % data.value.params.pageSize === 0) {
|
||||
// data.value.pageLength =
|
||||
// data.value.totalDataLength / data.value.params.pageSize;
|
||||
// } else {
|
||||
// data.value.pageLength = Math.ceil(
|
||||
// data.value.totalDataLength / data.value.params.pageSize,
|
||||
// );
|
||||
// }
|
||||
// };
|
||||
|
||||
const saveData = (formData) => {
|
||||
if (data.value.modalMode === "create") {
|
||||
// DeviceService.add(formData).then((d) => {
|
||||
// if (d.status === 200) {
|
||||
// data.value.isModalVisible = false;
|
||||
// store.setSnackbarMsg({
|
||||
// text: "등록 되었습니다.",
|
||||
// result: 200,
|
||||
// });
|
||||
// changePageNum(1);
|
||||
// } else {
|
||||
// store.setSnackbarMsg({
|
||||
// text: d,
|
||||
// result: 500,
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
} else {
|
||||
// DeviceService.update(formData.deviceKey, formData).then((d) => {
|
||||
// if (d.status === 200) {
|
||||
// data.value.isModalVisible = false;
|
||||
// store.setSnackbarMsg({
|
||||
// text: "수정 되었습니다.",
|
||||
// result: 200,
|
||||
// });
|
||||
// changePageNum();
|
||||
// } else {
|
||||
// store.setSnackbarMsg({
|
||||
// text: d,
|
||||
// result: 500,
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
}
|
||||
};
|
||||
|
||||
const removeData = (value) => {
|
||||
let removeList = value ? value : data.value.selected;
|
||||
const remove = (code) => {
|
||||
// return DeviceService.delete(code).then((d) => {
|
||||
// if (d.status !== 200) {
|
||||
// store.setSnackbarMsg({
|
||||
// text: d,
|
||||
// result: 500,
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
};
|
||||
|
||||
if (removeList.length === 1) {
|
||||
remove(removeList[0].deviceKey).then(() => {
|
||||
// store.setSnackbarMsg({
|
||||
// text: "삭제되었습니다.",
|
||||
// result: 200,
|
||||
// });
|
||||
changePageNum();
|
||||
data.value.isConfirmDialogVisible = false;
|
||||
data.value.selected = [];
|
||||
data.value.allSelected = false;
|
||||
});
|
||||
} else {
|
||||
Promise.all(removeList.map((item) => remove(item.deviceKey))).finally(
|
||||
() => {
|
||||
// store.setSnackbarMsg({
|
||||
// text: "모두 삭제되었습니다.",
|
||||
// result: 200,
|
||||
// });
|
||||
changePageNum();
|
||||
data.value.isConfirmDialogVisible = false;
|
||||
data.value.selected = [];
|
||||
data.value.allSelected = false;
|
||||
},
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const changePageNum = (page) => {
|
||||
data.value.params.pageNum = page;
|
||||
getData();
|
||||
};
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "close"): void;
|
||||
}>();
|
||||
|
||||
onMounted(() => {
|
||||
getData();
|
||||
getCodeList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-container class="h-100 w-100 pa-5 d-flex flex-column align-center">
|
||||
<v-card
|
||||
flat
|
||||
class="bg-shades-transparent d-flex flex-column justify-center w-100"
|
||||
>
|
||||
<!-- 1) Workflow Information -->
|
||||
<v-card flat class="bg-shades-transparent w-100">
|
||||
<v-card-item class="text-h5 font-weight-bold pt-0 pa-5 pl-0">
|
||||
<div class="d-flex flex-row justify-start align-center">
|
||||
<div class="text-primary">View Details</div>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
<v-tabs
|
||||
v-model="activeTab"
|
||||
background-color="grey lighten-4"
|
||||
style="max-width: 360px"
|
||||
grow
|
||||
>
|
||||
<v-tab value="details">Details</v-tab>
|
||||
<v-tab value="yaml">YAML</v-tab>
|
||||
</v-tabs>
|
||||
<template v-if="activeTab === 'details'" fluid flat>
|
||||
<v-card class="bordered-box mb-6 w-100 rounded-lg pa-8">
|
||||
<v-card-title class="grey lighten-4 py-2 px-4">
|
||||
<span class="font-weight-bold">Workflow Information</span>
|
||||
</v-card-title>
|
||||
<v-card-text class="px-6 pb-6 pt-4">
|
||||
<!-- Workflow Name / Version -->
|
||||
<v-row align="center" class="py-2">
|
||||
<v-col cols="3" class="text-h6 font-weight-bold">
|
||||
Workflow Name
|
||||
</v-col>
|
||||
<v-col cols="3">{{ experimentInfo.workflowName }}</v-col>
|
||||
<v-col cols="3" class="text-h6 font-weight-bold"> Version </v-col>
|
||||
<v-col cols="3">{{ experimentInfo.version }}</v-col>
|
||||
</v-row>
|
||||
<v-divider class="my-2" />
|
||||
|
||||
<!-- Description -->
|
||||
<v-row align="center" class="py-2">
|
||||
<v-col cols="3" class="text-h6 font-weight-bold">
|
||||
Workflow Description
|
||||
</v-col>
|
||||
<v-col cols="9">{{ experimentInfo.workflowDescription }}</v-col>
|
||||
</v-row>
|
||||
<v-divider class="my-2" />
|
||||
|
||||
<!-- Created Date / ID -->
|
||||
<v-row align="center" class="py-2">
|
||||
<v-col cols="3" class="text-h6 font-weight-bold">
|
||||
Created Date
|
||||
</v-col>
|
||||
<v-col cols="3">{{ experimentInfo.createdDate }}</v-col>
|
||||
<v-col cols="3" class="text-h6 font-weight-bold">
|
||||
Created ID
|
||||
</v-col>
|
||||
<v-col cols="3">{{ experimentInfo.createdId }}</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<!-- 2) Step Overview -->
|
||||
<v-card
|
||||
flat
|
||||
class="bordered-box mb-6 w-100 rounded-lg pa-8"
|
||||
style="min-height: 500px"
|
||||
>
|
||||
<v-card-title class="grey lighten-4 py-2 px-4">
|
||||
<span class="font-weight-bold">Step Overview</span>
|
||||
</v-card-title>
|
||||
|
||||
<v-data-table
|
||||
:headers="stepHeaders"
|
||||
:items="steps"
|
||||
dense
|
||||
class="text-center"
|
||||
hide-default-footer
|
||||
:items-per-page="5"
|
||||
header-color="primary"
|
||||
disable-sort
|
||||
>
|
||||
<!-- 순번을 직접 렌더링 -->
|
||||
<template #item.order="{ index }">
|
||||
{{ index + 1 }}
|
||||
</template>
|
||||
<!-- 상태에 따라 색을 다르게 -->
|
||||
<template #item.status="{ item }">
|
||||
<v-chip
|
||||
:color="
|
||||
{
|
||||
Configured: 'success',
|
||||
'Not Configured': 'warning',
|
||||
}[item.status]
|
||||
"
|
||||
small
|
||||
dark
|
||||
>
|
||||
{{ item.status }}
|
||||
</v-chip>
|
||||
</template>
|
||||
</v-data-table>
|
||||
|
||||
<v-sheet class="d-flex justify-end mt-4">
|
||||
<v-btn color="primary" @click="emit('close')">Back to List</v-btn>
|
||||
</v-sheet>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<div
|
||||
v-show="activeTab === 'yaml'"
|
||||
ref="editorRef"
|
||||
class="editor-container"
|
||||
></div>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.editor-container {
|
||||
width: 100%;
|
||||
height: 900px;
|
||||
max-height: 900px;
|
||||
border: 1px solid #444;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,9 @@
|
||||
<script setup>
|
||||
import ListComponent from "@/components/templates/Project/ListComponent.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ListComponent />
|
||||
</template>
|
||||
|
||||
<style scoped lang="sass"></style>
|
||||
Loading…
Reference in new issue