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>
|
<script setup>
|
||||||
|
import ListComponent from "@/components/deployment/ListComponent.vue";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<ListComponent />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="sass">
|
<style scoped lang="sass"></style>
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -1,10 +1,9 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
|
import ListComponent from "@/components/stepconfig/ListComponent.vue";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<ListComponent />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="sass">
|
<style scoped lang="sass"></style>
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|||||||
Loading…
Reference in new issue