parent
25e86d31a9
commit
1fbc062687
@ -0,0 +1,27 @@
|
||||
<script setup>
|
||||
import { defineEmits } from "vue";
|
||||
|
||||
const emit = defineEmits(["onClick"]);
|
||||
|
||||
const onClick = () => {
|
||||
emit("onClick");
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-tooltip location="bottom" text="설정">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn
|
||||
@click="onClick"
|
||||
class="ma-1"
|
||||
icon="mdi-cog-play-outline"
|
||||
color="info"
|
||||
density="comfortable"
|
||||
elevation="0"
|
||||
size="small"
|
||||
v-bind="props"
|
||||
>
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</template>
|
||||
@ -0,0 +1,372 @@
|
||||
<script setup lang="ts">
|
||||
// import FormComponent from "@/components/device/FormComponent.vue";
|
||||
import { onMounted, ref, watch, onBeforeUnmount } from "vue";
|
||||
import "monaco-editor/min/vs/editor/editor.main.css";
|
||||
// const store = commonStore();
|
||||
const activeTab = ref<"details" | "visualizations">("details");
|
||||
|
||||
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 = [
|
||||
{
|
||||
name: "run-batch32-lr0.001",
|
||||
status: "Succeeded",
|
||||
Duration: "0:00:21",
|
||||
configProgress: "0/2",
|
||||
Pipeline: "baseline_train_pipeline",
|
||||
registDt: "2025-06-10T00:00:00Z",
|
||||
},
|
||||
{
|
||||
name: "run-batch64-lr0.001",
|
||||
status: "Failed",
|
||||
Duration: "0:00:21",
|
||||
configProgress: "1/3",
|
||||
Pipeline: "baseline_train_pipeline",
|
||||
registDt: "2025-06-09T00:00:00Z",
|
||||
},
|
||||
{
|
||||
name: "run-batch32-lr0.0005",
|
||||
status: "Succeeded",
|
||||
Duration: "0:00:21",
|
||||
configProgress: "0/3",
|
||||
Pipeline: "baseline_train_pipeline",
|
||||
registDt: "2025-06-01T00:00:00Z",
|
||||
},
|
||||
{
|
||||
name: "run-batch64-lr0.0005",
|
||||
status: "Running",
|
||||
Duration: "0:00:21",
|
||||
configProgress: "1/3",
|
||||
Pipeline: "baseline_train_pipeline",
|
||||
registDt: "2025-05-29T00:00:00Z",
|
||||
},
|
||||
{
|
||||
name: "run-augmented-data",
|
||||
status: "Succeeded",
|
||||
Duration: "0:00:21",
|
||||
configProgress: "0/3",
|
||||
Pipeline: "baseline_train_pipeline",
|
||||
registDt: "2025-05-31T00:00:00Z",
|
||||
},
|
||||
];
|
||||
data.value.totalDataLength = 5;
|
||||
|
||||
// DeviceService.search(params).then((d) => {
|
||||
// if (d.status === 200) {
|
||||
// data.value.results = d.data.deviceList;
|
||||
// data.value.totalDataLength = d.data.totalCount;
|
||||
// setTimeout(() => {
|
||||
// setPaginationLength();
|
||||
// }, 200);
|
||||
// } else {
|
||||
// store.setSnackbarMsg({
|
||||
// text: "디바이스 조회 실패",
|
||||
// color: "error",
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
// DeviceService.search().then((d) => {
|
||||
// data.value.totalDataLength = d.data.totalCount;
|
||||
// setTimeout(() => {
|
||||
// setPaginationLength();
|
||||
// }, 200);
|
||||
// });
|
||||
};
|
||||
const runA = {
|
||||
id: "77578d20d81542f387149c1e3474f633",
|
||||
name: "defiant-horse-63",
|
||||
start: "2025-02-13 15:12",
|
||||
end: "2025-02-13 15:14",
|
||||
duration: "2.0s",
|
||||
params: { alpha: 0.2, l1_ratio: 0.2 },
|
||||
metrics: { mae: 0.564, r2: 0.237, rmse: 0.734 },
|
||||
tags: {
|
||||
estimator_class: "sklearn.pipeline.Pipeline",
|
||||
estimator_name: "Pipeline",
|
||||
},
|
||||
artifacts: ["estimator.html", "metrics.json"],
|
||||
};
|
||||
const runB = {
|
||||
id: "9a5da7476f0f4ad28117e0b2e8d58515",
|
||||
name: "magnificent-eel-8",
|
||||
start: "2025-02-13 15:12",
|
||||
end: "2025-02-13 15:13",
|
||||
duration: "1.9s",
|
||||
params: { alpha: 0.1, l1_ratio: 0.1 },
|
||||
metrics: { mae: 0.546, r2: 0.28, rmse: 0.713 },
|
||||
tags: {
|
||||
estimator_class: "sklearn.pipeline.Pipeline",
|
||||
estimator_name: "Pipeline",
|
||||
},
|
||||
artifacts: ["estimator.html", "metrics.json"],
|
||||
};
|
||||
// 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 saveData = (formData) => {
|
||||
if (data.value.modalMode === "create") {
|
||||
// DeviceService.add(formData).then((d) => {
|
||||
// if (d.status === 200) {
|
||||
// data.value.isModalVisible = false;
|
||||
// store.setSnackbarMsg({
|
||||
// text: "등록 되었습니다.",
|
||||
// result: 200,
|
||||
// });
|
||||
// changePageNum(1);
|
||||
// } else {
|
||||
// store.setSnackbarMsg({
|
||||
// text: d,
|
||||
// result: 500,
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
} else {
|
||||
// DeviceService.update(formData.deviceKey, formData).then((d) => {
|
||||
// if (d.status === 200) {
|
||||
// data.value.isModalVisible = false;
|
||||
// store.setSnackbarMsg({
|
||||
// text: "수정 되었습니다.",
|
||||
// result: 200,
|
||||
// });
|
||||
// changePageNum();
|
||||
// } else {
|
||||
// store.setSnackbarMsg({
|
||||
// text: d,
|
||||
// result: 500,
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
}
|
||||
};
|
||||
|
||||
const removeData = (value) => {
|
||||
let removeList = value ? value : data.value.selected;
|
||||
const remove = (code) => {
|
||||
// return DeviceService.delete(code).then((d) => {
|
||||
// if (d.status !== 200) {
|
||||
// store.setSnackbarMsg({
|
||||
// text: d,
|
||||
// result: 500,
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
};
|
||||
|
||||
if (removeList.length === 1) {
|
||||
remove(removeList[0].deviceKey).then(() => {
|
||||
// store.setSnackbarMsg({
|
||||
// text: "삭제되었습니다.",
|
||||
// result: 200,
|
||||
// });
|
||||
changePageNum();
|
||||
data.value.isConfirmDialogVisible = false;
|
||||
data.value.selected = [];
|
||||
data.value.allSelected = false;
|
||||
});
|
||||
} else {
|
||||
Promise.all(removeList.map((item) => remove(item.deviceKey))).finally(
|
||||
() => {
|
||||
// store.setSnackbarMsg({
|
||||
// text: "모두 삭제되었습니다.",
|
||||
// result: 200,
|
||||
// });
|
||||
changePageNum();
|
||||
data.value.isConfirmDialogVisible = false;
|
||||
data.value.selected = [];
|
||||
data.value.allSelected = false;
|
||||
},
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const changePageNum = (page) => {
|
||||
data.value.params.pageNum = page;
|
||||
getData();
|
||||
};
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "close"): void;
|
||||
}>();
|
||||
|
||||
onMounted(() => {
|
||||
getData();
|
||||
getCodeList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-container class="h-100 pa-5 d-flex flex-column align-center">
|
||||
<v-card
|
||||
flat
|
||||
class="bg-shades-transparent d-flex flex-column justify-center w-100"
|
||||
>
|
||||
<!-- 1) Workflow Information -->
|
||||
<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">Compare Executions</div>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
<v-tabs
|
||||
v-model="activeTab"
|
||||
background-color="grey lighten-4"
|
||||
style="max-width: 360px"
|
||||
grow
|
||||
>
|
||||
<v-tab value="details">Details</v-tab>
|
||||
<v-tab value="Visualizations">Visualizations</v-tab>
|
||||
</v-tabs>
|
||||
<div v-if="activeTab === 'details'" fluid flat>
|
||||
<v-card class="bordered-box mb-6 w-100 rounded-lg pa-8">
|
||||
<v-card-title class="grey lighten-4 py-2 px-4">
|
||||
<span class="font-weight-bold">Run Detail </span>
|
||||
</v-card-title>
|
||||
<v-card-text class="px-6 pb-6 pt-4">
|
||||
<!-- Workflow Name / Version -->
|
||||
<v-row align="center" class="py-2">
|
||||
<v-col cols="2" class="text-h6 font-weight-bold"> Run ID: </v-col>
|
||||
<v-col cols="5">{{ runA.id }}</v-col>
|
||||
<v-col cols="5">{{ runB.id }}</v-col>
|
||||
<v-col cols="2" class="text-h6 font-weight-bold">
|
||||
Run Name:
|
||||
</v-col>
|
||||
<v-col cols="5">{{ runA.name }}</v-col>
|
||||
<v-col cols="5">{{ runB.name }}</v-col>
|
||||
<v-col cols="2" class="text-h6 font-weight-bold">
|
||||
Start Name:
|
||||
</v-col>
|
||||
<v-col cols="5">{{ runA.start }}</v-col>
|
||||
<v-col cols="5">{{ runB.start }}</v-col>
|
||||
<v-col cols="2" class="text-h6 font-weight-bold">
|
||||
End Name:
|
||||
</v-col>
|
||||
<v-col cols="5">{{ runA.end }}</v-col>
|
||||
<v-col cols="5">{{ runB.end }}</v-col>
|
||||
<v-col cols="2" class="text-h6 font-weight-bold">
|
||||
Duration:
|
||||
</v-col>
|
||||
<v-col cols="5">{{ runA.duration }}</v-col>
|
||||
<v-col cols="5">{{ runB.duration }}</v-col>
|
||||
</v-row>
|
||||
<v-divider class="my-2" />
|
||||
</v-card-text>
|
||||
<v-card-title class="grey lighten-4 py-2 px-4">
|
||||
<span class="font-weight-bold">Parameters </span>
|
||||
</v-card-title>
|
||||
<v-card-text class="px-6 pb-6 pt-4">
|
||||
<!-- Workflow Name / Version -->
|
||||
<v-row align="center" class="py-2">
|
||||
<v-col cols="2" class="text-h6 font-weight-bold"> alpha </v-col>
|
||||
<v-col cols="5">{{ runA.params.alpha }}</v-col>
|
||||
<v-col cols="5">{{ runB.params.alpha }}</v-col>
|
||||
|
||||
<v-col cols="2" class="text-h6 font-weight-bold">
|
||||
l1_ratio
|
||||
</v-col>
|
||||
<v-col cols="5">{{ runA.params.l1_ratio }}</v-col>
|
||||
<v-col cols="5">{{ runB.params.l1_ratio }}</v-col>
|
||||
</v-row>
|
||||
<v-divider class="my-2" />
|
||||
</v-card-text>
|
||||
<v-card-title class="grey lighten-4 py-2 px-4">
|
||||
<span class="font-weight-bold">Metrics</span>
|
||||
</v-card-title>
|
||||
<v-card-text class="px-6 pb-6 pt-4">
|
||||
<!-- Workflow Name / Version -->
|
||||
<v-row align="center" class="py-2">
|
||||
<v-col cols="2" class="text-h6 font-weight-bold"> mae </v-col>
|
||||
<v-col cols="5">{{ runA.metrics.mae }}</v-col>
|
||||
<v-col cols="5">{{ runA.metrics.mae }}</v-col>
|
||||
|
||||
<v-col cols="2" class="text-h6 font-weight-bold"> r2 </v-col>
|
||||
<v-col cols="5">{{ runA.metrics.r2 }}</v-col>
|
||||
<v-col cols="5">{{ runA.metrics.r2 }}</v-col>
|
||||
<v-col cols="2" class="text-h6 font-weight-bold"> rmse </v-col>
|
||||
<v-col cols="5">{{ runA.metrics.rmse }}</v-col>
|
||||
<v-col cols="5">{{ runA.metrics.rmse }}</v-col>
|
||||
</v-row>
|
||||
<v-divider class="my-2" />
|
||||
</v-card-text>
|
||||
|
||||
<v-card-title class="grey lighten-4 py-2 px-4">
|
||||
<span class="font-weight-bold">Tags </span>
|
||||
</v-card-title>
|
||||
<v-card-text class="px-6 pb-6 pt-4">
|
||||
<!-- Workflow Name / Version -->
|
||||
<v-row align="center" class="py-2">
|
||||
<v-col cols="2" class="text-h6 font-weight-bold">
|
||||
estimator_class
|
||||
</v-col>
|
||||
<v-col cols="5">{{ runA.tags.estimator_class }}</v-col>
|
||||
<v-col cols="5">{{ runA.tags.estimator_class }}</v-col>
|
||||
<v-col cols="2" class="text-h6 font-weight-bold">
|
||||
estimator_name
|
||||
</v-col>
|
||||
<v-col cols="5">{{ runA.tags.estimator_name }}</v-col>
|
||||
<v-col cols="5">{{ runA.tags.estimator_name }}</v-col>
|
||||
</v-row>
|
||||
<v-divider class="my-2" />
|
||||
</v-card-text>
|
||||
<v-card-title class="grey lighten-4 py-2 px-4">
|
||||
<span class="font-weight-bold">Artifacts</span>
|
||||
</v-card-title>
|
||||
<div class="" style="width: 400px"></div>
|
||||
<v-sheet class="d-flex justify-end mt-4">
|
||||
<v-btn color="primary" @click="emit('close')">Back to List</v-btn>
|
||||
</v-sheet>
|
||||
</v-card>
|
||||
</div>
|
||||
<div v-show="activeTab === 'visualizations'"><div>123213</div></div>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.editor-container {
|
||||
width: 100%;
|
||||
height: 900px;
|
||||
max-height: 900px;
|
||||
border: 1px solid #444;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,497 @@
|
||||
<script setup lang="ts">
|
||||
// import FormComponent from "@/components/device/FormComponent.vue";
|
||||
import { onMounted, ref, watch, onBeforeUnmount } from "vue";
|
||||
import * as monaco from "monaco-editor";
|
||||
import "monaco-editor/min/vs/editor/editor.main.css";
|
||||
// const store = commonStore();
|
||||
const activeTab = ref<"details" | "yaml">("details");
|
||||
const editorRef = ref<HTMLDivElement | null>(null);
|
||||
let editorInstance: monaco.editor.IStandaloneCodeEditor | null = null;
|
||||
const tableHeader = [
|
||||
{
|
||||
label: "Run Name",
|
||||
width: "20%",
|
||||
style: "word-break: keep-all;",
|
||||
},
|
||||
{
|
||||
label: "Status",
|
||||
width: "20%",
|
||||
style: "word-break: keep-all;",
|
||||
},
|
||||
{
|
||||
label: "Duration",
|
||||
width: "20%",
|
||||
style: "word-break: keep-all;",
|
||||
},
|
||||
{
|
||||
label: "Pipeline",
|
||||
width: "20%",
|
||||
style: "word-break: keep-all;",
|
||||
},
|
||||
{
|
||||
label: "Start Time",
|
||||
width: "20%",
|
||||
style: "word-break: keep-all;",
|
||||
},
|
||||
];
|
||||
const experimentInfo = ref({
|
||||
workflowName: "sentiment-analysis",
|
||||
version: "v2.0",
|
||||
workflowDescription: "감정 분석 모델 학습 워크플로우",
|
||||
createdDate: "2025-02-06",
|
||||
createdId: "ADMIN_001",
|
||||
});
|
||||
const stepHeaders = [
|
||||
{ title: "Order", key: "order", width: "10%", align: "center" },
|
||||
{ title: "Step Name", key: "name", width: "40%", align: "center" },
|
||||
{
|
||||
title: "Component Type",
|
||||
key: "componentType",
|
||||
width: "30%",
|
||||
align: "center",
|
||||
},
|
||||
{ title: "Status", key: "status", width: "20%", align: "center" },
|
||||
];
|
||||
|
||||
const steps = ref([
|
||||
{ name: "Data loading", componentType: "DataPrep", status: "Configured" },
|
||||
{
|
||||
name: "Preprocessing",
|
||||
componentType: "Preprocess",
|
||||
status: "Not Configured",
|
||||
},
|
||||
{
|
||||
name: "Preprocessing",
|
||||
componentType: "Preprocess",
|
||||
status: "Not Configured",
|
||||
},
|
||||
{
|
||||
name: "Preprocessing",
|
||||
componentType: "Preprocess",
|
||||
status: "Not Configured",
|
||||
},
|
||||
|
||||
{ name: "Train Model", componentType: "Train", status: "Not Configured" },
|
||||
]);
|
||||
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 = [
|
||||
{
|
||||
name: "run-batch32-lr0.001",
|
||||
status: "Succeeded",
|
||||
Duration: "0:00:21",
|
||||
configProgress: "0/2",
|
||||
Pipeline: "baseline_train_pipeline",
|
||||
registDt: "2025-06-10T00:00:00Z",
|
||||
},
|
||||
{
|
||||
name: "run-batch64-lr0.001",
|
||||
status: "Failed",
|
||||
Duration: "0:00:21",
|
||||
configProgress: "1/3",
|
||||
Pipeline: "baseline_train_pipeline",
|
||||
registDt: "2025-06-09T00:00:00Z",
|
||||
},
|
||||
{
|
||||
name: "run-batch32-lr0.0005",
|
||||
status: "Succeeded",
|
||||
Duration: "0:00:21",
|
||||
configProgress: "0/3",
|
||||
Pipeline: "baseline_train_pipeline",
|
||||
registDt: "2025-06-01T00:00:00Z",
|
||||
},
|
||||
{
|
||||
name: "run-batch64-lr0.0005",
|
||||
status: "Running",
|
||||
Duration: "0:00:21",
|
||||
configProgress: "1/3",
|
||||
Pipeline: "baseline_train_pipeline",
|
||||
registDt: "2025-05-29T00:00:00Z",
|
||||
},
|
||||
{
|
||||
name: "run-augmented-data",
|
||||
status: "Succeeded",
|
||||
Duration: "0:00:21",
|
||||
configProgress: "0/3",
|
||||
Pipeline: "baseline_train_pipeline",
|
||||
registDt: "2025-05-31T00:00:00Z",
|
||||
},
|
||||
];
|
||||
data.value.totalDataLength = 5;
|
||||
|
||||
// DeviceService.search(params).then((d) => {
|
||||
// if (d.status === 200) {
|
||||
// data.value.results = d.data.deviceList;
|
||||
// data.value.totalDataLength = d.data.totalCount;
|
||||
// setTimeout(() => {
|
||||
// setPaginationLength();
|
||||
// }, 200);
|
||||
// } else {
|
||||
// store.setSnackbarMsg({
|
||||
// text: "디바이스 조회 실패",
|
||||
// color: "error",
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
// DeviceService.search().then((d) => {
|
||||
// data.value.totalDataLength = d.data.totalCount;
|
||||
// setTimeout(() => {
|
||||
// setPaginationLength();
|
||||
// }, 200);
|
||||
// });
|
||||
};
|
||||
const yamlContent = `apiVersion: argoproj.io/v1alpha1
|
||||
kind: Workflow
|
||||
metadata:
|
||||
generateName: dummy-workflow-
|
||||
namespace: default
|
||||
labels:
|
||||
workflows.argoproj.io/archive-strategy: "true"
|
||||
spec:
|
||||
entrypoint: main
|
||||
arguments:
|
||||
parameters:
|
||||
- name: message
|
||||
value: "Hello, Monaco YAML Highlight!"
|
||||
templates:
|
||||
|
||||
# 1) Main steps orchestration
|
||||
- name: main
|
||||
steps:
|
||||
- - name: print
|
||||
template: whalesay
|
||||
arguments:
|
||||
parameters:
|
||||
- name: message
|
||||
value: "{{workflow.parameters.message}}"
|
||||
- - name: wait
|
||||
template: sleep
|
||||
arguments:
|
||||
parameters:
|
||||
- name: duration
|
||||
value: "5"
|
||||
- - name: finalize
|
||||
template: next
|
||||
|
||||
# 2) Whalesay container
|
||||
- name: whalesay
|
||||
inputs:
|
||||
parameters:
|
||||
- name: message
|
||||
container:
|
||||
image: docker/whalesay:latest
|
||||
command: [cowsay]
|
||||
args: ["{{inputs.parameters.message}}"]
|
||||
resources:
|
||||
limits:
|
||||
memory: "64Mi"
|
||||
cpu: "100m"
|
||||
|
||||
# 3) Simple sleep step
|
||||
- name: sleep
|
||||
inputs:
|
||||
parameters:
|
||||
- name: duration
|
||||
container:
|
||||
image: alpine:latest
|
||||
command: [sh, -c]
|
||||
args:
|
||||
- |
|
||||
echo "Sleeping for {{inputs.parameters.duration}} seconds..."
|
||||
sleep {{inputs.parameters.duration}}
|
||||
|
||||
# 4) Final step
|
||||
- name: next
|
||||
container:
|
||||
image: alpine:latest
|
||||
command: [sh, -c]
|
||||
args:
|
||||
- echo "Workflow complete at $(date)!"
|
||||
|
||||
# Optional: retention policy
|
||||
ttlStrategy:
|
||||
secondsAfterCompletion: 3600
|
||||
`;
|
||||
|
||||
onMounted(() => {
|
||||
if (editorRef.value) {
|
||||
editorInstance = monaco.editor.create(editorRef.value, {
|
||||
value: yamlContent,
|
||||
language: "yaml",
|
||||
theme: "vs-dark",
|
||||
readOnly: true,
|
||||
automaticLayout: true,
|
||||
minimap: { enabled: false },
|
||||
lineNumbers: "on",
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (editorInstance) {
|
||||
editorInstance.dispose();
|
||||
editorInstance = null;
|
||||
}
|
||||
});
|
||||
|
||||
// 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 saveData = (formData) => {
|
||||
if (data.value.modalMode === "create") {
|
||||
// DeviceService.add(formData).then((d) => {
|
||||
// if (d.status === 200) {
|
||||
// data.value.isModalVisible = false;
|
||||
// store.setSnackbarMsg({
|
||||
// text: "등록 되었습니다.",
|
||||
// result: 200,
|
||||
// });
|
||||
// changePageNum(1);
|
||||
// } else {
|
||||
// store.setSnackbarMsg({
|
||||
// text: d,
|
||||
// result: 500,
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
} else {
|
||||
// DeviceService.update(formData.deviceKey, formData).then((d) => {
|
||||
// if (d.status === 200) {
|
||||
// data.value.isModalVisible = false;
|
||||
// store.setSnackbarMsg({
|
||||
// text: "수정 되었습니다.",
|
||||
// result: 200,
|
||||
// });
|
||||
// changePageNum();
|
||||
// } else {
|
||||
// store.setSnackbarMsg({
|
||||
// text: d,
|
||||
// result: 500,
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
}
|
||||
};
|
||||
|
||||
const removeData = (value) => {
|
||||
let removeList = value ? value : data.value.selected;
|
||||
const remove = (code) => {
|
||||
// return DeviceService.delete(code).then((d) => {
|
||||
// if (d.status !== 200) {
|
||||
// store.setSnackbarMsg({
|
||||
// text: d,
|
||||
// result: 500,
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
};
|
||||
|
||||
if (removeList.length === 1) {
|
||||
remove(removeList[0].deviceKey).then(() => {
|
||||
// store.setSnackbarMsg({
|
||||
// text: "삭제되었습니다.",
|
||||
// result: 200,
|
||||
// });
|
||||
changePageNum();
|
||||
data.value.isConfirmDialogVisible = false;
|
||||
data.value.selected = [];
|
||||
data.value.allSelected = false;
|
||||
});
|
||||
} else {
|
||||
Promise.all(removeList.map((item) => remove(item.deviceKey))).finally(
|
||||
() => {
|
||||
// store.setSnackbarMsg({
|
||||
// text: "모두 삭제되었습니다.",
|
||||
// result: 200,
|
||||
// });
|
||||
changePageNum();
|
||||
data.value.isConfirmDialogVisible = false;
|
||||
data.value.selected = [];
|
||||
data.value.allSelected = false;
|
||||
},
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const changePageNum = (page) => {
|
||||
data.value.params.pageNum = page;
|
||||
getData();
|
||||
};
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "close"): void;
|
||||
}>();
|
||||
|
||||
onMounted(() => {
|
||||
getData();
|
||||
getCodeList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-container class="h-100 w-100 pa-5 d-flex flex-column align-center">
|
||||
<v-card
|
||||
flat
|
||||
class="bg-shades-transparent d-flex flex-column justify-center w-100"
|
||||
>
|
||||
<!-- 1) Workflow Information -->
|
||||
<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">View Details</div>
|
||||
</div>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
<v-tabs
|
||||
v-model="activeTab"
|
||||
background-color="grey lighten-4"
|
||||
style="max-width: 360px"
|
||||
grow
|
||||
>
|
||||
<v-tab value="details">Details</v-tab>
|
||||
<v-tab value="yaml">YAML</v-tab>
|
||||
</v-tabs>
|
||||
<template v-if="activeTab === 'details'" fluid flat>
|
||||
<v-card class="bordered-box mb-6 w-100 rounded-lg pa-8">
|
||||
<v-card-title class="grey lighten-4 py-2 px-4">
|
||||
<span class="font-weight-bold">Workflow Information</span>
|
||||
</v-card-title>
|
||||
<v-card-text class="px-6 pb-6 pt-4">
|
||||
<!-- Workflow Name / Version -->
|
||||
<v-row align="center" class="py-2">
|
||||
<v-col cols="3" class="text-h6 font-weight-bold">
|
||||
Workflow Name
|
||||
</v-col>
|
||||
<v-col cols="3">{{ experimentInfo.workflowName }}</v-col>
|
||||
<v-col cols="3" class="text-h6 font-weight-bold"> Version </v-col>
|
||||
<v-col cols="3">{{ experimentInfo.version }}</v-col>
|
||||
</v-row>
|
||||
<v-divider class="my-2" />
|
||||
|
||||
<!-- Description -->
|
||||
<v-row align="center" class="py-2">
|
||||
<v-col cols="3" class="text-h6 font-weight-bold">
|
||||
Workflow Description
|
||||
</v-col>
|
||||
<v-col cols="9">{{ experimentInfo.workflowDescription }}</v-col>
|
||||
</v-row>
|
||||
<v-divider class="my-2" />
|
||||
|
||||
<!-- Created Date / ID -->
|
||||
<v-row align="center" class="py-2">
|
||||
<v-col cols="3" class="text-h6 font-weight-bold">
|
||||
Created Date
|
||||
</v-col>
|
||||
<v-col cols="3">{{ experimentInfo.createdDate }}</v-col>
|
||||
<v-col cols="3" class="text-h6 font-weight-bold">
|
||||
Created ID
|
||||
</v-col>
|
||||
<v-col cols="3">{{ experimentInfo.createdId }}</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<!-- 2) Step Overview -->
|
||||
<v-card
|
||||
flat
|
||||
class="bordered-box mb-6 w-100 rounded-lg pa-8"
|
||||
style="min-height: 500px"
|
||||
>
|
||||
<v-card-title class="grey lighten-4 py-2 px-4">
|
||||
<span class="font-weight-bold">Step Overview</span>
|
||||
</v-card-title>
|
||||
|
||||
<v-data-table
|
||||
:headers="stepHeaders"
|
||||
:items="steps"
|
||||
dense
|
||||
class="text-center"
|
||||
hide-default-footer
|
||||
:items-per-page="5"
|
||||
header-color="primary"
|
||||
disable-sort
|
||||
>
|
||||
<!-- 순번을 직접 렌더링 -->
|
||||
<template #item.order="{ index }">
|
||||
{{ index + 1 }}
|
||||
</template>
|
||||
<!-- 상태에 따라 색을 다르게 -->
|
||||
<template #item.status="{ item }">
|
||||
<v-chip
|
||||
:color="
|
||||
{
|
||||
Configured: 'success',
|
||||
'Not Configured': 'warning',
|
||||
}[item.status]
|
||||
"
|
||||
small
|
||||
dark
|
||||
>
|
||||
{{ item.status }}
|
||||
</v-chip>
|
||||
</template>
|
||||
</v-data-table>
|
||||
|
||||
<v-sheet class="d-flex justify-end mt-4">
|
||||
<v-btn color="primary" @click="emit('close')">Back to List</v-btn>
|
||||
</v-sheet>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<div
|
||||
v-show="activeTab === 'yaml'"
|
||||
ref="editorRef"
|
||||
class="editor-container"
|
||||
></div>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.editor-container {
|
||||
width: 100%;
|
||||
height: 900px;
|
||||
max-height: 900px;
|
||||
border: 1px solid #444;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import ListComponent from "@/components/run/excutions/ListComponent.vue";
|
||||
import ListComponent from "@/components/run/executions/ListComponent.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
Loading…
Reference in new issue