@sigmaott/base-next 1.0.6

package/src/components/RecommendedConfigurationPTE.vue

@@ -0,0 +1,238 @@
+<script setup lang="ts">
+const props = defineProps<{
+  isTranscode?: boolean
+  visible: boolean
+}>()
+const emit = defineEmits(['applyConfig'])
+
+const visible = useVModel(props, 'visible')
+
+const configPte = ref(inject('configPte'))
+
+const recommendConfig = ref({
+  bframe: undefined,
+  cq_max: undefined,
+  cq_min: undefined,
+  encoder: 'undefined',
+  format: undefined,
+  fps: undefined,
+  lookahead: undefined,
+  maxrate: undefined,
+  model: undefined,
+  name: undefined,
+  preset: undefined,
+  profile: undefined,
+  result: undefined,
+  scale: undefined,
+  step: undefined,
+})
+
+const loadPathMutationVod = useMutation(
+  (payload: {
+    machineConfig: any
+    path: string
+  }) => $vodApi('/api/vod/ai-model/pte-info-model', {
+    body: {
+      ...payload.machineConfig,
+      path: payload.path,
+    },
+    method: 'POST',
+  }),
+)
+
+const loadPathMutationPlayout = useMutation(
+  (payload: {
+    machineConfig: any
+    path: string
+  }) => $playoutApi('/api/playout/pte/pte-info-model', {
+    body: {
+      ...payload.machineConfig,
+      path: payload.path,
+    },
+    method: 'POST',
+  }),
+)
+
+const loadPathMutationTranscode = useMutation(
+  (payload: {
+    machineConfig: any
+    path: string
+  }) => $transcodeApi('/api/transcode/pte/pte-info-model', {
+    body: {
+      ...payload.machineConfig,
+      path: payload.path,
+    },
+    method: 'POST',
+  }),
+)
+
+const isEvent = ref(inject('isEvent'))
+const isPlayout = ref(inject('isPlayout'))
+const loadPathMutation = (isEvent.value || props?.isTranscode) ? loadPathMutationTranscode : isPlayout.value ? loadPathMutationPlayout : loadPathMutationVod
+
+onMounted(async () => {
+  if (configPte.value?.pte?.path) {
+    const rs = await loadPathMutation.mutateAsync({
+      machineConfig: {
+        machineId: configPte.value?.machineId,
+        machineType: configPte.value?.machineType || 'SIGMA_MACHINE',
+        mode: 'AUTO',
+        //   specMachineId: configPte.value?.specMachineId || true,
+      },
+      path: configPte.value?.pte?.path,
+    })
+
+    recommendConfig.value = rs
+  }
+})
+function handleApply(params: type) {
+  ElMessageBox.confirm(
+    $t('base_library.when_performing_this_action_the_system_will_automatically_enable_the_pte_config_are_you_sure_you_want_to_apply_the_recommended_configuration'),
+    $t('base_library.apply_recommended_config'),
+    {
+      confirmButtonText: $t('Actions.confirm'),
+      cancelButtonText: $t('Actions.cancel'),
+      type: 'warning',
+    },
+  )
+    .then(() => {
+      emit('applyConfig', recommendConfig.value)
+      visible.value = false
+    })
+    .catch(() => {
+
+    })
+}
+
+function formatNumber(number) {
+  return number?.toLocaleString('de-DE')
+}
+</script>
+
+<template>
+  <el-dialog
+    v-model="visible"
+    title="Recommended Configuration"
+    width="1200"
+    destroy-on-close
+  >
+    <template #header>
+      <div class="text-xl font-bold">
+        {{ $t('base_library.recommended_configuration') }}
+      </div>
+    </template>
+    <div class="text-sm">
+      {{ $t('base_library.supports_users_in_optimizing_pte_settings_when_encoding_video_we_propose_a_set_of_predefined_configuration_values_based_on_ai-driven_assessments_to_balance_video_quality_and_encoding_efficiency_ensuring_high_image_quality_while_maintaining_optimal_performance') }}
+    </div>
+    <DevOnly>
+      <VueJsonPretty :data="recommendConfig" />
+    </DevOnly>
+    <el-card class="mt-4">
+      <div>
+        <div class="text-lg font-bold">
+          {{ $t('base_library.recommended_configuration') }}
+        </div>
+
+        <div class="grid grid-cols-5 px-4 py-2">
+          <div class="w-300px">
+            <div class="font-bold">
+              Path
+            </div>
+            <SSTooltipEllipsis class="w-200px" :content="configPte?.pte?.path || '-'" />
+          </div>
+          <div class="w-300px">
+            <div class="font-bold">
+              Model
+            </div>
+            <div>{{ recommendConfig.model || '-' }}</div>
+          </div>
+          <div class="w-300px">
+            <div class="font-bold">
+              Name
+            </div>
+            <div>{{ recommendConfig.name || '-' }}</div>
+          </div>
+          <!-- <div class="w-300px">
+            <div class="font-bold">
+              Encoder
+            </div>
+            <div>{{ recommendConfig.encoder || '-' }}</div>
+          </div>
+          <div class="w-300px">
+            <div class="font-bold">
+              Codec
+            </div>
+            <div>{{ recommendConfig?.codec || '-' }}</div>
+          </div> -->
+          <div class="w-300px">
+            <div class="font-bold">
+              Profile
+            </div>
+            <div>{{ recommendConfig.profile || '-' }}</div>
+          </div>
+          <div class="w-300px">
+            <div class="font-bold">
+              Pixel format
+            </div>
+            <div>{{ recommendConfig.format || '-' }}</div>
+          </div>
+          <div class="w-300px">
+            <div class="font-bold">
+              Preset
+            </div>
+            <div>{{ recommendConfig.preset || '-' }}</div>
+          </div>
+          <div class="w-300px">
+            <div class="font-bold">
+              FPS
+            </div>
+            <div>{{ recommendConfig.fps || '-' }}</div>
+          </div>
+          <div class="w-300px">
+            <div class="font-bold">
+              Maxrate
+            </div>
+            <div>{{ formatNumber(recommendConfig?.maxrate) || '-' }}</div>
+          </div>
+          <div class="w-300px">
+            <div class="font-bold">
+              Bframe
+            </div>
+            <div>{{ recommendConfig?.bframe || '-' }}</div>
+          </div>
+          <div class="w-300px">
+            <div class="font-bold">
+              Lookahead
+            </div>
+            <div>{{ recommendConfig.lookahead || '-' }}</div>
+          </div>
+          <div class="w-300px">
+            <div class="font-bold">
+              cq_max
+            </div>
+            <div>{{ recommendConfig.cq_max || '-' }}</div>
+          </div>
+          <div class="w-300px">
+            <div class="font-bold">
+              cq_min
+            </div>
+            <div>{{ recommendConfig.cq_min || '-' }}</div>
+          </div>
+          <div class="w-300px">
+            <div class="font-bold">
+              Step
+            </div>
+            <div>{{ recommendConfig.step || '-' }}</div>
+          </div>
+        </div>
+      </div>
+    </el-card>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="handleApply">
+          {{ $t('base_library.apply_config') }}
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>

