parent
b88b363549
commit
6047076c09
@ -0,0 +1,168 @@
|
||||
<script setup lang="ts">
|
||||
import IconArrowDown from "@/components/button/IconArrowDown.vue";
|
||||
import IconArrowUp from "@/components/button/IconArrowUp.vue";
|
||||
import IconDeleteBtn from "@/components/button/IconDeleteBtn.vue";
|
||||
import IconModifyBtn from "@/components/button/IconModifyBtn.vue";
|
||||
import { ref, watch } from "vue";
|
||||
|
||||
const steps = ref([
|
||||
{ order: 1, stepName: "Data Load", type: "DataPrep", status: "Configured" },
|
||||
{
|
||||
order: 2,
|
||||
stepName: "Preprocessing",
|
||||
type: "Preprocess",
|
||||
status: "Not Configured",
|
||||
},
|
||||
{
|
||||
order: 3,
|
||||
stepName: "Train Model",
|
||||
type: "Train",
|
||||
status: "Not Configured",
|
||||
},
|
||||
]);
|
||||
|
||||
const props = defineProps({
|
||||
editData: Object,
|
||||
mode: String,
|
||||
userOption: Array,
|
||||
});
|
||||
|
||||
const emit = defineEmits(["handle-data", "close-modal"]);
|
||||
|
||||
const visible = ref(true);
|
||||
|
||||
const form = ref({
|
||||
name: "",
|
||||
description: "",
|
||||
});
|
||||
|
||||
const submit = () => {
|
||||
emit("handle-data", form.value);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-card class="rounded-lg overflow-hidden">
|
||||
<!-- 타이틀 영역 -->
|
||||
<v-card-title
|
||||
class="text-white font-weight-bold text-h6"
|
||||
style="background-color: #1976d2"
|
||||
>
|
||||
Deploy Model
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text class="pa-6">
|
||||
<div class="text-subtitle-1 font-weight-medium mb-4">
|
||||
Select Model : ImageClassifier
|
||||
</div>
|
||||
<VDivider class="my-2" />
|
||||
<v-form @submit.prevent="submit">
|
||||
<div class="mb-5">
|
||||
<label class="text-subtitle-2 font-weight-medium mb-1 d-block"
|
||||
>OTA
|
||||
</label>
|
||||
<v-row dense class="mb-6">
|
||||
<v-col cols="12">
|
||||
<v-subheader class="font-weight-medium white--text mb-2">
|
||||
Select Package
|
||||
</v-subheader>
|
||||
<v-select
|
||||
dense
|
||||
hide-details
|
||||
outlined
|
||||
style="background: #1e1e1e; color: #fff"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-text class="pt-6 pb-4 px-6">
|
||||
<v-subheader class="font-weight-medium mb-2">
|
||||
Package Preview
|
||||
</v-subheader>
|
||||
<v-sheet class="pa-4 mb-6" elevation="1" rounded>
|
||||
<v-row dense>
|
||||
<!-- Linux -->
|
||||
<v-col cols="12" md="6">
|
||||
<div class="font-weight-medium mb-2">Linux</div>
|
||||
<v-text-field
|
||||
label="File Name"
|
||||
placeholder="4_EdgeInfra_Perception.sh"
|
||||
dense
|
||||
outlined
|
||||
hide-details
|
||||
/>
|
||||
<v-text-field
|
||||
label="File Path"
|
||||
placeholder="/home/etri/TeslaSystem/EdgeInfraVision/RUN"
|
||||
dense
|
||||
outlined
|
||||
hide-details
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<!-- Windows -->
|
||||
<v-col cols="12" md="6">
|
||||
<div class="font-weight-medium mb-2">Windows</div>
|
||||
<v-text-field
|
||||
label="File Name"
|
||||
placeholder="4_EdgeInfra_Perception.exe"
|
||||
dense
|
||||
outlined
|
||||
hide-details
|
||||
/>
|
||||
<v-text-field
|
||||
label="File Path"
|
||||
placeholder="C:/etri/TeslaSystem/EdgeInfraVision/RUN"
|
||||
dense
|
||||
outlined
|
||||
hide-details
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-sheet>
|
||||
<!-- Package Preview 끝 -->
|
||||
|
||||
<!-- Software Name / Version -->
|
||||
<v-row dense class="mb-4">
|
||||
<v-col cols="12">
|
||||
<v-text-field
|
||||
label="Software Name"
|
||||
placeholder="Enter software Name"
|
||||
dense
|
||||
outlined
|
||||
hide-details
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-text-field
|
||||
label="Software Version"
|
||||
placeholder="Enter software Version"
|
||||
dense
|
||||
outlined
|
||||
hide-details
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Executed 여부 -->
|
||||
<v-row dense class="mb-6">
|
||||
<v-col cols="12">
|
||||
<v-radio-group row>
|
||||
<v-radio label="Executed" value="executed" />
|
||||
<v-radio label="Not Executed" value="not_executed" />
|
||||
</v-radio-group>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions class="justify-end" style="padding: 16px 24px">
|
||||
<v-btn color="success" @click="submit">Save</v-btn>
|
||||
<v-btn text class="white--text" @click="$emit('close-modal')"
|
||||
>Close</v-btn
|
||||
>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
@ -0,0 +1,161 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, computed, defineProps, defineEmits } from "vue";
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: boolean;
|
||||
mode: "create" | "edit" | "clone";
|
||||
selectedData: any;
|
||||
workflowList: string[];
|
||||
executionTypes: string[];
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "update:modelValue", v: boolean): void;
|
||||
(e: "save", payload: any): void;
|
||||
}>();
|
||||
|
||||
// 로컬 state
|
||||
const internalWorkflow = ref(props.selectedData?.workflow || "");
|
||||
const internalExecType = ref(props.selectedData?.execType || "");
|
||||
const internalName = ref(props.selectedData?.name || "");
|
||||
const internalDesc = ref(props.selectedData?.description || "");
|
||||
const internalExperiment = ref(props.selectedData?.experiment || "");
|
||||
|
||||
// 다이얼로그 열릴 때 복사
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(open) => {
|
||||
if (open && props.selectedData) {
|
||||
internalWorkflow.value = props.selectedData.workflow;
|
||||
internalExecType.value = props.selectedData.execType;
|
||||
internalName.value = props.selectedData.name;
|
||||
internalDesc.value = props.selectedData.description;
|
||||
internalExperiment.value = props.selectedData.experiment;
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
// 다이얼로그 타이틀
|
||||
const dialogTitle = computed(() => {
|
||||
if (props.mode === "create") return "Create Execution";
|
||||
if (props.mode === "edit") return "Edit Execution";
|
||||
return "Clone Execution";
|
||||
});
|
||||
|
||||
function onSave() {
|
||||
emit("save", {
|
||||
workflow: internalWorkflow.value,
|
||||
execType: internalExecType.value,
|
||||
name: internalName.value,
|
||||
description: internalDesc.value,
|
||||
experiment: internalExperiment.value,
|
||||
});
|
||||
emit("update:modelValue", false);
|
||||
}
|
||||
function onClose() {
|
||||
emit("update:modelValue", false);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-card flat>
|
||||
<!-- 툴바 -->
|
||||
<v-toolbar flat color="primary" dark>
|
||||
<v-toolbar-title>{{ dialogTitle }}</v-toolbar-title>
|
||||
<v-spacer />
|
||||
<v-btn icon @click="onClose"><v-icon>mdi-close</v-icon></v-btn>
|
||||
</v-toolbar>
|
||||
<v-divider />
|
||||
|
||||
<!-- 본문 -->
|
||||
<v-card-text class="white--text pa-6">
|
||||
<!-- Workflow Information 헤더 -->
|
||||
<v-card-subtitle class="white--text mb-4"
|
||||
>Workflow Information</v-card-subtitle
|
||||
>
|
||||
|
||||
<v-row dense class="mb-6">
|
||||
<v-col cols="6">
|
||||
<v-subheader class="font-weight-medium white--text mb-2">
|
||||
Select Workflow
|
||||
</v-subheader>
|
||||
<v-select
|
||||
v-model="internalWorkflow"
|
||||
:items="workflowList"
|
||||
dense
|
||||
hide-details
|
||||
outlined
|
||||
style="background: #1e1e1e; color: #fff"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<v-subheader class="font-weight-medium white--text mb-2">
|
||||
Execution Type
|
||||
</v-subheader>
|
||||
<v-select
|
||||
v-model="internalExecType"
|
||||
:items="executionTypes"
|
||||
dense
|
||||
hide-details
|
||||
outlined
|
||||
style="background: #1e1e1e; color: #fff"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Execution Name -->
|
||||
<v-row dense class="mb-6">
|
||||
<v-col cols="12">
|
||||
<v-subheader class="font-weight-medium white--text mb-2">
|
||||
Execution Type
|
||||
</v-subheader>
|
||||
|
||||
<v-text-field
|
||||
v-model="internalName"
|
||||
dense
|
||||
hide-details
|
||||
style="background: #1e1e1e; color: #fff"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Description -->
|
||||
<v-row dense class="mb-6">
|
||||
<v-col cols="12">
|
||||
<v-subheader class="font-weight-medium white--text mb-2">
|
||||
Description
|
||||
</v-subheader>
|
||||
|
||||
<v-text-field
|
||||
v-model="internalName"
|
||||
dense
|
||||
hide-details
|
||||
style="background: #1e1e1e; color: #fff"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Experiment -->
|
||||
<v-row dense class="mb-6">
|
||||
<v-col cols="12">
|
||||
<v-subheader class="font-weight-medium white--text mb-2">
|
||||
Experiment
|
||||
</v-subheader>
|
||||
|
||||
<v-text-field
|
||||
v-model="internalName"
|
||||
dense
|
||||
hide-details
|
||||
style="background: #1e1e1e; color: #fff"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
|
||||
<!-- 액션 -->
|
||||
<v-card-actions class="justify-end pa-4">
|
||||
<v-btn color="success" @click="onSave">Start</v-btn>
|
||||
<v-btn text class="white--text" @click="onClose">Close</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
@ -0,0 +1,71 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
editData: Object,
|
||||
mode: String,
|
||||
userOption: Array,
|
||||
});
|
||||
|
||||
const emit = defineEmits(["handle-data", "close-modal"]);
|
||||
|
||||
const visible = ref(true);
|
||||
|
||||
const form = ref({
|
||||
name: "",
|
||||
description: "",
|
||||
});
|
||||
|
||||
const submit = () => {
|
||||
emit("handle-data", form.value);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-card class="rounded-lg overflow-hidden">
|
||||
<!-- 타이틀 영역 -->
|
||||
<v-card-title
|
||||
class="text-white font-weight-bold text-h6"
|
||||
style="background-color: #1976d2"
|
||||
>
|
||||
Create Experiment
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text class="pa-6">
|
||||
<v-form @submit.prevent="submit">
|
||||
<div class="mb-5">
|
||||
<label class="text-subtitle-2 font-weight-medium mb-1 d-block"
|
||||
>Experiment Name</label
|
||||
>
|
||||
<v-text-field
|
||||
v-model="form.name"
|
||||
variant="outlined"
|
||||
dense
|
||||
hide-details
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-subtitle-2 font-weight-medium mb-1 d-block"
|
||||
>Description</label
|
||||
>
|
||||
<v-textarea
|
||||
v-model="form.description"
|
||||
variant="outlined"
|
||||
rows="3"
|
||||
dense
|
||||
hide-details
|
||||
/>
|
||||
</div>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions class="justify-end" style="padding: 16px 24px">
|
||||
<v-btn color="success" @click="submit">Save</v-btn>
|
||||
<v-btn text class="white--text" @click="$emit('close-modal')"
|
||||
>Close</v-btn
|
||||
>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
@ -0,0 +1,100 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, defineProps, defineEmits } from "vue";
|
||||
|
||||
// 부모에서 전달받을 Props 정의
|
||||
const props = defineProps<{
|
||||
modelValue: boolean;
|
||||
selectedData: { workflow: string; stepName: string } | null;
|
||||
workflowList: string[];
|
||||
}>();
|
||||
|
||||
// v-model 및 save 이벤트를 위한 Emit 정의
|
||||
const emit = defineEmits<{
|
||||
(e: "update:modelValue", value: boolean): void;
|
||||
(e: "save", payload: { workflow: string; stepName: string }): void;
|
||||
}>();
|
||||
|
||||
// 다이얼로그 내부에서 사용할 로컬 상태
|
||||
const internalWorkflow = ref(props.selectedData?.workflow || "");
|
||||
const internalStepName = ref(props.selectedData?.stepName || "");
|
||||
|
||||
// 다이얼로그가 열릴 때 외부 데이터를 내부로 복사
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(open) => {
|
||||
if (open && props.selectedData) {
|
||||
internalWorkflow.value = props.selectedData.workflow;
|
||||
internalStepName.value = props.selectedData.stepName;
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
// Save 버튼 클릭
|
||||
const onSave = () => {
|
||||
emit("save", {
|
||||
workflow: internalWorkflow.value,
|
||||
stepName: internalStepName.value,
|
||||
});
|
||||
emit("update:modelValue", false);
|
||||
};
|
||||
|
||||
// Close 버튼 클릭
|
||||
const onClose = () => {
|
||||
emit("update:modelValue", false);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-card flat>
|
||||
<!-- 타이틀 바 -->
|
||||
<v-toolbar flat color="primary" dark>
|
||||
<v-toolbar-title>Edit Workflow Step Config</v-toolbar-title>
|
||||
<v-spacer />
|
||||
<v-btn icon @click="onClose">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</v-toolbar>
|
||||
|
||||
<!-- 본문 -->
|
||||
<v-card-text class="pt-6 px-6 pb-4">
|
||||
<!-- Select Workflow -->
|
||||
<v-row class="mb-6" dense>
|
||||
<v-col cols="12" sm="4">
|
||||
<div class="font-weight-medium white--text">Select Workflow</div>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-select
|
||||
v-model="internalWorkflow"
|
||||
:items="workflowList"
|
||||
dense
|
||||
hide-details
|
||||
placeholder="Select Workflow"
|
||||
style="background: #1e1e1e; color: #fff"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Workflow Step Name -->
|
||||
<v-row class="mb-6" dense>
|
||||
<v-col cols="12">
|
||||
<div class="font-weight-medium white--text mb-2">
|
||||
Workflow Step Name
|
||||
</div>
|
||||
<v-text-field
|
||||
v-model="internalStepName"
|
||||
dense
|
||||
hide-details
|
||||
placeholder="Enter Workflow Step"
|
||||
style="background: #1e1e1e; color: #fff"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
|
||||
<!-- 액션 버튼 -->
|
||||
<v-card-actions class="justify-end" style="padding: 16px 24px">
|
||||
<v-btn color="success" @click="onSave">Save</v-btn>
|
||||
<v-btn text class="white--text" @click="onClose">Close</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
@ -0,0 +1,100 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, defineProps, defineEmits } from "vue";
|
||||
|
||||
// 부모에서 전달받을 Props 정의
|
||||
const props = defineProps<{
|
||||
modelValue: boolean;
|
||||
selectedData: { workflow: string; stepName: string } | null;
|
||||
workflowList: string[];
|
||||
}>();
|
||||
|
||||
// v-model 및 save 이벤트를 위한 Emit 정의
|
||||
const emit = defineEmits<{
|
||||
(e: "update:modelValue", value: boolean): void;
|
||||
(e: "save", payload: { workflow: string; stepName: string }): void;
|
||||
}>();
|
||||
|
||||
// 다이얼로그 내부에서 사용할 로컬 상태
|
||||
const internalWorkflow = ref(props.selectedData?.workflow || "");
|
||||
const internalStepName = ref(props.selectedData?.stepName || "");
|
||||
|
||||
// 다이얼로그가 열릴 때 외부 데이터를 내부로 복사
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(open) => {
|
||||
if (open && props.selectedData) {
|
||||
internalWorkflow.value = props.selectedData.workflow;
|
||||
internalStepName.value = props.selectedData.stepName;
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
// Save 버튼 클릭
|
||||
const onSave = () => {
|
||||
emit("save", {
|
||||
workflow: internalWorkflow.value,
|
||||
stepName: internalStepName.value,
|
||||
});
|
||||
emit("update:modelValue", false);
|
||||
};
|
||||
|
||||
// Close 버튼 클릭
|
||||
const onClose = () => {
|
||||
emit("update:modelValue", false);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-card flat>
|
||||
<!-- 타이틀 바 -->
|
||||
<v-toolbar flat color="primary" dark>
|
||||
<v-toolbar-title>Edit Workflow</v-toolbar-title>
|
||||
<v-spacer />
|
||||
<v-btn icon @click="onClose">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</v-toolbar>
|
||||
|
||||
<!-- 본문 -->
|
||||
<v-card-text class="pt-6 px-6 pb-4">
|
||||
<!-- Select Workflow -->
|
||||
<v-row class="mb-6" dense>
|
||||
<v-col cols="12" sm="4">
|
||||
<div class="font-weight-medium white--text">Select Workflow</div>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-select
|
||||
v-model="internalWorkflow"
|
||||
:items="workflowList"
|
||||
dense
|
||||
hide-details
|
||||
placeholder="Select Workflow"
|
||||
style="background: #1e1e1e; color: #fff"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Workflow Step Name -->
|
||||
<v-row class="mb-6" dense>
|
||||
<v-col cols="12">
|
||||
<div class="font-weight-medium white--text mb-2">
|
||||
Workflow Step Name
|
||||
</div>
|
||||
<v-text-field
|
||||
v-model="internalStepName"
|
||||
dense
|
||||
hide-details
|
||||
placeholder="Enter Workflow Step"
|
||||
style="background: #1e1e1e; color: #fff"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
|
||||
<!-- 액션 버튼 -->
|
||||
<v-card-actions class="justify-end" style="padding: 16px 24px">
|
||||
<v-btn color="success" @click="onSave">Save</v-btn>
|
||||
<v-btn text class="white--text" @click="onClose">Close</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
@ -0,0 +1,152 @@
|
||||
<script setup lang="ts">
|
||||
import IconArrowDown from "@/components/button/IconArrowDown.vue";
|
||||
import IconArrowUp from "@/components/button/IconArrowUp.vue";
|
||||
import IconDeleteBtn from "@/components/button/IconDeleteBtn.vue";
|
||||
import IconModifyBtn from "@/components/button/IconModifyBtn.vue";
|
||||
import { ref, watch } from "vue";
|
||||
|
||||
const steps = ref([
|
||||
{ order: 1, stepName: "Data Load", type: "DataPrep", status: "Configured" },
|
||||
{
|
||||
order: 2,
|
||||
stepName: "Preprocessing",
|
||||
type: "Preprocess",
|
||||
status: "Not Configured",
|
||||
},
|
||||
{
|
||||
order: 3,
|
||||
stepName: "Train Model",
|
||||
type: "Train",
|
||||
status: "Not Configured",
|
||||
},
|
||||
]);
|
||||
|
||||
const props = defineProps({
|
||||
editData: Object,
|
||||
mode: String,
|
||||
userOption: Array,
|
||||
});
|
||||
|
||||
const emit = defineEmits(["handle-data", "close-modal"]);
|
||||
|
||||
const visible = ref(true);
|
||||
|
||||
const form = ref({
|
||||
name: "",
|
||||
description: "",
|
||||
});
|
||||
|
||||
const submit = () => {
|
||||
emit("handle-data", form.value);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-card class="rounded-lg overflow-hidden">
|
||||
<!-- 타이틀 영역 -->
|
||||
<v-card-title
|
||||
class="text-white font-weight-bold text-h6"
|
||||
style="background-color: #1976d2"
|
||||
>
|
||||
Create Workflow
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text class="pa-6">
|
||||
<div class="text-subtitle-1 font-weight-medium mb-4">
|
||||
Workflow Information
|
||||
</div>
|
||||
<v-form @submit.prevent="submit">
|
||||
<div class="mb-5">
|
||||
<label class="text-subtitle-2 font-weight-medium mb-1 d-block"
|
||||
>Workflow Name</label
|
||||
>
|
||||
<v-text-field
|
||||
v-model="form.name"
|
||||
variant="outlined"
|
||||
dense
|
||||
hide-details
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-subtitle-2 font-weight-medium mb-1 d-block"
|
||||
>Workflow Description</label
|
||||
>
|
||||
<v-textarea
|
||||
v-model="form.description"
|
||||
variant="outlined"
|
||||
rows="3"
|
||||
dense
|
||||
hide-details
|
||||
/>
|
||||
</div>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-text class="pt-6 pb-4 px-6">
|
||||
<div class="text-subtitle-1 font-weight-medium mb-4">Workflow Steps</div>
|
||||
<v-row class="align-center mb-4">
|
||||
<v-col cols="auto">
|
||||
<v-btn color="primary" small>
|
||||
<v-icon left>mdi-plus</v-icon>
|
||||
Add Step
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="auto">
|
||||
<v-btn color="success" small>Save</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="auto">
|
||||
<v-btn color="grey" small>Cancel</v-btn>
|
||||
</v-col>
|
||||
<v-spacer />
|
||||
</v-row>
|
||||
|
||||
<v-simple-table dense>
|
||||
<thead>
|
||||
<tr class="grey lighten-2">
|
||||
<th class="text-center" style="width: 5%">Order</th>
|
||||
<th class="text-center">Step Name</th>
|
||||
<th class="text-center">Component Type</th>
|
||||
<th class="text-center">Status</th>
|
||||
<th class="text-center" style="width: 20%">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(step, i) in steps"
|
||||
:key="step.order"
|
||||
style="border: 1px solid #ccc"
|
||||
>
|
||||
<td class="text-center">{{ step.order }}</td>
|
||||
<td class="text-center">{{ step.stepName }}</td>
|
||||
<td class="d-flex justify-center align-center">
|
||||
<v-select
|
||||
v-model="step.type"
|
||||
:items="['DataPrep', 'Preprocess', 'Train']"
|
||||
dense
|
||||
hide-details
|
||||
style="max-width: 180px"
|
||||
/>
|
||||
</td>
|
||||
<td class="text-center">{{ step.status }}</td>
|
||||
<td class="text-center">
|
||||
<IconArrowUp />
|
||||
<IconArrowDown />
|
||||
|
||||
<IconModifyBtn />
|
||||
<IconDeleteBtn />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-simple-table>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions class="justify-end" style="padding: 16px 24px">
|
||||
<v-btn color="success" @click="submit">Save</v-btn>
|
||||
<v-btn text class="white--text" @click="$emit('close-modal')"
|
||||
>Close</v-btn
|
||||
>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
@ -0,0 +1,89 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
editData: Object,
|
||||
mode: String,
|
||||
userOption: Array,
|
||||
});
|
||||
|
||||
const emit = defineEmits(["handle-data", "close-modal"]);
|
||||
|
||||
const visible = ref(true);
|
||||
const fileInput = ref<HTMLInputElement | null>(null);
|
||||
const form = ref({
|
||||
name: "",
|
||||
description: "",
|
||||
file: "",
|
||||
});
|
||||
const onChooseFile = () => {
|
||||
fileInput.value?.click();
|
||||
};
|
||||
const submit = () => {
|
||||
emit("handle-data", form.value);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-card class="rounded-lg overflow-hidden">
|
||||
<!-- 타이틀 영역 -->
|
||||
<v-card-title
|
||||
class="text-white font-weight-bold text-h6"
|
||||
style="background-color: #1976d2"
|
||||
>
|
||||
Workflow Information
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text class="pa-6">
|
||||
<v-form @submit.prevent="submit">
|
||||
<div class="text-subtitle-1 font-weight-medium mb-4">
|
||||
Workflow Information
|
||||
</div>
|
||||
<div class="mb-5">
|
||||
<label class="text-subtitle-2 font-weight-medium mb-1 d-block"
|
||||
>Workflow Name
|
||||
</label>
|
||||
<v-text-field
|
||||
v-model="form.name"
|
||||
variant="outlined"
|
||||
dense
|
||||
hide-details
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-5">
|
||||
<label class="text-subtitle-2 font-weight-medium mb-1 d-block"
|
||||
>Workflow Description
|
||||
</label>
|
||||
<v-text-field
|
||||
v-model="form.description"
|
||||
variant="outlined"
|
||||
dense
|
||||
hide-details
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-5">
|
||||
<label class="text-subtitle-2 font-weight-medium mb-1 d-block"
|
||||
>Upload File
|
||||
</label>
|
||||
<v-file-input
|
||||
v-model="form.file"
|
||||
label="Upload File"
|
||||
@click:append-outer="onChooseFile"
|
||||
outlined
|
||||
dense
|
||||
hide-details
|
||||
/>
|
||||
</div>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions class="justify-end" style="padding: 16px 24px">
|
||||
<v-btn color="success" @click="submit">Save</v-btn>
|
||||
<v-btn text class="white--text" @click="$emit('close-modal')"
|
||||
>Close</v-btn
|
||||
>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
@ -0,0 +1,26 @@
|
||||
<script setup>
|
||||
import { defineEmits } from "vue";
|
||||
|
||||
const emit = defineEmits(["onClick"]);
|
||||
|
||||
const onClick = () => {
|
||||
emit("onClick");
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-tooltip location="bottom" text="Down">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn
|
||||
icon="mdi-arrow-down"
|
||||
class="ma-1"
|
||||
color="brack"
|
||||
density="comfortable"
|
||||
elevation="0"
|
||||
@click="onClick"
|
||||
size="small"
|
||||
v-bind="props"
|
||||
></v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</template>
|
||||
@ -0,0 +1,26 @@
|
||||
<script setup>
|
||||
import { defineEmits } from "vue";
|
||||
|
||||
const emit = defineEmits(["onClick"]);
|
||||
|
||||
const onClick = () => {
|
||||
emit("onClick");
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-tooltip location="bottom" text="Up">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn
|
||||
icon="mdi-arrow-up"
|
||||
class="ma-1"
|
||||
color="brack"
|
||||
density="comfortable"
|
||||
elevation="0"
|
||||
@click="onClick"
|
||||
size="small"
|
||||
v-bind="props"
|
||||
></v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</template>
|
||||
@ -0,0 +1,26 @@
|
||||
<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
|
||||
icon="mdi-server"
|
||||
class="ma-1"
|
||||
color="error"
|
||||
density="comfortable"
|
||||
elevation="0"
|
||||
@click="onClick"
|
||||
size="small"
|
||||
v-bind="props"
|
||||
></v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</template>
|
||||
@ -0,0 +1,551 @@
|
||||
<script setup lang="ts">
|
||||
import IconDeleteBtn from "@/components/button/IconDeleteBtn.vue";
|
||||
import IconModifyBtn from "@/components/button/IconModifyBtn.vue";
|
||||
import IconSettingBtn from "@/components/button/IconSettingBtn.vue";
|
||||
// import FormComponent from "@/components/device/FormComponent.vue";
|
||||
import { onMounted, ref, watch } from "vue";
|
||||
import ViewComponent from "@/components/deployment/ViewComponent.vue";
|
||||
import DeploymentDialog from "@/components/atoms/organisms/DeploymentDialog.vue";
|
||||
// const store = commonStore();
|
||||
|
||||
const openView = ref(false);
|
||||
const isEditVisible = ref(false);
|
||||
const tableHeader = [
|
||||
{ label: "No", width: "5%", style: "word-break: keep-all;" },
|
||||
{ label: "Model Name", width: "20%", style: "word-break: keep-all;" },
|
||||
{ label: "Version", width: "10%", style: "word-break: keep-all;" },
|
||||
{ label: "Duration", width: "10%", style: "word-break: keep-all;" },
|
||||
{ label: "Deploy Status", width: "10%", style: "word-break: keep-all;" },
|
||||
{ label: "Download Status", width: "10%", style: "word-break: keep-all;" },
|
||||
{ label: "Deployed At", width: "15%", style: "word-break: keep-all;" },
|
||||
{ label: "Action", width: "10%", style: "word-break: keep-all;" },
|
||||
];
|
||||
|
||||
const searchOptions = [
|
||||
{ searchType: "전체", searchText: "" },
|
||||
{ searchType: "디바이스 별칭", searchText: "deviceAlias" },
|
||||
{ searchType: "디바이스 키", searchText: "deviceKey" },
|
||||
{ searchType: "사용자", searchText: "userId" },
|
||||
{ searchType: "디바이스 이름", searchText: "deviceName" },
|
||||
{ searchType: "디바이스 모델", searchText: "deviceModel" },
|
||||
{ searchType: "디바이스 OS", searchText: "deviceOs" },
|
||||
];
|
||||
|
||||
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: [],
|
||||
isEditVisible: false,
|
||||
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 = () => {
|
||||
data.value.results = [
|
||||
{
|
||||
no: 23,
|
||||
modelName: "ImageClassifier",
|
||||
version: 2,
|
||||
duration: "-",
|
||||
deployStatus: "failure",
|
||||
downloadStatus: "failure",
|
||||
deployedAt: "2025-04-28",
|
||||
key: 23,
|
||||
},
|
||||
{
|
||||
no: 22,
|
||||
modelName: "ImageClassifier",
|
||||
version: 1,
|
||||
duration: "21s",
|
||||
deployStatus: "failure",
|
||||
downloadStatus: "failure",
|
||||
deployedAt: "2025-03-21",
|
||||
key: 22,
|
||||
},
|
||||
{
|
||||
no: 21,
|
||||
modelName: "LaneDetection",
|
||||
version: 1,
|
||||
duration: "12s",
|
||||
deployStatus: "success",
|
||||
downloadStatus: "failure",
|
||||
deployedAt: "2025-03-19",
|
||||
key: 21,
|
||||
},
|
||||
{
|
||||
no: 20,
|
||||
modelName: "CustomerChurn",
|
||||
version: 1,
|
||||
duration: "-",
|
||||
deployStatus: "in_progress",
|
||||
downloadStatus: "-",
|
||||
deployedAt: "2025-02-08",
|
||||
key: 20,
|
||||
},
|
||||
{
|
||||
no: 19,
|
||||
modelName: "AnomalyDetection",
|
||||
version: 1,
|
||||
duration: "20s",
|
||||
deployStatus: "success",
|
||||
downloadStatus: "success",
|
||||
deployedAt: "2025-02-06",
|
||||
key: 19,
|
||||
},
|
||||
{
|
||||
no: 18,
|
||||
modelName: "TimeSeriesForecast",
|
||||
version: 2,
|
||||
duration: "19s",
|
||||
deployStatus: "success",
|
||||
downloadStatus: "success",
|
||||
deployedAt: "2025-01-28",
|
||||
key: 18,
|
||||
},
|
||||
{
|
||||
no: 17,
|
||||
modelName: "TextSentiment",
|
||||
version: 2,
|
||||
duration: "20s",
|
||||
deployStatus: "success",
|
||||
downloadStatus: "success",
|
||||
deployedAt: "2025-01-28",
|
||||
key: 17,
|
||||
},
|
||||
];
|
||||
data.value.totalDataLength = data.value.results.length;
|
||||
const total = data.value.totalDataLength;
|
||||
const size = data.value.params.pageSize;
|
||||
data.value.pageLength =
|
||||
total % size === 0 ? total / size : Math.ceil(total / size);
|
||||
};
|
||||
|
||||
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 handleRemoveData = () => {
|
||||
if (data.value.selected.length === 0) {
|
||||
// store.setSnackbarMsg({
|
||||
// text: "삭제 할 데이터를 선택해주세요. ",
|
||||
// result: 500,
|
||||
// });
|
||||
return;
|
||||
}
|
||||
if (data.value.allSelected || data.value.selected.length !== 1) {
|
||||
data.value.isConfirmDialogVisible = true;
|
||||
return;
|
||||
}
|
||||
//리스트로 삭제 할때
|
||||
removeData(undefined);
|
||||
};
|
||||
|
||||
const handleRefresh = () => {
|
||||
alert("Refresh 작업 진행중...");
|
||||
};
|
||||
const openInfoModal = () => {
|
||||
data.value.modalMode = "info";
|
||||
openView.value = true;
|
||||
};
|
||||
const closeDetail = () => {
|
||||
openView.value = false;
|
||||
};
|
||||
const changePageNum = (page) => {
|
||||
data.value.params.pageNum = page;
|
||||
getData();
|
||||
};
|
||||
const openSettingModal = (selectedItem) => {
|
||||
data.value.selectedData = selectedItem;
|
||||
data.value.modalMode = "setting";
|
||||
openView.value = true;
|
||||
};
|
||||
const openModifyModal = (selectedItem) => {
|
||||
data.value.selectedData = selectedItem;
|
||||
data.value.modalMode = "modify";
|
||||
data.value.isModalVisible = true;
|
||||
};
|
||||
|
||||
const openDeploymentModal = () => {
|
||||
data.value.selectedData = null;
|
||||
data.value.modalMode = "create";
|
||||
isEditVisible.value = true;
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
data.value.isModalVisible = false;
|
||||
data.value.selectedData = null;
|
||||
};
|
||||
const closeCreateModal = () => {
|
||||
data.value.isModalVisible = false;
|
||||
isEditVisible.value = null;
|
||||
};
|
||||
const getSelectedAllData = () => {
|
||||
data.value.selected = data.value.allSelected
|
||||
? data.value.results.map((item) => {
|
||||
return {
|
||||
deviceKey: item.deviceKey,
|
||||
};
|
||||
})
|
||||
: [];
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getData();
|
||||
getCodeList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-100" v-if="!openView">
|
||||
<!-- <v-dialog v-model="data.isModalVisible" max-width="600" persistent>-->
|
||||
<!-- <FormComponent-->
|
||||
<!-- :edit-data="data.selectedData"-->
|
||||
<!-- :mode="data.modalMode"-->
|
||||
<!-- @close-modal="closeModal"-->
|
||||
<!-- @handle-data="saveData"-->
|
||||
<!-- :user-option="data.userOption"-->
|
||||
<!-- />-->
|
||||
<!-- </v-dialog>-->
|
||||
<!-- <v-dialog v-model="data.isConfirmDialogVisible" persistent max-width="300">-->
|
||||
<!-- <ConfirmDialogComponent-->
|
||||
<!-- @cancel="data.isConfirmDialogVisible = false"-->
|
||||
<!-- @delete="removeData(undefined)"-->
|
||||
<!-- @init="(data.selected = []), (data.allSelected = false)"-->
|
||||
<!-- />-->
|
||||
<!-- </v-dialog>-->
|
||||
<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">Deployment</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 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">
|
||||
<v-btn color="info" class="mr-4" @click="handleRefresh"
|
||||
>Refresh
|
||||
</v-btn>
|
||||
<v-btn color="info" @click="openDeploymentModal"
|
||||
>Deployment</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 class="text-start">{{ item.modelName }}</td>
|
||||
<td>{{ item.version }}</td>
|
||||
<td>{{ item.duration }}</td>
|
||||
|
||||
<td>
|
||||
<v-icon
|
||||
v-if="item.deployStatus === 'success'"
|
||||
color="success"
|
||||
>
|
||||
mdi-checkbox-marked-circle
|
||||
</v-icon>
|
||||
<v-icon
|
||||
v-else-if="item.deployStatus === 'in_progress'"
|
||||
spin
|
||||
>
|
||||
mdi-loading
|
||||
</v-icon>
|
||||
<v-icon v-else color="error"> mdi-close-circle </v-icon>
|
||||
</td>
|
||||
<td>
|
||||
<v-icon
|
||||
v-if="item.downloadStatus === 'success'"
|
||||
color="success"
|
||||
>
|
||||
mdi-checkbox-marked-circle
|
||||
</v-icon>
|
||||
<v-icon
|
||||
v-else-if="item.downloadStatus === 'in_progress'"
|
||||
spin
|
||||
>
|
||||
mdi-loading
|
||||
</v-icon>
|
||||
<v-icon
|
||||
v-else-if="item.downloadStatus === 'failure'"
|
||||
color="error"
|
||||
>
|
||||
mdi-close-circle
|
||||
</v-icon>
|
||||
<span v-else>-</span>
|
||||
</td>
|
||||
<td>{{ item.deployedAt }}</td>
|
||||
<td style="white-space: nowrap">
|
||||
<IconInfoBtn @on-click="openInfoModal(item)" />
|
||||
<IconDeployment @click="redeploy(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="isEditVisible" max-width="800" persistent>
|
||||
<DeploymentDialog
|
||||
:edit-data="data.selectedData"
|
||||
:mode="data.modalMode"
|
||||
@close-modal="closeCreateModal"
|
||||
@handle-data="saveData"
|
||||
:user-option="data.userOption"
|
||||
/>
|
||||
</v-dialog>
|
||||
</v-container>
|
||||
</div>
|
||||
<div class="w-100" v-else>
|
||||
<ViewComponent @close="closeDetail" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@ -0,0 +1,397 @@
|
||||
<script setup lang="ts">
|
||||
import IconDeleteBtn from "@/components/button/IconDeleteBtn.vue";
|
||||
import IconModifyBtn from "@/components/button/IconModifyBtn.vue";
|
||||
// import FormComponent from "@/components/device/FormComponent.vue";
|
||||
import { onMounted, ref, watch } from "vue";
|
||||
|
||||
// const store = commonStore();
|
||||
|
||||
const experimentInfo = ref({
|
||||
modelName: "ImageClassifier",
|
||||
projectName: "배터리 상태 예측 모델 프로젝트",
|
||||
experimentName: "Baseline Model Training",
|
||||
executionName: "run-batch32-lr0.001",
|
||||
deployDate: "2025-02-06",
|
||||
createdId: "ADMIN_001",
|
||||
description: "기본 모델 구조로 학습 성능 측정",
|
||||
});
|
||||
|
||||
const otaInfo = ref({
|
||||
packageName: "자율주행 타차량 예측",
|
||||
os: "Linux",
|
||||
packageFileName: "4_EdgeInfra_Perception.sh",
|
||||
packageFilePath: "/home/etri/TeslaSystem/EdgeInfraVision/RUN",
|
||||
softwareName: "4_EdgeInfra_Perception.sh",
|
||||
softwareVersion: "v2.0",
|
||||
execute: "Not Executed",
|
||||
});
|
||||
|
||||
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;
|
||||
setPaginationLength();
|
||||
// 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 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 fluid 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"
|
||||
>
|
||||
<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-card flat 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">Deploy Model Information </span>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text class="px-6 pb-6 pt-4">
|
||||
<!-- Experiment Name -->
|
||||
<v-row align="center" class="py-2">
|
||||
<v-col cols="3" class="text-h6 font-weight-bold">Model Name </v-col>
|
||||
<v-col cols="9" class="pa-2">{{ experimentInfo.modelName }}</v-col>
|
||||
</v-row>
|
||||
<VDivider class="my-2" />
|
||||
|
||||
<!-- Project Name -->
|
||||
<v-row align="center" class="py-2">
|
||||
<v-col cols="3" class="text-h6 font-weight-bold"
|
||||
>Project Name</v-col
|
||||
>
|
||||
<v-col cols="9" class="pa-2">{{
|
||||
experimentInfo.projectName
|
||||
}}</v-col>
|
||||
</v-row>
|
||||
<VDivider class="my-2" />
|
||||
<v-row align="center" class="py-2">
|
||||
<v-col cols="3" class="text-h6 font-weight-bold"
|
||||
>Experiment Name
|
||||
</v-col>
|
||||
<v-col cols="9" class="pa-2">{{
|
||||
experimentInfo.experimentName
|
||||
}}</v-col>
|
||||
</v-row>
|
||||
<VDivider class="my-2" />
|
||||
<!-- Created Date / ID -->
|
||||
<v-row align="center" class="py-2">
|
||||
<v-col cols="3" class="text-h6 font-weight-bold"
|
||||
>Execution Name</v-col
|
||||
>
|
||||
<v-col cols="9" class="pa-2">{{
|
||||
experimentInfo.executionName
|
||||
}}</v-col>
|
||||
</v-row>
|
||||
<VDivider class="my-2" />
|
||||
<v-row align="center" class="py-2">
|
||||
<v-col cols="3" class="text-h6 font-weight-bold"
|
||||
>Deploy Date
|
||||
</v-col>
|
||||
<v-col cols="3" class="pa-2">{{ experimentInfo.deployDate }}</v-col>
|
||||
<v-col cols="3" class="text-h6 font-weight-bold">Created ID</v-col>
|
||||
<v-col cols="3" class="pa-2">{{ experimentInfo.createdId }}</v-col>
|
||||
</v-row>
|
||||
<VDivider class="my-2" />
|
||||
|
||||
<!-- Description -->
|
||||
<v-row align="center" class="py-2">
|
||||
<v-col cols="3" class="text-h6 font-weight-bold">Description</v-col>
|
||||
<v-col cols="9" class="pa-2">{{
|
||||
experimentInfo.description
|
||||
}}</v-col>
|
||||
</v-row>
|
||||
<VDivider class="my-2" />
|
||||
<v-row align="center" class="py-2">
|
||||
<v-col cols="3" class="text-h6 font-weight-bold"
|
||||
>Deploy Status
|
||||
</v-col>
|
||||
<v-col cols="3" class="pa-2">-</v-col>
|
||||
<v-col cols="3" class="text-h6 font-weight-bold"
|
||||
>Download Status
|
||||
</v-col>
|
||||
<v-col cols="3" class="pa-2">-</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
<v-card flat 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">Deploy OTA Information</span>
|
||||
</v-card-title>
|
||||
<v-card-text class="px-6 pb-6 pt-4">
|
||||
<v-row align="center" class="py-2">
|
||||
<v-col cols="3" class="text-h6 font-weight-bold"
|
||||
>Package Name</v-col
|
||||
>
|
||||
<v-col cols="9">{{ otaInfo.packageName }}</v-col>
|
||||
</v-row>
|
||||
<VDivider class="my-2" />
|
||||
<v-row align="center" class="py-2">
|
||||
<v-col cols="3" class="text-h6 font-weight-bold">OS</v-col>
|
||||
<v-col cols="9">{{ otaInfo.os }}</v-col>
|
||||
</v-row>
|
||||
<VDivider class="my-2" />
|
||||
<v-row align="center" class="py-2">
|
||||
<v-col cols="3" class="text-h6 font-weight-bold"
|
||||
>Package File Name</v-col
|
||||
>
|
||||
<v-col cols="9">{{ otaInfo.packageFileName }}</v-col>
|
||||
</v-row>
|
||||
<VDivider class="my-2" />
|
||||
<v-row align="center" class="py-2">
|
||||
<v-col cols="3" class="text-h6 font-weight-bold"
|
||||
>Package File Path</v-col
|
||||
>
|
||||
<v-col cols="9">{{ otaInfo.packageFilePath }}</v-col>
|
||||
</v-row>
|
||||
<VDivider class="my-2" />
|
||||
<v-row align="center" class="py-2">
|
||||
<v-col cols="3" class="text-h6 font-weight-bold"
|
||||
>Software Name</v-col
|
||||
>
|
||||
<v-col cols="3">{{ otaInfo.softwareName }}</v-col>
|
||||
<v-col cols="3" class="text-h6 font-weight-bold"
|
||||
>Software Version</v-col
|
||||
>
|
||||
<v-col cols="3">{{ otaInfo.softwareVersion }}</v-col>
|
||||
</v-row>
|
||||
<VDivider class="my-2" />
|
||||
<v-row align="center" class="py-2">
|
||||
<v-col cols="3" class="text-h6 font-weight-bold">Execute</v-col>
|
||||
<v-col cols="9">{{ otaInfo.execute }}</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
<v-sheet class="d-flex justify-end mb-2">
|
||||
<v-btn color="primary" @click="emit('close')"> Back to List </v-btn>
|
||||
</v-sheet>
|
||||
</v-card>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.v-card-text {
|
||||
width: 100% !important;
|
||||
border-collapse: collapse;
|
||||
/* 전체 테이블 1px 테두리 */
|
||||
}
|
||||
|
||||
.v-card-text th {
|
||||
font-size: 20px;
|
||||
min-width: 400px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.v-card-text td {
|
||||
font-size: 16px;
|
||||
min-width: 600px;
|
||||
padding: 12px 16px;
|
||||
text-align: left;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
.v-card-text tr:nth-child(odd) {
|
||||
background-color: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,526 @@
|
||||
<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 activePlot = ref<"parallel" | "scatter" | "box" | "contour">("parallel");
|
||||
|
||||
// 공통 옵션 예시
|
||||
const parameters = ["alpha", "l1_ratio", "max_depth", "n_estimators"];
|
||||
const metrics = ["mae", "rmse", "r2", "accuracy"];
|
||||
|
||||
// 각 플롯별 선택값
|
||||
const selectedParams = ref<string[]>([]);
|
||||
const selectedX = ref("");
|
||||
const selectedY = ref("");
|
||||
const selectedZ = ref("");
|
||||
const reverseColor = ref(false);
|
||||
|
||||
function clearAll() {
|
||||
selectedParams.value = [];
|
||||
selectedX.value = "";
|
||||
selectedY.value = "";
|
||||
selectedZ.value = "";
|
||||
reverseColor.value = false;
|
||||
}
|
||||
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 fluid 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>
|
||||
<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'">
|
||||
<!-- 2차 탭: 플롯 종류 -->
|
||||
<v-tabs
|
||||
v-model="activePlot"
|
||||
density="compact"
|
||||
background-color="transparent"
|
||||
class="sub-tabs mt-4"
|
||||
grow
|
||||
show-arrows
|
||||
slider-color="secondary"
|
||||
>
|
||||
<v-tab value="parallel">Parallel Coordinates Plot</v-tab>
|
||||
<v-tab value="scatter">Scatter Plot</v-tab>
|
||||
<v-tab value="box">Box Plot</v-tab>
|
||||
<v-tab value="contour">Contour Plot</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<!-- 컨텐츠 카드 -->
|
||||
<v-card flat class="px-6" elevation="2">
|
||||
<v-row>
|
||||
<!-- 좌측 컨트롤 -->
|
||||
<v-col cols="12" md="4" class="pr-4 pt-8">
|
||||
<v-sheet class="pa-4" elevation="1" style="background: #1e1e1e">
|
||||
<div v-if="activePlot === 'parallel'">
|
||||
<v-select
|
||||
v-model="selectedParams"
|
||||
:items="parameters"
|
||||
label="Parameters"
|
||||
multiple
|
||||
dense
|
||||
hide-details
|
||||
class="mb-4"
|
||||
/>
|
||||
<v-select
|
||||
v-model="selectedY"
|
||||
:items="metrics"
|
||||
label="Metrics"
|
||||
dense
|
||||
hide-details
|
||||
class="mb-4"
|
||||
/>
|
||||
<v-btn text @click="clearAll">Clear All</v-btn>
|
||||
</div>
|
||||
|
||||
<div v-else-if="activePlot === 'scatter'">
|
||||
<v-select
|
||||
v-model="selectedX"
|
||||
:items="parameters"
|
||||
label="X-axis"
|
||||
dense
|
||||
hide-details
|
||||
class="mb-4"
|
||||
/>
|
||||
<v-select
|
||||
v-model="selectedY"
|
||||
:items="metrics"
|
||||
label="Y-axis"
|
||||
dense
|
||||
hide-details
|
||||
class="mb-4"
|
||||
/>
|
||||
<v-btn text @click="clearAll">Clear All</v-btn>
|
||||
</div>
|
||||
|
||||
<div v-else-if="activePlot === 'box'">
|
||||
<v-select
|
||||
v-model="selectedX"
|
||||
:items="parameters"
|
||||
label="X-axis"
|
||||
dense
|
||||
hide-details
|
||||
class="mb-4"
|
||||
/>
|
||||
<v-select
|
||||
v-model="selectedY"
|
||||
:items="metrics"
|
||||
label="Y-axis"
|
||||
dense
|
||||
hide-details
|
||||
class="mb-4"
|
||||
/>
|
||||
<v-btn text @click="clearAll">Clear All</v-btn>
|
||||
</div>
|
||||
|
||||
<div v-else-if="activePlot === 'contour'">
|
||||
<v-select
|
||||
v-model="selectedX"
|
||||
:items="metrics"
|
||||
label="X-axis"
|
||||
dense
|
||||
hide-details
|
||||
class="mb-4"
|
||||
/>
|
||||
<v-select
|
||||
v-model="selectedY"
|
||||
:items="metrics"
|
||||
label="Y-axis"
|
||||
dense
|
||||
hide-details
|
||||
class="mb-4"
|
||||
/>
|
||||
<v-select
|
||||
v-model="selectedZ"
|
||||
:items="[
|
||||
'training_score',
|
||||
'validation_score',
|
||||
'mae',
|
||||
'rmse',
|
||||
]"
|
||||
label="Z-axis"
|
||||
dense
|
||||
hide-details
|
||||
class="mb-4"
|
||||
/>
|
||||
<v-switch
|
||||
v-model="reverseColor"
|
||||
label="Reverse color"
|
||||
dense
|
||||
hide-details
|
||||
/>
|
||||
<v-btn text @click="clearAll" class="mt-4">Clear All</v-btn>
|
||||
</div>
|
||||
</v-sheet>
|
||||
</v-col>
|
||||
|
||||
<!-- 우측 그래프 placeholder -->
|
||||
<v-col cols="12" md="8">
|
||||
<v-sheet class="placeholder-box" height="400px" elevation="1" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-sheet class="d-flex justify-end my-4">
|
||||
<v-btn color="primary" @click="emit('close')">Back to List</v-btn>
|
||||
</v-sheet>
|
||||
</v-card>
|
||||
</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,73 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
editData: Object,
|
||||
mode: String,
|
||||
userOption: Array,
|
||||
});
|
||||
|
||||
const emit = defineEmits(["handle-data", "close-modal"]);
|
||||
|
||||
const visible = ref(true);
|
||||
|
||||
const form = ref({
|
||||
name: "",
|
||||
description: "",
|
||||
});
|
||||
|
||||
const submit = () => {
|
||||
emit("handle-data", form.value);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-dialog v-model="visible" max-width="500" persistent>
|
||||
<v-card class="rounded-lg overflow-hidden">
|
||||
<!-- 타이틀 영역 -->
|
||||
<v-card-title
|
||||
class="text-white font-weight-bold text-h6"
|
||||
style="background-color: #1976d2"
|
||||
>
|
||||
Create Experiment
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text class="pa-6">
|
||||
<v-form @submit.prevent="submit">
|
||||
<div class="mb-5">
|
||||
<label class="text-subtitle-2 font-weight-medium mb-1 d-block"
|
||||
>Experiment Name</label
|
||||
>
|
||||
<v-text-field
|
||||
v-model="form.name"
|
||||
variant="outlined"
|
||||
dense
|
||||
hide-details
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-subtitle-2 font-weight-medium mb-1 d-block"
|
||||
>Description</label
|
||||
>
|
||||
<v-textarea
|
||||
v-model="form.description"
|
||||
variant="outlined"
|
||||
rows="3"
|
||||
dense
|
||||
hide-details
|
||||
/>
|
||||
</div>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions class="justify-end px-6 pb-4">
|
||||
<v-btn color="primary" class="mr-2" @click="submit" variant="flat">
|
||||
CREATE
|
||||
</v-btn>
|
||||
<v-btn variant="text" @click="$emit('close-modal')">CANCEL</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
@ -0,0 +1,566 @@
|
||||
<script setup lang="ts">
|
||||
import IconDeleteBtn from "@/components/button/IconDeleteBtn.vue";
|
||||
import IconModifyBtn from "@/components/button/IconModifyBtn.vue";
|
||||
import IconInfoBtn from "@/components/button/IconInfoBtn.vue";
|
||||
// import FormComponent from "@/components/device/FormComponent.vue";
|
||||
import { onMounted, ref, watch } from "vue";
|
||||
import ViewComponent from "@/components/stepconfig/ViewComponent.vue";
|
||||
import StapComfigDialog from "@/components/atoms/organisms/StapComfigDialog.vue";
|
||||
// const store = commonStore();
|
||||
|
||||
const openView = ref(false);
|
||||
const openModify = ref(false);
|
||||
const tableHeader = [
|
||||
{ label: "No", width: "5%", style: "word-break: keep-all;" },
|
||||
{ label: "Step Name", width: "15%", style: "word-break: keep-all;" },
|
||||
{ label: "Type", width: "10%", style: "word-break: keep-all;" },
|
||||
{ label: "Dataset", width: "10%", style: "word-break: keep-all;" },
|
||||
{ label: "Script", width: "10%", style: "word-break: keep-all;" },
|
||||
{ label: "Hyper Parameters", width: "15%", style: "word-break: keep-all;" },
|
||||
{ label: "Resource", width: "15%", style: "word-break: keep-all;" },
|
||||
{ label: "Status", width: "5%", style: "word-break: keep-all;" },
|
||||
{ label: "Workflow", width: "10%", style: "word-break: keep-all;" },
|
||||
{ label: "Action", width: "5%", style: "word-break: keep-all;" },
|
||||
];
|
||||
|
||||
const searchOptions = [
|
||||
{ searchType: "전체", searchText: "" },
|
||||
{ searchType: "디바이스 별칭", searchText: "deviceAlias" },
|
||||
{ searchType: "디바이스 키", searchText: "deviceKey" },
|
||||
{ searchType: "사용자", searchText: "userId" },
|
||||
{ searchType: "디바이스 이름", searchText: "deviceName" },
|
||||
{ searchType: "디바이스 모델", searchText: "deviceModel" },
|
||||
{ searchType: "디바이스 OS", searchText: "deviceOs" },
|
||||
];
|
||||
|
||||
const pageSizeOptions = [
|
||||
{ text: "10 페이지", value: 10 },
|
||||
{ text: "50 페이지", value: 50 },
|
||||
{ text: "100 페이지", value: 100 },
|
||||
];
|
||||
|
||||
const workflowList = ["pipeline-a", "pipeline-b", "pipeline-c"];
|
||||
|
||||
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 = () => {
|
||||
// 더미 데이터: No 7 → 1
|
||||
data.value.results = [
|
||||
{
|
||||
no: 7,
|
||||
stepName: "Data Ingest",
|
||||
type: "Preprocessing",
|
||||
dataset: "raw_data",
|
||||
script: "ingest.py",
|
||||
hyperParameters: "-",
|
||||
resource: "CPU:1, MEM:2Gi",
|
||||
status: "success",
|
||||
workflow: "pipeline-a",
|
||||
deviceKey: 7,
|
||||
},
|
||||
{
|
||||
no: 6,
|
||||
stepName: "Data Preprocess",
|
||||
type: "Preprocessing",
|
||||
dataset: "raw_data",
|
||||
script: "preprocess.py",
|
||||
hyperParameters: "normalize=True",
|
||||
resource: "CPU:2, MEM:4Gi",
|
||||
status: "success",
|
||||
workflow: "pipeline-a",
|
||||
deviceKey: 6,
|
||||
},
|
||||
{
|
||||
no: 5,
|
||||
stepName: "Model Training",
|
||||
type: "Training",
|
||||
dataset: "processed_data",
|
||||
script: "train.py",
|
||||
hyperParameters: "lr=0.01, epochs=10",
|
||||
resource: "GPU:1, MEM:8Gi",
|
||||
status: "warning",
|
||||
workflow: "pipeline-a",
|
||||
deviceKey: 5,
|
||||
},
|
||||
{
|
||||
no: 4,
|
||||
stepName: "Model Evaluation",
|
||||
type: "Evaluation",
|
||||
dataset: "test_data",
|
||||
script: "evaluate.py",
|
||||
hyperParameters: "-",
|
||||
resource: "CPU:1, MEM:4Gi",
|
||||
status: "success",
|
||||
workflow: "pipeline-a",
|
||||
deviceKey: 4,
|
||||
},
|
||||
{
|
||||
no: 3,
|
||||
stepName: "Model Validation",
|
||||
type: "Validation",
|
||||
dataset: "test_data",
|
||||
script: "validate.py",
|
||||
hyperParameters: "metrics=['accuracy']",
|
||||
resource: "CPU:1, MEM:4Gi",
|
||||
status: "success",
|
||||
workflow: "pipeline-a",
|
||||
deviceKey: 3,
|
||||
},
|
||||
{
|
||||
no: 2,
|
||||
stepName: "Package Model",
|
||||
type: "Packaging",
|
||||
dataset: "trained_model",
|
||||
script: "package.py",
|
||||
hyperParameters: "format='tar.gz'",
|
||||
resource: "CPU:1, MEM:2Gi",
|
||||
status: "success",
|
||||
workflow: "pipeline-a",
|
||||
deviceKey: 2,
|
||||
},
|
||||
{
|
||||
no: 1,
|
||||
stepName: "Deploy",
|
||||
type: "Deployment",
|
||||
dataset: "package",
|
||||
script: "deploy.py",
|
||||
hyperParameters: "env='prod'",
|
||||
resource: "CPU:1, MEM:2Gi",
|
||||
status: "success",
|
||||
workflow: "pipeline-a",
|
||||
deviceKey: 1,
|
||||
},
|
||||
];
|
||||
data.value.totalDataLength = data.value.results.length;
|
||||
// 페이지 길이 재계산
|
||||
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 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 handleRemoveData = () => {
|
||||
if (data.value.selected.length === 0) {
|
||||
// store.setSnackbarMsg({
|
||||
// text: "삭제 할 데이터를 선택해주세요. ",
|
||||
// result: 500,
|
||||
// });
|
||||
return;
|
||||
}
|
||||
if (data.value.allSelected || data.value.selected.length !== 1) {
|
||||
data.value.isConfirmDialogVisible = true;
|
||||
return;
|
||||
}
|
||||
//리스트로 삭제 할때
|
||||
removeData(undefined);
|
||||
};
|
||||
const closeDetail = () => {
|
||||
openView.value = false;
|
||||
};
|
||||
const changePageNum = (page) => {
|
||||
data.value.params.pageNum = page;
|
||||
getData();
|
||||
};
|
||||
const openDetailModal = (selectedItem) => {
|
||||
data.value.selectedData = selectedItem;
|
||||
openView.value = true;
|
||||
};
|
||||
|
||||
const handleSave = ({
|
||||
workflow,
|
||||
stepName,
|
||||
}: {
|
||||
workflow: string;
|
||||
stepName: string;
|
||||
}) => {
|
||||
if (data.value.selectedData) {
|
||||
data.value.selectedData.workflow = workflow;
|
||||
data.value.selectedData.stepName = stepName;
|
||||
}
|
||||
};
|
||||
const openModifyModal = (item: { workflow: string; stepName: string }) => {
|
||||
data.value.selectedData = {
|
||||
workflow: item.workflow,
|
||||
stepName: item.stepName,
|
||||
};
|
||||
openModify.value = true;
|
||||
};
|
||||
|
||||
const openCreateModal = () => {
|
||||
data.value.selectedData = null;
|
||||
data.value.modalMode = "create";
|
||||
data.value.isModalVisible = true;
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
data.value.isModalVisible = false;
|
||||
data.value.selectedData = null;
|
||||
};
|
||||
|
||||
const getSelectedAllData = () => {
|
||||
data.value.selected = data.value.allSelected
|
||||
? data.value.results.map((item) => {
|
||||
return {
|
||||
deviceKey: item.deviceKey,
|
||||
};
|
||||
})
|
||||
: [];
|
||||
};
|
||||
|
||||
// Save 버튼 클릭
|
||||
// const saveStep = () => {
|
||||
// if (!data.value.selectedData) return;
|
||||
|
||||
// // 원본에 덮어쓰기
|
||||
// data.value.selectedData.workflow = selectedWorkflow.value;
|
||||
// data.value.selectedData.stepName = stepName.value;
|
||||
|
||||
// // TODO: API 호출 or saveData(data.value.selectedData) 등
|
||||
// // saveData(data.value.selectedData)
|
||||
|
||||
// openModify.value = false;
|
||||
// };
|
||||
|
||||
onMounted(() => {
|
||||
getData();
|
||||
getCodeList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-100" v-if="!openView">
|
||||
<!-- <v-dialog v-model="data.isModalVisible" max-width="600" persistent>-->
|
||||
<!-- <FormComponent-->
|
||||
<!-- :edit-data="data.selectedData"-->
|
||||
<!-- :mode="data.modalMode"-->
|
||||
<!-- @close-modal="closeModal"-->
|
||||
<!-- @handle-data="saveData"-->
|
||||
<!-- :user-option="data.userOption"-->
|
||||
<!-- />-->
|
||||
<!-- </v-dialog>-->
|
||||
<!-- <v-dialog v-model="data.isConfirmDialogVisible" persistent max-width="300">-->
|
||||
<!-- <ConfirmDialogComponent-->
|
||||
<!-- @cancel="data.isConfirmDialogVisible = false"-->
|
||||
<!-- @delete="removeData(undefined)"-->
|
||||
<!-- @init="(data.selected = []), (data.allSelected = false)"-->
|
||||
<!-- />-->
|
||||
<!-- </v-dialog>-->
|
||||
<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">Workflows Step Config</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 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>
|
||||
|
||||
<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.stepName }}</td>
|
||||
<td>{{ item.type }}</td>
|
||||
<td>{{ item.dataset }}</td>
|
||||
<td>{{ item.script }}</td>
|
||||
<td>{{ item.hyperParameters }}</td>
|
||||
<td>{{ item.resource }}</td>
|
||||
<td>
|
||||
<v-icon
|
||||
v-if="item.status === 'success'"
|
||||
color="success"
|
||||
>
|
||||
mdi-checkbox-marked-circle
|
||||
</v-icon>
|
||||
<v-icon v-else color="warning">
|
||||
mdi-alert-circle
|
||||
</v-icon>
|
||||
</td>
|
||||
<td>{{ item.workflow }}</td>
|
||||
<td style="white-space: nowrap">
|
||||
<IconInfoBtn @on-click="openDetailModal(item)" />
|
||||
<IconModifyBtn @on-click="openModifyModal(item)" />
|
||||
|
||||
<!-- <IconModifyBtn @on-click="openModify = true" /> -->
|
||||
<IconDeleteBtn
|
||||
@on-click="
|
||||
removeData([{ deviceKey: item.deviceKey }])
|
||||
"
|
||||
/>
|
||||
</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-container>
|
||||
</div>
|
||||
<div class="w-100" v-else>
|
||||
<ViewComponent @close="closeDetail" />
|
||||
</div>
|
||||
<v-dialog v-model="openModify" max-width="600px">
|
||||
<StapComfigDialog
|
||||
v-model="openModify"
|
||||
:selectedData="data.selectedData"
|
||||
:workflowList="workflowList"
|
||||
@save="handleSave"
|
||||
/>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<v-container fluid class="h-100 pa-5 d-flex flex-column align-center">
|
||||
<!-- 상단 타이틀 -->
|
||||
<v-card flat class="bg-shades-transparent w-100 mb-6">
|
||||
<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>
|
||||
|
||||
<!-- Workflow Step Information -->
|
||||
<v-card flat class="bordered-box mb-6 w-100 rounded-lg pa-6" elevation="2">
|
||||
<v-card-title class="grey lighten-4 py-2 px-4">
|
||||
<span class="font-weight-bold">Workflow Step Information</span>
|
||||
</v-card-title>
|
||||
<v-card-text class="py-4">
|
||||
<v-row align="center" class="mb-2">
|
||||
<v-col cols="3" class="font-weight-bold">Workflow Step Name</v-col>
|
||||
<v-col cols="3">Train Model</v-col>
|
||||
<v-col cols="3" class="font-weight-bold">Workflow Name</v-col>
|
||||
<v-col cols="3">sentiment-analysis</v-col>
|
||||
</v-row>
|
||||
<v-divider />
|
||||
<v-row align="center" class="mt-2">
|
||||
<v-col cols="3" class="font-weight-bold">Created Date</v-col>
|
||||
<v-col cols="3">2025-02-06</v-col>
|
||||
<v-col cols="3" class="font-weight-bold">Created ID</v-col>
|
||||
<v-col cols="3">ADMIN_001</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<!-- Dataset -->
|
||||
<v-card flat class="bordered-box mb-6 w-100 rounded-lg pa-6" elevation="2">
|
||||
<v-card-title class="grey lighten-4 py-2 px-4">
|
||||
<span class="font-weight-bold">Dataset</span>
|
||||
</v-card-title>
|
||||
<v-card-text class="py-4">
|
||||
<v-row align="center">
|
||||
<v-col cols="3" class="font-weight-bold">Dataset Name</v-col>
|
||||
<v-col cols="3">야간 주행용 레이더 데이터셋 구성</v-col>
|
||||
<v-col cols="3" class="font-weight-bold">Version</v-col>
|
||||
<v-col cols="3">v2.0</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<!-- Training Script -->
|
||||
<v-card flat class="bordered-box mb-6 w-100 rounded-lg pa-6" elevation="2">
|
||||
<v-card-title class="grey lighten-4 py-2 px-4">
|
||||
<span class="font-weight-bold">Training Script</span>
|
||||
</v-card-title>
|
||||
<v-card-text class="py-4">
|
||||
<v-row align="center" class="mb-2">
|
||||
<v-col cols="3" class="font-weight-bold">Script File</v-col>
|
||||
<v-col cols="9">baseline_train.py</v-col>
|
||||
</v-row>
|
||||
<v-divider />
|
||||
<v-row align="center" class="mt-2">
|
||||
<v-col cols="3" class="font-weight-bold">Script File Path</v-col>
|
||||
<v-col cols="9" style="word-break: break-all">
|
||||
/mnt/nfs/model_code/baseline/baseline_train.py
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<!-- Hyperparameters -->
|
||||
<v-card flat class="bordered-box mb-6 w-100 rounded-lg pa-6" elevation="2">
|
||||
<v-card-title class="grey lighten-4 py-2 px-4">
|
||||
<span class="font-weight-bold">Hyperparameters</span>
|
||||
</v-card-title>
|
||||
<v-card-text class="py-4">
|
||||
<v-row align="center" class="mb-2">
|
||||
<v-col cols="3" class="font-weight-bold">Batch Size</v-col>
|
||||
<v-col cols="3">64</v-col>
|
||||
<v-col cols="3" class="font-weight-bold">Learning Rate</v-col>
|
||||
<v-col cols="3">0.001</v-col>
|
||||
</v-row>
|
||||
<v-divider />
|
||||
<v-row align="center" class="mt-2">
|
||||
<v-col cols="3" class="font-weight-bold">Optimizer</v-col>
|
||||
<v-col cols="3">Adam</v-col>
|
||||
<v-col cols="3" class="font-weight-bold">Epochs</v-col>
|
||||
<v-col cols="3">20</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<!-- Resource & Scheduling -->
|
||||
<v-card flat class="bordered-box mb-6 w-100 rounded-lg pa-6" elevation="2">
|
||||
<v-card-title class="grey lighten-4 py-2 px-4">
|
||||
<span class="font-weight-bold">Resource & Scheduling</span>
|
||||
</v-card-title>
|
||||
<v-card-text class="py-4">
|
||||
<v-row align="center" class="mb-2">
|
||||
<v-col cols="3" class="font-weight-bold">CPU Cores</v-col>
|
||||
<v-col cols="3">4</v-col>
|
||||
<v-col cols="3" class="font-weight-bold">Memory</v-col>
|
||||
<v-col cols="3">16Gi</v-col>
|
||||
</v-row>
|
||||
<v-divider />
|
||||
<v-row align="center" class="mt-2">
|
||||
<v-col cols="3" class="font-weight-bold">GPU</v-col>
|
||||
<v-col cols="9">1 (NVIDIA A100)</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<!-- Docker image -->
|
||||
<v-card flat class="bordered-box mb-6 w-100 rounded-lg pa-6" elevation="2">
|
||||
<v-card-title class="grey lighten-4 py-2 px-4">
|
||||
<span class="font-weight-bold">Docker image</span>
|
||||
</v-card-title>
|
||||
<v-card-text class="py-4">
|
||||
<v-sheet class="pa-2" elevation="2">
|
||||
kubeflownotebookswg/jupyter-pytorch-cuda-full:v1.9.2
|
||||
</v-sheet>
|
||||
</v-card-text>
|
||||
<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>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineEmits } from "vue";
|
||||
const emit = defineEmits<{
|
||||
(e: "close"): void;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@ -1,10 +1,9 @@
|
||||
<script setup>
|
||||
|
||||
import ListComponent from "@/components/deployment/ListComponent.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ListComponent />
|
||||
</template>
|
||||
|
||||
<style scoped lang="sass">
|
||||
|
||||
</style>
|
||||
<style scoped lang="sass"></style>
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
<script setup>
|
||||
|
||||
import ListComponent from "@/components/stepconfig/ListComponent.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ListComponent />
|
||||
</template>
|
||||
|
||||
<style scoped lang="sass">
|
||||
|
||||
</style>
|
||||
<style scoped lang="sass"></style>
|
||||
|
||||
Loading…
Reference in new issue