parent
ac1f47a72a
commit
ff5dbc275e
@ -0,0 +1,564 @@
|
|||||||
|
<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)}`;
|
||||||
|
}
|
||||||
|
const displayNo = (i: number) => {
|
||||||
|
const start = (data.value.params.pageNum - 1) * data.value.params.pageSize;
|
||||||
|
return data.value.totalDataLength - (start + i);
|
||||||
|
};
|
||||||
|
async function loadRunsAll() {
|
||||||
|
runsLoading.value = true;
|
||||||
|
try {
|
||||||
|
const all: any[] = [];
|
||||||
|
|
||||||
|
// 1페이지
|
||||||
|
let resp = await ExecutionsService.search({
|
||||||
|
page_size: 500,
|
||||||
|
} as any);
|
||||||
|
all.push(...(resp?.data?.runs ?? []));
|
||||||
|
|
||||||
|
// 다음 토큰 추출(스네이크/카멜 모두 대비)
|
||||||
|
let token: string | undefined =
|
||||||
|
resp?.data?.next_page_token ?? resp?.data?.nextPageToken;
|
||||||
|
|
||||||
|
// 다음 페이지들
|
||||||
|
const seen = new Set<string>();
|
||||||
|
while (token && !seen.has(token)) {
|
||||||
|
seen.add(token);
|
||||||
|
|
||||||
|
// ✅ 무조건 token을 넣어서 호출 (snake/camel 둘 다 넣기)
|
||||||
|
resp = await ExecutionsService.search({
|
||||||
|
page_token: token,
|
||||||
|
pageToken: token,
|
||||||
|
page_size: 500,
|
||||||
|
} as any);
|
||||||
|
|
||||||
|
all.push(...(resp?.data?.runs ?? []));
|
||||||
|
token = resp?.data?.next_page_token ?? resp?.data?.nextPageToken;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 중복 방지
|
||||||
|
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 ?? "-",
|
||||||
|
run_id: r?.run_id,
|
||||||
|
raw: r,
|
||||||
|
}));
|
||||||
|
|
||||||
|
experimentOptions.value = Array.from(
|
||||||
|
new Set(data.value.results.map((r: any) => String(r.experiment || "-"))),
|
||||||
|
).filter((v) => v && v !== "-");
|
||||||
|
|
||||||
|
workflowOptions.value = Array.from(
|
||||||
|
new Set(data.value.results.map((r: any) => String(r.workflow || "-"))),
|
||||||
|
).filter((v) => v && v !== "-");
|
||||||
|
data.value.totalDataLength = data.value.results.length;
|
||||||
|
setPaginationLength();
|
||||||
|
} 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 experimentOptions = ref<string[]>([]);
|
||||||
|
const workflowOptions = ref<string[]>([]);
|
||||||
|
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: "",
|
||||||
|
experimentFilter: "",
|
||||||
|
workflowFilter: "",
|
||||||
|
},
|
||||||
|
results: [],
|
||||||
|
totalDataLength: 0,
|
||||||
|
pageLength: 0,
|
||||||
|
modalMode: "",
|
||||||
|
selectedData: null,
|
||||||
|
allSelected: false,
|
||||||
|
selected: [],
|
||||||
|
isModalVisible: false,
|
||||||
|
isConfirmDialogVisible: false,
|
||||||
|
userOption: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
const filteredResults = computed(() => {
|
||||||
|
const { searchType, searchText, experimentFilter, workflowFilter } =
|
||||||
|
data.value.params;
|
||||||
|
|
||||||
|
let list = data.value.results;
|
||||||
|
|
||||||
|
// 실드롭다운 필터
|
||||||
|
if (experimentFilter) {
|
||||||
|
list = list.filter((r) => String(r.experiment).includes(experimentFilter));
|
||||||
|
}
|
||||||
|
if (workflowFilter) {
|
||||||
|
list = list.filter((r) => String(r.workflow).includes(workflowFilter));
|
||||||
|
}
|
||||||
|
|
||||||
|
// 텍스트 검색
|
||||||
|
const q = (searchText || "").trim().toLowerCase();
|
||||||
|
if (q) {
|
||||||
|
if (!searchType) {
|
||||||
|
// All: 여러 필드 OR 매칭
|
||||||
|
list = list.filter((r) => {
|
||||||
|
const pool = [
|
||||||
|
r.name,
|
||||||
|
r.status,
|
||||||
|
r.duration,
|
||||||
|
r.experiment,
|
||||||
|
r.workflow,
|
||||||
|
r.registryStatus,
|
||||||
|
r.startTime,
|
||||||
|
];
|
||||||
|
return pool.some((v) =>
|
||||||
|
String(v ?? "")
|
||||||
|
.toLowerCase()
|
||||||
|
.includes(q),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
list = list.filter((r) =>
|
||||||
|
String(r[searchType] ?? "")
|
||||||
|
.toLowerCase()
|
||||||
|
.includes(q),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return list;
|
||||||
|
});
|
||||||
|
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;
|
||||||
|
};
|
||||||
|
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();
|
||||||
|
});
|
||||||
|
</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, i) in pagedResults"
|
||||||
|
:key="item.run_id || item.no || i"
|
||||||
|
class="text-center"
|
||||||
|
>
|
||||||
|
<td>
|
||||||
|
<v-checkbox
|
||||||
|
v-model="data.selected"
|
||||||
|
:value="{ deviceKey: item.deviceKey }"
|
||||||
|
hide-details
|
||||||
|
style="min-width: 36px"
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td>{{ displayNo(i) }}</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="changePageNum"
|
||||||
|
></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>
|
||||||
Loading…
Reference in new issue