package/src/components/Server/MachineConfig.vue

@@ -0,0 +1,333 @@
+<script lang="ts" setup>
+import type { FormInstance } from 'element-plus'
+import { useFindOneMachine, useQueryMachineClusterFindAll, useQueryMachineFindAll } from './useQueryMachine'
+
+const props = defineProps<{
+  prop: string
+  configType?: string
+  setupType?: string
+  type: string
+  idsAlreadyExist: string[]
+}>()
+const emit = defineEmits(['changeType', 'resetServer'])
+const API_PLAYOUT_API_DOCS_JSON = '/api/playout/api-docs-json'
+const { schemaItem } = useAsyncSchema(API_PLAYOUT_API_DOCS_JSON, 'InputMachineConfig')
+
+function getProp(path: string) {
+  // return () => props.prop ? `${props.prop}.${path}` : path
+  return path
+}
+const idsAlreadyExist = computed(() => {
+  return props.idsAlreadyExist as string[]
+})
+const form = inject('formValue')
+
+const [machineConfigValue] = useElField<string>(getProp(props.prop), [])
+const { t } = useI18n()
+
+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 formRef = inject('formRef') as Ref<FormInstance>
+
+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: machineConfigValue.value?.machineId }] })
+
+  return { ...paramsMachine, q }
+})
+
+function filterMachinesByIds(ids, lists) {
+  return lists?.filter(machine => !ids.includes(machine.id))
+}
+const { data: listMachine, isFetching: isFetchingListMachine } = useQueryMachineFindAll(qSigmaMachine, computed(() => machineConfigValue.value?.machineType === 'SIGMA_MACHINE'))
+const { data: listClusters, isFetching: isFetchingListClusters } = useQueryMachineClusterFindAll(paramsMachine, computed(() => machineConfigValue.value?.machineType === 'SIGMA_MACHINE_CLUSTER'))
+
+function filterTypePackage(_type: 'packager-live' | 'packager-catchup' | 'packager-startover', listPackage: PackagerToComponentCluster[]) {
+  const packager = listPackage.filter(item => item.machineType === _type)
+  if (packager)
+    return packager
+  return []
+}
+
+function handleValid(serverId) {
+  const server = listClusters.value?.data?.find(item => item.id === serverId)
+
+  nextTick(() => {
+    formRef.value?.validateField('machine.machineType')
+    formRef.value?.validateField('machine.machineId')
+  })
+  emit('resetServer', server, props.configType)
+}
+
+function remoteMethod(query: string) {
+  if (query)
+    paramsMachine.q.$and[0].name = { $regex: query, $options: 'i' }
+
+  else
+    paramsMachine.q.$and[0].name = undefined
+}
+
+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 serverModeOptions = [
+  {
+    label: 'MANUAL',
+    value: 'MANUAL',
+  },
+  {
+    label: 'AUTO',
+    value: 'AUTO',
+  },
+]
+
+const isDisabledNM = computed(() => {
+  return props.type === 'SDI' && machineConfigValue.value?.machineType === 'SIGMA_MACHINE_CLUSTER'
+})
+
+const primaryServerList = ref([])
+function extractPrimary(lists) {
+  return lists.map(item => item.primary)
+}
+function getPrimaryServer(cluster) {
+  if (cluster.mode === '1+1') {
+    primaryServerList.value = extractPrimary(cluster?.onePlusOneMachines)
+  }
+  else if (cluster.mode === 'N+M') {
+    primaryServerList.value = cluster?.nPlusMMachines?.filter(item => item.role === 'primary')
+  }
+  else {
+    primaryServerList.value = cluster?.machines
+  }
+
+  primaryServerList.value = filterMachinesByIds(idsAlreadyExist.value, primaryServerList.value)
+}
+
+const [typeValue] = useElField<string>(getProp('type'), [])
+const { sigmaClusterDetail } = useFindOneMachine(form)
+
+watchEffect(() => {
+  if (sigmaClusterDetail.value && machineConfigValue.value.machineId) {
+    getPrimaryServer(sigmaClusterDetail.value)
+  }
+})
+
+watch(() => machineConfigValue.value.machineId, () => {
+  if (!machineConfigValue.value.machineId) {
+    machineConfigValue.value.machineId = undefined
+    machineConfigValue.value.specMachineId = undefined
+    primaryServerList.value = []
+  }
+}, { deep: true })
+
+const isDisabledMode = computed(() => {
+  return typeValue.value === 'SDI' && machineConfigValue.value.machineType === 'SIGMA_MACHINE_CLUSTER'
+})
+function checkSelectedMachine() {
+  if (!machineConfigValue.value.machineId) {
+    ElMessage({
+      message: t('SSConfig.message.selectMachineFirst'),
+      type: 'warning',
+    })
+  }
+}
+</script>
+
+<template>
+  <div class="flex gap-2 pl-10">
+    <el-form-item class="flex-1" :label="t('SSConfig.label.machineType')" :prop="configType === 'secondMachineConfig' ? 'secondMachineConfig.machineType' : 'machineConfig.machineType'">
+      <el-select
+        v-model="machineConfigValue.machineType"
+        class="w-full"
+        :placeholder="t('SSConfig.placeholder.select')"
+        :disabled="setupType === 'clusteredPair'"
+        @change="emit('changeType', configType)"
+      >
+        <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" :prop="configType === 'secondMachineConfig' ? 'secondMachineConfig.machineId' : 'machineConfig.machineId'" :label="machineConfigValue?.machineType !== 'SIGMA_MACHINE' ? t('SSConfig.label.cluster') : t('Input.label.machine')">
+      <div class="w-full flex gap-1">
+        <el-select
+          v-model="machineConfigValue.machineId"
+          :placeholder="t('SSConfig.placeholder.select')"
+          class="w-full"
+          filterable
+          remote
+          reserve-keyword
+          remote-show-suffix
+          :remote-method="remoteMethod"
+          :loading="isFetchingListMachine || isFetchingListClusters"
+          :clearable="true"
+          @change="handleValid"
+        >
+          <template v-if="machineConfigValue.machineType === 'SIGMA_MACHINE'">
+            <el-option
+              v-for="item in filterMachinesByIds(idsAlreadyExist, listMachine?.data) || []"
+              :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="machineConfigValue.machineType === 'SIGMA_MACHINE_CLUSTER'">
+            <el-option
+              v-for="item in filterMachinesByIds(idsAlreadyExist, listClusters?.data) || []"
+              :key="item.id"
+              class="w-full h-auto! not-last:border-b"
+              :label="item.name"
+              :value="item.id!"
+              :disabled="(item.isDeleted || item.status === 'red') || (isDisabledNM && item?.mode === 'N+M') || (setupType === 'clusteredPair' && 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>
+  </div>
+  <div class="flex gap-2">
+    <el-form-item v-if="machineConfigValue.machineType === 'SIGMA_MACHINE_CLUSTER'" prop="machineConfig.mode" class="flex-1 pl-10">
+      <template #label>
+        <SSInformationLabel :label="t('SSConfig.label.mode')" :information="schemaItem?.properties?.mode?.description" />
+      </template>
+      <el-select
+        v-model="machineConfigValue.mode"
+        :placeholder="t('SSConfig.placeholder.select')"
+        class="w-full"
+        :disabled="isDisabledMode"
+        @change="machineConfigValue.specMachineId = undefined"
+      >
+        <el-option v-for="item in serverModeOptions" :key="item.value" :label="item.label" :value="item.value" />
+      </el-select>
+    </el-form-item>
+    <el-form-item v-if="machineConfigValue.mode === 'MANUAL' && machineConfigValue.machineType === 'SIGMA_MACHINE_CLUSTER'" prop="machineConfig.specMachineId" class="flex-1">
+      <template #label>
+        <SSInformationLabel :label="t('SSConfig.label.primaryServer')" :information="schemaItem?.properties?.specMachineId?.description" />
+      </template>
+      <el-select
+        v-model="machineConfigValue.specMachineId"
+        :placeholder="t('SSConfig.placeholder.select')"
+        class="w-full"
+        @focus="checkSelectedMachine"
+      >
+        <el-option
+          v-for="item in primaryServerList"
+          :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>
+    <div v-else class="flex-1" />
+  </div>
+</template>
+
+<style scoped>
+.slide-fade-enter-active {
+  transition: all 0.3s ease-out;
+}
+
+.slide-fade-leave-active {
+  transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  transform: translateX(20px);
+  opacity: 0;
+}
+</style>