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

<script setup lang="ts">
// import FormComponent from "@/components/device/FormComponent.vue";
import { onMounted, ref, watch, onBeforeUnmount } from "vue";
import * as monaco from "monaco-editor";
import "monaco-editor/min/vs/editor/editor.main.css";
// const store = commonStore();
const activeTab = ref<"details" | "yaml">("details");
const editorRef = ref<HTMLDivElement | null>(null);
let editorInstance: monaco.editor.IStandaloneCodeEditor | null = null;
const tableHeader = [
  {
    label: "Run Name",
    width: "20%",
    style: "word-break: keep-all;",
  },
  {
    label: "Status",
    width: "20%",
    style: "word-break: keep-all;",
  },
  {
    label: "Duration",
    width: "20%",
    style: "word-break: keep-all;",
  },
  {
    label: "Pipeline",
    width: "20%",
    style: "word-break: keep-all;",
  },
  {
    label: "Start Time",
    width: "20%",
    style: "word-break: keep-all;",
  },
];
const experimentInfo = ref({
  workflowName: "sentiment-analysis",
  version: "v2.0",
  workflowDescription: "감정 분석 모델 학습 워크플로우",
  createdDate: "2025-02-06",
  createdId: "ADMIN_001",
});
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([
  { name: "Data loading", componentType: "DataPrep", status: "Configured" },
  {
    name: "Preprocessing",
    componentType: "Preprocess",
    status: "Not Configured",
  },
  {
    name: "Preprocessing",
    componentType: "Preprocess",
    status: "Not Configured",
  },
  {
    name: "Preprocessing",
    componentType: "Preprocess",
    status: "Not Configured",
  },

  { name: "Train Model", componentType: "Train", status: "Not Configured" },
]);
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 yamlContent = `apiVersion: argoproj.io/v1alpha1
kind: Workflow
metadata:
  generateName: dummy-workflow-
  namespace: default
  labels:
    workflows.argoproj.io/archive-strategy: "true"
spec:
  entrypoint: main
  arguments:
    parameters:
      - name: message
        value: "Hello, Monaco YAML Highlight!"
  templates:

    # 1) Main steps orchestration
    - name: main
      steps:
        - - name: print
            template: whalesay
            arguments:
              parameters:
                - name: message
                  value: "{{workflow.parameters.message}}"
        - - name: wait
            template: sleep
            arguments:
              parameters:
                - name: duration
                  value: "5"
        - - name: finalize
            template: next

    # 2) Whalesay container
    - name: whalesay
      inputs:
        parameters:
          - name: message
      container:
        image: docker/whalesay:latest
        command: [cowsay]
        args: ["{{inputs.parameters.message}}"]
        resources:
          limits:
            memory: "64Mi"
            cpu: "100m"

    # 3) Simple sleep step
    - name: sleep
      inputs:
        parameters:
          - name: duration
      container:
        image: alpine:latest
        command: [sh, -c]
        args:
          - |
            echo "Sleeping for {{inputs.parameters.duration}} seconds..."
            sleep {{inputs.parameters.duration}}

    # 4) Final step
    - name: next
      container:
        image: alpine:latest
        command: [sh, -c]
        args:
          - echo "Workflow complete at $(date)!"

  # Optional: retention policy
  ttlStrategy:
    secondsAfterCompletion: 3600
`;

onMounted(() => {
  if (editorRef.value) {
    editorInstance = monaco.editor.create(editorRef.value, {
      value: yamlContent,
      language: "yaml",
      theme: "vs-dark",
      readOnly: true,
      automaticLayout: true,
      minimap: { enabled: false },
      lineNumbers: "on",
    });
  }
});

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

// 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 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"
    >
      <!-- 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">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>
      <template 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">Workflow Information</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="3" class="text-h6 font-weight-bold">
                Workflow Name
              </v-col>
              <v-col cols="3">{{ experimentInfo.workflowName }}</v-col>
              <v-col cols="3" class="text-h6 font-weight-bold"> Version </v-col>
              <v-col cols="3">{{ experimentInfo.version }}</v-col>
            </v-row>
            <v-divider class="my-2" />

            <!-- Description -->
            <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">{{ experimentInfo.workflowDescription }}</v-col>
            </v-row>
            <v-divider class="my-2" />

            <!-- Created Date / ID -->
            <v-row align="center" class="py-2">
              <v-col cols="3" class="text-h6 font-weight-bold">
                Created Date
              </v-col>
              <v-col cols="3">{{ experimentInfo.createdDate }}</v-col>
              <v-col cols="3" class="text-h6 font-weight-bold">
                Created ID
              </v-col>
              <v-col cols="3">{{ experimentInfo.createdId }}</v-col>
            </v-row>
          </v-card-text>
        </v-card>

        <!-- 2) 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',
                  }[item.status]
                "
                small
                dark
              >
                {{ item.status }}
              </v-chip>
            </template>
          </v-data-table>

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

      <div
        v-show="activeTab === 'yaml'"
        ref="editorRef"
        class="editor-container"
      ></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>