Merge pull request #14 from Zhuzhenghao/main

refactor: extract all deletion logic for better maintainability

Author: Max

src/api/finetune-experiment.ts

@@ -1,7 +1,5 @@
 /* eslint-disable no-use-before-define */
-import type {
-  Condition, ListMeta, ObjectMeta,
-} from 'kubernetes-types/meta/v1';
+import type { Condition, ListMeta, ObjectMeta } from 'kubernetes-types/meta/v1';
 import { K8sClient } from '@/plugins/axios/client';
 import { FinetuneJob, Status as FinetuneJobStatus, ScoringConfig } from './finetune-job';
 
@@ -41,21 +39,25 @@ export interface FinetuneExperiment {
   status?: Status;
 }
 
+export type FinetuneJobWithName = FinetuneJob & { name: string };
+
 /**
  * FinetuneExperimentSpec defines the desired state of FinetuneExperiment
  */
 export interface Spec {
   /**
    * Defining multiple finetunejobs in a single experiment.
    */
-  finetuneJobs: FinetuneJob[];
+  finetuneJobs: FinetuneJobWithName[];
   /**
    * Define the scoring plugin used for this experiment.
    */
   scoringConfig: ScoringConfig;
   pending?: boolean;
 }
 
+export type FinetuneJobStatusWithName = {status?: FinetuneJobStatus;} & { name?: string };
+
 /**
  * FinetuneExperimentStatus defines the observed state of FinetuneExperiment
  */
@@ -65,7 +67,7 @@ export interface Status {
    */
   bestVersion: BestVersion;
   conditions: Condition[];
-  jobsStatus: FinetuneJobStatus[];
+  jobsStatus: FinetuneJobStatusWithName[];
   state: State;
 }
 
@@ -84,7 +86,7 @@ export enum State {
   Failed = 'FAILED',
   Processing = 'PROCESSING',
   Success = 'SUCCESS',
-  Pending = 'PENDING'
+  Pending = 'PENDING',
 }
 
 export const apiVersion = 'finetune.datatunerx.io/v1beta1';

src/api/finetune-job.ts

