) {
+ const targets = Array.from(
+ new Set(
+ (ids || [])
+ .map((x) => String(x))
+ .filter((id) => id && experimentNameMap.value[id] == null),
+ ),
+ );
+ if (!targets.length) return;
+
+ await Promise.all(
+ targets.map(async (id) => {
+ try {
+ // ✅ 너가 만든 API 사용 (POST /api/kubeflow/experiments/{id})
+ const res = await KubeflowService.experimentData(id);
+ const body = res?.data ?? res ?? {};
+ const name =
+ body.display_name ?? body.name ?? body.experiment_name ?? String(id);
+ experimentNameMap.value[id] = name;
+ } catch (e) {
+ // 실패 시 ID fallback
+ experimentNameMap.value[id] = String(id);
+ }
+ }),
+ );
+}
+
function readUsernameFromStorage(): string {
try {
const raw =
@@ -84,7 +114,13 @@ const getProjectId = (): number => {
return Number.isFinite(v) ? v : 0;
};
-const toRow = (r: any, idx: number) => {
+const toRow = (r: any, no: number) => {
+ const expId = r.experimentId ?? r.experiment_id ?? r.experiment?.id;
+ const expName =
+ (expId && experimentNameMap.value[String(expId)]) ??
+ r.experiment?.displayName ??
+ r.experiment?.name ??
+ "-";
const fmtStart = (start?: string) => {
if (!start) return "-";
const d = new Date(start);
@@ -109,31 +145,32 @@ const toRow = (r: any, idx: number) => {
return `${h}:${pad(m)}:${pad(sec)}`;
};
- const toUiStatus = (state?: string) => {
- switch ((state || "").toUpperCase()) {
- case "SUCCEEDED":
- return "Succeeded";
- case "FAILED":
- return "Failed";
- case "RUNNING":
- return "Running";
- case "PENDING":
- return "Pending";
- case "SKIPPED":
- return "Skipped";
- default:
- return state || "-";
- }
- };
+ const toUiStatus = (state?: string, finishedAt?: string) => {
+ const s = String(state || "").toUpperCase();
- const { pageNum, pageSize } = data.value.params;
+ // 완료 판단: SUCCEED* 이거나 상태가 비어있지만 finishedAt이 있으면 완료로 간주
+ if (s.includes("SUCCEED") || (!s && finishedAt)) return "Succeeded";
+
+ // 실패
+ if (s.includes("FAIL") || s.includes("ERROR")) return "Failed";
+
+ // 실행 중
+ if (s.includes("RUN")) return "Running";
+
+ // 대기
+ if (s.includes("PEND") || s.includes("QUEUE") || s.includes("SCHED"))
+ return "Pending";
+
+ // 모르겠으면 대기로
+ return "Pending";
+ };
return {
- no: (pageNum - 1) * pageSize + (idx + 1),
+ no, // ← 전달받은 번호 사용
name: r.displayName ?? r.name ?? r.runId ?? "(no name)",
- status: toUiStatus(r.state),
+ status: toUiStatus(r.state, r.finishedAt),
duration: fmtDuration(r.createdAt, r.finishedAt),
- experiment: r.experimentId ?? "-",
+ expName,
workflow: r.pipelineId ?? r.pipelineVersionId ?? "-",
startTime: fmtStart(r.createdAt),
registryStatus: r.storageState ?? "-",
@@ -149,6 +186,7 @@ async function fetchList() {
const payload = {
projectId: getProjectId(),
+
page: pageNum - 1, // 0-based
size: pageSize,
keyword,
@@ -199,7 +237,12 @@ async function fetchList() {
const bid = b.id ?? b.runId ?? b.run_id ?? b.name ?? "";
return String(bid).localeCompare(String(aid)); // 안정화
});
+ const expIds = list
+ .map((r) => r.experimentId ?? r.experiment_id ?? r.experiment?.id)
+ .filter((v) => v != null);
+ // ✅ 여기서 네가 만든 API로 display_name 미리 채움
+ await resolveExperimentNamesWithApi(expIds);
if (!isServerPaged) {
const total = list.length;
const pages = Math.max(1, Math.ceil(total / pageSize));
@@ -207,17 +250,29 @@ async function fetchList() {
const start = (safePage - 1) * pageSize;
const slice = list.slice(start, start + pageSize);
- data.value.results = slice.map((r, i) => toRow(r, i));
+ // ↓ 이번 페이지의 시작 번호(내림차순)
+ const startNo = total - (safePage - 1) * pageSize;
+ data.value.results = slice.map((r, i) =>
+ toRow(r, Math.max(startNo - i, 1)),
+ );
+
data.value.totalElements = total;
data.value.pageLength = pages;
} else {
- data.value.results = list.map((r, i) => toRow(r, i));
- data.value.totalElements =
+ const te =
typeof totalElements === "number" ? totalElements : list.length;
+
+ // ↓ 서버 페이징일 때도 동일하게 시작 번호 계산
+ const startNo = te - (pageNum - 1) * pageSize;
+ data.value.results = list.map((r, i) =>
+ toRow(r, Math.max(startNo - i, 1)),
+ );
+
+ data.value.totalElements = te;
data.value.pageLength =
typeof totalPages === "number"
? Math.max(1, totalPages)
- : Math.max(1, Math.ceil((data.value.totalElements || 0) / pageSize));
+ : Math.max(1, Math.ceil((te || 0) / pageSize));
}
} catch (err) {
console.error("[Executions] 조회 에러:", err);
@@ -305,9 +360,9 @@ const openInfoModal = (item: any) => {
execSelected.value = item;
openView.value = true;
};
-function closeView() {
+const closeView = () => {
openView.value = false;
-}
+};
const onSaved = () => fetchList();
const openCreateModal = () => {
data.value.modalMode = "create";
@@ -483,14 +538,13 @@ onMounted(() => {
mdi-help-circle
| {{ item.duration }} |
- {{ item.experiment }} |
+ {{ item.expName }} |
{{ item.workflow }} |
{{ item.startTime }} |
{{ item.registryStatus }} |
-
-import IconDeleteBtn from "@/components/atoms/button/IconDeleteBtn.vue";
-import IconModifyBtn from "@/components/atoms/button/IconModifyBtn.vue";
-// import FormComponent from "@/components/device/FormComponent.vue";
-import { computed, onMounted, ref, watch } from "vue";
+import { MlflowService } from "@/components/service/mlflow/MlflowService";
+import {
+ computed,
+ watch,
+ ref,
+ nextTick,
+ onMounted,
+ onBeforeUnmount,
+} from "vue";
+import Plotly from "plotly.js-dist-min";
-// const store = commonStore();
+const props = defineProps<{ experimentInfo: any }>();
+const emit = defineEmits<{ (e: "close"): void }>();
-const props = defineProps<{
- experimentInfo: any;
-}>();
+/* ============ Tabs ============ */
+const mainTab = ref<"details" | "viz">("details");
+const vizTab = ref<"metrics" | "scatter" | "box" | "contour">("metrics");
-const emit = defineEmits<{ (e: "close"): void }>();
+/* ============ expName pick ============ */
+function pickExpName(v: any): string {
+ return v?.expName || v?.experiment || v?.name || v?.raw?.displayName || "";
+}
+
+/* ============ MLflow state ============ */
+const runs = ref([]);
+const loadingRuns = ref(false);
+
+/* --- 단건 조회 state --- */
+const selectedRunId = ref("");
+const loadingRunDetail = ref(false);
+const runDetail = ref(null);
+
+/* 목록 옵션 (run_name 표시, 값은 run_id / run_uuid) */
+const runOptions = computed(() =>
+ runs.value.map((r) => ({
+ title: r?.info?.run_name || r?.info?.run_id || "—",
+ value: r?.info?.run_id || r?.info?.run_uuid || "",
+ })),
+);
+
+/* ============ Plotly refs ============ */
+const elAccuracy = ref(null);
+const elF1 = ref(null);
+const elPrecision = ref(null);
+const elRecall = ref(null);
+
+/* ===== 유틸: 단건 값 꺼내기 ===== */
+function metricValue(key: "accuracy" | "precision" | "recall" | "f1_score") {
+ const m = (runDetail.value?.data?.metrics ?? []).find(
+ (x: any) => x.key === key,
+ );
+ return m?.value ?? null;
+}
+const selectedLabel = computed(
+ () => runDetail.value?.info?.run_name ?? runDetail.value?.info?.run_id ?? "-",
+);
+
+/* 선택한 run의 메트릭 표 데이터 */
+const selectedMetrics = computed(() => {
+ const mm: Array<{ key: string; value: number }> =
+ runDetail.value?.data?.metrics ?? [];
+ return mm.map((m) => ({ key: m.key, value: m.value }));
+});
+
+/* ===== 차트 렌더: 선택한 단건만 ===== */
+function drawCharts() {
+ // Plotly Layout을 타입 안전하게 만들기
+ const baseLayout = (titleText: string, xlabel: string): Partial => ({
+ title: { text: titleText }, // ← 문자열 대신 객체
+ margin: { t: 40, r: 20, b: 40, l: 40 },
+ height: 290,
+ yaxis: { rangemode: "tozero" },
+ xaxis: {
+ tickmode: "array",
+ tickvals: [xlabel],
+ ticktext: [xlabel],
+ },
+ showlegend: false,
+ });
+
+ const config = { displayModeBar: false, responsive: true };
+
+ if (elAccuracy.value) {
+ const x = ["accuracy"];
+ Plotly.react(
+ elAccuracy.value,
+ [{ x, y: [metricValue("accuracy")], type: "bar" }],
+ baseLayout("accuracy", x[0]),
+ config,
+ );
+ }
+ if (elF1.value) {
+ const x = ["f1_score"];
+ Plotly.react(
+ elF1.value,
+ [{ x, y: [metricValue("f1_score")], type: "bar" }],
+ baseLayout("f1_score", x[0]),
+ config,
+ );
+ }
+ if (elPrecision.value) {
+ const x = ["precision"];
+ Plotly.react(
+ elPrecision.value,
+ [{ x, y: [metricValue("precision")], type: "bar" }],
+ baseLayout("precision", x[0]),
+ config,
+ );
+ }
+ if (elRecall.value) {
+ const x = ["recall"];
+ Plotly.react(
+ elRecall.value,
+ [{ x, y: [metricValue("recall")], type: "bar" }],
+ baseLayout("recall", x[0]),
+ config,
+ );
+ }
+}
+
+function resizeCharts() {
+ [elAccuracy.value, elF1.value, elPrecision.value, elRecall.value]
+ .filter(Boolean)
+ .forEach((el: any) => Plotly.Plots.resize(el));
+}
+
+/* ===== 응답 정규화 + fallback ===== */
+function normalizeRun(res: any) {
+ const v = res?.data?.run ?? res?.run ?? res?.data ?? res;
+ return v?.info && v?.data ? v : null;
+}
+function findFromList(runId: string) {
+ return (
+ runs.value.find(
+ (r) =>
+ r?.info?.run_id === runId ||
+ r?.info?.run_uuid === runId ||
+ r?.info?.run_name === runId,
+ ) ?? null
+ );
+}
+
+/* ============ API: runs 목록 & 단건 run ============ */
+async function fetchRunsOnce(expName?: string) {
+ if (!expName || runs.value.length > 0) return;
+
+ loadingRuns.value = true;
+ try {
+ const expRes = await MlflowService.getExperimentByName(expName);
+ const exp = expRes?.data ?? exp;
+ const expId = String(
+ exp?.experiment_id ?? exp?.experimentId ?? exp?.id ?? "",
+ );
+ if (!expId) return;
+
+ const runsRes = await MlflowService.getRuns(expId);
+ const body = runsRes?.data ?? runsRes;
+ const list =
+ body?.runs ?? body?.data?.runs ?? (Array.isArray(body) ? body : []);
+ runs.value = Array.isArray(list) ? list : [];
+
+ // 기본 선택: 최신 run
+ const first = [...runs.value].sort(
+ (a, b) => (b?.info?.start_time ?? 0) - (a?.info?.start_time ?? 0),
+ )[0];
+ selectedRunId.value =
+ first?.info?.run_id || first?.info?.run_uuid || selectedRunId.value || "";
+ } finally {
+ loadingRuns.value = false;
+ }
+}
+
+async function fetchRunDetail(runId: string) {
+ if (!runId) {
+ runDetail.value = null;
+ // 비움 처리
+ await nextTick();
+ drawCharts();
+ return;
+ }
+ loadingRunDetail.value = true;
+ try {
+ const res = await MlflowService.getExperimentRun(runId);
+ runDetail.value = normalizeRun(res) || findFromList(runId);
+ await nextTick();
+ drawCharts();
+ } finally {
+ loadingRunDetail.value = false;
+ }
+}
+
+/* ============ 트리거 ============ */
+// Visualizations 탭 진입 시 목록 로드 + 기본 단건 로드
+watch(
+ () => mainTab.value,
+ async (t) => {
+ if (t === "viz") {
+ await fetchRunsOnce(pickExpName(props.experimentInfo));
+ if (selectedRunId.value) await fetchRunDetail(selectedRunId.value);
+ }
+ },
+ { immediate: true },
+);
+
+// 드롭다운에서 Run 변경 시 단건 조회
+watch(selectedRunId, (id) => fetchRunDetail(id));
+
+// metrics 서브탭일 때 리렌더
+watch(vizTab, async (t) => {
+ if (mainTab.value === "viz" && t === "metrics") {
+ await nextTick();
+ drawCharts();
+ resizeCharts();
+ }
+});
+
+function onResize() {
+ if (mainTab.value === "viz" && vizTab.value === "metrics") {
+ resizeCharts();
+ }
+}
+onMounted(() => window.addEventListener("resize", onResize));
+onBeforeUnmount(() => window.removeEventListener("resize", onResize));
+
+/* ============ State History (Details 탭) ============ */
+const rawHistory = computed(() => {
+ const h =
+ props.experimentInfo?.raw?.state_history ??
+ props.experimentInfo?.raw?.stateHistory ??
+ props.experimentInfo?.state_history ??
+ props.experimentInfo?.stateHistory ??
+ [];
+
+ if (Array.isArray(h) && h.length > 0) return h;
+
+ // fallback 합성
+ const startIso =
+ props.experimentInfo?.startTime &&
+ !isNaN(new Date(props.experimentInfo.startTime).getTime())
+ ? new Date(props.experimentInfo.startTime).toISOString()
+ : undefined;
+
+ const latest = [...(runs.value ?? [])].sort(
+ (a, b) => (b?.info?.start_time ?? 0) - (a?.info?.start_time ?? 0),
+ )[0];
+
+ const endIso =
+ latest?.info?.end_time && isFinite(Number(latest.info.end_time))
+ ? new Date(Number(latest.info.end_time)).toISOString()
+ : undefined;
+
+ const status = String(props.experimentInfo?.status ?? "").toUpperCase();
+
+ const out: Array<{ state: string; update_time?: string }> = [];
+ if (startIso) out.push({ state: "PENDING", update_time: startIso });
+ if (startIso) out.push({ state: "RUNNING", update_time: startIso });
+ if (status === "SUCCEEDED" || status === "FAILED") {
+ out.push({ state: status, update_time: endIso ?? startIso });
+ }
+ return out;
+});
const history = computed(() =>
- (props.experimentInfo.raw?.state_history ?? [])
+ rawHistory.value
.slice()
+ .filter((h) => h && h.state)
.sort(
(a: any, b: any) =>
- new Date(a.update_time).getTime() - new Date(b.update_time).getTime(),
+ new Date(a.update_time || 0).getTime() -
+ new Date(b.update_time || 0).getTime(),
),
);
-// 히스토리에서 각 단계의 기록 찾기
const hPending = computed(() =>
history.value.find((h) => (h.state || "").toUpperCase() === "PENDING"),
);
@@ -33,14 +283,21 @@ const hTerminal = computed(() => {
.slice()
.reverse()
.find((h) =>
- ["SUCCEEDED", "FAILED"].includes((h.state || "").toUpperCase()),
+ ["SUCCEEDED", "FAILED", "COMPLETED"].includes(
+ (h.state || "").toUpperCase(),
+ ),
);
return t ?? null;
});
-// 3단계 고정 스텝 정의
const steps = computed(() => {
- const lastLabel = (hTerminal.value?.state || "COMPLETED").toUpperCase();
+ const lastLabel = (
+ hTerminal.value?.state ||
+ props.experimentInfo?.status ||
+ "COMPLETED"
+ )
+ .toString()
+ .toUpperCase();
return [
{
@@ -64,7 +321,7 @@ const steps = computed(() => {
label: ["SUCCEEDED", "FAILED"].includes(lastLabel)
? lastLabel
: "COMPLETED",
- active: !!hTerminal.value,
+ active: !!hTerminal.value || ["SUCCEEDED", "FAILED"].includes(lastLabel),
color:
lastLabel === "FAILED"
? "error"
@@ -81,16 +338,12 @@ const steps = computed(() => {
},
];
});
-
-// 고정 3스텝 기준 위치/세그먼트
const nSteps = 3;
-const activeIndex = computed(
- () => steps.value.map((s) => s.active).lastIndexOf(true), // -1이면 아무것도 진행X
+const activeIndex = computed(() =>
+ steps.value.map((s) => s.active).lastIndexOf(true),
);
const leftPct = (i: number) => (i / (nSteps - 1)) * 100;
const segWidthPct = () => 100 / (nSteps - 1);
-
-// 유틸
const fmt = (iso?: string) => (iso ? new Date(iso).toLocaleString() : "—");
@@ -103,206 +356,445 @@ const fmt = (iso?: string) => (iso ? new Date(iso).toLocaleString() : "—");
- View Details
+ Compare Executions
-
-
-
-
-
-
-
-
-
-
-
+
+ Details
+ Metrics
+
+
+
+
+
+
+
+ Execution Information
+
+
+
+
+ Name
+ {{ props.experimentInfo.name }}
+
+
+
+
+ Status
+
+ mdi-check-circle
-
- {{ s.icon }}
-
+ mdi-close-circle
+ {{ props.experimentInfo.status }}
+
+
+
+
+
+ Duration
+ {{ props.experimentInfo.duration }}
+
+
+
+
+ Experiment Name
+ {{ props.experimentInfo.expName }}
+
+
+
+
+ Workflow
+ {{ props.experimentInfo.workflow }}
+
+
+
+
+ Start Time
+ {{ props.experimentInfo.startTime }}
+
+
+
+
+ Registry Status
+ {{
+ props.experimentInfo.registryStatus
+ }}
+
+
+
+
+
+ State History
+
+
+
+
+
+
+
+
+
+
+ {{ s.icon }}
+
+
+
+
+ {{ s.label }}
+
+
+ {{ fmt(s.ts) }}
+
+
-
+ Back to List
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- {{ s.label }}
-
-
- {{ fmt(s.ts) }}
-
-
+ Runs:
+ {{ runs.length.toLocaleString() }}
+
+
+
+
+
+
+
+ Selected Run
+
+
+
+
+
+
+ | Run ID |
+ {{ runDetail?.info?.run_id || "—" }} |
+
+
+ | Run Name |
+ {{ runDetail?.info?.run_name || "—" }} |
+
+
+ | Status |
+ {{ runDetail?.info?.status || "—" }} |
+
+
+ | Start |
+
+ {{
+ runDetail?.info?.start_time
+ ? new Date(
+ runDetail.info.start_time,
+ ).toLocaleString()
+ : "—"
+ }}
+ |
+
+
+ | End |
+
+ {{
+ runDetail?.info?.end_time
+ ? new Date(
+ runDetail.info.end_time,
+ ).toLocaleString()
+ : "—"
+ }}
+ |
+
+
+
+
+
+
+ Parameters
+
+
+
+ | Key |
+ Value |
+
+
+
+
+ |
+ No params
+ |
+
+
+ | {{ p.key }} |
+ {{ p.value }} |
+
+
+
+
+
+
+
+
+ Metrics
+
+
+
+ | Metric |
+ Value |
+
+
+
+
+ |
+ No metrics
+ |
+
+
+ | {{ m.key }} |
+ {{ m.value }} |
+
+
+
+
+
+
+ Tags
+
+
+
+ | Key |
+ Value |
+
+
+
+
+ |
+ No tags
+ |
+
+
+ | {{ t.key }} |
+
+ {{ t.value }}
+ |
+
+
+
+
+
+
+
+
+
+
+
+ Model Metrics (selected run)
+
+
+
+
+ | Metric |
+ Value |
+
+
+
+
+ |
+ No Data
+ |
+
+
+ | {{ m.key }} |
+ {{ m.value }} |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ (준비중) X/Y 축 선택 후 산점도 표시
+
+
+
+
+ (준비중) 메트릭 분포 Box Plot
+
+
+
+
+ (준비중) 2D/3D Contour Plot
+
+
+
+
+
+
+
+
diff --git a/src/components/templates/run/experiment/ViewComponent.vue b/src/components/templates/run/experiment/ViewComponent.vue
index 08080cc..9d77da3 100644
--- a/src/components/templates/run/experiment/ViewComponent.vue
+++ b/src/components/templates/run/experiment/ViewComponent.vue
@@ -1,138 +1,146 @@
@@ -150,6 +158,7 @@ watch(
+
-
Experiment Name
- {{
- experimentInfo.experimentName
- }}
+ {{ header.experimentName }}
-
Project Name
- {{
- experimentInfo.projectName
- }}
+ {{ header.projectName }}
-
Created ID
- {{ experimentInfo.createdId }}
+ {{ header.createdId }}
Created Date
- {{
- experimentInfo.createdDate
- }}
-
-
-
-
-
- Kubeflow ID
- {{ experimentInfo.kubeFlowId }}
- MLflow ID
- {{ experimentInfo.mlFlowId }}
+ {{ header.createdDate }}
-
Description
- {{
- experimentInfo.description
- }}
+ {{ header.description }}
@@ -220,6 +208,110 @@ watch(
>
+
+
+
+
+
+ Runs
+
+
+
+
+
+ 총 {{ runRows.length.toLocaleString() }}개 · Experiment ID:
+ {{ experimentId || "-" }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ | Run Name |
+ Status |
+ Duration |
+ Pipeline |
+ Start Time |
+
+
+
+
+
+ |
+ No runs
+ |
+
+
+
+
+ |
+ {{ r.runName }}
+ |
+
+
+ mdi-check-circle
+ mdi-close-circle
+
+ mdi-help-circle
+ {{ r.status }}
+ |
+
+
+ {{ r.duration }}
+ |
+
+
+ {{ r.pipeline }}
+ |
+
+
+ {{ r.startTime }}
+ |
+
+
+
+
+
+
+
+
Back to List
diff --git a/src/components/templates/trainingscript/ListComponent.vue b/src/components/templates/trainingscript/ListComponent.vue
index f132052..e4f34b0 100644
--- a/src/components/templates/trainingscript/ListComponent.vue
+++ b/src/components/templates/trainingscript/ListComponent.vue
@@ -355,7 +355,7 @@ watch(
- Training Script
+ TrainingScript
+
+
+
+
+
+
+ {{ m.title }}
+
+
+
+
+
+
+
+
+
+
+ {{ m.title }}
+
+
+
+
+
+
+
+
+ mdi-home
+ mdi-cog
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/vite.config.mjs b/vite.config.mjs
index f61162d..b3e6abf 100644
--- a/vite.config.mjs
+++ b/vite.config.mjs
@@ -14,7 +14,8 @@ import { fileURLToPath, URL } from "node:url";
// https://vitejs.dev/config/
export default defineConfig({
- base: process.env.NODE_ENV === "production" ? process.env.VITE_ROOT_PATH : "/",
+ base:
+ process.env.NODE_ENV === "production" ? process.env.VITE_ROOT_PATH : "/",
plugins: [
VueRouter(),
Layouts(),
|