autoflow-web-console/src/components/atoms/organisms/WorkflowsRunDialog.vue

<script setup lang="ts">
import { computed, onMounted, onBeforeUnmount, ref, watch } from "vue";
import { kubeflowService } from "@/components/service/management/KubeflowService";

type RunPayload = {
  display_name: string;
  description?: string;
  pipeline_version_reference: { pipeline_id: string };
  // 필요 시 아래 두 개만 추가하세요
  // runtime_config?: { parameters?: Record<string, any> };
  // service_account?: string;
};

const props = defineProps<{
  pipelineId?: string | number | null; // 테이블에서 넘어온 pipelineId
}>();

const emit = defineEmits<{
  (e: "close-modal"): void;
  (e: "submitted", value: any): void;
}>();

const form = ref({
  display_name: "",
  description: "",
  pipeline_id: "",
});
const loading = ref(false);
const errorMsg = ref("");

const isValid = computed(
  () => !!form.value.display_name.trim() && !!form.value.pipeline_id.trim(),
);

function initForm() {
  form.value.pipeline_id = props.pipelineId ? String(props.pipelineId) : "";
}
onMounted(initForm);
watch(() => props.pipelineId, initForm);

function onEsc(e: KeyboardEvent) {
  if (e.key === "Escape" && !loading.value) emit("close-modal");
}
onMounted(() => window.addEventListener("keydown", onEsc));
onBeforeUnmount(() => window.removeEventListener("keydown", onEsc));

async function submitRun() {
  errorMsg.value = "";
  if (!isValid.value) {
    errorMsg.value = "Run 제목(display_name)과 pipeline_id는 필수입니다.";
    return;
  }

  const payload: RunPayload = {
    display_name: form.value.display_name.trim(),
    // description은 값이 있으면만 넣음
    ...(form.value.description.trim() && {
      description: form.value.description.trim(),
    }),
    pipeline_version_reference: { pipeline_id: form.value.pipeline_id.trim() },
  };

  try {
    loading.value = true;
    const { data } = await kubeflowService.run(payload);
    emit("submitted", data);
    emit("close-modal");
  } catch (e: any) {
    console.error("Run 생성 실패:", e);
    errorMsg.value =
      e?.response?.data?.message ||
      e?.response?.data?.error ||
      e?.message ||
      "Run 생성에 실패했습니다.";
  } finally {
    loading.value = false;
  }
}
</script>

<template>
  <v-card>
    <v-card-title
      class="text-white font-weight-bold text-h6"
      style="background-color: #1976d2"
    >
      Run Pipeline
    </v-card-title>

    <v-card-text class="pa-6">
      <v-form @submit.prevent="submitRun">
        <div class="mb-4">
          <label class="text-subtitle-2 font-weight-medium mb-1 d-block">
            Run Title (display_name)
          </label>
          <v-text-field
            v-model="form.display_name"
            :disabled="loading"
            hide-details
            required
          />
        </div>

        <div class="mb-4">
          <label class="text-subtitle-2 font-weight-medium mb-1 d-block">
            Run Description
          </label>
          <v-textarea
            v-model="form.description"
            :disabled="loading"
            hide-details
          />
        </div>

        <div class="mb-2">
          <label class="text-subtitle-2 font-weight-medium mb-1 d-block">
            pipeline_id
          </label>
          <v-text-field
            v-model="form.pipeline_id"
            :disabled="true"
            hide-details
            required
          />
        </div>

        <div v-if="errorMsg" class="mt-3 text-error">{{ errorMsg }}</div>
      </v-form>
    </v-card-text>

    <v-card-actions class="justify-end" style="padding: 16px 24px">
      <v-btn
        color="success"
        :loading="loading"
        :disabled="!isValid"
        @click="submitRun"
      >
        RUN
      </v-btn>
      <v-btn text :disabled="loading" @click="$emit('close-modal')"
        >CLOSE</v-btn
      >
    </v-card-actions>
  </v-card>
</template>