@sigmaott/base-next 1.4.0 → 1.4.2

package/src/components/Server/ServerConfig.vue

@@ -1,599 +1,599 @@
-<script setup lang="ts">
-import { getListMachineByClusterId, useQueryMachineClusterFindAll, useQueryMachineFindAll } from './useQueryMachine'
-
-const props = defineProps<{
-  prop: string
-  serverIdExit: string[]
-  disabled?: boolean
-}>()
-
-const emit = defineEmits(['changeType', 'handleChangeMachines'])
-const { t } = useI18n()
-function getProp(path: string) {
-  return () => props.prop ? `${props.prop}.${path}` : path
-}
-
-const API_PLAYOUT_API_DOCS_JSON = '/api/playout/api-docs-json'
-const { schemaItem } = useAsyncSchema(API_PLAYOUT_API_DOCS_JSON, 'InputDataDto')
-
-const [setupTypeValue] = useElField<string | undefined>('setupType', [])
-const [channelModeValue] = useElField<string | undefined>('channelConfig.channelMode', [])
-const [channelConfigValue] = useElField<string | undefined>('channelConfig', [])
-const [serverTypeValue, serverTypeAttrs] = useElField<string | undefined>(getProp('machineType'), [
-  {
-    validator: (rule, value, callback) => {
-      if (!value)
-        callback(new Error(t('SSConfig.message.selectMachineType')))
-      else
-        callback()
-    },
-    trigger: ['blur', 'change'],
-    required: true,
-  },
-])
-const [serverIdValue, serverIdAttrs] = useElField<string | undefined>(getProp('machineId'), [
-  {
-    validator: (rule, value, callback) => {
-      if (!value)
-        callback(new Error(t('SSConfig.message.selectServer', [serverTypeValue.value !== 'SIGMA_MACHINE' ? t('base_library.label.cluster') : t('base_library.label.machine')])))
-      else
-        callback()
-    },
-    trigger: ['blur', 'change'],
-    required: true,
-  },
-])
-const [modeValue, modeAttrs] = useElField<string | undefined>(getProp('mode'), [
-  {
-    validator: (rule, value, callback) => {
-      if (!value)
-        callback(new Error(t('SSConfig.message.selectServerMode')))
-      else
-        callback()
-    },
-    trigger: ['blur', 'change'],
-    required: true,
-  },
-])
-const [specMachineIdValue, specMachineIdAttrs] = useElField<string | undefined>(getProp('specMachineId'), [
-  {
-    validator: (rule, value, callback) => {
-      if (!value)
-        callback(new Error(t('SSConfig.message.selectMachineFirst')))
-      else
-        callback()
-    },
-    trigger: ['blur', 'change'],
-    required: true,
-  },
-])
-
-const [encoderModeValue, encoderModeAttrs] = useElField<string>(getProp('encoderMode'), [
-  {
-    required: true,
-    trigger: ['blur', 'change'],
-    validator: (_rule, value: string, callback: any) => {
-      if (!value)
-        callback(new Error($t('base.please_select_name', { name: $t('base.encoderMode') })))
-      callback()
-    },
-  },
-])
-
-const [encoderIdValue, encoderIdAttrs] = useElField<string>(getProp('encoderId'), [
-  {
-    required: true,
-    trigger: ['blur', 'change'],
-    validator: (_rule, value: string, callback: any) => {
-      if (!value && value !== 0 && encoderModeValue.value === 'MANUAL')
-        callback(new Error($t('base.please_select_name', { name: $t('base.encoderId') })))
-      callback()
-    },
-  },
-])
-
-const paramsMachine = reactive({
-  page: 1,
-  perPage: 10,
-  q: {
-    $and: [{}],
-  },
-})
-const qSigmaMachine = computed(() => {
-  const q = JSON.parse(JSON.stringify(paramsMachine.q))
-  q.$and.push({ $or: [{ status: { $in: ['running', 'paused'] } }, { id: serverIdValue.value }] })
-
-  return { ...paramsMachine, q }
-})
-
-const { data: listMachine, isFetching: isFetchingListMachine } = useQueryMachineFindAll(qSigmaMachine, computed(() => serverTypeValue.value === 'SIGMA_MACHINE'))
-const { data: listClusters, isFetching: isFetchingListClusters } = useQueryMachineClusterFindAll(paramsMachine, computed(() => serverTypeValue.value === 'SIGMA_MACHINE_CLUSTER'))
-function filterMachinesByIds(ids: string[], list: any) {
-  return list?.filter(machine => !ids?.includes(machine.id))
-}
-const optionServer = computed(() => {
-  if (serverTypeValue.value === 'SIGMA_MACHINE')
-    return filterMachinesByIds(props.serverIdExit, listMachine.value?.data) || []
-  else if (serverTypeValue.value === 'SIGMA_MACHINE_CLUSTER')
-    return filterMachinesByIds(props.serverIdExit, listClusters.value?.data) || []
-  return []
-})
-const machineTypeDto = [
-  {
-    label: 'Sigma Media Server',
-    value: 'SIGMA_MACHINE',
-  },
-  {
-    label: 'Sigma Cluster Server',
-    value: 'SIGMA_MACHINE_CLUSTER',
-  },
-]
-
-const modeOptions = {
-  'no_backup': 'No Backup',
-  'N+M': 'N + M',
-  '1+1': '1 + 1',
-}
-
-const optionsEncoderMode = [
-  {
-    label: 'MANUAL',
-    value: 'MANUAL',
-  },
-  {
-    label: 'AUTO',
-    value: 'AUTO',
-  },
-]
-
-const statusMachine = {
-  running: 'success',
-  dead: 'danger',
-  paused: 'warning',
-}
-
-const MAP_STATUS_CLUSTER: Record<MachineClusterStatusEnum, 'success' | 'info' | 'warning' | 'danger'> = {
-  green: 'success',
-  yellow: 'warning',
-  red: 'danger',
-}
-
-const [profilesValue] = useElField('profiles', [])
-
-const optionsVideoEncoder = ref()
-function extractPrimary(lists) {
-  return lists?.map(item => item.primary)
-}
-function getPrimaryServer(ids, cluster) {
-  let list
-  if (cluster?.mode === '1+1') {
-    list = extractPrimary(cluster?.onePlusOneMachines)
-  }
-  else if (cluster?.mode === 'N+M') {
-    list = cluster?.nPlusMMachines?.filter(item => item.role === 'primary')
-  }
-  else {
-    list = cluster?.machines
-  }
-
-  return filterMachinesByIds(ids, list) || []
-}
-const { data: listMachineInCluster } = getListMachineByClusterId(serverIdValue, computed(() => serverTypeValue.value === 'SIGMA_MACHINE_CLUSTER' && !!serverIdValue.value))
-const optionSpecMachineIds = computed(() => {
-  if (serverTypeValue.value !== 'SIGMA_MACHINE')
-    return getPrimaryServer(props?.serverIdExit, listMachineInCluster.value) || []
-  return []
-})
-
-function handleChangeType(_value: string) {
-  serverIdValue.value = ''
-  if (_value === 'SIGMA_MACHINE_CLUSTER') {
-    modeValue.value = 'AUTO'
-  }
-  encoderIdValue.value = undefined
-  encoderModeValue.value = 'AUTO'
-}
-
-function handleChangeServer(_id: string) {
-  specMachineIdValue.value = undefined
-  encoderIdValue.value = undefined
-
-  if (channelConfigValue.value?.pte?.path)
-    channelConfigValue.value.pte.path = undefined
-}
-
-function handleChangePrimaryServer(_id: string) {
-  encoderIdValue.value = undefined
-}
-
-const optionsEncoder = computed(() => {
-  const value = encoderIdValue.value
-
-  // TH1: encoderIdValue === -1
-  if (value === -1) {
-    return [
-      'open_h264',
-      'open_hevc',
-      'passthrough',
-    ]
-  }
-
-  // TH2: encoderIdValue là null, undefined, '' hoặc bất kỳ giá trị nào khác
-  if (value === null || value === undefined || value === '') {
-    return [
-      'open_h264',
-      'open_hevc',
-      'nvenc',
-      'passthrough',
-    ]
-  }
-
-  // Mặc định cho các giá trị khác (ví dụ: 0, 1, 2, 3,...)
-  return [
-    'nvenc',
-    'passthrough',
-  ]
-})
-
-function isValidEncoder(optionsCheck) {
-  return optionsCheck?.every(item => optionsEncoder.value.includes(item))
-}
-
-function areAllEncoderTypesSame(profiles, newEncoderType?: string) {
-  const encoderTypes = newEncoderType ? [newEncoderType] : []
-
-  for (const profile of profiles) {
-    for (const preset of profile.presets || []) {
-      if (preset.encoderType)
-        encoderTypes.push(preset.encoderType)
-    }
-  }
-
-  if (encoderTypes.length === 0)
-    return true
-
-  return encoderTypes?.filter(Boolean)?.every(type => type === encoderTypes[0]) && isValidEncoder(encoderTypes)
-}
-
-function handleChangeServerMode(_newValue: string) {
-  specMachineIdValue.value = undefined
-  encoderModeValue.value = 'AUTO'
-  encoderIdValue.value = undefined
-  if (serverTypeValue.value !== 'SIGMA_MACHINE')
-    optionsVideoEncoder.value = []
-
-  if (profilesValue.value.length > 0 && _newValue === 'AUTO' && !areAllEncoderTypesSame(profilesValue.value))
-    setDefaultEncoder()
-}
-
-watchEffect(() => {
-  if (serverTypeValue.value === 'SIGMA_MACHINE') {
-    const _server = optionServer.value?.find(item => item?.id === serverIdValue.value)
-    optionsVideoEncoder.value = _server?.videoEncoders || []
-  }
-  else {
-    const _server = optionSpecMachineIds.value.find(item => item.id === specMachineIdValue.value)
-    if (_server)
-      optionsVideoEncoder.value = _server?.machine?.videoEncoders
-  }
-})
-
-function getEncoderConfig(newEncoderType: string) {
-  const config = {
-    videoCodec: '',
-    videoPreset: '',
-    videoProfile: '',
-    videoLevel: '',
-    vmafMaxValue: undefined,
-    vmafMinValue: undefined,
-    vmafThresValue: undefined,
-  }
-
-  switch (newEncoderType) {
-    case 'open_h264':
-      config.videoCodec = 'h264'
-      config.videoPreset = 'veryfast'
-      break
-    case 'open_hevc':
-      config.videoCodec = 'hevc'
-      config.videoPreset = 'veryfast'
-      break
-    case 'nvenc':
-      config.videoCodec = 'h264'
-      config.videoPreset = 'llhp'
-      break
-    case 'aurora4':
-      config.videoCodec = 'h264'
-      config.videoPreset = 'veryfast'
-      break
-    case 'passthrough':
-      config.videoCodec = 'copy'
-      break
-  }
-
-  return config
-}
-
-function updateAllEncoderTypes(newEncoderType: string) {
-  const config = getEncoderConfig(newEncoderType)
-
-  return profilesValue.value?.map((_profile) => {
-    const updatedPresets = _profile?.presets?.map(preset => ({
-      ...preset,
-      encoderType: newEncoderType,
-      videoPreset: config.videoPreset,
-      videoProfile: config.videoProfile,
-      videoLevel: config.videoLevel,
-      videoCodec: config.videoCodec,
-    }))
-    return {
-      ..._profile,
-      presets: updatedPresets,
-    }
-  })
-}
-
-function setDefaultEncoder() {
-  ElMessageBox.alert(
-    $t('base_libray.less_than_strong_greater_than', [`<strong>${$t('base_libray.all_profiles_must_have_the_same_video_encoder_data')}</strong>`]),
-    $t('base_libray.encoder_sync'),
-    {
-      confirmButtonText: t('Actions.confirm'),
-      dangerouslyUseHTMLString: true,
-      showClose: false,
-      callback: (action: Action) => {
-        if (encoderModeValue.value === 'AUTO') {
-          profilesValue.value = updateAllEncoderTypes('open_h264')
-        }
-        else {
-          if (encoderIdValue.value === -1) {
-            profilesValue.value = updateAllEncoderTypes('open_h264')
-          }
-          else {
-            profilesValue.value = updateAllEncoderTypes('nvenc')
-          }
-        }
-        ElMessage({
-          message: $t('base_library.data_successfully_synced_to_default'),
-          type: 'success',
-        })
-      },
-    },
-  )
-}
-function handleChangeEncoderMode(newValue: string) {
-  encoderIdValue.value = undefined
-  if (newValue === 'AUTO' && !areAllEncoderTypesSame(profilesValue.value))
-    setDefaultEncoder()
-}
-
-function handleChangeVideoEncoder(newValue: string) {
-  if (!areAllEncoderTypesSame(profilesValue.value))
-    setDefaultEncoder()
-}
-</script>
-
-<template>
-  <el-form-item class="flex-1" :label="t('SSConfig.label.machineType')" v-bind="serverTypeAttrs">
-    <el-select
-      v-model="serverTypeValue"
-      class="w-full"
-      :placeholder="t('SSConfig.placeholder.select')"
-      :disabled="channelModeValue === 'active-active' || props.disabled"
-      @change="handleChangeType"
-    >
-      <el-option
-        v-for="item in machineTypeDto"
-        :key="item.value"
-        :label="item.label"
-        :value="item.value"
-      />
-    </el-select>
-  </el-form-item>
-  <el-form-item class="flex-1" v-bind="serverIdAttrs" :label="serverTypeValue !== 'SIGMA_MACHINE' ? t('SSConfig.label.cluster') : t('Input.label.machine')">
-    <div class="w-full flex gap-1">
-      <el-select
-        v-model="serverIdValue"
-        :placeholder="t('SSConfig.placeholder.select')"
-        class="w-full"
-        :clearable="true"
-        :disabled="props.disabled"
-        @change="handleChangeServer"
-      >
-        <template v-if="serverTypeValue === 'SIGMA_MACHINE'">
-          <el-option
-            v-for="item in optionServer"
-            :key="item.id"
-            class="w-full h-auto! not-last:border-b"
-            :label="`${item.name}`"
-            :value="item.id"
-            :disabled="item.isDeleted || item.status !== 'running'"
-          >
-            <div>
-              <div class="font-semibold">
-                {{ item.machine }}
-              </div>
-              <div v-if="item.isDeleted" class="text-red-500">
-                {{ t('SSConfig.form.validate.existMachine') }}
-              </div>
-              <div v-else class="flex items-center justify-between gap-2">
-                <div> Usage({{ item.percent }}%) </div>
-                <div> Memory({{ Number(Number(item.ramUsage).toFixed(2)) + 0 }}%)</div>
-                <el-tag :type="statusMachine[item.status!]">
-                  {{ item.status!.toUpperCase() }}
-                </el-tag>
-              </div>
-            </div>
-          </el-option>
-        </template>
-        <template v-else-if="serverTypeValue === 'SIGMA_MACHINE_CLUSTER'">
-          <el-option
-            v-for="item in optionServer"
-            :key="item.id"
-            class="w-full h-auto! not-last:border-b"
-            :label="item.name"
-            :value="item.id!"
-            :disabled="(item.isDeleted || item.status === 'red') || (channelModeValue === 'active-active' && item?.mode !== '1+1')"
-          >
-            <div>
-              <div class="flex justify-between font-semibold">
-                {{ item.name }}
-              </div>
-              <div v-if="item.isDeleted" class="text-red-500">
-                {{ t('SSConfig.form.validate.existMachine') }}
-              </div>
-              <div v-else class="w-full flex items-center justify-between">
-                <div class="flex-1">
-                  {{ t('SSConfig.label.machines') }}({{ item?.mode === 'no_backup' ? item.machines?.length : item?.mode === 'N+M' ? item?.nPlusMMachines?.length : item?.onePlusOneMachines?.length * 2 }})
-                </div>
-                <div class="flex flex-1 justify-center">
-                  <span class="h-24px flex items-center border rounded p-3px">
-                    {{ modeOptions[item?.mode] }}
-                  </span>
-                </div>
-                <div class="flex flex-1 justify-end">
-                  <el-tag :type="MAP_STATUS_CLUSTER[item.status]">
-                    {{ item.status.toUpperCase() }}
-                  </el-tag>
-                </div>
-              </div>
-            </div>
-          </el-option>
-        </template>
-      </el-select>
-    </div>
-  </el-form-item>
-  <el-form-item v-if="serverTypeValue === 'SIGMA_MACHINE_CLUSTER'" v-bind="modeAttrs" class="flex-1">
-    <template #label>
-      <SSInformationLabel :label="t('SSConfig.label.server_mode')" :information="schemaItem?.properties?.mode?.description" />
-    </template>
-    <el-select
-      v-model="modeValue"
-      :placeholder="t('SSConfig.placeholder.select')"
-      class="w-full"
-      @change="handleChangeServerMode"
-    >
-      <el-option
-        v-for="item in ['MANUAL', 'AUTO']"
-        :key="item"
-        :label="item"
-        :value="item"
-      />
-    </el-select>
-  </el-form-item>
-  <el-form-item v-if="modeValue === 'MANUAL' && serverTypeValue === 'SIGMA_MACHINE_CLUSTER'" v-bind="specMachineIdAttrs" class="flex-1">
-    <template #label>
-      <SSInformationLabel :label="t('SSConfig.label.primaryServer')" :information="schemaItem?.properties?.specMachineId?.description" />
-    </template>
-    <el-select
-      v-model="specMachineIdValue"
-      :placeholder="t('SSConfig.placeholder.select')"
-      class="w-full"
-      @change="handleChangePrimaryServer"
-    >
-      <el-option
-        v-for="item in optionSpecMachineIds"
-        :key="item?.id"
-        class="w-full h-auto! not-last:border-b"
-        :label="item?.machine?.name"
-        :value="item?.id"
-        :disabled="item?.machine?.isDeleted || item?.machine?.status !== 'running'"
-      >
-        <div>
-          <div class="font-semibold">
-            {{ !item?.machine?.isDeleted ? item?.machine?.name : item?.id }}
-          </div>
-          <div v-if="item?.machine?.isDeleted" class="text-red-500">
-            {{ t('SSConfig.form.validate.existMachine') }}
-          </div>
-          <div v-else class="flex items-center justify-between gap-2">
-            <div> Usage({{ item?.machine?.percent }}%) </div>
-            <div> Memory({{ Number(Number(item?.machine?.ramUsage).toFixed(2)) + 0 }}%)</div>
-            <el-tag :type="statusMachine[item?.machine?.status!]">
-              {{ item?.machine?.status!.toUpperCase() }}
-            </el-tag>
-          </div>
-        </div>
-      </el-option>
-    </el-select>
-  </el-form-item>
-
-  <el-form-item v-if="modeValue === 'MANUAL' || serverTypeValue === 'SIGMA_MACHINE'" v-bind="encoderModeAttrs" class="flex-1">
-    <template #label>
-      <SSInformationLabel label="Encoder mode" :information="schemaItem?.properties?.mode?.description" />
-    </template>
-    <el-select
-      v-model="encoderModeValue"
-      :placeholder="t('EventChannel.placeholder.select')"
-      class="w-full"
-      @change="handleChangeEncoderMode"
-    >
-      <el-option
-        v-for="item in optionsEncoderMode"
-        :key="item.value"
-        :label="item.label"
-        :value="item.value"
-      />
-    </el-select>
-  </el-form-item>
-
-  <el-form-item v-if="encoderModeValue === 'MANUAL'" v-bind="encoderIdAttrs" class="flex-1">
-    <template #label>
-      <SSInformationLabel label="Video Encoder" :information="schemaItem?.properties?.mode?.description" />
-    </template>
-    <el-select
-      v-model="encoderIdValue"
-      :placeholder="t('EventChannel.placeholder.select')"
-      class="w-full"
-      filterable
-      @change="handleChangeVideoEncoder"
-    >
-      <el-option
-        v-for="item in optionsVideoEncoder"
-        :key="item.id"
-        :label="item.cardName"
-        :value="item.id"
-        class="w-full border-b-$el-border-color !h-auto not-last:border-b"
-      >
-        <el-text class="font-semibold">
-          {{ item.cardName }}
-        </el-text>
-        <div class="flex items-center justify-between gap-2">
-          <div>{{ item.type }}</div>
-          <div>Usage ({{ item.usage }}%)</div>
-          <div>Task ({{ item.totalTask }})</div>
-        </div>
-      </el-option>
-    </el-select>
-  </el-form-item>
-  <!-- <div v-else class="flex-1" /> -->
-  <!-- </div> -->
-  <!-- <MachineConfig
-    prop="machineConfig"
-    :ids-already-exist="[secondMachineConfigValue.machineId, secondMachineConfigValue.specMachineId]"
-    config-type="machineConfig"
-    :setup-type="setupTypeValue"
-    @change-type="handleChangeConfig1"
-    @reset-server="autoResetServer"
-  /> -->
-
-  <!-- <template v-if="channelModeValue === 'active-active' && setupTypeValue !== 'clusteredPair'">
-    <div class="pb-2 text-14px text-#606266 font-bold font-bold dark:text-#CFD3DC" :class="{ isBold: 'text-16px' }">
-      {{ `${t('SSConfig.form.label.serverConfig')} 2` }}
-    </div>
-    <el-form-item class="items-center flex! ![&_.el-form-item\_\_label]:m-0">
-      <template #label>
-        <InformationLabel :label="t('SSConfig.form.label.baseOnMachine')" :information="schemaItem?.properties?.baseOnMachine?.description" />
-      </template>
-    </el-form-item>
-    <MachineConfig
-      prop="secondMachineConfig"
-      :ids-already-exist="[machineConfigValue.machineId, machineConfigValue.specMachineId]"
-      config-type="secondMachineConfig"
-      :type="typeValue"
-      :setup-type="setupTypeValue"
-      @change-type="handleChangeConfig2"
-      @reset-server="autoResetServer"
-    />
-  </template> -->
-</template>
+<script setup lang="ts">
+import { getListMachineByClusterId, useQueryMachineClusterFindAll, useQueryMachineFindAll } from './useQueryMachine'
+
+const props = defineProps<{
+  prop: string
+  serverIdExit: string[]
+  disabled?: boolean
+}>()
+
+const emit = defineEmits(['changeType', 'handleChangeMachines'])
+const { t } = useI18n()
+function getProp(path: string) {
+  return () => props.prop ? `${props.prop}.${path}` : path
+}
+
+const API_PLAYOUT_API_DOCS_JSON = '/api/playout/api-docs-json'
+const { schemaItem } = useAsyncSchema(API_PLAYOUT_API_DOCS_JSON, 'InputDataDto')
+
+const [setupTypeValue] = useElField<string | undefined>('setupType', [])
+const [channelModeValue] = useElField<string | undefined>('channelConfig.channelMode', [])
+const [channelConfigValue] = useElField<string | undefined>('channelConfig', [])
+const [serverTypeValue, serverTypeAttrs] = useElField<string | undefined>(getProp('machineType'), [
+  {
+    validator: (rule, value, callback) => {
+      if (!value)
+        callback(new Error(t('SSConfig.message.selectMachineType')))
+      else
+        callback()
+    },
+    trigger: ['blur', 'change'],
+    required: true,
+  },
+])
+const [serverIdValue, serverIdAttrs] = useElField<string | undefined>(getProp('machineId'), [
+  {
+    validator: (rule, value, callback) => {
+      if (!value)
+        callback(new Error(t('SSConfig.message.selectServer', [serverTypeValue.value !== 'SIGMA_MACHINE' ? t('base_library.label.cluster') : t('base_library.label.machine')])))
+      else
+        callback()
+    },
+    trigger: ['blur', 'change'],
+    required: true,
+  },
+])
+const [modeValue, modeAttrs] = useElField<string | undefined>(getProp('mode'), [
+  {
+    validator: (rule, value, callback) => {
+      if (!value)
+        callback(new Error(t('SSConfig.message.selectServerMode')))
+      else
+        callback()
+    },
+    trigger: ['blur', 'change'],
+    required: true,
+  },
+])
+const [specMachineIdValue, specMachineIdAttrs] = useElField<string | undefined>(getProp('specMachineId'), [
+  {
+    validator: (rule, value, callback) => {
+      if (!value)
+        callback(new Error(t('SSConfig.message.selectMachineFirst')))
+      else
+        callback()
+    },
+    trigger: ['blur', 'change'],
+    required: true,
+  },
+])
+
+const [encoderModeValue, encoderModeAttrs] = useElField<string>(getProp('encoderMode'), [
+  {
+    required: true,
+    trigger: ['blur', 'change'],
+    validator: (_rule, value: string, callback: any) => {
+      if (!value)
+        callback(new Error($t('base.please_select_name', { name: $t('base.encoderMode') })))
+      callback()
+    },
+  },
+])
+
+const [encoderIdValue, encoderIdAttrs] = useElField<string>(getProp('encoderId'), [
+  {
+    required: true,
+    trigger: ['blur', 'change'],
+    validator: (_rule, value: string, callback: any) => {
+      if (!value && value !== 0 && encoderModeValue.value === 'MANUAL')
+        callback(new Error($t('base.please_select_name', { name: $t('base.encoderId') })))
+      callback()
+    },
+  },
+])
+
+const paramsMachine = reactive({
+  page: 1,
+  perPage: 10,
+  q: {
+    $and: [{}],
+  },
+})
+const qSigmaMachine = computed(() => {
+  const q = JSON.parse(JSON.stringify(paramsMachine.q))
+  q.$and.push({ $or: [{ status: { $in: ['running', 'paused'] } }, { id: serverIdValue.value }] })
+
+  return { ...paramsMachine, q }
+})
+
+const { data: listMachine, isFetching: isFetchingListMachine } = useQueryMachineFindAll(qSigmaMachine, computed(() => serverTypeValue.value === 'SIGMA_MACHINE'))
+const { data: listClusters, isFetching: isFetchingListClusters } = useQueryMachineClusterFindAll(paramsMachine, computed(() => serverTypeValue.value === 'SIGMA_MACHINE_CLUSTER'))
+function filterMachinesByIds(ids: string[], list: any) {
+  return list?.filter(machine => !ids?.includes(machine.id))
+}
+const optionServer = computed(() => {
+  if (serverTypeValue.value === 'SIGMA_MACHINE')
+    return filterMachinesByIds(props.serverIdExit, listMachine.value?.data) || []
+  else if (serverTypeValue.value === 'SIGMA_MACHINE_CLUSTER')
+    return filterMachinesByIds(props.serverIdExit, listClusters.value?.data) || []
+  return []
+})
+const machineTypeDto = [
+  {
+    label: 'Sigma Media Server',
+    value: 'SIGMA_MACHINE',
+  },
+  {
+    label: 'Sigma Cluster Server',
+    value: 'SIGMA_MACHINE_CLUSTER',
+  },
+]
+
+const modeOptions = {
+  'no_backup': 'No Backup',
+  'N+M': 'N + M',
+  '1+1': '1 + 1',
+}
+
+const optionsEncoderMode = [
+  {
+    label: 'MANUAL',
+    value: 'MANUAL',
+  },
+  {
+    label: 'AUTO',
+    value: 'AUTO',
+  },
+]
+
+const statusMachine = {
+  running: 'success',
+  dead: 'danger',
+  paused: 'warning',
+}
+
+const MAP_STATUS_CLUSTER: Record<MachineClusterStatusEnum, 'success' | 'info' | 'warning' | 'danger'> = {
+  green: 'success',
+  yellow: 'warning',
+  red: 'danger',
+}
+
+const [profilesValue] = useElField('profiles', [])
+
+const optionsVideoEncoder = ref()
+function extractPrimary(lists) {
+  return lists?.map(item => item.primary)
+}
+function getPrimaryServer(ids, cluster) {
+  let list
+  if (cluster?.mode === '1+1') {
+    list = extractPrimary(cluster?.onePlusOneMachines)
+  }
+  else if (cluster?.mode === 'N+M') {
+    list = cluster?.nPlusMMachines?.filter(item => item.role === 'primary')
+  }
+  else {
+    list = cluster?.machines
+  }
+
+  return filterMachinesByIds(ids, list) || []
+}
+const { data: listMachineInCluster } = getListMachineByClusterId(serverIdValue, computed(() => serverTypeValue.value === 'SIGMA_MACHINE_CLUSTER' && !!serverIdValue.value))
+const optionSpecMachineIds = computed(() => {
+  if (serverTypeValue.value !== 'SIGMA_MACHINE')
+    return getPrimaryServer(props?.serverIdExit, listMachineInCluster.value) || []
+  return []
+})
+
+function handleChangeType(_value: string) {
+  serverIdValue.value = ''
+  if (_value === 'SIGMA_MACHINE_CLUSTER') {
+    modeValue.value = 'AUTO'
+  }
+  encoderIdValue.value = undefined
+  encoderModeValue.value = 'AUTO'
+}
+
+function handleChangeServer(_id: string) {
+  specMachineIdValue.value = undefined
+  encoderIdValue.value = undefined
+
+  if (channelConfigValue.value?.pte?.path)
+    channelConfigValue.value.pte.path = undefined
+}
+
+function handleChangePrimaryServer(_id: string) {
+  encoderIdValue.value = undefined
+}
+
+const optionsEncoder = computed(() => {
+  const value = encoderIdValue.value
+
+  // TH1: encoderIdValue === -1
+  if (value === -1) {
+    return [
+      'open_h264',
+      'open_hevc',
+      'passthrough',
+    ]
+  }
+
+  // TH2: encoderIdValue là null, undefined, '' hoặc bất kỳ giá trị nào khác
+  if (value === null || value === undefined || value === '') {
+    return [
+      'open_h264',
+      'open_hevc',
+      'nvenc',
+      'passthrough',
+    ]
+  }
+
+  // Mặc định cho các giá trị khác (ví dụ: 0, 1, 2, 3,...)
+  return [
+    'nvenc',
+    'passthrough',
+  ]
+})
+
+function isValidEncoder(optionsCheck) {
+  return optionsCheck?.every(item => optionsEncoder.value.includes(item))
+}
+
+function areAllEncoderTypesSame(profiles, newEncoderType?: string) {
+  const encoderTypes = newEncoderType ? [newEncoderType] : []
+
+  for (const profile of profiles) {
+    for (const preset of profile.presets || []) {
+      if (preset.encoderType)
+        encoderTypes.push(preset.encoderType)
+    }
+  }
+
+  if (encoderTypes.length === 0)
+    return true
+
+  return encoderTypes?.filter(Boolean)?.every(type => type === encoderTypes[0]) && isValidEncoder(encoderTypes)
+}
+
+function handleChangeServerMode(_newValue: string) {
+  specMachineIdValue.value = undefined
+  encoderModeValue.value = 'AUTO'
+  encoderIdValue.value = undefined
+  if (serverTypeValue.value !== 'SIGMA_MACHINE')
+    optionsVideoEncoder.value = []
+
+  if (profilesValue.value.length > 0 && _newValue === 'AUTO' && !areAllEncoderTypesSame(profilesValue.value))
+    setDefaultEncoder()
+}
+
+watchEffect(() => {
+  if (serverTypeValue.value === 'SIGMA_MACHINE') {
+    const _server = optionServer.value?.find(item => item?.id === serverIdValue.value)
+    optionsVideoEncoder.value = _server?.videoEncoders || []
+  }
+  else {
+    const _server = optionSpecMachineIds.value.find(item => item.id === specMachineIdValue.value)
+    if (_server)
+      optionsVideoEncoder.value = _server?.machine?.videoEncoders
+  }
+})
+
+function getEncoderConfig(newEncoderType: string) {
+  const config = {
+    videoCodec: '',
+    videoPreset: '',
+    videoProfile: '',
+    videoLevel: '',
+    vmafMaxValue: undefined,
+    vmafMinValue: undefined,
+    vmafThresValue: undefined,
+  }
+
+  switch (newEncoderType) {
+    case 'open_h264':
+      config.videoCodec = 'h264'
+      config.videoPreset = 'veryfast'
+      break
+    case 'open_hevc':
+      config.videoCodec = 'hevc'
+      config.videoPreset = 'veryfast'
+      break
+    case 'nvenc':
+      config.videoCodec = 'h264'
+      config.videoPreset = 'llhp'
+      break
+    case 'aurora4':
+      config.videoCodec = 'h264'
+      config.videoPreset = 'veryfast'
+      break
+    case 'passthrough':
+      config.videoCodec = 'copy'
+      break
+  }
+
+  return config
+}
+
+function updateAllEncoderTypes(newEncoderType: string) {
+  const config = getEncoderConfig(newEncoderType)
+
+  return profilesValue.value?.map((_profile) => {
+    const updatedPresets = _profile?.presets?.map(preset => ({
+      ...preset,
+      encoderType: newEncoderType,
+      videoPreset: config.videoPreset,
+      videoProfile: config.videoProfile,
+      videoLevel: config.videoLevel,
+      videoCodec: config.videoCodec,
+    }))
+    return {
+      ..._profile,
+      presets: updatedPresets,
+    }
+  })
+}
+
+function setDefaultEncoder() {
+  ElMessageBox.alert(
+    $t('base_libray.less_than_strong_greater_than', [`<strong>${$t('base_libray.all_profiles_must_have_the_same_video_encoder_data')}</strong>`]),
+    $t('base_libray.encoder_sync'),
+    {
+      confirmButtonText: t('Actions.confirm'),
+      dangerouslyUseHTMLString: true,
+      showClose: false,
+      callback: (action: Action) => {
+        if (encoderModeValue.value === 'AUTO') {
+          profilesValue.value = updateAllEncoderTypes('open_h264')
+        }
+        else {
+          if (encoderIdValue.value === -1) {
+            profilesValue.value = updateAllEncoderTypes('open_h264')
+          }
+          else {
+            profilesValue.value = updateAllEncoderTypes('nvenc')
+          }
+        }
+        ElMessage({
+          message: $t('base_library.data_successfully_synced_to_default'),
+          type: 'success',
+        })
+      },
+    },
+  )
+}
+function handleChangeEncoderMode(newValue: string) {
+  encoderIdValue.value = undefined
+  if (newValue === 'AUTO' && !areAllEncoderTypesSame(profilesValue.value))
+    setDefaultEncoder()
+}
+
+function handleChangeVideoEncoder(newValue: string) {
+  if (!areAllEncoderTypesSame(profilesValue.value))
+    setDefaultEncoder()
+}
+</script>
+
+<template>
+  <el-form-item class="flex-1" :label="t('SSConfig.label.machineType')" v-bind="serverTypeAttrs">
+    <el-select
+      v-model="serverTypeValue"
+      class="w-full"
+      :placeholder="t('SSConfig.placeholder.select')"
+      :disabled="channelModeValue === 'active-active' || props.disabled"
+      @change="handleChangeType"
+    >
+      <el-option
+        v-for="item in machineTypeDto"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      />
+    </el-select>
+  </el-form-item>
+  <el-form-item class="flex-1" v-bind="serverIdAttrs" :label="serverTypeValue !== 'SIGMA_MACHINE' ? t('SSConfig.label.cluster') : t('Input.label.machine')">
+    <div class="w-full flex gap-1">
+      <el-select
+        v-model="serverIdValue"
+        :placeholder="t('SSConfig.placeholder.select')"
+        class="w-full"
+        :clearable="true"
+        :disabled="props.disabled"
+        @change="handleChangeServer"
+      >
+        <template v-if="serverTypeValue === 'SIGMA_MACHINE'">
+          <el-option
+            v-for="item in optionServer"
+            :key="item.id"
+            class="w-full h-auto! not-last:border-b"
+            :label="`${item.name}`"
+            :value="item.id"
+            :disabled="item.isDeleted || item.status !== 'running'"
+          >
+            <div>
+              <div class="font-semibold">
+                {{ item.machine }}
+              </div>
+              <div v-if="item.isDeleted" class="text-red-500">
+                {{ t('SSConfig.form.validate.existMachine') }}
+              </div>
+              <div v-else class="flex items-center justify-between gap-2">
+                <div> Usage({{ item.percent }}%) </div>
+                <div> Memory({{ Number(Number(item.ramUsage).toFixed(2)) + 0 }}%)</div>
+                <el-tag :type="statusMachine[item.status!]">
+                  {{ item.status!.toUpperCase() }}
+                </el-tag>
+              </div>
+            </div>
+          </el-option>
+        </template>
+        <template v-else-if="serverTypeValue === 'SIGMA_MACHINE_CLUSTER'">
+          <el-option
+            v-for="item in optionServer"
+            :key="item.id"
+            class="w-full h-auto! not-last:border-b"
+            :label="item.name"
+            :value="item.id!"
+            :disabled="(item.isDeleted || item.status === 'red') || (channelModeValue === 'active-active' && item?.mode !== '1+1')"
+          >
+            <div>
+              <div class="flex justify-between font-semibold">
+                {{ item.name }}
+              </div>
+              <div v-if="item.isDeleted" class="text-red-500">
+                {{ t('SSConfig.form.validate.existMachine') }}
+              </div>
+              <div v-else class="w-full flex items-center justify-between">
+                <div class="flex-1">
+                  {{ t('SSConfig.label.machines') }}({{ item?.mode === 'no_backup' ? item.machines?.length : item?.mode === 'N+M' ? item?.nPlusMMachines?.length : item?.onePlusOneMachines?.length * 2 }})
+                </div>
+                <div class="flex flex-1 justify-center">
+                  <span class="h-24px flex items-center border rounded p-3px">
+                    {{ modeOptions[item?.mode] }}
+                  </span>
+                </div>
+                <div class="flex flex-1 justify-end">
+                  <el-tag :type="MAP_STATUS_CLUSTER[item.status]">
+                    {{ item.status.toUpperCase() }}
+                  </el-tag>
+                </div>
+              </div>
+            </div>
+          </el-option>
+        </template>
+      </el-select>
+    </div>
+  </el-form-item>
+  <el-form-item v-if="serverTypeValue === 'SIGMA_MACHINE_CLUSTER'" v-bind="modeAttrs" class="flex-1">
+    <template #label>
+      <SSInformationLabel :label="t('SSConfig.label.server_mode')" :information="schemaItem?.properties?.mode?.description" />
+    </template>
+    <el-select
+      v-model="modeValue"
+      :placeholder="t('SSConfig.placeholder.select')"
+      class="w-full"
+      @change="handleChangeServerMode"
+    >
+      <el-option
+        v-for="item in ['MANUAL', 'AUTO']"
+        :key="item"
+        :label="item"
+        :value="item"
+      />
+    </el-select>
+  </el-form-item>
+  <el-form-item v-if="modeValue === 'MANUAL' && serverTypeValue === 'SIGMA_MACHINE_CLUSTER'" v-bind="specMachineIdAttrs" class="flex-1">
+    <template #label>
+      <SSInformationLabel :label="t('SSConfig.label.primaryServer')" :information="schemaItem?.properties?.specMachineId?.description" />
+    </template>
+    <el-select
+      v-model="specMachineIdValue"
+      :placeholder="t('SSConfig.placeholder.select')"
+      class="w-full"
+      @change="handleChangePrimaryServer"
+    >
+      <el-option
+        v-for="item in optionSpecMachineIds"
+        :key="item?.id"
+        class="w-full h-auto! not-last:border-b"
+        :label="item?.machine?.name"
+        :value="item?.id"
+        :disabled="item?.machine?.isDeleted || item?.machine?.status !== 'running'"
+      >
+        <div>
+          <div class="font-semibold">
+            {{ !item?.machine?.isDeleted ? item?.machine?.name : item?.id }}
+          </div>
+          <div v-if="item?.machine?.isDeleted" class="text-red-500">
+            {{ t('SSConfig.form.validate.existMachine') }}
+          </div>
+          <div v-else class="flex items-center justify-between gap-2">
+            <div> Usage({{ item?.machine?.percent }}%) </div>
+            <div> Memory({{ Number(Number(item?.machine?.ramUsage).toFixed(2)) + 0 }}%)</div>
+            <el-tag :type="statusMachine[item?.machine?.status!]">
+              {{ item?.machine?.status!.toUpperCase() }}
+            </el-tag>
+          </div>
+        </div>
+      </el-option>
+    </el-select>
+  </el-form-item>
+
+  <el-form-item v-if="modeValue === 'MANUAL' || serverTypeValue === 'SIGMA_MACHINE'" v-bind="encoderModeAttrs" class="flex-1">
+    <template #label>
+      <SSInformationLabel label="Encoder mode" :information="schemaItem?.properties?.mode?.description" />
+    </template>
+    <el-select
+      v-model="encoderModeValue"
+      :placeholder="t('EventChannel.placeholder.select')"
+      class="w-full"
+      @change="handleChangeEncoderMode"
+    >
+      <el-option
+        v-for="item in optionsEncoderMode"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      />
+    </el-select>
+  </el-form-item>
+
+  <el-form-item v-if="encoderModeValue === 'MANUAL'" v-bind="encoderIdAttrs" class="flex-1">
+    <template #label>
+      <SSInformationLabel label="Video Encoder" :information="schemaItem?.properties?.mode?.description" />
+    </template>
+    <el-select
+      v-model="encoderIdValue"
+      :placeholder="t('EventChannel.placeholder.select')"
+      class="w-full"
+      filterable
+      @change="handleChangeVideoEncoder"
+    >
+      <el-option
+        v-for="item in optionsVideoEncoder"
+        :key="item.id"
+        :label="item.cardName"
+        :value="item.id"
+        class="w-full border-b-$el-border-color !h-auto not-last:border-b"
+      >
+        <el-text class="font-semibold">
+          {{ item.cardName }}
+        </el-text>
+        <div class="flex items-center justify-between gap-2">
+          <div>{{ item.type }}</div>
+          <div>Usage ({{ item.usage }}%)</div>
+          <div>Task ({{ item.totalTask }})</div>
+        </div>
+      </el-option>
+    </el-select>
+  </el-form-item>
+  <!-- <div v-else class="flex-1" /> -->
+  <!-- </div> -->
+  <!-- <MachineConfig
+    prop="machineConfig"
+    :ids-already-exist="[secondMachineConfigValue.machineId, secondMachineConfigValue.specMachineId]"
+    config-type="machineConfig"
+    :setup-type="setupTypeValue"
+    @change-type="handleChangeConfig1"
+    @reset-server="autoResetServer"
+  /> -->
+
+  <!-- <template v-if="channelModeValue === 'active-active' && setupTypeValue !== 'clusteredPair'">
+    <div class="pb-2 text-14px text-#606266 font-bold font-bold dark:text-#CFD3DC" :class="{ isBold: 'text-16px' }">
+      {{ `${t('SSConfig.form.label.serverConfig')} 2` }}
+    </div>
+    <el-form-item class="items-center flex! ![&_.el-form-item\_\_label]:m-0">
+      <template #label>
+        <InformationLabel :label="t('SSConfig.form.label.baseOnMachine')" :information="schemaItem?.properties?.baseOnMachine?.description" />
+      </template>
+    </el-form-item>
+    <MachineConfig
+      prop="secondMachineConfig"
+      :ids-already-exist="[machineConfigValue.machineId, machineConfigValue.specMachineId]"
+      config-type="secondMachineConfig"
+      :type="typeValue"
+      :setup-type="setupTypeValue"
+      @change-type="handleChangeConfig2"
+      @reset-server="autoResetServer"
+    />
+  </template> -->
+</template>