@@ -30,7 +30,6 @@ export interface FinetuneJob {
    * FinetuneJobStatus defines the observed state of FinetuneJob
    */
   status?: Status;
-  valid?: boolean;
 }
 
 /**

src/locales/en-US/views/Hyperparameter.json

@@ -8,6 +8,7 @@
 
   "name": "Name",
   "fineTuningType": "Fine-tuning",
+  "referencedTask": "Referenced Task",
   "parameters": "Parameters Preview",
   "hyperparameterGroup": "Hyperparameter",
   "configuration": "Configuration",

src/locales/zh-CN/views/Hyperparameter.json

@@ -8,6 +8,7 @@
 
   "name": "名称",
   "fineTuningType": "微调类型",
+  "referencedTask":"被引用任务",
   "parameters": "参数预览",
   "hyperparameterGroup": "超参组",
   "configuration": "参数配置",

src/views/dataset/DatasetDetail.vue

@@ -1,33 +1,23 @@
 <script lang="ts" setup>
 import { useRoute, useRouter } from 'vue-router';
-import { computed, ref } from 'vue';
+import { computed, onBeforeMount } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useNamespaceStore } from '@/stores/namespace';
-import { Dataset, datasetClient } from '@/api/dataset';
-import { nError } from '@/utils/useNoty';
-import { useDeleteDataset } from './composition/dataset';
+import { storeToRefs } from 'pinia';
+import { useDataset, useDeleteDataset } from './composition/dataset';
 
 const { t } = useI18n();
 const router = useRouter();
 const route = useRoute();
 
-const namespaceStore = useNamespaceStore();
+const { namespace } = storeToRefs(useNamespaceStore());
+const name = route.params.name as string;
 
-const dataset = ref<Dataset>();
+const { dataset, fetchDataset } = useDataset();
 
-const loadDataset = () => {
-  datasetClient.read(namespaceStore.namespace, route.params.name as string).then((res) => {
-    dataset.value = res.data;
-  });
-};
-
-try {
-  loadDataset();
-} catch (error) {
-  nError(t('views.Dataset.loadDatasetError'));
-}
-
-const name = computed(() => dataset.value?.metadata?.name);
+onBeforeMount(() => {
+  fetchDataset(namespace.value, name);
+});
 
 const infos = computed(() => {
   const languages = dataset.value?.spec?.datasetMetadata.languages?.map((lang) => t(`views.Dataset.${lang}`)).join(', ') ?? '-';
@@ -96,22 +86,15 @@ const subsets = computed(() => dataset.value?.spec?.datasetMetadata.datasetInfo?
 const onEdit = () => {
   router.push({
     name: 'DatasetCreate',
-    query: {
-      name: name.value,
-    },
+    query: { name },
   });
 };
 
 const toList = () => {
-  router.push({
-    name: 'DatasetList',
-  });
+  router.push({ name: 'DatasetList' });
 };
 
-const { onConfirmDelete } = useDeleteDataset(
-  namespaceStore.namespace,
-  toList,
-);
+const { onConfirmDelete } = useDeleteDataset(namespace.value, toList);
 
 </script>
 

src/views/finetune-experiment/FinetuneExperimentList.vue

@@ -8,7 +8,6 @@ import { FinetuneExperiment, finetuneExperimentClient } from '@/api/finetune-exp
 import { useQueryTable } from '@/hooks/useQueryTable';
 import { createDialog } from '@dao-style/extend';
 import { useI18n } from 'vue-i18n';
-import { hyperparameterClient } from '@/api/hyperparameter';
 import FinetuneExperimentItem from './components/FinetuneExperimentItem.vue';
 import { useFinetuneExperiment } from './composition/finetune';
 
@@ -28,7 +27,7 @@ const onCreate = () => {
   });
 };
 
-const deleteFn = (name: string) => hyperparameterClient.delete(namespace.value, name).then(() => {
+const deleteFn = (name: string) => finetuneExperimentClient.delete(namespace.value, name).then(() => {
   handleRefresh();
 });
 

src/views/finetune-experiment/components/FinetuneExperimentItem.vue

@@ -28,7 +28,7 @@ const onDelete = () => {
 const readyJobs = computed(() => {
   const { jobsStatus } = props.data.status ?? {};
 
-  return jobsStatus?.filter((job) => job.state === FinetuneJobState.Successful).length ?? 0;
+  return jobsStatus?.filter((job) => job.status?.state === FinetuneJobState.Successful).length ?? 0;
 });
 
 const infos = computed(() => {

src/views/finetune-experiment/components/FinetuneJobItem.vue

@@ -1,18 +1,20 @@
 <script lang="ts" setup>
+import { FinetuneJobWithName } from '@/api/finetune-experiment';
 import { PropType, computed } from 'vue';
-import { FinetuneJob } from '@/api/finetune-job';
 import { useI18n } from 'vue-i18n';
 
 const props = defineProps({
   data: {
-    type: Object as PropType<FinetuneJob>,
+    type: Object as PropType<FinetuneJobWithName>,
     default: () => ({}),
   },
 });
 const { t } = useI18n();
 
 const infos = computed(() => {
-  const { data: { spec } } = props;
+  const {
+    data: { spec },
+  } = props;
   const llms = spec?.finetune?.finetuneSpec.llm;
   const datasets = spec?.finetune.finetuneSpec.dataset;
   const hyperparameters = spec?.finetune.finetuneSpec.hyperparameter?.hyperparameterRef;
@@ -38,7 +40,9 @@ const infos = computed(() => {
   return items;
 });
 const infosTwo = computed(() => {
-  const { data: { spec } } = props;
+  const {
+    data: { spec },
+  } = props;
 
   const items = [
     {
@@ -60,10 +64,15 @@ const infosTwo = computed(() => {
     use-font
   >
     <template #title>
-      cfh
-      <dao-state-icon :type="'success'">
-        {{ t('common.run') }}
-      </dao-state-icon>
+      <div class="finetune-job-item__header">
+        <div class="finetune-job-item__header__text dataset-item__header__text--link">
+          {{ props.data.name }}
+        </div>
+
+        <dao-state-icon :type="'success'">
+          {{ t("common.run") }}
+        </dao-state-icon>
+      </div>
     </template>
 
     <dao-card-item class="finetune-experiment-item__base-info">
@@ -114,55 +123,41 @@ const infosTwo = computed(() => {
   </dao-card>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .finetune-job-item {
+  margin-top: 20px;
   margin-right: 20px;
   margin-left: 20px;
 
-  &.finetune-job-item{
-    margin-top: 20px;
-  }
-
   // &__base-info.dao-card-item {
   //   flex: 1.25 1 0;
   // }
 
   &__header {
-   display: flex;
+    display: flex;
     align-items: center;
-    font-weight: 700;
+    font-weight: 600;
     color: var(--dao-text-pageTitle);
 
     &__text {
       display: inline-block;
       max-width: 75%;
+      margin-right: 10px;
       overflow: hidden;
-      color: var(--dao-text-primary);
       text-decoration: none;
       text-overflow: ellipsis;
       white-space: nowrap;
 
-      &.active {
+      &--link {
+        color: var(--dao-text-primary);
+        cursor: pointer;
+
         &:hover,
         &:active {
           color: var(--dao-primary-blue-040);
         }
       }
     }
   }
-
-  &__text {
-    font-size: 28px;
-    font-weight: bold;
-  }
-
-  &__size {
-    color: var(--dao-green-030);
-  }
-
-}
-
-.dao-key-value-layout.is-horizontal .dao-key-value-layout-item__label {
-  width: 110px;
 }
 </style>

src/views/finetune-experiment/composition/finetune.ts

@@ -60,7 +60,6 @@ export const useFinetuneJob = () => {
     metadata: {
       name: '',
     },
-    valid: true,
     spec: {
       finetune: {
         finetuneSpec: {

src/views/hyperparameter/HyperparameterDetail.vue

@@ -1,45 +1,24 @@
 <script setup lang="ts">
 import { useRoute, useRouter } from 'vue-router';
-import { computed, ref } from 'vue';
+import { computed, onBeforeMount } from 'vue';
 import { useDateFormat } from '@dao-style/extend';
 import { useI18n } from 'vue-i18n';
 import { useNamespaceStore } from '@/stores/namespace';
-import {
-  Hyperparameter, hyperparameterClient,
-} from '@/api/hyperparameter';
-import { nError } from '@/utils/useNoty';
-import { retrieveQuantization, useDeleteHyperparameter } from './composition/hyperparameter';
+import { storeToRefs } from 'pinia';
+import { retrieveQuantization, useDeleteHyperparameter, useHyperparameter } from './composition/hyperparameter';
 
 const router = useRouter();
 const route = useRoute();
-const namespaceStore = useNamespaceStore();
 const { t } = useI18n();
 
-const hyperparameter = ref<Hyperparameter | null>(null);
+const { namespace } = storeToRefs(useNamespaceStore());
+const name = route.params.name as string;
 
-// 获取超参数详细信息
-const fetchDataset = async () => {
-  try {
-    const res = await hyperparameterClient.read(
-      namespaceStore.namespace,
-      route.params.name as string,
-    );
+const { hyperparameter, fetchHyperparameter } = useHyperparameter();
 
-    hyperparameter.value = res.data;
-  } catch (error) {
-    nError(
-      t('common.notyError', {
-        name: t('common.fetch'),
-        action: t('views.Hyperparameter.hyperparameterGroup'),
-      }),
-      error,
-    );
-  }
-};
-
-fetchDataset();
-
-const name = computed(() => hyperparameter.value?.metadata.name);
+onBeforeMount(() => {
+  fetchHyperparameter(namespace.value, name);
+});
 
 // 基本信息
 const infos = computed(() => {
@@ -50,14 +29,14 @@ const infos = computed(() => {
   return [
     {
       label: t('views.Hyperparameter.name'),
-      value: name.value,
+      value: data.metadata.name,
     },
     {
       label: t('views.Hyperparameter.fineTuningType'),
       value: data.spec.objective.type,
     },
     {
-      label: '被引用任务',
+      label: t('views.Hyperparameter.referencedTask'),
       value: data.metadata.labels,
       slotId: 'tag',
     },
@@ -154,7 +133,7 @@ const onEdit = () => {
   router.push({
     name: 'HyperparameterCreate',
     query: {
-      name: name.value,
+      name,
     },
   });
 };
@@ -166,7 +145,7 @@ const toList = () => {
 };
 
 const { onConfirmDelete } = useDeleteHyperparameter(
-  namespaceStore.namespace,
+  namespace.value,
   toList,
 );
 </script>