autoflow-web-console/src/components/templates/stepconfig/ViewComponent.vue

<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>