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

<script setup lang="ts">
import { onMounted, ref, watch, onBeforeUnmount } from "vue";
import * as monaco from "monaco-editor";
import "monaco-editor/min/vs/editor/editor.main.css";
import { WorkflowService } from "@/components/service/management/workflowService";

type TabKey = "details" | "yaml";

const props = defineProps<{ id: number | string }>();
const emit = defineEmits<{ (e: "close"): void }>();

const activeTab = ref<TabKey>("details");

// ----- Monaco Editor -----
const editorRef = ref<HTMLDivElement | null>(null);
let editorInstance: monaco.editor.IStandaloneCodeEditor | null = null;

// 화면에 뿌릴 상세 데이터(요청 항목만)
const detail = ref({
  name: "",
  version: "",
  description: "",
  kubeflowStatus: "",
  namespace: "",
  pipelineId: "",
  regDt: "",
});

const defaultYaml = `# YAML not provided by server
apiVersion: argoproj.io/v1alpha1
kind: Workflow
metadata:
  generateName: dummy-
spec:
  entrypoint: main
  templates:
    - name: main
      container:
        image: alpine:latest
        command: [sh, -c]
        args: ["echo hello"]
`;

// 간단한 날짜 포맷터 (ISO/T 포함 모두 대응)
function formatDateTime(raw?: string): string {
  if (!raw) return "-";
  const s = String(raw).replace("T", " ");
  const m = s.match(/^(\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2})/);
  return m ? m[1] : s.slice(0, 19);
}

// ===== 상세 조회 =====
async function fetchDetail(id: number | string) {
  try {
    const res = await WorkflowService.view(Number(id));
    const d = res?.data ?? {};

    // 백엔드 필드명(스네이크/카멜) 혼재 대비 매핑
    detail.value = {
      name: d.name ?? d.workflowName ?? "",
      version: String(d.version ?? ""),
      description: d.description ?? d.workflowDescription ?? "",
      kubeflowStatus: d.kubeflow_status ?? d.kubeflowStatus ?? "",
      namespace: d.namespace ?? "",
      pipelineId: d.pipeline_id ?? d.pipelineId ?? "",
      regDt: formatDateTime(d.reg_dt ?? d.regDt ?? d.regDate),
    };

    // YAML (있으면 보여주고, 없으면 기본 예시)
    const yamlFromServer =
      d.workflowYaml ||
      d.yaml ||
      d.pipelineYaml ||
      d.specYaml ||
      d.yamlStr ||
      "";
    if (editorInstance) {
      editorInstance.setValue(yamlFromServer || defaultYaml);
    }
  } catch (e) {
    console.error("[Workflow Detail] view API failed:", e);
  }
}

// ===== 마운트 & 변경 감지 =====
onMounted(() => {
  if (editorRef.value) {
    editorInstance = monaco.editor.create(editorRef.value, {
      value: defaultYaml,
      language: "yaml",
      theme: "vs-dark",
      readOnly: true,
      automaticLayout: true,
      minimap: { enabled: false },
      lineNumbers: "on",
    });
  }
});

watch(
  () => props.id,
  (val) => {
    if (val !== null && val !== undefined && val !== "") {
      fetchDetail(val);
    }
  },
  { immediate: true },
);

onBeforeUnmount(() => {
  if (editorInstance) {
    editorInstance.dispose();
    editorInstance = null;
  }
});

// ===== (나중 사용) Step 테이블 정의 =====
const stepHeaders = [
  { title: "Order", key: "order", width: "10%", align: "center" },
  { title: "Step Name", key: "name", width: "40%", align: "center" },
  {
    title: "Component Type",
    key: "componentType",
    width: "30%",
    align: "center",
  },
  { title: "Status", key: "status", width: "20%", align: "center" },
];
const steps = ref<
  Array<{ order: number; name: string; componentType: string; status: string }>
>([]);
</script>

