From f9800c23d14f5e759f621830f12864cb323bab95 Mon Sep 17 00:00:00 2001
From: jschoi <jschoi@cuuva.com>
Date: Wed, 24 Sep 2025 15:03:11 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B0=B0=ED=8F=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../run/executions/ListComponent.vue          | 844 +++++++++---------
 1 file changed, 412 insertions(+), 432 deletions(-)

diff --git a/src/components/templates/run/executions/ListComponent.vue b/src/components/templates/run/executions/ListComponent.vue
index dcc8ef1..e997b37 100644
--- a/src/components/templates/run/executions/ListComponent.vue
+++ b/src/components/templates/run/executions/ListComponent.vue
@@ -1,27 +1,154 @@
 <script setup lang="ts">
-import IconDeleteBtn from "@/components/atoms/button/IconDeleteBtn.vue";
 import IconInfoBtn from "@/components/atoms/button/IconInfoBtn.vue";
-import { onMounted, ref } from "vue";
-import { storage } from "@/utils/storage";
-import ViewComponent from "@/components/templates/run/experiment/ViewComponent.vue";
-import ExperimentCreateDialog from "@/components/atoms/organisms/ExperimentCreateDialog.vue";
-import { ExperimentService } from "@/components/service/management/ExperimentService";
-import { commonStore } from "@/stores/commonStore";
-import { kubeflowRunService } from "@/components/service/management/KubefliwRunService";
+import IconModifyBtn from "@/components/atoms/button/IconModifyBtn.vue";
+import { computed, onMounted, ref, watch } from "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";
+import { ExecutionsService } from "@/components/service/management/ExecutionsService";
+// const store = commonStore();
 
-const store = commonStore();
+const openCompare = ref(false);
 const openView = ref(false);
