Autoflow
/
autoflow-web-console
23
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: 상세페이지 스타일 수정 변경

Browse Source
main
jschoi 7 months ago
parent 5c813eaf60
commit 349c54ac19
6 changed files with 88 additions and 70 deletions
Show Stats Download Patch File Download Diff File

10
src/components/templates/Datasets/ViewComponent.vue
Unescape View File

@ -192,7 +192,11 @@ watch(
</v-card-item> </v-card-item>
</v-card> </v-card>
<v-card flat class="bordered-box mb-6 w-100 rounded-lg pa-8"> <v-card
flat
class="bordered-box mb-6 w-100 rounded-lg pa-8"
color="grey-lighten-3"
>
<v-card-text class="px-6 pb-6 pt-4"> <v-card-text class="px-6 pb-6 pt-4">
<v-row align="center" class="py-2"> <v-row align="center" class="py-2">
<v-col cols="3" class="text-h6 font-weight-bold" <v-col cols="3" class="text-h6 font-weight-bold"
@ -254,9 +258,9 @@ watch(
</v-col> </v-col>
</v-row> </v-row>
</v-card-text> </v-card-text>
<v-sheet class="d-flex justify-end mb-2"> <div class="d-flex justify-end mb-2">
<v-btn color="primary" @click="emit('close')"> Back to List </v-btn> <v-btn color="primary" @click="emit('close')"> Back to List </v-btn>
</v-sheet> </div>
</v-card> </v-card>
</v-card> </v-card>
</v-container> </v-container>

2
src/components/templates/run/executions/CompareComponent.vue
Unescape View File

@ -261,7 +261,7 @@ onMounted(() => {
class="bg-shades-transparent d-flex flex-column justify-center w-100" class="bg-shades-transparent d-flex flex-column justify-center w-100"
> >
<!-- 1) Workflow Information --> <!-- 1) Workflow Information -->
<v-card flat class="bg-shades-transparent w-100"> <v-card flat class="bg-shades-transparent w-100" color="grey-lighten-3">
<v-card-item class="text-h5 font-weight-bold pt-0 pa-5 pl-0"> <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="d-flex flex-row justify-start align-center">
<div>Compare Executions</div> <div>Compare Executions</div>

114
src/components/templates/run/executions/ViewComponent.vue
Unescape View File

@ -851,7 +851,11 @@ const artifactsLoading = ref(false);
<v-window v-model="mainTab"> <v-window v-model="mainTab">
<!-- ========= Details ========= --> <!-- ========= Details ========= -->
<v-window-item value="details"> <v-window-item value="details">
<v-card flat class="bordered-box mb-6 w-100 rounded-lg pa-8"> <v-card
flat
class="bordered-box mb-6 w-100 rounded-lg pa-8"
color="grey-lighten-3"
>
<v-card-title class="grey lighten-4 py-2 px-4"> <v-card-title class="grey lighten-4 py-2 px-4">
<span class="font-weight-bold">Execution Information</span> <span class="font-weight-bold">Execution Information</span>
</v-card-title> </v-card-title>
@ -959,15 +963,15 @@ const artifactsLoading = ref(false);
</v-row> </v-row>
</v-card-text> </v-card-text>
<v-sheet class="d-flex justify-end mb-2"> <div class="d-flex justify-end mb-2">
<v-btn color="primary" @click="emit('close')">Back to List</v-btn> <v-btn color="primary" @click="emit('close')">Back to List</v-btn>
</v-sheet> </div>
</v-card> </v-card>
</v-window-item> </v-window-item>
<!-- ========= Visualizations ========= --> <!-- ========= Visualizations ========= -->
<v-window-item value="viz"> <v-window-item value="viz">
<v-card class="rounded-lg pa-8 w-100"> <v-card class="rounded-lg pa-8 w-100" color="grey-lighten-3">
<v-window v-model="vizTab"> <v-window v-model="vizTab">
<v-window-item value="metrics"> <v-window-item value="metrics">
<v-card-text> <v-card-text>
@ -1030,15 +1034,28 @@ const artifactsLoading = ref(false);
</v-row> </v-row>
<!-- Selected Run --> <!-- Selected Run -->
<v-card class="mb-6" variant="tonal"> <!-- Selected Run -->
<v-card-title class="py-2 px-4">Selected Run</v-card-title> <v-card flat class="mb-6" color="grey-lighten-3">
<v-card-text class="px-4 pb-4"> <v-card-title
class="py-2 px-0 text-button text-medium-emphasis"
>
Selected Run
</v-card-title>
<v-card-text class="px-0">
<v-row> <v-row>
<!-- 기본 정보 -->
<v-col cols="12" md="6"> <v-col cols="12" md="6">
<v-table density="comfortable"> <v-table density="comfortable">
<thead>
<tr>
<th style="width: 40%">Field</th>
<th>Value</th>
</tr>
</thead>
<tbody> <tbody>
<tr> <tr>
<td style="width: 40%">Run ID</td> <td>Run ID</td>
<td>{{ runDetail?.info?.run_id || "—" }}</td> <td>{{ runDetail?.info?.run_id || "—" }}</td>
</tr> </tr>
<tr> <tr>
@ -1077,12 +1094,17 @@ const artifactsLoading = ref(false);
</v-table> </v-table>
</v-col> </v-col>
<!-- 파라미터 + 태그 -->
<v-col cols="12" md="6"> <v-col cols="12" md="6">
<div class="text-subtitle-2 mb-2">Parameters</div> <div
<v-table density="compact"> class="text-subtitle-2 text-medium-emphasis mb-2"
>
Parameters
</div>
<v-table density="compact" class="mb-4">
<thead> <thead>
<tr> <tr>
<th>Key</th> <th style="width: 40%">Key</th>
<th>Value</th> <th>Value</th>
</tr> </tr>
</thead> </thead>
@ -1101,42 +1123,16 @@ const artifactsLoading = ref(false);
</tr> </tr>
</tbody> </tbody>
</v-table> </v-table>
</v-col>
</v-row>
<v-row class="mt-4"> <div
<v-col cols="12" md="6"> class="text-subtitle-2 text-medium-emphasis mb-2"
<div class="text-subtitle-2 mb-2">Metrics</div> >
<v-table density="compact"> Tags
<thead> </div>
<tr>
<th>Metric</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr v-if="!runDetail?.data?.metrics?.length">
<td colspan="2" class="text-medium-emphasis">
No metrics
</td>
</tr>
<tr
v-for="m in runDetail?.data?.metrics || []"
:key="m.key"
>
<td>{{ m.key }}</td>
<td>{{ m.value }}</td>
</tr>
</tbody>
</v-table>
</v-col>
<v-col cols="12" md="6">
<div class="text-subtitle-2 mb-2">Tags</div>
<v-table density="compact"> <v-table density="compact">
<thead> <thead>
<tr> <tr>
<th>Key</th> <th style="width: 40%">Key</th>
<th>Value</th> <th>Value</th>
</tr> </tr>
</thead> </thead>
@ -1166,7 +1162,7 @@ const artifactsLoading = ref(false);
</v-card> </v-card>
<!-- Model Metrics table --> <!-- Model Metrics table -->
<v-card flat class="mb-6"> <v-card flat class="mb-6" color="grey-lighten-3">
<v-card-title <v-card-title
class="py-2 px-0 text-button text-medium-emphasis" class="py-2 px-0 text-button text-medium-emphasis"
>Model Metrics (selected run)</v-card-title >Model Metrics (selected run)</v-card-title
@ -1196,7 +1192,7 @@ const artifactsLoading = ref(false);
</v-card> </v-card>
<!-- Bar chart --> <!-- Bar chart -->
<v-card flat class="mb-6"> <v-card flat class="mb-6" color="grey-lighten-3">
<v-card-title <v-card-title
class="py-2 px-0 text-button text-medium-emphasis" class="py-2 px-0 text-button text-medium-emphasis"
>Metrics (bar chart)</v-card-title >Metrics (bar chart)</v-card-title
@ -1226,15 +1222,15 @@ const artifactsLoading = ref(false);
</v-window-item> </v-window-item>
</v-window> </v-window>
<v-sheet class="d-flex justify-end mb-2"> <div class="d-flex justify-end mb-2">
<v-btn color="primary" @click="emit('close')">Back to List</v-btn> <v-btn color="primary" @click="emit('close')">Back to List</v-btn>
</v-sheet> </div>
</v-card> </v-card>
</v-window-item> </v-window-item>
<!-- ========= Artifacts (Two-step, Flat) ========= --> <!-- ========= Artifacts (Two-step, Flat) ========= -->
<v-window-item value="artifacts"> <v-window-item value="artifacts">
<v-card class="rounded-lg pa-8 w-100"> <v-card class="rounded-lg pa-8 w-100" color="grey-lighten-3">
<v-card-text> <v-card-text>
<v-row class="mb-4" align="center"> <v-row class="mb-4" align="center">
<v-col <v-col
@ -1278,6 +1274,7 @@ const artifactsLoading = ref(false);
<v-icon start size="16">mdi-check-decagram</v-icon> <v-icon start size="16">mdi-check-decagram</v-icon>
{{ externalAuth?.name || externalAuth?.id }} {{ externalAuth?.name || externalAuth?.id }}
</v-chip> </v-chip>
<v-btn <v-btn
size="small" size="small"
color="primary" color="primary"
@ -1287,6 +1284,7 @@ const artifactsLoading = ref(false);
> >
<v-icon start size="16">mdi-rocket-launch</v-icon> Deploy <v-icon start size="16">mdi-rocket-launch</v-icon> Deploy
</v-btn> </v-btn>
<v-btn <v-btn
v-if="isAuthenticated" v-if="isAuthenticated"
size="small" size="small"
@ -1325,9 +1323,14 @@ const artifactsLoading = ref(false);
{{ twoStepError }} {{ twoStepError }}
</v-alert> </v-alert>
<v-card variant="tonal"> <!-- 바깥 카드도 flat, 타이틀 톤 통일 -->
<v-card-title class="py-2 px-4">Artifacts</v-card-title> <v-card flat color="grey-lighten-3" class="mb-2">
<v-divider /> <v-card-title
class="py-2 px-0 text-button text-medium-emphasis"
>
Artifacts
</v-card-title>
<v-card-text class="px-0"> <v-card-text class="px-0">
<v-table density="comfortable"> <v-table density="comfortable">
<thead> <thead>
@ -1338,6 +1341,7 @@ const artifactsLoading = ref(false);
<th style="width: 180px" class="text-right">Actions</th> <th style="width: 180px" class="text-right">Actions</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-if="twoStepLoading"> <tr v-if="twoStepLoading">
<td <td
@ -1413,9 +1417,7 @@ const artifactsLoading = ref(false);
/> />
</template> </template>
<template v-else> <template v-else>
<v-btn size="small" variant="text" @click=""> <v-btn size="small" variant="text">Open</v-btn>
Open
</v-btn>
</template> </template>
</td> </td>
</tr> </tr>
@ -1427,9 +1429,9 @@ const artifactsLoading = ref(false);
</v-card> </v-card>
</v-card-text> </v-card-text>
<v-sheet class="d-flex justify-end mb-2"> <div class="d-flex justify-end mb-2">
<v-btn color="primary" @click="emit('close')">Back to List</v-btn> <v-btn color="primary" @click="emit('close')">Back to List</v-btn>
</v-sheet> </div>
</v-card> </v-card>
</v-window-item> </v-window-item>
</v-window> </v-window>

11
src/components/templates/run/experiment/ViewComponent.vue
Unescape View File

@ -194,6 +194,7 @@ watch(
<v-card <v-card
flat flat
class="bordered-box mb-6 w-100 rounded-lg pa-8 position-relative" class="bordered-box mb-6 w-100 rounded-lg pa-8 position-relative"
color="grey-lighten-3"
> >
<v-card-title class="grey lighten-4 py-2 px-4"> <v-card-title class="grey lighten-4 py-2 px-4">
<span class="font-weight-bold">Experiment Information</span> <span class="font-weight-bold">Experiment Information</span>
@ -247,18 +248,18 @@ watch(
</v-card> </v-card>
<!-- Runs --> <!-- Runs -->
<v-card class="rounded-lg pa-8 w-100"> <v-card class="rounded-lg pa-8 w-100" color="grey-lighten-3">
<v-card-title class="grey lighten-4 py-2 px-4"> <v-card-title class="grey lighten-4 py-2 px-4">
<span class="font-weight-bold">Runs</span> <span class="font-weight-bold">Runs</span>
</v-card-title> </v-card-title>
<v-card-text class="px-6 pb-2 pt-4"> <v-card-text class="px-6 pb-2 pt-4">
<v-sheet class="d-flex align-center justify-between mb-4"> <div class="d-flex align-center justify-between mb-4">
<div class="text-body-2"> <div class="text-body-2">
총 {{ runRows.length.toLocaleString() }}개 · Experiment ID: 총 {{ runRows.length.toLocaleString() }}개 · Experiment ID:
<strong>{{ experimentId || "-" }}</strong> <strong>{{ experimentId || "-" }}</strong>
</div> </div>
</v-sheet> </div>
<v-table density="comfortable" fixed-header height="420"> <v-table density="comfortable" fixed-header height="420">
<colgroup> <colgroup>
@ -336,9 +337,9 @@ watch(
</v-card-actions> </v-card-actions>
</v-card-text> </v-card-text>
<v-sheet class="d-flex justify-end mb-2"> <div class="d-flex justify-end mb-2">
<v-btn color="primary" @click="emit('close')">Back to List</v-btn> <v-btn color="primary" @click="emit('close')">Back to List</v-btn>
</v-sheet> </div>
</v-card> </v-card>
</v-card> </v-card>
</v-container> </v-container>

16
src/components/templates/trainingscript/ViewComponent.vue
Unescape View File

@ -115,7 +115,11 @@ onBeforeUnmount(() => {
</v-card-item> </v-card-item>
</v-card> </v-card>
<v-card flat class="bordered-box mb-6 w-100 rounded-lg pa-8"> <v-card
flat
class="bordered-box mb-6 w-100 rounded-lg pa-8"
color="grey-lighten-3"
>
<v-card-title class="grey lighten-4 py-2 px-4"> <v-card-title class="grey lighten-4 py-2 px-4">
<span class="font-weight-bold">Training Script Information</span> <span class="font-weight-bold">Training Script Information</span>
</v-card-title> </v-card-title>
@ -160,16 +164,20 @@ onBeforeUnmount(() => {
</v-card> </v-card>
<!-- 미리보기 --> <!-- 미리보기 -->
<v-card flat class="bordered-box mb-6 w-100 rounded-lg pa-8"> <v-card
flat
class="bordered-box mb-6 w-100 rounded-lg pa-8"
color="grey-lighten-3"
>
<v-card-title class="grey lighten-4 py-2 px-4"> <v-card-title class="grey lighten-4 py-2 px-4">
<span class="font-weight-bold">Training Script Preview</span> <span class="font-weight-bold">Training Script Preview</span>
</v-card-title> </v-card-title>
<v-card-text class="px-6 pb-6 pt-4"> <v-card-text class="px-6 pb-6 pt-4">
<div ref="editorRef" class="editor-container"></div> <div ref="editorRef" class="editor-container"></div>
</v-card-text> </v-card-text>
<v-sheet class="d-flex justify-end mb-2"> <div class="d-flex justify-end mb-2">
<v-btn color="primary" @click="emit('close')">Back to List</v-btn> <v-btn color="primary" @click="emit('close')">Back to List</v-btn>
</v-sheet> </div>
</v-card> </v-card>
</v-container> </v-container>
</template> </template>

5
src/components/templates/workflow/ViewComponent.vue
Unescape View File

@ -222,7 +222,10 @@ const steps = ref<
<!-- Details 탭 --> <!-- Details 탭 -->
<template v-if="activeTab === 'details'"> <template v-if="activeTab === 'details'">
<v-card class="bordered-box mb-6 w-100 rounded-lg pa-8 step-card"> <v-card
class="bordered-box mb-6 w-100 rounded-lg pa-8 step-card"
color="grey-lighten-3"
>
<v-card-title class="grey lighten-4 py-2 px-4"> <v-card-title class="grey lighten-4 py-2 px-4">
<span class="font-weight-bold">Workflow Information</span> <span class="font-weight-bold">Workflow Information</span>
</v-card-title> </v-card-title>

Write Preview
Loading…
Cancel
Save