autoflow-web-console/src/components/templates/run/executions/ListComponent.vue

<script setup lang="ts">
import IconInfoBtn from "@/components/atoms/button/IconInfoBtn.vue";
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 openCompare = ref(false);
const openView = ref(false);
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;" },
  { label: "Status", width: "10%", style: "word-break: keep-all;" },
  { label: "Duration", width: "10%", style: "word-break: keep-all;" },
  { label: "Experiment", width: "15%", style: "word-break: keep-all;" },
  { 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: "5%", style: "word-break: keep-all;" },
];

const searchOptions = [
  { 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 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 },
  { text: "50 페이지", value: 50 },
  { text: "100 페이지", value: 100 },
];

const data = ref({
  params: {
    pageNum: 1,
    pageSize: 10,
    searchType: "",
    searchText: "",
  },
  results: [],
  totalDataLength: 0,
  pageLength: 0,
  modalMode: "",
  selectedData: null,
  allSelected: false,
  selected: [],
  isModalVisible: false,
  isConfirmDialogVisible: false,
  userOption: [],
});

const getCodeList = () => {
  // UserService.search(data.value.params).then((d) => {
  //   if (d.status === 200) {
  //     data.value.userOption = d.data.userList;
  //   }
  // });
};

const getData = () => {
  const params = { ...data.value.params };
  if (params.searchType === "" || params.searchText === "") {
    delete params.searchType;
    delete params.searchText;
  }
  data.value.results = [
    {
      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();
};

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 handleTerminate = () => {
  alert("Terminate 작업 진행중...");
};
const handleRetry = () => {
  alert("Retry 작업 진행중...");
};
const handleClone = () => {
  alert("Clone 작업 진행중...");
};

const changePageNum = (page) => {
  data.value.params.pageNum = page;
  getData();
};
const openCreateExecution = () => {
  execMode.value = "create";
  execSelected.value = null;
  execDialogOpen.value = true;
};

const openComparePage = () => {
  openCompare.value = true;
  openView.value = false;
};
const openInfoModal = (item: any) => {
  execSelected.value = item;
  console.log("[Parent] 선택된 실행:", item);
  openView.value = true;
  openCompare.value = false;
};
const openModifyModal = (selectedItem) => {
  execMode.value = "edit";
  execDialogOpen.value = true;
};

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(() => {
  loadRunsAll();
  getCodeList();
});
</script>

<template>
  <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
        class="bg-shades-transparent d-flex flex-column align-center justify-center w-100"
      >
        <v-card flat class="bg-shades-transparent w-100">
          <v-card-item class="text-h5 font-weight-bold pt-0 pa-5 pl-0">
            <div class="d-flex flex-row justify-start align-center">
              <div class="text-primary">Executions</div>
            </div>
          </v-card-item>
        </v-card>
        <v-card flat class="bg-shades-transparent w-100">
          <v-card flat class="bg-shades-transparent mb-4">
            <div class="d-flex justify-center flex-wrap align-center">
              <v-responsive
                max-width="180"
                min-width="180"
                class="mr-3 mt-3 mb-3"
              >
                <v-select
                  v-model="data.params.searchType"
                  label="검색조건"
                  density="compact"
                  :items="searchOptions"
                  item-title="searchType"
                  item-value="searchText"
                  hide-details
                ></v-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"
                  label="검색어"
                  density="compact"
                  clearable
                  required
                  class="mt-3 mb-3"
                  hide-details
                  @keyup.enter="changePageNum(1)"
                ></v-text-field>
              </v-responsive>

              <div class="ml-3">
                <v-btn
                  size="large"
                  color="primary"
                  :rounded="5"
                  @click="changePageNum(1)"
                >
                  <v-icon> mdi-magnify</v-icon>
                </v-btn>
              </div>
            </div>
          </v-card>

          <v-sheet
            class="bg-shades-transparent d-flex flex-wrap align-center mb-2"
          >
            <v-sheet class="d-flex flex-wrap me-auto bg-shades-transparent">
              <v-sheet
                class="d-flex align-center mr-3 mb-2 bg-shades-transparent"
              >
                <v-chip color="primary"
                  >총 {{ data.totalDataLength.toLocaleString() }}개
                </v-chip>
              </v-sheet>
              <v-sheet class="bg-shades-transparent">
                <v-responsive max-width="140" min-width="140" class="mb-2">
                  <v-select
                    v-model="data.params.pageSize"
                    density="compact"
                    :items="pageSizeOptions"
                    item-title="text"
                    item-value="value"
                    variant="outlined"
                    color="primary"
                    hide-details
                    @update:model-value="changePageNum(1)"
                  ></v-select>
                </v-responsive>
              </v-sheet>
            </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>
                <v-table
                  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"
                      :style="`width:${item.width}`"
                    />
                  </colgroup>
                  <thead>
                    <tr>
                      <th>
                        <v-checkbox
                          v-model="data.allSelected"
                          style="min-width: 36px"
                          :indeterminate="data.allSelected === true"
                          hide-details
                          @change="getSelectedAllData"
                        ></v-checkbox>
                      </th>
                      <th
                        v-for="(item, i) in tableHeader"
                        :key="i"
                        class="text-center font-weight-bold"
                        :style="`${item.style}`"
                      >
                        {{ item.label }}
                      </th>
                    </tr>
                  </thead>
                  <tbody class="text-body-2">
                    <tr
                      v-for="item 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>{{ item.name }}</td>
                      <td>
                        <v-icon v-if="item.status === 'Succeeded'" color="green"
                          >mdi-check-circle</v-icon
                        >
                        <v-icon v-else-if="item.status === 'Failed'" color="red"
                          >mdi-close-circle</v-icon
                        >
                        <v-icon v-else color="grey">mdi-loading</v-icon>
                      </td>
                      <td>{{ item.duration }}</td>
                      <td>{{ item.experiment }}</td>
                      <td>{{ item.workflow }}</td>
                      <td>{{ item.startTime }}</td>
                      <td>{{ item.registryStatus }}</td>
                      <td style="white-space: nowrap">
                        <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"
                  :length="data.pageLength"
                  :total-visible="10"
                  color="primary"
                  rounded="circle"
                  @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>
  </div>
  <div class="w-100" v-else-if="openCompare">
    <CompareComponent @close="closeCompare" />
  </div>

  <div class="w-100" v-else-if="openView">
    <ViewComponent
      v-if="openView"
      :experimentInfo="execSelected"
      @close="closeView"
    />
  </div>
</template>

<style scoped></style>