-const username = ref<string>("");
-const selectedExperiment = ref<{
-  name: string;
-  description: string;
-  createdDate: string;
-  createdID: string;
-  deviceKey: number;
-} | null>(null);
-
-// ===== 헤더 =====
+const runsLoading = ref(false);
+
+// ✅ 파라미터 없이 1회 호출만 해서 콘솔에 출력
+// ✅ 상태 라벨 매핑 (아이콘 로직이 'Succeeded'/'Failed' 기준이라 맞춰줌)
+function 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 || "-";
+  }
+}
+
+// ✅ 시간 포맷/지속시간 유틸
+function fmtStart(start?: string) {
+  if (!start) return "-";
+  const d = new Date(start);
+  if (isNaN(d.getTime())) return start;
+  const yyyy = d.getFullYear();
+  const MM = String(d.getMonth() + 1).padStart(2, "0");
+  const dd = String(d.getDate()).padStart(2, "0");
+  const hh = String(d.getHours()).padStart(2, "0");
+  const mi = String(d.getMinutes()).padStart(2, "0");
+  return `${yyyy}-${MM}-${dd} ${hh}:${mi}`;
+}
+function fmtDuration(start?: string, end?: string) {
+  if (!start || !end) return "-";
+  const ms = new Date(end).getTime() - new Date(start).getTime();
+  if (!isFinite(ms) || ms < 0) return "-";
+  const s = Math.floor(ms / 1000);
+  const h = Math.floor(s / 3600);
+  const m = Math.floor((s % 3600) / 60);
+  const sec = s % 60;
+  const pad = (n: number) => String(n).padStart(2, "0");
+  return `${h}:${pad(m)}:${pad(sec)}`;
+}
+
+// ✅ 모든 Runs 페이징 수집 후 테이블에 주입
+async function loadRunsAll() {
+  runsLoading.value = true;
+  try {
+    const all: any[] = [];
+    const seen = new Set<string>();
+
+    // 첫 페이지부터 page_size 명시 (SDK 케이스 둘 다 지원)
+    let first = await ExecutionsService.search({ pageSize: 79 });
+
+    all.push(...(first?.data?.runs ?? []));
+    let token: string | undefined =
+      first?.data?.next_page_token ?? first?.data?.nextPageToken;
+
+    // 다음 페이지들
+    let guard = 0;
+    while (token && !seen.has(token) && guard < 1000) {
+      seen.add(token);
+
+      // snake_case 우선 호출
+      let page = await ExecutionsService.search({ pageSize: 79 });
+
+      // camelCase만 받는 SDK 대비 폴백
+      if (
+        (!Array.isArray(page?.data?.runs) || page?.data?.runs.length === 0) &&
+        (page?.data?.next_page_token === token ||
+          page?.data?.next_page_token === undefined)
+      ) {
+        page = await ExecutionsService.search({
+          pageToken: token,
+          pageSize: 500,
+        } as any);
+      }
+
+      all.push(...(page?.data?.runs ?? []));
+      token = page?.data?.next_page_token ?? page?.data?.nextPageToken;
+      guard += 1;
+    }
+
+    // 중복 방지(안전)
+    const dedup = Array.from(
+      new Map(all.map((r: any) => [r?.run_id ?? r?.id ?? r?.name, r])).values(),
+    );
+
+    // 👉 테이블 데이터로 매핑해서 그대로 꽂기
+    data.value.results = dedup.map((r: any, idx: number) => ({
+      no: idx + 1,
+      name: r?.display_name ?? r?.name ?? r?.run_id ?? "(no name)",
+      status: toUiStatus(r?.state),
+      duration: fmtDuration(r?.created_at, r?.finished_at),
+      experiment: r?.experiment_id ?? "-",
+      workflow:
+        r?.pipeline_version_reference?.pipeline_id ??
+        r?.pipeline_version_reference?.pipeline_version_id ??
+        "-",
+      startTime: fmtStart(r?.created_at),
+      registryStatus: r?.storage_state ?? "-", // AVAILABLE 등
+      // 필요 시 원본 활용
+      run_id: r?.run_id,
+      raw: r,
+    }));
+
+    // 카운트/페이지 길이 갱신
+    data.value.totalDataLength = data.value.results.length;
+    setPaginationLength();
+
+    console.log(
+      "[Runs] total_size(from API):",
+      first?.data?.total_size ?? first?.data?.totalSize,
+      "fetched:",
+      data.value.results.length,
+    );
+    console.table(
+      data.value.results.slice(0, 50).map((r: any) => ({
+        no: r.no,
+        run_id: r.run_id,
+        name: r.name,
+        status: r.status,
+        startTime: r.startTime,
+        duration: r.duration,
+      })),
+    );
+  } catch (e: any) {
+    console.error("[Runs] 호출 실패:", e?.response?.data ?? e);
+  } finally {
+    runsLoading.value = false;
+  }
+}
+const pagedResults = computed(() => {
+  const { pageNum, pageSize } = data.value.params;
+  const start = (pageNum - 1) * pageSize;
+  return data.value.results.slice(start, start + pageSize);
+});
 const tableHeader = [
   { label: "No", width: "5%", style: "word-break: keep-all;" },
   { label: "Execution Name", width: "20%", style: "word-break: keep-all;" },
@@ -31,23 +158,27 @@ const tableHeader = [
   { label: "Workflow", width: "15%", style: "word-break: keep-all;" },
   { label: "Start Time", width: "15%", style: "word-break: keep-all;" },
   { label: "Registry Status", width: "10%", style: "word-break: keep-all;" },
-  { label: "Action", width: "10%", style: "word-break: keep-all;" },
+  { label: "Action", width: "5%", style: "word-break: keep-all;" },
 ];
-// ===== 검색/페이지네이션 (데이터셋/워크플로우와 '동일') =====
-type SearchType = "전체" | "제목" | "작성자";
 
 const searchOptions = [
-  { label: "전체", value: "전체" as SearchType },
-  { label: "제목", value: "제목" as SearchType },
-  { label: "작성자", value: "작성자" as SearchType },
+  { searchType: "All", searchText: "" },
+  { searchType: "Execution Name", searchText: "name" },
+  { searchType: "Status", searchText: "status" },
+  { searchType: "Duration", searchText: "duration" },
+  { searchType: "Experiment", searchText: "experiment" },
+  { searchType: "Workflow", searchText: "workflow" },
+  { searchType: "Registry Status", searchText: "registryStatus" },
 ];
 
-const SEARCH_TYPE_MAP: Record<SearchType | "", "ALL" | "TITLE" | "AUTHOR"> = {
-  "": "ALL",
-  전체: "ALL",
-  제목: "TITLE",
-  작성자: "AUTHOR",
-};
+const execDialogOpen = ref(false);
+const execMode = ref<"create" | "edit" | "clone">("create");
+const execSelected = ref<any>(null);
+const searchExperimentOptions = [{ searchType: "Experiment", searchText: "" }];
+const searchWorkflowOptions = [{ searchType: "Workflow", searchText: "" }];
+
+const workflowList = ref(["pipeline-a", "pipeline-b", "pipeline-c"]);
+const executionTypes = ref(["One-off", "Recurring"]);
 
 const pageSizeOptions = [
   { text: "10 페이지", value: 10 },
@@ -55,391 +186,190 @@ const pageSizeOptions = [
   { text: "100 페이지", value: 100 },
 ];
 
-// ===== 상태 =====
 const data = ref({
   params: {
     pageNum: 1,
     pageSize: 10,
-    searchType: "전체" as SearchType,
+    searchType: "",
     searchText: "",
   },
-  results: [] as any[],
-  totalElements: 0,
+  results: [],
+  totalDataLength: 0,
   pageLength: 0,
-  modalMode: "" as "create" | "edit" | "",
-  selectedData: null as any,
+  modalMode: "",
+  selectedData: null,
   allSelected: false,
-  selected: [] as any[],
-  isCreateVisible: false,
+  selected: [],
   isModalVisible: false,
   isConfirmDialogVisible: false,
-  userOption: [] as any[],
+  userOption: [],
 });
 
-// ===== 유틸 =====
-function readUsernameFromStorage(): string {
-  try {
-    const raw =
-      storage?.get?.("autoflow-auth") ??
-      storage?.getAuth?.() ??
-      localStorage.getItem("autoflow-auth") ??
-      null;
-    const auth = typeof raw === "string" ? JSON.parse(raw) : raw;
-    const u1 = auth?.userInfo?.username;
-    const u2 = auth?.username;
-    const u3 = auth?.userInfo?.userName;
-    const u4 = auth?.userInfo?.email?.split?.("@")?.[0];
-    return (u1 || u2 || u3 || u4 || "").toString();
-  } catch {
-    return "";
-  }
-}
-const getProjectId = (): number => {
-  const v = Number(localStorage.getItem("projectId"));
-  return Number.isFinite(v) ? v : 0;
+const getCodeList = () => {
+  // UserService.search(data.value.params).then((d) => {
+  //   if (d.status === 200) {
+  //     data.value.userOption = d.data.userList;
+  //   }
+  // });
 };
-const fmtDate = (v?: string) =>
-  v ? String(v).replace("T", " ").slice(0, 19) : "";
-
-// 서버 → 테이블 Row
-// 서버 Execution → 테이블 Row 변환
-const toRow = (r: any, idx: number) => {
-  const fmtStart = (start?: string) => {
-    if (!start) return "-";
-    const d = new Date(start);
-    if (isNaN(d.getTime())) return start;
-    const yyyy = d.getFullYear();
-    const MM = String(d.getMonth() + 1).padStart(2, "0");
-    const dd = String(d.getDate()).padStart(2, "0");
-    const hh = String(d.getHours()).padStart(2, "0");
-    const mi = String(d.getMinutes()).padStart(2, "0");
-    return `${yyyy}-${MM}-${dd} ${hh}:${mi}`;
-  };
-
-  const fmtDuration = (start?: string, end?: string) => {
-    if (!start || !end) return "-";
-    const ms = new Date(end).getTime() - new Date(start).getTime();
-    if (!isFinite(ms) || ms < 0) return "-";
-    const s = Math.floor(ms / 1000);
-    const h = Math.floor(s / 3600);
-    const m = Math.floor((s % 3600) / 60);
-    const sec = s % 60;
-    const pad = (n: number) => String(n).padStart(2, "0");
-    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 { pageNum, pageSize } = data.value.params;
 
-  return {
-    no: (pageNum - 1) * pageSize + (idx + 1),
-    name: r.displayName ?? r.name ?? r.runId ?? "(no name)",
-    status: toUiStatus(r.state),
-    duration: fmtDuration(r.createdAt, r.finishedAt),
-    experiment: r.experimentId ?? "-",
-
-    workflow: r.pipelineId ?? r.pipelineVersionId ?? "-",
-    startTime: fmtStart(r.createdAt),
-    registryStatus: r.storageState ?? "-",
-    run_id: r.runId,
-    raw: r,
-  };
+const getData = () => {
+  const params = { ...data.value.params };
+  if (params.searchType === "" || params.searchText === "") {
+    delete params.searchType;
+    delete params.searchText;
+  }
+  data.value.results = [
+    {
+      no: 11,
+      name: "run-batch32-lr0.001",
+      status: "Succeeded",
+      duration: "0:00:21",
+      experiment: "Baseline Model Training",
+      workflow: "baseline_train_pipeline",
+      startTime: "2025-05-20 10:12",
+      registryStatus: "Registered",
+    },
+    {
+      no: 10,
+      name: "run-batch64-lr0.001",
+      status: "Failed",
+      duration: "0:00:20",
+      experiment: "Baseline Model Training",
+      workflow: "baseline_train_pipeline",
+      startTime: "2025-05-20 09:10",
+      registryStatus: "Not Registered",
+    },
+    {
+      no: 9,
+      name: "run-batch32-lr0.0005",
+      status: "Succeeded",
+      duration: "0:00:21",
+      experiment: "Baseline Model Training",
+      workflow: "baseline_train_pipeline",
+      startTime: "2025-05-19 10:12",
+      registryStatus: "Registered",
+    },
+    {
+      no: 8,
+      name: "run-batch64-lr0.0005",
+      status: "Running",
+      duration: "0:00:20",
+      experiment: "Baseline Model Training",
+      workflow: "baseline_train_pipeline",
+      startTime: "2025-05-18 11:50",
+      registryStatus: "Not Registered",
+    },
+    {
+      no: 7,
+      name: "run-augmented-data",
+      status: "Succeeded",
+      duration: "0:00:20",
+      experiment: "Baseline Model Training",
+      workflow: "baseline_train_pipeline",
+      startTime: "2025-05-17 09:12",
+      registryStatus: "Registered",
+    },
+    {
+      no: 6,
+      name: "run-augmented-data",
+      status: "Succeeded",
+      duration: "0:00:20",
+      experiment: "Baseline Model Training",
+      workflow: "baseline_train_pipeline",
+      startTime: "2025-05-17 09:12",
+      registryStatus: "Registered",
+    },
+    {
+      no: 5,
+      name: "run-augmented-data",
+      status: "Succeeded",
+      duration: "0:00:20",
+      experiment: "Baseline Model Training",
+      workflow: "baseline_train_pipeline",
+      startTime: "2025-05-17 09:12",
+      registryStatus: "Registered",
+    },
+  ];
+  data.value.totalDataLength = data.value.results.length;
+  setPaginationLength();
 };
 
-// async function fetchList() {
-//   const { pageNum, pageSize, searchType, searchText } = data.value.params;
-
-//   const mapped = SEARCH_TYPE_MAP[searchType] || "ALL";
-//   const keyword = (searchText || "").trim();
-//   const needLocalFilter = mapped !== "ALL" && keyword.length > 0;
-
-//   // ✅ 필터 있을 땐 크게 가져와서(예: 1000) 클라에서 필터+재페이지
-//   // ✅ 필터 없으면 서버 0-based 페이징 그대로
-//   const reqPage = needLocalFilter ? 0 : pageNum ;
-//   const reqSize = needLocalFilter ? 1000 : pageSize;
-
-//   const payload = {
-//     projectId: getProjectId(),
-//     page: reqPage, // ✅ 버그 수정: 계산한 reqPage 사용
-//     size: reqSize, // ✅ 버그 수정: 계산한 reqSize 사용
-//     keyword,
-//     searchType: mapped,
-//     sortField: "id",
-//     sortDirection: "DESC",
-//   };
-
-//   try {
-//     const res = await kubeflowRunService.search(payload as any);
-//     const result = res?.data ?? res;
-
-//     // ✅ 응답 정규화: content | data | runs | [] 모두 처리
-//     let list: any[] = Array.isArray(result)
-//       ? result
-//       : Array.isArray(result?.data)
-//         ? result.data
-//         : Array.isArray(result?.content)
-//           ? result.content
-//           : Array.isArray(result?.runs)
-//             ? result.runs
-//             : [];
-
-//     if (needLocalFilter) {
-//       const kw = keyword.toLowerCase();
-
-//       if (mapped === "TITLE") {
-//         list = list.filter((r: any) =>
-//           String(r?.displayName ?? r?.name ?? r?.runId ?? "")
-//             .toLowerCase()
-//             .includes(kw),
-//         );
-//       } else if (mapped === "AUTHOR") {
-//         list = list.filter((r: any) =>
-//           String(r?.regUserId ?? r?.createdBy ?? r?.serviceAccount ?? "")
-//             .toLowerCase()
-//             .includes(kw),
-//         );
-//       }
-
-//       // ✅ 로컬 재페이지 (페이지 안전 동기화)
-//       const total = list.length;
-//       const pages = Math.max(1, Math.ceil(total / pageSize));
-//       const safePage = Math.min(Math.max(1, pageNum), pages);
-//       const start = (safePage - 1) * pageSize;
-//       const slice = list.slice(start, start + pageSize);
-
-//       data.value.params.pageNum = safePage;
-//       data.value.results = slice.map((r, i) => toRow(r, i));
-//       data.value.totalElements = total;
-//       data.value.pageLength = pages;
-//       return;
-//     }
-
-//     // ✅ 서버 페이징 그대로 사용
-//     const totalElements =
-//       typeof result?.totalElements === "number"
-//         ? result.totalElements
-//         : list.length;
-//     const totalPages =
-//       typeof result?.totalPages === "number"
-//         ? Math.max(1, result.totalPages)
-//         : Math.max(1, Math.ceil(totalElements / pageSize));
-
-//     data.value.results = list.map((r, i) => toRow(r, i));
-//     data.value.totalElements = totalElements;
-//     data.value.pageLength = totalPages;
-//   } catch (err) {
-//     console.error("[Executions] 조회 에러:", err);
-//     data.value.results = [];
-//     data.value.totalElements = 0;
-//     data.value.pageLength = 1;
-//   }
-// }
-
-async function fetchList() {
-  const { pageNum, pageSize, searchType, searchText } = data.value.params;
-  const mapped = SEARCH_TYPE_MAP[searchType] || "ALL";
-  const keyword = (searchText || "").trim();
-
-  const payload = {
-    projectId: getProjectId(),
-    page: pageNum - 1, // 0-based
-    size: pageSize,
-    keyword,
-    searchType: mapped,
-    sortField: "id",
-    sortDirection: "DESC",
-  };
-
-  try {
-    const res = await kubeflowRunService.search(payload as any);
-    const result = res?.data ?? res;
-
-    // 1) 응답 정규화
-    //    - Page 객체: { content, totalElements, totalPages }
-    //    - runs 키:   { runs }
-    //    - 루트 배열: []
-    //    - data 배열: { data: [] }
-    let list: any[] = [];
-    let totalElements: number | undefined;
-    let totalPages: number | undefined;
-    let isServerPaged = false;
-
-    if (Array.isArray(result)) {
-      // 루트 배열
-      list = result;
-    } else if (Array.isArray(result?.data)) {
-      // data 배열
-      list = result.data;
-    } else if (Array.isArray(result?.content)) {
-      // 서버 페이징 (Page)
-      list = result.content;
-      totalElements = result.totalElements;
-      totalPages = result.totalPages;
-      isServerPaged = true;
-    } else if (Array.isArray(result?.runs)) {
-      list = result.runs;
-    } else {
-      list = [];
-    }
-
-    if (!isServerPaged) {
-      const total = list.length;
-      const pages = Math.max(1, Math.ceil(total / pageSize));
-      const safePage = Math.min(Math.max(1, pageNum), pages);
-      const start = (safePage - 1) * pageSize;
-      const slice = list.slice(start, start + pageSize);
-
-      data.value.results = slice.map((r, i) => toRow(r, i));
-      data.value.totalElements = total;
-      data.value.pageLength = pages;
-    } else {
-      // 3) 서버 페이징 결과 그대로 적용
-      data.value.results = (list as any[]).map((r, i) => toRow(r, i));
-      data.value.totalElements =
-        typeof totalElements === "number" ? totalElements : list.length;
-      data.value.pageLength =
-        typeof totalPages === "number"
-          ? Math.max(1, totalPages)
-          : Math.max(1, Math.ceil((data.value.totalElements || 0) / pageSize));
-    }
-  } catch (err) {
-    console.error("[Executions] 조회 에러:", err);
-    data.value.results = [];
-    data.value.totalElements = 0;
-    data.value.pageLength = 1;
+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 doSearch = () => {
-  data.value.params.pageNum = 1;
-  fetchList();
 };
-const changePageNum = (page: number) => {
-  data.value.params.pageNum = page;
-  fetchList();
+
+const handleTerminate = () => {
+  alert("Terminate 작업 진행중...");
 };
-const changePageSize = (size: number) => {
-  data.value.params.pageSize = size;
-  data.value.params.pageNum = 1;
-  fetchList();
+const handleRetry = () => {
+  alert("Retry 작업 진행중...");
+};
+const handleClone = () => {
+  alert("Clone 작업 진행중...");
 };
 
-// 삭제/수정 버튼 등(기존 로직 유지)
-const removeData = (value?: Array<{ deviceKey: number }>) => {
-  const removeList = value ?? data.value.selected;
-  if (!removeList || removeList.length === 0) return;
-
-  const ids = removeList.map((x) => x.deviceKey);
-  const removeOne = (id: number) =>
-    ExperimentService.delete(id).then((res) => {
-      if (res.status < 200 || res.status >= 300) return Promise.reject(res);
-    });
-
-  const after = () => {
-    if (
-      ids.length >= data.value.results.length &&
-      data.value.params.pageNum > 1
-    ) {
-      data.value.params.pageNum -= 1;
-    }
-
-    fetchList();
-    data.value.isConfirmDialogVisible = false;
-    data.value.selected = [];
-    data.value.allSelected = false;
-  };
-
-  // 단건/다건 처리
-  if (ids.length === 1) {
-    removeOne(ids[0])
-      .then(() => {
-        store.setSnackbarMsg({
-          color: "success",
-          text: "삭제되었습니다.",
-          result: 200,
-        });
-        after();
-      })
-      .catch((err) => {
-        console.error("삭제 실패:", err);
-        store.setSnackbarMsg({
-          color: "warning",
-          text: "삭제 실패",
-          result: 500,
-        });
-      });
-  } else {
-    Promise.all(ids.map(removeOne))
-      .then(() => {
-        store.setSnackbarMsg({
-          color: "success",
-          text: "모두 삭제되었습니다.",
-          result: 200,
-        });
-      })
-      .catch((err) => {
-        console.error("일부 삭제 실패:", err);
-        store.setSnackbarMsg({
-          color: "warning",
-          text: "일부 삭제 실패",
-          result: 500,
-        });
-      })
-      .finally(after);
-  }
+const changePageNum = (page) => {
+  data.value.params.pageNum = page;
+  getData();
+};
+const openCreateExecution = () => {
+  execMode.value = "create";
+  execSelected.value = null;
+  execDialogOpen.value = true;
 };
 
-// ===== 상세 & 생성 모달 (기존 그대로) =====
-const closeDetail = () => {
+const openComparePage = () => {
+  openCompare.value = true;
   openView.value = false;
-  selectedExperiment.value = null;
 };
-const onSaved = () => fetchList();
-const openDetailModal = (selectedItem: any) => {
-  console.log("[Experiment/List] row clicked:", selectedItem);
-  if (!selectedItem?.deviceKey) {
-    console.warn("[Experiment/List] deviceKey 없음!", selectedItem);
-  }
-  data.value.selectedData = selectedItem;
+const openInfoModal = (item: any) => {
+  execSelected.value = item;
+  console.log("[Parent] 선택된 실행:", item);
   openView.value = true;
+  openCompare.value = false;
 };
-const openCreateModal = () => {
-  data.value.modalMode = "create";
-  data.value.selectedData = {
-    username: username.value,
-    projectId: getProjectId(),
-  };
-  data.value.isCreateVisible = true;
+const openModifyModal = (selectedItem) => {
+  execMode.value = "edit";
+  execDialogOpen.value = true;
 };
-const closeModal = () => {
-  data.value.isCreateVisible = false;
+
+const openDownloadModal = () => {
   data.value.selectedData = null;
+  data.value.modalMode = "download";
+};
+function closeCompare() {
+  openCompare.value = false;
+}
+function closeView() {
+  openView.value = false;
+}
+
+const getSelectedAllData = () => {
+  data.value.selected = data.value.allSelected
+    ? data.value.results.map((item) => {
+        return {
+          deviceKey: item.deviceKey,
+        };
+      })
+    : [];
 };
 
 onMounted(() => {
-  username.value = readUsernameFromStorage();
-  fetchList();
+  loadRunsAll();
+  getCodeList();
 });
 </script>
 
 <template>
-  <div class="w-100" v-if="!openView">
+  <div class="w-100" v-if="!openCompare && !openView">
     <v-container fluid class="h-100 pa-5 d-flex flex-column align-center">
       <v-card
         flat
@@ -452,9 +382,7 @@ onMounted(() => {
             </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
@@ -467,12 +395,41 @@ onMounted(() => {
                   label="검색조건"
                   density="compact"
                   :items="searchOptions"
-                  item-title="label"
-                  item-value="value"
+                  item-title="searchType"
+                  item-value="searchText"
                   hide-details
-                />
+                ></v-select>
+              </v-responsive>
+              <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="searchExperimentOptions"
+                  item-title="searchType"
+                  item-value="searchText"
+                  hide-details
+                ></v-select>
+              </v-responsive>
+              <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="searchWorkflowOptions"
+                  item-title="searchType"
+                  item-value="searchText"
+                  hide-details
+                ></v-select>
               </v-responsive>
-
               <v-responsive min-width="540" max-width="540">
                 <v-text-field
                   v-model="data.params.searchText"
@@ -482,8 +439,8 @@ onMounted(() => {
                   required
                   class="mt-3 mb-3"
                   hide-details
-                  @keyup.enter="doSearch"
-                />
+                  @keyup.enter="changePageNum(1)"
+                ></v-text-field>
               </v-responsive>
 
               <div class="ml-3">
@@ -491,15 +448,14 @@ onMounted(() => {
                   size="large"
                   color="primary"
                   :rounded="5"
-                  @click="doSearch"
+                  @click="changePageNum(1)"
                 >
-                  <v-icon>mdi-magnify</v-icon>
+                  <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"
           >
@@ -508,8 +464,8 @@ onMounted(() => {
                 class="d-flex align-center mr-3 mb-2 bg-shades-transparent"
               >
                 <v-chip color="primary"
-                  >총 {{ data.totalElements.toLocaleString() }}개</v-chip
-                >
+                  >총 {{ data.totalDataLength.toLocaleString() }}개
+                </v-chip>
               </v-sheet>
               <v-sheet class="bg-shades-transparent">
                 <v-responsive max-width="140" min-width="140" class="mb-2">
@@ -522,20 +478,28 @@ onMounted(() => {
                     variant="outlined"
                     color="primary"
                     hide-details
-                    @update:model-value="changePageSize"
-                  />
+                    @update:model-value="changePageNum(1)"
+                  ></v-select>
                 </v-responsive>
               </v-sheet>
             </v-sheet>
-
-            <!-- <v-sheet class="justify-end mb-2">
-              <v-btn color="primary" @click="openCreateModal"
-                >Create Experiment</v-btn
-              >
-            </v-sheet> -->
+            <v-sheet class="justify-end mb-2 mr-3" @click="handleTerminate">
+              <v-btn color="primary">Terminate </v-btn>
+            </v-sheet>
+            <v-sheet class="justify-end mb-2 mr-3" @click="handleRetry">
+              <v-btn color="primary">Retry </v-btn>
+            </v-sheet>
+            <v-sheet class="justify-end mb-2 mr-3" @click="handleClone">
+              <v-btn color="primary">Clone </v-btn>
+            </v-sheet>
+            <v-sheet class="justify-end mb-2 mr-3" @click="openComparePage">
+              <v-btn color="primary">Compare </v-btn>
+            </v-sheet>
+            <v-sheet class="justify-end mb-2" @click="openCreateExecution">
+              <v-btn color="primary">Execution </v-btn>
+            </v-sheet>
           </v-sheet>
 
-          <!-- 목록 -->
           <v-card class="rounded-lg pa-8">
             <v-col cols="12">
               <v-sheet>
@@ -543,9 +507,12 @@ onMounted(() => {
                   density="comfortable"
                   fixed-header
                   height="625"
+                  col-md-12
+                  col-12
                   overflow-x-auto
                 >
                   <colgroup>
+                    <col style="width: 5%" />
                     <col
                       v-for="(item, i) in tableHeader"
                       :key="i"
@@ -554,11 +521,20 @@ onMounted(() => {
                   </colgroup>
                   <thead>
                     <tr>
+                      <th>
+                        <v-checkbox
+                          v-model="data.allSelected"
+                          style="min-width: 36px"
+                          :indeterminate="data.allSelected === true"
+                          hide-details
+                          @change="getSelectedAllData"
+                        ></v-checkbox>
+                      </th>
                       <th
                         v-for="(item, i) in tableHeader"
                         :key="i"
                         class="text-center font-weight-bold"
-                        :style="item.style"
+                        :style="`${item.style}`"
                       >
                         {{ item.label }}
                       </th>
@@ -566,12 +542,20 @@ onMounted(() => {
                   </thead>
                   <tbody class="text-body-2">
                     <tr
-                      v-for="(item, i) in data.results"
-                      :key="i"
+                      v-for="item in data.results"
+                      :key="item.no"
                       class="text-center"
                     >
+                      <td>
+                        <v-checkbox
+                          v-model="data.selected"
+                          :value="{ deviceKey: item.deviceKey }"
+                          hide-details
+                          style="min-width: 36px"
+                        />
+                      </td>
                       <td>{{ item.no }}</td>
-                      <td class="text-truncate">{{ item.name }}</td>
+                      <td>{{ item.name }}</td>
                       <td>
                         <v-icon v-if="item.status === 'Succeeded'" color="green"
                           >mdi-check-circle</v-icon
@@ -587,20 +571,14 @@ onMounted(() => {
                       <td>{{ item.startTime }}</td>
                       <td>{{ item.registryStatus }}</td>
                       <td style="white-space: nowrap">
-                        <IconDownloadBtn />
-                        <IconDeleteBtn
-                          @on-click="
-                            removeData([
-                              { deviceKey: item.raw?.id ?? item.run_id },
-                            ])
-                          "
-                        />
+                        <IconInfoBtn @on-click="openInfoModal(item)" />
+                        <IconModifyBtn @on-click="openModifyModal(item)" />
+                        <IconDownloadBtn @on-click="openDownloadModal(item)" />
                       </td>
                     </tr>
                   </tbody>
                 </v-table>
               </v-sheet>
-
               <v-card-actions class="text-center mt-8 justify-center">
                 <v-pagination
                   v-model="data.params.pageNum"
@@ -608,32 +586,34 @@ onMounted(() => {
                   :total-visible="10"
                   color="primary"
                   rounded="circle"
-                  @update:model-value="changePageNum"
-                />
+                  @update:model-value="getData"
+                ></v-pagination>
               </v-card-actions>
             </v-col>
           </v-card>
         </v-card>
       </v-card>
+      <v-dialog v-model="execDialogOpen" max-width="800" persistent>
+        <ExecutionBaseDialog
+          :model-value="execDialogOpen"
+          :mode="execMode"
+          :selectedData="execSelected"
+          :workflowList="workflowList"
+          :executionTypes="executionTypes"
+          @update:modelValue="execDialogOpen = $event"
+        />
+      </v-dialog>
     </v-container>
-
-    <!-- 생성 다이얼로그 -->
-    <v-dialog v-model="data.isCreateVisible" max-width="600" persistent>
-      <ExperimentCreateDialog
-        :edit-data="data.selectedData"
-        :mode="data.modalMode"
-        @close-modal="closeModal"
-        @saved="onSaved"
-        @handle-data="() => {}"
-      />
-    </v-dialog>
+  </div>
+  <div class="w-100" v-else-if="openCompare">
+    <CompareComponent @close="closeCompare" />
   </div>
 
-  <div class="w-100" v-else>
+  <div class="w-100" v-else-if="openView">
     <ViewComponent
-      v-if="data.selectedData"
-      :id="data.selectedData.deviceKey"
-      @close="closeDetail"
+      v-if="openView"
+      :experimentInfo="execSelected"
+      @close="closeView"
     />
   </div>
 </template>