|
|
|
@ -14,19 +14,31 @@ import Plotly from "plotly.js-dist-min";
|
|
|
|
import CompareRunsDialog from "@/components/atoms/organisms/CompareRunDialog.vue";
|
|
|
|
import CompareRunsDialog from "@/components/atoms/organisms/CompareRunDialog.vue";
|
|
|
|
import DeploymentDialog from "@/components/atoms/organisms/DeploymentDialog.vue";
|
|
|
|
import DeploymentDialog from "@/components/atoms/organisms/DeploymentDialog.vue";
|
|
|
|
import { MinioService } from "@/components/service/management/MinioService";
|
|
|
|
import { MinioService } from "@/components/service/management/MinioService";
|
|
|
|
|
|
|
|
import IconDownloadBtn from "@/components/atoms/button/IconDownloadBtn.vue";
|
|
|
|
|
|
|
|
import IconDeployBtn from "@/components/atoms/button/IconDeployBtn.vue";
|
|
|
|
|
|
|
|
|
|
|
|
/* ========= Constants & Types ========= */
|
|
|
|
/* ========= Constants & Types ========= */
|
|
|
|
const AUTH_KEY = "external-auth";
|
|
|
|
const AUTH_KEY = "external-auth";
|
|
|
|
const externalToken = computed(() => externalAuth.value?.token ?? "");
|
|
|
|
|
|
|
|
type ExternalAuth = { id: string; name: string; token: string };
|
|
|
|
type MlflowArtifactList = {
|
|
|
|
type PackageOption = { label: string; value: string; raw: any };
|
|
|
|
root_uri: string;
|
|
|
|
|
|
|
|
files: { path: string; is_dir: boolean; file_size?: number }[];
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
type ArtifactRow = {
|
|
|
|
|
|
|
|
path: string;
|
|
|
|
|
|
|
|
is_dir?: boolean;
|
|
|
|
|
|
|
|
file_size?: number;
|
|
|
|
|
|
|
|
depth?: number;
|
|
|
|
|
|
|
|
};
|
|
|
|
type MetricKV = { key: string; value: number };
|
|
|
|
type MetricKV = { key: string; value: number };
|
|
|
|
type RunDetailType = {
|
|
|
|
type RunDetailType = {
|
|
|
|
info: any;
|
|
|
|
info: any;
|
|
|
|
data: { metrics: MetricKV[]; params?: any[]; tags?: any[] };
|
|
|
|
data: { metrics: MetricKV[]; params?: any[]; tags?: any[] };
|
|
|
|
};
|
|
|
|
};
|
|
|
|
type ArtifactRow = { path: string; is_dir?: boolean; file_size?: number };
|
|
|
|
type ExternalAuth = { id: string; name: string; token: string };
|
|
|
|
type ArtifactGroup = { base: string; items: ArtifactRow[] };
|
|
|
|
type PackageOption = { label: string; value: string; raw: any };
|
|
|
|
|
|
|
|
type ArtifactGroup = { dir: string; files: ArtifactRow[] };
|
|
|
|
|
|
|
|
const FILE_ICON = "mdi-file-document-outline";
|
|
|
|
/* ========= Props/Emits ========= */
|
|
|
|
/* ========= Props/Emits ========= */
|
|
|
|
const props = defineProps<{ experimentInfo: any }>();
|
|
|
|
const props = defineProps<{ experimentInfo: any }>();
|
|
|
|
const emit = defineEmits<{ (e: "close"): void }>();
|
|
|
|
const emit = defineEmits<{ (e: "close"): void }>();
|
|
|
|
@ -38,12 +50,12 @@ const loginForm = ref({ id: "", password: "" });
|
|
|
|
const loginError = ref("");
|
|
|
|
const loginError = ref("");
|
|
|
|
const isAuthenticated = ref(false);
|
|
|
|
const isAuthenticated = ref(false);
|
|
|
|
const externalAuth = ref<ExternalAuth | null>(null);
|
|
|
|
const externalAuth = ref<ExternalAuth | null>(null);
|
|
|
|
|
|
|
|
const externalToken = computed(() => externalAuth.value?.token ?? "");
|
|
|
|
|
|
|
|
|
|
|
|
/* ========= Deployment State ========= */
|
|
|
|
/* ========= Deployment State ========= */
|
|
|
|
const isEditVisible = ref(false);
|
|
|
|
const isEditVisible = ref(false);
|
|
|
|
const lastArtifactUri = ref<string>(""); // 배포 모달에 표시될 최종 URI
|
|
|
|
const lastArtifactUri = ref<string>("");
|
|
|
|
const pendingArtifactPath = ref<string | null>(null); // 로그인 전 임시 저장
|
|
|
|
const pendingArtifactPath = ref<string | null>(null);
|
|
|
|
|
|
|
|
|
|
|
|
const packageOptions = ref<PackageOption[]>([]);
|
|
|
|
const packageOptions = ref<PackageOption[]>([]);
|
|
|
|
const packagesLoading = ref(false);
|
|
|
|
const packagesLoading = ref(false);
|
|
|
|
const packagesError = ref("");
|
|
|
|
const packagesError = ref("");
|
|
|
|
@ -72,6 +84,109 @@ const baselineRunId = ref<string | null>(null);
|
|
|
|
const elMetrics = ref<HTMLDivElement | null>(null);
|
|
|
|
const elMetrics = ref<HTMLDivElement | null>(null);
|
|
|
|
const elCompare = ref<HTMLDivElement | null>(null);
|
|
|
|
const elCompare = ref<HTMLDivElement | null>(null);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* ========= Artifacts: Two-step(flat) ========= */
|
|
|
|
|
|
|
|
const artifactGroups = computed<ArtifactGroup[]>(() => {
|
|
|
|
|
|
|
|
const rootFiles = (lvl1.value || []).filter((x) => !x.is_dir);
|
|
|
|
|
|
|
|
const dirs = (lvl1.value || []).filter((x) => x.is_dir).map((x) => x.path);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const groups: ArtifactGroup[] = [];
|
|
|
|
|
|
|
|
for (const d of dirs) {
|
|
|
|
|
|
|
|
const children = (lvl2.value || [])
|
|
|
|
|
|
|
|
.filter((f) => f.path.startsWith(`${d}/`))
|
|
|
|
|
|
|
|
.map((f) => {
|
|
|
|
|
|
|
|
const rel = f.path.slice(d.length + 1);
|
|
|
|
|
|
|
|
const depth = Math.max(rel.split("/").length - 1, 0);
|
|
|
|
|
|
|
|
return { ...f, depth };
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.sort((a, b) => {
|
|
|
|
|
|
|
|
if (!!b.is_dir - !!a.is_dir) return !!b.is_dir - !!a.is_dir;
|
|
|
|
|
|
|
|
return a.path.localeCompare(b.path);
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
groups.push({ dir: d, files: children });
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (rootFiles.length > 0) {
|
|
|
|
|
|
|
|
groups.unshift({
|
|
|
|
|
|
|
|
dir: "(root)",
|
|
|
|
|
|
|
|
files: rootFiles.map((f) => ({ ...f, depth: 0 })),
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
return groups;
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const lvl1 = ref<ArtifactRow[]>([]);
|
|
|
|
|
|
|
|
const lvl2 = ref<ArtifactRow[]>([]);
|
|
|
|
|
|
|
|
const twoStepLoading = ref(false);
|
|
|
|
|
|
|
|
const twoStepError = ref("");
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
async function fetchArtifactsTwoStep(runId: string) {
|
|
|
|
|
|
|
|
lvl1.value = [];
|
|
|
|
|
|
|
|
lvl2.value = [];
|
|
|
|
|
|
|
|
twoStepError.value = "";
|
|
|
|
|
|
|
|
if (!runId) return;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
twoStepLoading.value = true;
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
|
|
|
// 1) 루트(=runId) 기준 1단계
|
|
|
|
|
|
|
|
const res1 = await MlflowService.artifact(runId);
|
|
|
|
|
|
|
|
const body1 = unwrapAxiosLike(res1) as MlflowArtifactList;
|
|
|
|
|
|
|
|
const firstFiles = (body1?.files ?? []).map((f) => ({
|
|
|
|
|
|
|
|
path: f.path,
|
|
|
|
|
|
|
|
is_dir: !!f.is_dir,
|
|
|
|
|
|
|
|
file_size: f.file_size,
|
|
|
|
|
|
|
|
})) as ArtifactRow[];
|
|
|
|
|
|
|
|
lvl1.value = firstFiles;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 2) 1단계의 "디렉터리"에 대해 하위(=2단계) 조회
|
|
|
|
|
|
|
|
const dirPaths = firstFiles.filter((x) => x.is_dir).map((x) => x.path);
|
|
|
|
|
|
|
|
let merged: ArtifactRow[] = [];
|
|
|
|
|
|
|
|
if (dirPaths.length > 0) {
|
|
|
|
|
|
|
|
const results = await Promise.all(
|
|
|
|
|
|
|
|
dirPaths.map(async (p) => {
|
|
|
|
|
|
|
|
const r = await MlflowService.artifact(runId, p);
|
|
|
|
|
|
|
|
return unwrapAxiosLike(r) as MlflowArtifactList;
|
|
|
|
|
|
|
|
}),
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
for (const r of results) {
|
|
|
|
|
|
|
|
const files2 = (r?.files ?? []).map((f) => ({
|
|
|
|
|
|
|
|
path: f.path, // ex) "sklearn-model/MLmodel" 또는 "sklearn-model/sub"
|
|
|
|
|
|
|
|
is_dir: !!f.is_dir,
|
|
|
|
|
|
|
|
file_size: f.file_size,
|
|
|
|
|
|
|
|
})) as ArtifactRow[];
|
|
|
|
|
|
|
|
merged.push(...files2);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 3) 2단계 결과 중 "하위 폴더"가 있으면 그 하위(=3단계)도 한 번 더 조회 (lazy 없이 자동 1번만)
|
|
|
|
|
|
|
|
const subDirs = merged.filter((x) => x.is_dir);
|
|
|
|
|
|
|
|
if (subDirs.length > 0) {
|
|
|
|
|
|
|
|
const results3 = await Promise.all(
|
|
|
|
|
|
|
|
subDirs.map(async (sd) => {
|
|
|
|
|
|
|
|
const r3 = await MlflowService.artifact(runId, sd.path);
|
|
|
|
|
|
|
|
return unwrapAxiosLike(r3) as MlflowArtifactList;
|
|
|
|
|
|
|
|
}),
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
for (const r3 of results3) {
|
|
|
|
|
|
|
|
const files3 = (r3?.files ?? []).map((f) => ({
|
|
|
|
|
|
|
|
path: f.path, // ex) "sklearn-model/sub/deeper.txt"
|
|
|
|
|
|
|
|
is_dir: !!f.is_dir,
|
|
|
|
|
|
|
|
file_size: f.file_size,
|
|
|
|
|
|
|
|
})) as ArtifactRow[];
|
|
|
|
|
|
|
|
merged.push(...files3);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
lvl2.value = merged;
|
|
|
|
|
|
|
|
} catch (e: any) {
|
|
|
|
|
|
|
|
twoStepError.value =
|
|
|
|
|
|
|
|
e?.response?.data?.message || e?.message || "artifact 조회 실패";
|
|
|
|
|
|
|
|
console.error("[Artifacts][TwoStep] ERROR", e);
|
|
|
|
|
|
|
|
} finally {
|
|
|
|
|
|
|
|
twoStepLoading.value = false;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* ========= Helpers ========= */
|
|
|
|
/* ========= Helpers ========= */
|
|
|
|
const safeParse = <T = any,>(v: any): T | null => {
|
|
|
|
const safeParse = <T = any,>(v: any): T | null => {
|
|
|
|
try {
|
|
|
|
try {
|
|
|
|
@ -123,62 +238,28 @@ const fmtNumber = (v: number | null, digits = 3) => {
|
|
|
|
return v.toExponential(2);
|
|
|
|
return v.toExponential(2);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const normalizeArray = (vals: (number | null)[]) => {
|
|
|
|
|
|
|
|
const xs = vals.filter((v): v is number => Number.isFinite(v as number));
|
|
|
|
|
|
|
|
if (xs.length === 0) return vals;
|
|
|
|
|
|
|
|
const min = Math.min(...xs),
|
|
|
|
|
|
|
|
max = Math.max(...xs);
|
|
|
|
|
|
|
|
if (max === min) return vals.map((v) => (v == null ? v : 1));
|
|
|
|
|
|
|
|
return vals.map((v) => (v == null ? v : (v - min) / (max - min)));
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const labelOfRun = (r: RunDetailType) => r.info.run_name || r.info.run_id;
|
|
|
|
const labelOfRun = (r: RunDetailType) => r.info.run_name || r.info.run_id;
|
|
|
|
const valueOf = (run: RunDetailType, key: string): number | null => {
|
|
|
|
const valueOf = (run: RunDetailType, key: string): number | null => {
|
|
|
|
const m = run.data.metrics.find((x) => x.key === key)?.value;
|
|
|
|
const m = run.data.metrics.find((x) => x.key === key)?.value;
|
|
|
|
return Number.isFinite(m as number) ? Number(m) : null;
|
|
|
|
return Number.isFinite(m as number) ? Number(m) : null;
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
/* === File icon helpers (빨간 밑줄 원인: 누락/중복 정의 방지) === */
|
|
|
|
|
|
|
|
const fileExt = (name: string) => {
|
|
|
|
const fileExt = (name: string) => {
|
|
|
|
const n = (name || "").toLowerCase().trim();
|
|
|
|
const n = (name || "").toLowerCase().trim();
|
|
|
|
const idx = n.lastIndexOf(".");
|
|
|
|
const idx = n.lastIndexOf(".");
|
|
|
|
return idx >= 0 ? n.slice(idx + 1) : "";
|
|
|
|
return idx >= 0 ? n.slice(idx + 1) : "";
|
|
|
|
};
|
|
|
|
};
|
|
|
|
const fileIconByName = (name: string) => {
|
|
|
|
|
|
|
|
const n = (name || "").toLowerCase().trim();
|
|
|
|
const bytes = (n?: number) =>
|
|
|
|
// exact filename first
|
|
|
|
typeof n === "number" && isFinite(n)
|
|
|
|
if (n === "mlmodel") return "mdi-file-cog-outline";
|
|
|
|
? n < 1024
|
|
|
|
if (n === "conda.yaml" || n === "conda.yml")
|
|
|
|
? `${n} B`
|
|
|
|
return "mdi-file-settings-outline";
|
|
|
|
: n < 1024 ** 2
|
|
|
|
if (n === "requirements.txt") return "mdi-file-code-outline";
|
|
|
|
? `${(n / 1024).toFixed(1)} KB`
|
|
|
|
// folder-ish (no dot or slash)
|
|
|
|
: n < 1024 ** 3
|
|
|
|
if (!n.includes(".") && !n.includes("/")) return "mdi-file-outline";
|
|
|
|
? `${(n / 1024 ** 2).toFixed(1)} MB`
|
|
|
|
// by extension
|
|
|
|
: `${(n / 1024 ** 3).toFixed(2)} GB`
|
|
|
|
switch (fileExt(n)) {
|
|
|
|
: "—";
|
|
|
|
case "json":
|
|
|
|
|
|
|
|
return "mdi-code-json";
|
|
|
|
|
|
|
|
case "yml":
|
|
|
|
|
|
|
|
case "yaml":
|
|
|
|
|
|
|
|
return "mdi-code-braces";
|
|
|
|
|
|
|
|
case "txt":
|
|
|
|
|
|
|
|
return "mdi-file-document-outline";
|
|
|
|
|
|
|
|
case "pkl":
|
|
|
|
|
|
|
|
case "pickle":
|
|
|
|
|
|
|
|
return "mdi-cube-outline";
|
|
|
|
|
|
|
|
case "onnx":
|
|
|
|
|
|
|
|
return "mdi-robot-outline";
|
|
|
|
|
|
|
|
case "pt":
|
|
|
|
|
|
|
|
case "pth":
|
|
|
|
|
|
|
|
return "mdi-chip";
|
|
|
|
|
|
|
|
case "bin":
|
|
|
|
|
|
|
|
return "mdi-database-outline";
|
|
|
|
|
|
|
|
case "joblib":
|
|
|
|
|
|
|
|
case "pmdarima":
|
|
|
|
|
|
|
|
return "mdi-archive-outline";
|
|
|
|
|
|
|
|
default:
|
|
|
|
|
|
|
|
return "mdi-file-outline";
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* ========= Derived (computed) ========= */
|
|
|
|
/* ========= Derived (computed) ========= */
|
|
|
|
const runItems = computed(() =>
|
|
|
|
const runItems = computed(() =>
|
|
|
|
@ -195,59 +276,7 @@ const selectedMetrics = computed<MetricKV[]>(() =>
|
|
|
|
})),
|
|
|
|
})),
|
|
|
|
);
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
/* ===== Artifacts (from tag: mlflow.log-model.history) ===== */
|
|
|
|
/* ========= URI 조합 & 다운로드/배포 ========= */
|
|
|
|
const historyArtifacts = computed<any[]>(() => {
|
|
|
|
|
|
|
|
const tags = runDetail.value?.data?.tags;
|
|
|
|
|
|
|
|
let raw: string | undefined;
|
|
|
|
|
|
|
|
if (Array.isArray(tags))
|
|
|
|
|
|
|
|
raw = tags.find((t: any) => t?.key === "mlflow.log-model.history")?.value;
|
|
|
|
|
|
|
|
else if (tags && typeof tags === "object")
|
|
|
|
|
|
|
|
raw = tags["mlflow.log-model.history"];
|
|
|
|
|
|
|
|
const parsed = safeParse<any>(raw);
|
|
|
|
|
|
|
|
return parsed ? (Array.isArray(parsed) ? parsed : [parsed]) : [];
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const artifactGroups = computed<ArtifactGroup[]>(() => {
|
|
|
|
|
|
|
|
const groups: ArtifactGroup[] = [];
|
|
|
|
|
|
|
|
for (const meta of historyArtifacts.value) {
|
|
|
|
|
|
|
|
const base = String(meta?.artifact_path ?? "");
|
|
|
|
|
|
|
|
if (!base) continue;
|
|
|
|
|
|
|
|
const flavors = meta.flavors ?? {};
|
|
|
|
|
|
|
|
const pf = flavors?.python_function ?? {};
|
|
|
|
|
|
|
|
const sk = flavors?.sklearn ?? {};
|
|
|
|
|
|
|
|
const files = new Set<string>();
|
|
|
|
|
|
|
|
files.add(`${base}/MLmodel`);
|
|
|
|
|
|
|
|
if (pf?.model_path) files.add(`${base}/${pf.model_path}`);
|
|
|
|
|
|
|
|
if (pf?.env?.conda) files.add(`${base}/${pf.env.conda}`);
|
|
|
|
|
|
|
|
if (pf?.env?.virtualenv) files.add(`${base}/${pf.env.virtualenv}`);
|
|
|
|
|
|
|
|
if (pf?.env?.requirements) files.add(`${base}/${pf.env.requirements}`);
|
|
|
|
|
|
|
|
if (sk?.pickled_model) files.add(`${base}/${sk.pickled_model}`);
|
|
|
|
|
|
|
|
const items: ArtifactRow[] = Array.from(files)
|
|
|
|
|
|
|
|
.sort((a, b) =>
|
|
|
|
|
|
|
|
a.endsWith("MLmodel")
|
|
|
|
|
|
|
|
? -1
|
|
|
|
|
|
|
|
: b.endsWith("MLmodel")
|
|
|
|
|
|
|
|
? 1
|
|
|
|
|
|
|
|
: a.localeCompare(b),
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
.map((p) => ({ path: p, is_dir: false }));
|
|
|
|
|
|
|
|
groups.push({ base, items });
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
return groups;
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const historyArtifactMeta = computed(
|
|
|
|
|
|
|
|
() => historyArtifacts.value.at(-1) ?? null,
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
const historyArtifactPath = computed(() =>
|
|
|
|
|
|
|
|
String(historyArtifactMeta.value?.artifact_path ?? ""),
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
const artifactItems = computed<ArtifactRow[]>(() => {
|
|
|
|
|
|
|
|
const base = historyArtifactPath.value;
|
|
|
|
|
|
|
|
return artifactGroups.value.find((x) => x.base === base)?.items ?? [];
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* ========= URI 조합기 & 클릭 핸들러 ========= */
|
|
|
|
|
|
|
|
function buildArtifactUri(fullPath: string) {
|
|
|
|
function buildArtifactUri(fullPath: string) {
|
|
|
|
const expId =
|
|
|
|
const expId =
|
|
|
|
currentExperimentId.value ||
|
|
|
|
currentExperimentId.value ||
|
|
|
|
@ -257,12 +286,12 @@ function buildArtifactUri(fullPath: string) {
|
|
|
|
const runId = runDetail.value?.info?.run_id || selectedRunId.value || "";
|
|
|
|
const runId = runDetail.value?.info?.run_id || selectedRunId.value || "";
|
|
|
|
return `${expId}/${runId}/artifacts/${fullPath}`;
|
|
|
|
return `${expId}/${runId}/artifacts/${fullPath}`;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
async function onClickArtifact(fullPath: string) {
|
|
|
|
async function onClickArtifact(fullPath: string) {
|
|
|
|
const objectName = buildArtifactUri(fullPath); // expId/runId/artifacts/...
|
|
|
|
const objectName = buildArtifactUri(fullPath);
|
|
|
|
try {
|
|
|
|
try {
|
|
|
|
artifactsLoading.value = true;
|
|
|
|
artifactsLoading.value = true;
|
|
|
|
const res = await MinioService.download(objectName);
|
|
|
|
await MinioService.download(objectName);
|
|
|
|
// blob 다운로드 처리...
|
|
|
|
|
|
|
|
} finally {
|
|
|
|
} finally {
|
|
|
|
artifactsLoading.value = false;
|
|
|
|
artifactsLoading.value = false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -316,6 +345,7 @@ async function fetchRuns(expName?: string) {
|
|
|
|
exp?.experiment_id ?? exp?.experimentId ?? exp?.id ?? "",
|
|
|
|
exp?.experiment_id ?? exp?.experimentId ?? exp?.id ?? "",
|
|
|
|
);
|
|
|
|
);
|
|
|
|
currentExperimentId.value = expId;
|
|
|
|
currentExperimentId.value = expId;
|
|
|
|
|
|
|
|
|
|
|
|
if (!expId) {
|
|
|
|
if (!expId) {
|
|
|
|
runs.value = [];
|
|
|
|
runs.value = [];
|
|
|
|
selectedRunId.value = "";
|
|
|
|
selectedRunId.value = "";
|
|
|
|
@ -325,10 +355,8 @@ async function fetchRuns(expName?: string) {
|
|
|
|
const body = unwrapAxiosLike(await MlflowService.getRuns(expId));
|
|
|
|
const body = unwrapAxiosLike(await MlflowService.getRuns(expId));
|
|
|
|
const list =
|
|
|
|
const list =
|
|
|
|
body?.runs ?? body?.data?.runs ?? (Array.isArray(body) ? body : []);
|
|
|
|
body?.runs ?? body?.data?.runs ?? (Array.isArray(body) ? body : []);
|
|
|
|
console.log("bodybody", body);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const matched = (Array.isArray(list) ? list : []).filter(
|
|
|
|
const matched = (Array.isArray(list) ? list : []).filter(
|
|
|
|
(r: any) => getTag(r, "kubeflow_run_id") === parentRunId,
|
|
|
|
(r: any) => getTag(r, "experiment_id") === parentRunId,
|
|
|
|
);
|
|
|
|
);
|
|
|
|
const final = matched.length > 0 ? matched : list;
|
|
|
|
const final = matched.length > 0 ? matched : list;
|
|
|
|
const sorted = [...final].sort(
|
|
|
|
const sorted = [...final].sort(
|
|
|
|
@ -470,6 +498,14 @@ function createTracesByRun(metricKeys: string[], runsData: RunDetailType[]) {
|
|
|
|
};
|
|
|
|
};
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const normalizeArray = (vals: (number | null)[]) => {
|
|
|
|
|
|
|
|
const xs = vals.filter((v): v is number => Number.isFinite(v as number));
|
|
|
|
|
|
|
|
if (xs.length === 0) return vals;
|
|
|
|
|
|
|
|
const min = Math.min(...xs),
|
|
|
|
|
|
|
|
max = Math.max(...xs);
|
|
|
|
|
|
|
|
if (max === min) return vals.map((v) => (v == null ? v : 1));
|
|
|
|
|
|
|
|
return vals.map((v) => (v == null ? v : (v - min) / (max - min)));
|
|
|
|
|
|
|
|
};
|
|
|
|
function drawCompareChart() {
|
|
|
|
function drawCompareChart() {
|
|
|
|
if (!elCompare.value) return;
|
|
|
|
if (!elCompare.value) return;
|
|
|
|
const metricKeys = activeMetricKeys.value;
|
|
|
|
const metricKeys = activeMetricKeys.value;
|
|
|
|
@ -484,33 +520,6 @@ function drawCompareChart() {
|
|
|
|
? createTracesByMetric(metricKeys, runsData)
|
|
|
|
? createTracesByMetric(metricKeys, runsData)
|
|
|
|
: createTracesByRun(metricKeys, runsData);
|
|
|
|
: createTracesByRun(metricKeys, runsData);
|
|
|
|
|
|
|
|
|
|
|
|
if (compareChartMode.value === "byMetric") {
|
|
|
|
|
|
|
|
const varianceOrder = metricKeys
|
|
|
|
|
|
|
|
.map((k, idx) => {
|
|
|
|
|
|
|
|
const vals = traces
|
|
|
|
|
|
|
|
.map((t) => t.y[idx])
|
|
|
|
|
|
|
|
.filter((v: any) => v != null) as number[];
|
|
|
|
|
|
|
|
const min = Math.min(...vals),
|
|
|
|
|
|
|
|
max = Math.max(...vals);
|
|
|
|
|
|
|
|
return { k, spread: max - min };
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
.sort((a, b) => b.spread - a.spread)
|
|
|
|
|
|
|
|
.map((v) => v.k);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
traces.forEach((t) => {
|
|
|
|
|
|
|
|
t.x = varianceOrder;
|
|
|
|
|
|
|
|
t.y = varianceOrder.map((mk: string) => t.y[metricKeys.indexOf(mk)]);
|
|
|
|
|
|
|
|
if (t.text)
|
|
|
|
|
|
|
|
t.text = varianceOrder.map(
|
|
|
|
|
|
|
|
(mk: string) => t.text![metricKeys.indexOf(mk)],
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
if (t.customdata)
|
|
|
|
|
|
|
|
t.customdata = varianceOrder.map(
|
|
|
|
|
|
|
|
(mk: string) => t.customdata![metricKeys.indexOf(mk)],
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Plotly.react(
|
|
|
|
Plotly.react(
|
|
|
|
elCompare.value,
|
|
|
|
elCompare.value,
|
|
|
|
traces,
|
|
|
|
traces,
|
|
|
|
@ -519,30 +528,7 @@ function drawCompareChart() {
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* ========= Compare Actions ========= */
|
|
|
|
/* ========= Compare Derived/Actions ========= */
|
|
|
|
function openCompareDialog() {
|
|
|
|
|
|
|
|
compareSelectedRunIds.value = Array.from(
|
|
|
|
|
|
|
|
new Set([selectedRunId.value].filter(Boolean)),
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
compareSelectedMetricKeys.value = [];
|
|
|
|
|
|
|
|
compareDialog.value = true;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
async function loadCompareData() {
|
|
|
|
|
|
|
|
if (!compareDialog.value) return;
|
|
|
|
|
|
|
|
compareLoading.value = true;
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
|
|
|
await Promise.all(compareSelectedRunIds.value.map(ensureRunDetail));
|
|
|
|
|
|
|
|
if (compareSelectedMetricKeys.value.length === 0) {
|
|
|
|
|
|
|
|
compareSelectedMetricKeys.value = commonMetricKeys.value.slice(0, 6);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
await nextTick();
|
|
|
|
|
|
|
|
drawCompareChart();
|
|
|
|
|
|
|
|
} finally {
|
|
|
|
|
|
|
|
compareLoading.value = false;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* ========= Derived for Compare ========= */
|
|
|
|
|
|
|
|
const compareRuns = computed<RunDetailType[]>(
|
|
|
|
const compareRuns = computed<RunDetailType[]>(
|
|
|
|
() =>
|
|
|
|
() =>
|
|
|
|
compareSelectedRunIds.value
|
|
|
|
compareSelectedRunIds.value
|
|
|
|
@ -565,6 +551,28 @@ const activeMetricKeys = computed(() =>
|
|
|
|
: commonMetricKeys.value,
|
|
|
|
: commonMetricKeys.value,
|
|
|
|
);
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function openCompareDialog() {
|
|
|
|
|
|
|
|
compareSelectedRunIds.value = Array.from(
|
|
|
|
|
|
|
|
new Set([selectedRunId.value].filter(Boolean)),
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
compareSelectedMetricKeys.value = [];
|
|
|
|
|
|
|
|
compareDialog.value = true;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
async function loadCompareData() {
|
|
|
|
|
|
|
|
if (!compareDialog.value) return;
|
|
|
|
|
|
|
|
compareLoading.value = true;
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
|
|
|
await Promise.all(compareSelectedRunIds.value.map(ensureRunDetail));
|
|
|
|
|
|
|
|
if (compareSelectedMetricKeys.value.length === 0) {
|
|
|
|
|
|
|
|
compareSelectedMetricKeys.value = commonMetricKeys.value.slice(0, 6);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
await nextTick();
|
|
|
|
|
|
|
|
drawCompareChart();
|
|
|
|
|
|
|
|
} finally {
|
|
|
|
|
|
|
|
compareLoading.value = false;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* ========= Auth ========= */
|
|
|
|
/* ========= Auth ========= */
|
|
|
|
function restoreAuthFromStorage() {
|
|
|
|
function restoreAuthFromStorage() {
|
|
|
|
const raw = localStorage.getItem(AUTH_KEY);
|
|
|
|
const raw = localStorage.getItem(AUTH_KEY);
|
|
|
|
@ -607,7 +615,6 @@ const handleLogin = async () => {
|
|
|
|
loginError.value = "로그인에 실패했습니다. 아이디/비밀번호를 확인하세요.";
|
|
|
|
loginError.value = "로그인에 실패했습니다. 아이디/비밀번호를 확인하세요.";
|
|
|
|
return;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const toSave: ExternalAuth = {
|
|
|
|
const toSave: ExternalAuth = {
|
|
|
|
id: payload.id ?? id,
|
|
|
|
id: payload.id ?? id,
|
|
|
|
name: payload.name ?? id,
|
|
|
|
name: payload.name ?? id,
|
|
|
|
@ -631,22 +638,18 @@ const handleLogin = async () => {
|
|
|
|
|
|
|
|
|
|
|
|
/* ========= Deployment Modal ========= */
|
|
|
|
/* ========= Deployment Modal ========= */
|
|
|
|
const openDeploymentModal = async (fullPath?: string) => {
|
|
|
|
const openDeploymentModal = async (fullPath?: string) => {
|
|
|
|
// 1) 경로가 들어오면 즉시 URI 조합/저장
|
|
|
|
|
|
|
|
if (fullPath) {
|
|
|
|
if (fullPath) {
|
|
|
|
const uri = buildArtifactUri(fullPath);
|
|
|
|
const uri = buildArtifactUri(fullPath);
|
|
|
|
lastArtifactUri.value = uri;
|
|
|
|
lastArtifactUri.value = uri;
|
|
|
|
pendingArtifactPath.value = uri;
|
|
|
|
pendingArtifactPath.value = uri;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// 2) 비로그인 → 로그인 우선
|
|
|
|
|
|
|
|
if (!isAuthenticated.value) {
|
|
|
|
if (!isAuthenticated.value) {
|
|
|
|
loginDialog.value = true;
|
|
|
|
loginDialog.value = true;
|
|
|
|
return;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// 3) 로그인 후 pending 값 복원
|
|
|
|
|
|
|
|
if (!fullPath && pendingArtifactPath.value)
|
|
|
|
if (!fullPath && pendingArtifactPath.value)
|
|
|
|
lastArtifactUri.value = pendingArtifactPath.value;
|
|
|
|
lastArtifactUri.value = pendingArtifactPath.value;
|
|
|
|
|
|
|
|
|
|
|
|
// 4) 모달 열고 패키지 로딩
|
|
|
|
|
|
|
|
isEditVisible.value = true;
|
|
|
|
isEditVisible.value = true;
|
|
|
|
packagesError.value = "";
|
|
|
|
packagesError.value = "";
|
|
|
|
packageOptions.value = [];
|
|
|
|
packageOptions.value = [];
|
|
|
|
@ -668,7 +671,6 @@ const openDeploymentModal = async (fullPath?: string) => {
|
|
|
|
try {
|
|
|
|
try {
|
|
|
|
packagesLoading.value = true;
|
|
|
|
packagesLoading.value = true;
|
|
|
|
const res = await ExternalAuthControllerService.search(auth.id, auth.token);
|
|
|
|
const res = await ExternalAuthControllerService.search(auth.id, auth.token);
|
|
|
|
|
|
|
|
|
|
|
|
const body = res?.data ?? res;
|
|
|
|
const body = res?.data ?? res;
|
|
|
|
const list = body?.data?.data ?? body?.data ?? body?.result ?? body ?? [];
|
|
|
|
const list = body?.data?.data ?? body?.data ?? body?.result ?? body ?? [];
|
|
|
|
const arr = Array.isArray(list) ? list : [];
|
|
|
|
const arr = Array.isArray(list) ? list : [];
|
|
|
|
@ -688,11 +690,10 @@ const closeCreateModal = () => {
|
|
|
|
isEditVisible.value = false;
|
|
|
|
isEditVisible.value = false;
|
|
|
|
};
|
|
|
|
};
|
|
|
|
const saveData = (payload: any) => {
|
|
|
|
const saveData = (payload: any) => {
|
|
|
|
// 필요 시 서버에 저장/리프레시 등 처리
|
|
|
|
|
|
|
|
console.log("[DeploymentDialog payload]", payload);
|
|
|
|
console.log("[DeploymentDialog payload]", payload);
|
|
|
|
// 완료 후 모달 닫기
|
|
|
|
|
|
|
|
isEditVisible.value = false;
|
|
|
|
isEditVisible.value = false;
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
/* ========= Timeline (fallback) ========= */
|
|
|
|
/* ========= Timeline (fallback) ========= */
|
|
|
|
const rawHistory = computed<any[]>(() => {
|
|
|
|
const rawHistory = computed<any[]>(() => {
|
|
|
|
const h =
|
|
|
|
const h =
|
|
|
|
@ -746,10 +747,12 @@ watch(
|
|
|
|
() => mainTab.value,
|
|
|
|
() => mainTab.value,
|
|
|
|
async (t) => {
|
|
|
|
async (t) => {
|
|
|
|
if (t === "viz" || t === "artifacts") await refreshIfActive();
|
|
|
|
if (t === "viz" || t === "artifacts") await refreshIfActive();
|
|
|
|
|
|
|
|
if (t === "artifacts" && selectedRunId.value) {
|
|
|
|
|
|
|
|
await fetchArtifactsTwoStep(selectedRunId.value);
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{ immediate: true },
|
|
|
|
{ immediate: true },
|
|
|
|
);
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
watch(
|
|
|
|
watch(
|
|
|
|
() => props.experimentInfo,
|
|
|
|
() => props.experimentInfo,
|
|
|
|
async () => {
|
|
|
|
async () => {
|
|
|
|
@ -757,7 +760,12 @@ watch(
|
|
|
|
await refreshIfActive();
|
|
|
|
await refreshIfActive();
|
|
|
|
},
|
|
|
|
},
|
|
|
|
);
|
|
|
|
);
|
|
|
|
watch(selectedRunId, (id) => fetchRunDetail(id));
|
|
|
|
watch(selectedRunId, async (id) => {
|
|
|
|
|
|
|
|
fetchRunDetail(id);
|
|
|
|
|
|
|
|
if (mainTab.value === "artifacts" && id) {
|
|
|
|
|
|
|
|
await fetchArtifactsTwoStep(id);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
watch(vizTab, async (t) => {
|
|
|
|
watch(vizTab, async (t) => {
|
|
|
|
if (mainTab.value === "viz" && t === "metrics") {
|
|
|
|
if (mainTab.value === "viz" && t === "metrics") {
|
|
|
|
await nextTick();
|
|
|
|
await nextTick();
|
|
|
|
@ -968,7 +976,6 @@ const artifactsLoading = ref(false);
|
|
|
|
clear-icon=""
|
|
|
|
clear-icon=""
|
|
|
|
style="min-width: 280px; max-width: 440px"
|
|
|
|
style="min-width: 280px; max-width: 440px"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
<!-- Compare button -->
|
|
|
|
|
|
|
|
<v-btn
|
|
|
|
<v-btn
|
|
|
|
color="primary"
|
|
|
|
color="primary"
|
|
|
|
variant="elevated"
|
|
|
|
variant="elevated"
|
|
|
|
@ -1130,9 +1137,8 @@ const artifactsLoading = ref(false);
|
|
|
|
<v-card flat class="mb-6">
|
|
|
|
<v-card flat class="mb-6">
|
|
|
|
<v-card-title
|
|
|
|
<v-card-title
|
|
|
|
class="py-2 px-0 text-button text-medium-emphasis"
|
|
|
|
class="py-2 px-0 text-button text-medium-emphasis"
|
|
|
|
|
|
|
|
>Model Metrics (selected run)</v-card-title
|
|
|
|
>
|
|
|
|
>
|
|
|
|
Model Metrics (selected run)
|
|
|
|
|
|
|
|
</v-card-title>
|
|
|
|
|
|
|
|
<v-table density="comfortable">
|
|
|
|
<v-table density="comfortable">
|
|
|
|
<thead>
|
|
|
|
<thead>
|
|
|
|
<tr>
|
|
|
|
<tr>
|
|
|
|
@ -1161,9 +1167,8 @@ const artifactsLoading = ref(false);
|
|
|
|
<v-card flat class="mb-6">
|
|
|
|
<v-card flat class="mb-6">
|
|
|
|
<v-card-title
|
|
|
|
<v-card-title
|
|
|
|
class="py-2 px-0 text-button text-medium-emphasis"
|
|
|
|
class="py-2 px-0 text-button text-medium-emphasis"
|
|
|
|
|
|
|
|
>Metrics (bar chart)</v-card-title
|
|
|
|
>
|
|
|
|
>
|
|
|
|
Metrics (bar chart)
|
|
|
|
|
|
|
|
</v-card-title>
|
|
|
|
|
|
|
|
<div
|
|
|
|
<div
|
|
|
|
ref="elMetrics"
|
|
|
|
ref="elMetrics"
|
|
|
|
style="width: 100%; height: 400px"
|
|
|
|
style="width: 100%; height: 400px"
|
|
|
|
@ -1173,19 +1178,19 @@ const artifactsLoading = ref(false);
|
|
|
|
</v-window-item>
|
|
|
|
</v-window-item>
|
|
|
|
|
|
|
|
|
|
|
|
<v-window-item value="scatter">
|
|
|
|
<v-window-item value="scatter">
|
|
|
|
<v-card-text class="px-6 py-10 text-medium-emphasis">
|
|
|
|
<v-card-text class="px-6 py-10 text-medium-emphasis"
|
|
|
|
(준비중) X/Y 축 선택 후 산점도 표시
|
|
|
|
>(준비중) X/Y 축 선택 후 산점도 표시</v-card-text
|
|
|
|
</v-card-text>
|
|
|
|
>
|
|
|
|
</v-window-item>
|
|
|
|
</v-window-item>
|
|
|
|
<v-window-item value="box">
|
|
|
|
<v-window-item value="box">
|
|
|
|
<v-card-text class="px-6 py-10 text-medium-emphasis">
|
|
|
|
<v-card-text class="px-6 py-10 text-medium-emphasis"
|
|
|
|
(준비중) 메트릭 분포 Box Plot
|
|
|
|
>(준비중) 메트릭 분포 Box Plot</v-card-text
|
|
|
|
</v-card-text>
|
|
|
|
>
|
|
|
|
</v-window-item>
|
|
|
|
</v-window-item>
|
|
|
|
<v-window-item value="contour">
|
|
|
|
<v-window-item value="contour">
|
|
|
|
<v-card-text class="px-6 py-10 text-medium-emphasis">
|
|
|
|
<v-card-text class="px-6 py-10 text-medium-emphasis"
|
|
|
|
(준비중) 2D/3D Contour Plot
|
|
|
|
>(준비중) 2D/3D Contour Plot</v-card-text
|
|
|
|
</v-card-text>
|
|
|
|
>
|
|
|
|
</v-window-item>
|
|
|
|
</v-window-item>
|
|
|
|
</v-window>
|
|
|
|
</v-window>
|
|
|
|
|
|
|
|
|
|
|
|
@ -1195,7 +1200,7 @@ const artifactsLoading = ref(false);
|
|
|
|
</v-card>
|
|
|
|
</v-card>
|
|
|
|
</v-window-item>
|
|
|
|
</v-window-item>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- ========= Artifacts ========= -->
|
|
|
|
<!-- ========= Artifacts (Two-step, Flat) ========= -->
|
|
|
|
<v-window-item value="artifacts">
|
|
|
|
<v-window-item value="artifacts">
|
|
|
|
<v-card class="rounded-lg pa-8 w-100">
|
|
|
|
<v-card class="rounded-lg pa-8 w-100">
|
|
|
|
<v-card-text>
|
|
|
|
<v-card-text>
|
|
|
|
@ -1221,8 +1226,16 @@ const artifactsLoading = ref(false);
|
|
|
|
style="min-width: 280px; max-width: 440px"
|
|
|
|
style="min-width: 280px; max-width: 440px"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 로그인 상태 표시 -->
|
|
|
|
|
|
|
|
<div class="d-flex align-center ga-2 ml-auto">
|
|
|
|
<div class="d-flex align-center ga-2 ml-auto">
|
|
|
|
|
|
|
|
<v-btn
|
|
|
|
|
|
|
|
size="small"
|
|
|
|
|
|
|
|
variant="tonal"
|
|
|
|
|
|
|
|
:loading="twoStepLoading"
|
|
|
|
|
|
|
|
@click="fetchArtifactsTwoStep(selectedRunId)"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
Refresh
|
|
|
|
|
|
|
|
</v-btn>
|
|
|
|
|
|
|
|
|
|
|
|
<v-chip
|
|
|
|
<v-chip
|
|
|
|
v-if="isAuthenticated"
|
|
|
|
v-if="isAuthenticated"
|
|
|
|
color="success"
|
|
|
|
color="success"
|
|
|
|
@ -1233,7 +1246,6 @@ const artifactsLoading = ref(false);
|
|
|
|
<v-icon start size="16">mdi-check-decagram</v-icon>
|
|
|
|
<v-icon start size="16">mdi-check-decagram</v-icon>
|
|
|
|
{{ externalAuth?.name || externalAuth?.id }}
|
|
|
|
{{ externalAuth?.name || externalAuth?.id }}
|
|
|
|
</v-chip>
|
|
|
|
</v-chip>
|
|
|
|
|
|
|
|
|
|
|
|
<v-btn
|
|
|
|
<v-btn
|
|
|
|
v-if="isAuthenticated"
|
|
|
|
v-if="isAuthenticated"
|
|
|
|
size="small"
|
|
|
|
size="small"
|
|
|
|
@ -1254,7 +1266,7 @@ const artifactsLoading = ref(false);
|
|
|
|
</v-btn>
|
|
|
|
</v-btn>
|
|
|
|
|
|
|
|
|
|
|
|
<v-progress-circular
|
|
|
|
<v-progress-circular
|
|
|
|
v-if="artifactsLoading || loadingRuns || loadingRunDetail"
|
|
|
|
v-if="twoStepLoading || loadingRuns || loadingRunDetail"
|
|
|
|
indeterminate
|
|
|
|
indeterminate
|
|
|
|
size="16"
|
|
|
|
size="16"
|
|
|
|
class="ml-2"
|
|
|
|
class="ml-2"
|
|
|
|
@ -1264,157 +1276,114 @@ const artifactsLoading = ref(false);
|
|
|
|
</v-row>
|
|
|
|
</v-row>
|
|
|
|
|
|
|
|
|
|
|
|
<v-alert
|
|
|
|
<v-alert
|
|
|
|
v-if="!historyArtifactPath"
|
|
|
|
v-if="twoStepError"
|
|
|
|
type="info"
|
|
|
|
type="error"
|
|
|
|
variant="tonal"
|
|
|
|
variant="tonal"
|
|
|
|
class="mb-4"
|
|
|
|
class="mb-3"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
이 실행에서 <code>mlflow.log-model.history</code> 태그를 찾을 수
|
|
|
|
{{ twoStepError }}
|
|
|
|
없어요.
|
|
|
|
|
|
|
|
</v-alert>
|
|
|
|
</v-alert>
|
|
|
|
|
|
|
|
|
|
|
|
<template v-else>
|
|
|
|
|
|
|
|
<div class="text-body-2 mb-2">
|
|
|
|
|
|
|
|
Path:
|
|
|
|
|
|
|
|
<v-chip size="small" variant="tonal" class="ml-1">{{
|
|
|
|
|
|
|
|
historyArtifactPath
|
|
|
|
|
|
|
|
}}</v-chip>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<v-card variant="tonal">
|
|
|
|
<v-card variant="tonal">
|
|
|
|
<v-card-title class="py-2 px-4">Artifacts</v-card-title>
|
|
|
|
<v-card-title class="py-2 px-4">Artifacts</v-card-title>
|
|
|
|
<v-divider />
|
|
|
|
<v-divider />
|
|
|
|
|
|
|
|
|
|
|
|
<v-card-text class="px-0">
|
|
|
|
<v-card-text class="px-0">
|
|
|
|
<!-- 히스토리에 아무것도 없을 때 -->
|
|
|
|
<v-table density="comfortable">
|
|
|
|
<v-alert
|
|
|
|
<thead>
|
|
|
|
v-if="!loadingRunDetail && artifactGroups.length === 0"
|
|
|
|
<tr>
|
|
|
|
type="info"
|
|
|
|
<th style="width: 48px"></th>
|
|
|
|
variant="tonal"
|
|
|
|
<th>Path</th>
|
|
|
|
class="ma-3"
|
|
|
|
<th style="width: 160px" class="text-right">Size</th>
|
|
|
|
density="comfortable"
|
|
|
|
<th style="width: 180px" class="text-right">Actions</th>
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
</thead>
|
|
|
|
|
|
|
|
<tbody>
|
|
|
|
|
|
|
|
<tr v-if="twoStepLoading">
|
|
|
|
|
|
|
|
<td
|
|
|
|
|
|
|
|
colspan="4"
|
|
|
|
|
|
|
|
class="text-center py-6 text-medium-emphasis"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
No files
|
|
|
|
Loading…
|
|
|
|
</v-alert>
|
|
|
|
</td>
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 여러 폴더 -->
|
|
|
|
<template v-else>
|
|
|
|
<v-list
|
|
|
|
<tr v-if="!artifactGroups.length">
|
|
|
|
v-else-if="artifactGroups.length > 1"
|
|
|
|
<td
|
|
|
|
lines="one"
|
|
|
|
colspan="4"
|
|
|
|
density="comfortable"
|
|
|
|
class="text-center py-6 text-medium-emphasis"
|
|
|
|
class="file-list"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<template v-for="(g, gi) in artifactGroups" :key="g.base">
|
|
|
|
|
|
|
|
<v-list-subheader class="d-flex align-center">
|
|
|
|
|
|
|
|
<v-icon class="mr-2">mdi-folder</v-icon>
|
|
|
|
|
|
|
|
{{ g.base }}
|
|
|
|
|
|
|
|
</v-list-subheader>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<v-list-item
|
|
|
|
|
|
|
|
v-for="(f, i) in g.items"
|
|
|
|
|
|
|
|
:key="f.path"
|
|
|
|
|
|
|
|
:ripple="false"
|
|
|
|
|
|
|
|
class="file-row pl-8"
|
|
|
|
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<template #prepend>
|
|
|
|
No Artifacts
|
|
|
|
<v-icon
|
|
|
|
</td>
|
|
|
|
:icon="
|
|
|
|
</tr>
|
|
|
|
fileIconByName(f.path.split('/').pop() || '')
|
|
|
|
|
|
|
|
"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<v-list-item-title class="file-name">
|
|
|
|
|
|
|
|
{{ f.path.replace(g.base + "/", "") }}
|
|
|
|
|
|
|
|
</v-list-item-title>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<v-list-item-subtitle class="file-size">
|
|
|
|
|
|
|
|
{{ (f.file_size ?? 0).toLocaleString() }} bytes
|
|
|
|
|
|
|
|
</v-list-item-subtitle>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<template #append>
|
|
|
|
|
|
|
|
<IconDownloadBtn
|
|
|
|
|
|
|
|
@onClick="onClickArtifact(f.path)"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
<IconDeployBtn
|
|
|
|
|
|
|
|
class="ml-2"
|
|
|
|
|
|
|
|
:tooltip="
|
|
|
|
|
|
|
|
isAuthenticated ? 'Deploy' : 'Login required'
|
|
|
|
|
|
|
|
"
|
|
|
|
|
|
|
|
@onClick="openDeploymentModal(f.path)"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
</v-list-item>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<v-divider
|
|
|
|
<!-- 디렉터리 헤더 -->
|
|
|
|
v-if="gi < artifactGroups.length - 1"
|
|
|
|
<template v-for="grp in artifactGroups" :key="grp.dir">
|
|
|
|
class="my-2"
|
|
|
|
<tr class="group-row">
|
|
|
|
/>
|
|
|
|
<td class="text-center">
|
|
|
|
</template>
|
|
|
|
<v-icon>mdi-folder</v-icon>
|
|
|
|
</v-list>
|
|
|
|
</td>
|
|
|
|
|
|
|
|
<td>
|
|
|
|
|
|
|
|
<strong>{{ grp.dir }}</strong>
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
<td class="text-right"></td>
|
|
|
|
|
|
|
|
<td />
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 폴더 1개 -->
|
|
|
|
<!-- 하위(폴더/파일) -->
|
|
|
|
<v-list
|
|
|
|
<tr
|
|
|
|
v-else
|
|
|
|
v-for="(it, idx) in grp.files"
|
|
|
|
lines="one"
|
|
|
|
:key="grp.dir + '-' + idx"
|
|
|
|
density="comfortable"
|
|
|
|
>
|
|
|
|
class="file-list"
|
|
|
|
<!-- 아이콘 전용 칸 제거, 경로 칸이 아이콘 칸까지 흡수 -->
|
|
|
|
|
|
|
|
<td colspan="2">
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
|
|
|
class="path-cell"
|
|
|
|
|
|
|
|
:style="{
|
|
|
|
|
|
|
|
paddingLeft: `${18 * (1 + (it.depth ?? 0))}px`,
|
|
|
|
|
|
|
|
}"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<v-list-subheader class="d-flex align-center">
|
|
|
|
|
|
|
|
<v-icon class="mr-2">mdi-folder</v-icon>
|
|
|
|
|
|
|
|
{{ historyArtifactPath }}
|
|
|
|
|
|
|
|
</v-list-subheader>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<template v-for="(f, i) in artifactItems" :key="f.path">
|
|
|
|
|
|
|
|
<v-list-item :ripple="false" class="file-row pl-8">
|
|
|
|
|
|
|
|
<template #prepend>
|
|
|
|
|
|
|
|
<v-icon
|
|
|
|
<v-icon
|
|
|
|
:icon="
|
|
|
|
:icon="it.is_dir ? 'mdi-folder' : FILE_ICON"
|
|
|
|
fileIconByName(
|
|
|
|
size="18"
|
|
|
|
historyArtifactPath &&
|
|
|
|
class="mr-2"
|
|
|
|
f.path.startsWith(historyArtifactPath + '/')
|
|
|
|
|
|
|
|
? f.path.slice(
|
|
|
|
|
|
|
|
historyArtifactPath.length + 1,
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
: f.path,
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
"
|
|
|
|
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</template>
|
|
|
|
<code class="truncate">{{ it.path }}</code>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<v-list-item-title class="file-name">
|
|
|
|
</td>
|
|
|
|
{{
|
|
|
|
|
|
|
|
historyArtifactPath &&
|
|
|
|
|
|
|
|
f.path.startsWith(historyArtifactPath + "/")
|
|
|
|
|
|
|
|
? f.path.slice(historyArtifactPath.length + 1)
|
|
|
|
|
|
|
|
: f.path
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
</v-list-item-title>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<v-list-item-subtitle class="file-size">
|
|
|
|
<td class="text-right">
|
|
|
|
{{ (f.file_size ?? 0).toLocaleString() }} bytes
|
|
|
|
{{ bytes(it.file_size) }}
|
|
|
|
</v-list-item-subtitle>
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
|
|
<template #append>
|
|
|
|
<td class="text-right">
|
|
|
|
|
|
|
|
<template v-if="!it.is_dir">
|
|
|
|
<IconDownloadBtn
|
|
|
|
<IconDownloadBtn
|
|
|
|
@onClick="onClickArtifact(f.path)"
|
|
|
|
@onClick="onClickArtifact(it.path)"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
<IconDeployBtn
|
|
|
|
<IconDeployBtn
|
|
|
|
class="ml-2"
|
|
|
|
class="ml-2"
|
|
|
|
:tooltip="
|
|
|
|
:tooltip="
|
|
|
|
isAuthenticated ? 'Deploy' : 'Login required'
|
|
|
|
isAuthenticated
|
|
|
|
|
|
|
|
? 'Deploy'
|
|
|
|
|
|
|
|
: 'Login required'
|
|
|
|
"
|
|
|
|
"
|
|
|
|
@onClick="openDeploymentModal(f.path)"
|
|
|
|
@onClick="openDeploymentModal(it.path)"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</v-list-item>
|
|
|
|
<template v-else>
|
|
|
|
|
|
|
|
<v-btn size="small" variant="text" @click="">
|
|
|
|
<v-divider v-if="i < artifactItems.length - 1" />
|
|
|
|
Open
|
|
|
|
|
|
|
|
</v-btn>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</v-list>
|
|
|
|
</tbody>
|
|
|
|
|
|
|
|
</v-table>
|
|
|
|
</v-card-text>
|
|
|
|
</v-card-text>
|
|
|
|
</v-card>
|
|
|
|
</v-card>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
</v-card-text>
|
|
|
|
</v-card-text>
|
|
|
|
|
|
|
|
|
|
|
|
<v-sheet class="d-flex justify-end mb-2">
|
|
|
|
<v-sheet class="d-flex justify-end mb-2">
|
|
|
|
@ -1438,6 +1407,7 @@ const artifactsLoading = ref(false);
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</v-container>
|
|
|
|
</v-container>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 배포 다이얼로그 -->
|
|
|
|
<v-dialog v-model="isEditVisible" max-width="800" persistent>
|
|
|
|
<v-dialog v-model="isEditVisible" max-width="800" persistent>
|
|
|
|
<DeploymentDialog
|
|
|
|
<DeploymentDialog
|
|
|
|
:edit-data="null"
|
|
|
|
:edit-data="null"
|
|
|
|
@ -1452,6 +1422,7 @@ const artifactsLoading = ref(false);
|
|
|
|
:user-option="[]"
|
|
|
|
:user-option="[]"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</v-dialog>
|
|
|
|
</v-dialog>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 로그인 모달 -->
|
|
|
|
<!-- 로그인 모달 -->
|
|
|
|
<v-dialog v-model="loginDialog" max-width="450" persistent>
|
|
|
|
<v-dialog v-model="loginDialog" max-width="450" persistent>
|
|
|
|
<v-card>
|
|
|
|
<v-card>
|
|
|
|
@ -1494,9 +1465,7 @@ const artifactsLoading = ref(false);
|
|
|
|
@keyup.enter.prevent="handleLogin"
|
|
|
|
@keyup.enter.prevent="handleLogin"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div v-if="loginError" class="mt-3 text-error">
|
|
|
|
<div v-if="loginError" class="mt-3 text-error">{{ loginError }}</div>
|
|
|
|
{{ loginError }}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</v-form>
|
|
|
|
</v-form>
|
|
|
|
</v-card-text>
|
|
|
|
</v-card-text>
|
|
|
|
<v-card-actions class="justify-end" style="padding: 16px 24px">
|
|
|
|
<v-card-actions class="justify-end" style="padding: 16px 24px">
|
|
|
|
@ -1515,4 +1484,10 @@ const artifactsLoading = ref(false);
|
|
|
|
:root {
|
|
|
|
:root {
|
|
|
|
--dot-size: 28px;
|
|
|
|
--dot-size: 28px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.group-row {
|
|
|
|
|
|
|
|
background: rgba(255, 255, 255, 0.04);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.child-path {
|
|
|
|
|
|
|
|
padding-left: 18px; /* 들여쓰기로 디렉터리 소속임을 표시 */
|
|
|
|
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|
|
