@sigmaott/base-next 1.0.6

package/src/components/Server/ServerConfig.vue

@@ -0,0 +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>