<template>
  <v-container class="h-100 w-100 pa-5 d-flex flex-column align-center">
    <v-card
      flat
      class="bg-shades-transparent d-flex flex-column justify-center w-100"
    >
      <!-- 헤더 -->
      <v-card flat class="bg-shades-transparent w-100">
        <v-card-item class="text-h5 font-weight-bold pt-0 pa-5 pl-0">
          <div class="d-flex flex-row justify-start align-center">
            <div class="text-primary">View Details</div>
          </div>
        </v-card-item>
      </v-card>

      <!-- 탭 -->
      <v-tabs
        v-model="activeTab"
        background-color="grey lighten-4"
        style="max-width: 360px"
        grow
      >
        <v-tab value="details">Details</v-tab>
        <v-tab value="yaml">YAML</v-tab>
      </v-tabs>

      <!-- Details 탭 -->
      <template v-if="activeTab === 'details'">
        <v-card class="bordered-box mb-6 w-100 rounded-lg pa-8 step-card">
          <v-card-title class="grey lighten-4 py-2 px-4">
            <span class="font-weight-bold">Workflow Information</span>
          </v-card-title>

          <v-card-text class="px-6 pb-6 pt-4">
            <v-row align="center" class="py-2">
              <v-col cols="3" class="text-h6 font-weight-bold"
                >Workflow Name</v-col
              >
              <v-col cols="3">{{ detail.name || "-" }}</v-col>
              <v-col cols="3" class="text-h6 font-weight-bold">Version</v-col>
              <v-col cols="3">{{ detail.version || "-" }}</v-col>
            </v-row>

            <v-divider class="my-2" />

            <v-row align="center" class="py-2">
              <v-col cols="3" class="text-h6 font-weight-bold"
                >Workflow Description</v-col
              >
              <v-col cols="9">{{ detail.description || "-" }}</v-col>
            </v-row>

            <v-divider class="my-2" />

            <v-row align="center" class="py-2">
              <v-col cols="3" class="text-h6 font-weight-bold"
                >Kubeflow Status</v-col
              >
              <v-col cols="3">{{ detail.kubeflowStatus || "-" }}</v-col>
              <v-col cols="3" class="text-h6 font-weight-bold">Namespace</v-col>
              <v-col cols="3">{{ detail.namespace || "-" }}</v-col>
            </v-row>

            <v-divider class="my-2" />

            <v-row align="center" class="py-2">
              <v-col cols="3" class="text-h6 font-weight-bold"
                >Pipeline ID</v-col
              >
              <v-col cols="9" class="text-truncate">{{
                detail.pipelineId || "-"
              }}</v-col>
            </v-row>

            <v-divider class="my-2" />

            <v-row align="center" class="py-2">
              <v-col cols="3" class="text-h6 font-weight-bold"
                >Created Date</v-col
              >
              <v-col cols="9">{{ detail.regDt || "-" }}</v-col>
            </v-row>
          </v-card-text>

          <v-sheet class="d-flex justify-end mt-4">
            <v-btn class="back-to-list" color="primary" @click="emit('close')">
              Back to List
            </v-btn>
          </v-sheet>
        </v-card>

        <!--
        ==================== [나중에 사용할 Step Overview 섹션] ====================
        <v-card
          flat
          class="bordered-box mb-6 w-100 rounded-lg pa-8"
          style="min-height: 500px"
        >
          <v-card-title class="grey lighten-4 py-2 px-4">
            <span class="font-weight-bold">Step Overview</span>
          </v-card-title>

          <v-data-table
            :headers="stepHeaders"
            :items="steps"
            dense
            class="text-center"
            hide-default-footer
            :items-per-page="5"
            header-color="primary"
            disable-sort
          >
            <template #item.order="{ index }">{{ index + 1 }}</template>
            <template #item.status="{ item }">
              <v-chip
                :color="({ Configured: 'success', 'Not Configured': 'warning' } as any)[item.status] || 'default'"
                small
                dark
              >
                {{ item.status }}
              </v-chip>
            </template>
          </v-data-table>
        </v-card>
        ========================================================================
        -->
      </template>

      <!-- YAML 탭 -->
      <div
        v-show="activeTab === 'yaml'"
        ref="editorRef"
        class="editor-container"
      />
    </v-card>
  </v-container>
</template>

<style scoped>
.editor-container {
  width: 100%;
  height: 900px;
  max-height: 900px;
  border: 1px solid #444;
  border-radius: 4px;
}
.step-card {
  position: relative;
  min-height: 500px;
  padding-bottom: 84px;
}
.back-to-list {
  position: absolute;
  right: 24px;
  bottom: 24px;
}
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>