@sigmaott/base-next 1.4.0 → 1.4.2

package/src/components/Channel/ConfigTranscoder.vue

@@ -1,353 +1,353 @@
-<script setup lang="ts">
-import draggable from 'vuedraggable'
-import { QueryKeys } from '@/enums'
-import { inputsApi, packageInputsApi } from '@/api'
-import type { MachineClusterStatusEnum, TranscoderStatusEnum } from '@/api-client-transcoders'
-import { useQueryComponentMachineClusterFindAll, useQueryMachineClusterFindAll, useQueryMachineFindAll } from '@/pages/input/components/useQueryMachine'
-import MapListMachine from '@/pages/input/components/others/MapListMachine.vue'
-import type { MachineConfigDto, MachineConfigDtoModeEnum, PackageInput, TranscodeInput } from '~/api-client'
-
-const props = withDefaults(defineProps<{
-  modelValue: MachineConfigDto
-  type: 'package' | 'transcode'
-  inputType?: 'ASSET' | 'INPUT'
-  inputId?: string
-}>(), {
-  modelValue: () => ({
-    mode: 'AUTO',
-    manualStrategyDeploy: 'LOWEST_RESOURCE',
-    renewInRestart: false,
-    machineType: 'SIGMA_MACHINE',
-    machineId: '',
-  }),
-  type: 'transcode',
-  inputType: 'INPUT',
-  inputId: '',
-})
-const emit = defineEmits(['change'])
-
-const form = useVModel(props, 'modelValue', emit)
-const { schemaObj } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'MachineConfigDto')
-
-const { t } = useI18n()
-
-const statusMachine: Record<TranscoderStatusEnum, 'danger' | 'success' | 'info' | ''> = {
-  paused: '',
-  dead: 'danger',
-  running: 'success',
-  freezed: 'info',
-}
-
-const inputId = computed(() => {
-  return props.inputId
-})
-
-const params = reactive({
-  page: 1,
-  perPage: 100,
-  q: {
-    $and: [
-      { $or: [{}] },
-    ],
-  },
-})
-
-const { data: dataTranscodeInput, refetch: refetchTranscodeInput } = useQuery(
-  [QueryKeys.INPUT, inputId],
-  async () => {
-    return (await inputsApi.transcodeInputControllerGetInput({ inputId: inputId.value })).data
-  },
-  {
-    enabled: computed(() => props.type === 'transcode' && !!props.inputId),
-    refetchOnWindowFocus: false,
-    onSuccess: (data) => {
-      params.q.$or = [{ id: { $eq: data.machineConfig.machineId } }]
-      replaceDataByInput(data)
-    },
-  },
-)
-
-const { data: dataPackageInput, refetch: refetchPackageInput } = useQuery(
-  [QueryKeys.INPUT, inputId],
-  async () => {
-    return (await packageInputsApi.packageInputControllerGetInput({ inputId: inputId.value })).data
-  },
-  {
-    enabled: computed(() => props.type === 'package' && !!props.inputId),
-    refetchOnWindowFocus: false,
-    onSuccess: (data) => {
-      params.q.$or = [{ id: { $eq: data.machineConfig.machineId } }]
-      replaceDataByInput(data)
-    },
-  },
-)
-
-onActivated(() => {
-  if (props.type === 'package')
-    refetchPackageInput()
-  else
-    refetchTranscodeInput()
-})
-
-const { data: listMachine } = useQueryMachineFindAll({ ...params, q: { $and: [...params.q.$and, { $or: [{ status: 'running' }, { status: 'paused' }] }] } }, computed(() => form.value.machineType === 'SIGMA_MACHINE'))
-
-const { data: listClusters } = useQueryMachineClusterFindAll(params, computed(() => form.value.machineType === 'SIGMA_MACHINE_CLUSTER'))
-
-const { data: listComponent } = useQueryComponentMachineClusterFindAll(params, computed(() => form.value.machineType === 'SIGMA_COMPONENT_CLUSTER'))
-
-const machinesSelected = computed(() => {
-  if (form.value.machineId && form.value.machineType === 'SIGMA_MACHINE' && listMachine.value?.data) {
-    const _machine = listMachine.value?.data?.find(item => item.id === form.value.machineId)
-    return _machine ? [_machine] : []
-  }
-  else if (form.value.machineId && form.value.machineType === 'SIGMA_MACHINE_CLUSTER') {
-    return listClusters.value?.data?.find(item => item.id === form.value.machineId)?.machines?.map(item => item.machine) || []
-  }
-  else if (form.value.machineId && form.value.machineType === 'SIGMA_COMPONENT_CLUSTER') {
-    return listComponent.value?.data?.find(item => item.id === form.value.machineId)?.transcoder?.machines?.map(item => item.machine) || []
-  }
-  else { return [] }
-})
-
-watch(() => form.value, (val) => {
-  emit('change', val)
-}, { deep: true })
-
-const disabledField = computed(() => {
-  const baseOnMachine = props.type === 'package' ? dataPackageInput.value?.baseOnMachine : dataTranscodeInput.value?.baseOnMachine
-  return props.inputType === 'INPUT' && baseOnMachine
-})
-const MAP_STATUS_CLUSTER: Record<MachineClusterStatusEnum, 'success' | 'info' | 'warning' | 'danger'> = {
-  green: 'success',
-  yellow: 'warning',
-  red: 'danger',
-}
-
-function filterListMachineByType(_type: string, val: any[]) {
-  return val.filter(el => el?.machineType === _type)
-}
-
-const [modeValue, modeAttrs] = useElField<MachineConfigDtoModeEnum>('channelConfig.machineConfig.mode', [])
-const [machineTypeValue, machineTypeAttrs] = useElField<string>('channelConfig.machineConfig.machineType', [])
-const [machineIdValue, machineIdAttrs] = useElField<string>('channelConfig.machineConfig.machineId', [
-  {
-    required: true,
-    trigger: ['blur', 'change', 'focus'],
-    message: t('EventChannel.form.validate.selectMachine'),
-  },
-  {
-    validator: (rule, value, callback) => {
-      if (!form.value.machineId)
-        callback(new Error(t('Input.message.selectMachine')))
-      else callback()
-    },
-    trigger: ['blur', 'change', 'focus'],
-  },
-])
-
-const [renewInRestartValue, renewInRestartAttrs] = useElField<string>('channelConfig.machineConfig.renewInRestart', [])
-const [manualStrategyDeployValue, manualStrategyDeployAttrs] = useElField<string>('channelConfig.machineConfig.manualStrategyDeploy', [])
-
-function replaceDataByInput(params: PackageInput | TranscodeInput) {
-  if (params.baseOnMachine) {
-    modeValue.value = 'MANUAL'
-    machineTypeValue.value = params.machineConfig.machineType
-    machineIdValue.value = params.machineConfig.machineId
-  }
-}
-</script>
-
-<template>
-  <div class="flex flex-wrap gap-48px">
-    <div class="flex flex-wrap gap-48px" :class="form.mode === 'MANUAL' ? 'flex-1' : ''">
-      <el-form-item class="flex-1" label="Mode" v-bind="modeAttrs">
-        <template #label>
-          <SSInformationLabel :label="t('channel.mode')" :info="schemaObj.mode" />
-        </template>
-        <div>
-          <el-select v-model="modeValue" :disabled="disabledField" placeholder="">
-            <el-option v-for="item in ['AUTO', 'MANUAL']" :key="item" :label="item" :value="item" />
-          </el-select>
-        </div>
-      </el-form-item>
-
-      <el-form-item
-        v-if="form.mode === 'MANUAL'" class="flex-1" :label="$t('channel.machineType')"
-        v-bind="machineTypeAttrs"
-      >
-        <template #label>
-          <SSInformationLabel :label="t('channel.machineType')" :info="schemaObj.machineType" />
-        </template>
-        <el-select
-          v-model="machineTypeValue" class="min-w-275px" :disabled="disabledField"
-          @change="machineIdValue = ''"
-        >
-          <el-option
-            v-for="item in ['SIGMA_MACHINE', 'SIGMA_MACHINE_CLUSTER', 'SIGMA_COMPONENT_CLUSTER']" :key="item"
-            :label="item" :value="item"
-          />
-        </el-select>
-      </el-form-item>
-    </div>
-    <div class="flex flex-wrap gap-48px" :class="form.mode === 'MANUAL' ? 'flex-1' : ''">
-      <el-form-item class="flex-1" label="Renew Machine" v-bind="renewInRestartAttrs">
-        <template #label>
-          <SSInformationLabel :label="t('channel.renewMachine')" :info="schemaObj.renewInRestart" />
-        </template>
-        <el-switch v-model="renewInRestartValue" />
-      </el-form-item>
-
-      <el-form-item class="min-w-250px flex-1" v-bind="manualStrategyDeployAttrs">
-        <template #label>
-          <SSInformationLabel :label="t('channel.strategyDeploy')" :info="schemaObj.manualStrategyDeploy" />
-        </template>
-        <el-select v-model="manualStrategyDeployValue" placeholder="">
-          <el-option v-for="item in ['LOWEST_RESOURCE', 'SEQUENCE']" :key="item" :label="item" :value="item" />
-        </el-select>
-      </el-form-item>
-    </div>
-  </div>
-  <div>
-    <el-row v-if="form.mode === 'MANUAL'" :gutter="20">
-      <el-col :span="12">
-        <el-form-item :label="t('Input.label.machine')" v-bind="machineIdAttrs">
-          <el-select
-            v-model="machineIdValue" class="w-full" size="large" :disabled="disabledField"
-            :placeholder="t('channel.select')"
-          >
-            <template v-if="machineTypeValue === 'SIGMA_MACHINE'">
-              <el-option
-                v-for="item in listMachine?.data || []" :key="item.id" class="w-full border-b !h-auto"
-                :label="`${item.name}`" :value="item.id" :disabled="item.isDeleted"
-              >
-                <div>
-                  <div class="font-semibold">
-                    <div v-if="!item?.isDeleted">
-                      {{ item?.name }}
-                    </div>
-                    <div v-else>
-                      ID: {{ item?.id }}
-                    </div>
-                  </div>
-                  <div v-if="item.isDeleted" class="text-red-500">
-                    {{ t('Input.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="machineTypeValue === 'SIGMA_COMPONENT_CLUSTER'">
-              <el-option
-                v-for="item in listComponent?.data || []" :key="item.id" class="w-full border-b !h-auto"
-                :label="item.name" :value="item.id!" :disabled="item.isDeleted"
-              >
-                <div class="font-semibold">
-                  {{ item.name }}
-                </div>
-                <div class="max-w-740px flex justify-between gap-2">
-                  <div>Transcoder Live ({{ item.transcoder.machines?.length }})</div>
-                  <div>
-                    Packager Live ({{ filterListMachineByType('packager-live', item.packager.machines)?.length }})
-                  </div>
-                  <div>
-                    Packager Catchup ({{ filterListMachineByType('packager-catchup', item.packager.machines)?.length
-                    }})
-                  </div>
-                  <div>
-                    Packager Start Over ({{ filterListMachineByType('packager-startover',
-                                                                    item.packager.machines)?.length }})
-                  </div>
-                </div>
-              </el-option>
-            </template>
-            <template v-else>
-              <el-option
-                v-for="item in listClusters?.data || []" :key="item.id" class="w-full border-b !h-auto"
-                :label="item.name" :value="item.id!" :disabled="item.isDeleted"
-              >
-                <div>
-                  <div class="font-semibold">
-                    <div v-if="!item?.isDeleted">
-                      {{ item?.name }}
-                    </div>
-                    <div v-else>
-                      ID: {{ item?.id }}
-                    </div>
-                  </div>
-                  <div v-if="item.isDeleted" class="text-red-500">
-                    {{ t('Input.form.validate.existMachine') }}
-                  </div>
-                  <div v-else class="flex items-center justify-between">
-                    <div>Machines({{ item.machines.length }})</div>
-                    <el-tag :type="MAP_STATUS_CLUSTER[item.status]">
-                      {{ item.status.toUpperCase() }}
-                    </el-tag>
-                  </div>
-                </div>
-              </el-option>
-            </template>
-          </el-select>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="Selected Machines List">
-          <template #label>
-            <div class="flex items-center gap-1">
-              <label class="ml-4">{{ t('EventChannel.form.label.selectMachine') }}</label>
-              <el-tooltip effect="dark" :content="t('channel.selectMachine')" placement="top">
-                <div class="i-ep:info-filled text-blue-500" />
-              </el-tooltip>
-            </div>
-          </template>
-          <draggable
-            v-if="machinesSelected.length > 0 && machineTypeValue !== 'SIGMA_COMPONENT_CLUSTER'"
-            v-model="machinesSelected" item-key="name" class="list-group ml-4 w-full" v-bind="{
-              animation: 200,
-              group: 'description',
-              disabled: true,
-              ghostClass: 'ghost',
-            }"
-          >
-            <template #item="{ element }">
-              <div class="w-300px cursor-move border rounded px-2 py-1">
-                <div>
-                  <div>
-                    <div class="flex justify-between font-semibold">
-                      <div v-if="!element?.isDeleted">
-                        {{ element?.machine }}
-                      </div>
-                      <div v-else>
-                        ID: {{ element?.id }}
-                      </div>
-                    </div>
-                    <div v-if="element.isDeleted" class="text-red-500">
-                      {{ t('Input.form.validate.existMachine') }}
-                    </div>
-                    <div v-else class="flex items-center justify-between gap-2">
-                      <div> Usage({{ element.percent }}%) </div>
-                      <div> Memmory({{ Number(Number(element.ramUsage).toFixed(2)) + 0 }}%)</div>
-                      <el-tag :type="statusMachine[element.status]">
-                        {{ element.status.toUpperCase() }}
-                      </el-tag>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </template>
-          </draggable>
-          <MapListMachine
-            v-else-if="machinesSelected.length > 0 && machineTypeValue === 'SIGMA_COMPONENT_CLUSTER'"
-            :machine-id="form?.machineId" :create="true"
-          />
-          <BaseEmptyData v-else :empty-txt="t('EventChannel.message.noData')" />
-        </el-form-item>
-      </el-col>
-    </el-row>
-  </div>
-</template>
+<script setup lang="ts">
+import draggable from 'vuedraggable'
+import { QueryKeys } from '@/enums'
+import { inputsApi, packageInputsApi } from '@/api'
+import type { MachineClusterStatusEnum, TranscoderStatusEnum } from '@/api-client-transcoders'
+import { useQueryComponentMachineClusterFindAll, useQueryMachineClusterFindAll, useQueryMachineFindAll } from '@/pages/input/components/useQueryMachine'
+import MapListMachine from '@/pages/input/components/others/MapListMachine.vue'
+import type { MachineConfigDto, MachineConfigDtoModeEnum, PackageInput, TranscodeInput } from '~/api-client'
+
+const props = withDefaults(defineProps<{
+  modelValue: MachineConfigDto
+  type: 'package' | 'transcode'
+  inputType?: 'ASSET' | 'INPUT'
+  inputId?: string
+}>(), {
+  modelValue: () => ({
+    mode: 'AUTO',
+    manualStrategyDeploy: 'LOWEST_RESOURCE',
+    renewInRestart: false,
+    machineType: 'SIGMA_MACHINE',
+    machineId: '',
+  }),
+  type: 'transcode',
+  inputType: 'INPUT',
+  inputId: '',
+})
+const emit = defineEmits(['change'])
+
+const form = useVModel(props, 'modelValue', emit)
+const { schemaObj } = useAsyncSchema(API_TRANSCODE_API_DOCS_JSON, 'MachineConfigDto')
+
+const { t } = useI18n()
+
+const statusMachine: Record<TranscoderStatusEnum, 'danger' | 'success' | 'info' | ''> = {
+  paused: '',
+  dead: 'danger',
+  running: 'success',
+  freezed: 'info',
+}
+
+const inputId = computed(() => {
+  return props.inputId
+})
+
+const params = reactive({
+  page: 1,
+  perPage: 100,
+  q: {
+    $and: [
+      { $or: [{}] },
+    ],
+  },
+})
+
+const { data: dataTranscodeInput, refetch: refetchTranscodeInput } = useQuery(
+  [QueryKeys.INPUT, inputId],
+  async () => {
+    return (await inputsApi.transcodeInputControllerGetInput({ inputId: inputId.value })).data
+  },
+  {
+    enabled: computed(() => props.type === 'transcode' && !!props.inputId),
+    refetchOnWindowFocus: false,
+    onSuccess: (data) => {
+      params.q.$or = [{ id: { $eq: data.machineConfig.machineId } }]
+      replaceDataByInput(data)
+    },
+  },
+)
+
+const { data: dataPackageInput, refetch: refetchPackageInput } = useQuery(
+  [QueryKeys.INPUT, inputId],
+  async () => {
+    return (await packageInputsApi.packageInputControllerGetInput({ inputId: inputId.value })).data
+  },
+  {
+    enabled: computed(() => props.type === 'package' && !!props.inputId),
+    refetchOnWindowFocus: false,
+    onSuccess: (data) => {
+      params.q.$or = [{ id: { $eq: data.machineConfig.machineId } }]
+      replaceDataByInput(data)
+    },
+  },
+)
+
+onActivated(() => {
+  if (props.type === 'package')
+    refetchPackageInput()
+  else
+    refetchTranscodeInput()
+})
+
+const { data: listMachine } = useQueryMachineFindAll({ ...params, q: { $and: [...params.q.$and, { $or: [{ status: 'running' }, { status: 'paused' }] }] } }, computed(() => form.value.machineType === 'SIGMA_MACHINE'))
+
+const { data: listClusters } = useQueryMachineClusterFindAll(params, computed(() => form.value.machineType === 'SIGMA_MACHINE_CLUSTER'))
+
+const { data: listComponent } = useQueryComponentMachineClusterFindAll(params, computed(() => form.value.machineType === 'SIGMA_COMPONENT_CLUSTER'))
+
+const machinesSelected = computed(() => {
+  if (form.value.machineId && form.value.machineType === 'SIGMA_MACHINE' && listMachine.value?.data) {
+    const _machine = listMachine.value?.data?.find(item => item.id === form.value.machineId)
+    return _machine ? [_machine] : []
+  }
+  else if (form.value.machineId && form.value.machineType === 'SIGMA_MACHINE_CLUSTER') {
+    return listClusters.value?.data?.find(item => item.id === form.value.machineId)?.machines?.map(item => item.machine) || []
+  }
+  else if (form.value.machineId && form.value.machineType === 'SIGMA_COMPONENT_CLUSTER') {
+    return listComponent.value?.data?.find(item => item.id === form.value.machineId)?.transcoder?.machines?.map(item => item.machine) || []
+  }
+  else { return [] }
+})
+
+watch(() => form.value, (val) => {
+  emit('change', val)
+}, { deep: true })
+
+const disabledField = computed(() => {
+  const baseOnMachine = props.type === 'package' ? dataPackageInput.value?.baseOnMachine : dataTranscodeInput.value?.baseOnMachine
+  return props.inputType === 'INPUT' && baseOnMachine
+})
+const MAP_STATUS_CLUSTER: Record<MachineClusterStatusEnum, 'success' | 'info' | 'warning' | 'danger'> = {
+  green: 'success',
+  yellow: 'warning',
+  red: 'danger',
+}
+
+function filterListMachineByType(_type: string, val: any[]) {
+  return val.filter(el => el?.machineType === _type)
+}
+
+const [modeValue, modeAttrs] = useElField<MachineConfigDtoModeEnum>('channelConfig.machineConfig.mode', [])
+const [machineTypeValue, machineTypeAttrs] = useElField<string>('channelConfig.machineConfig.machineType', [])
+const [machineIdValue, machineIdAttrs] = useElField<string>('channelConfig.machineConfig.machineId', [
+  {
+    required: true,
+    trigger: ['blur', 'change', 'focus'],
+    message: t('EventChannel.form.validate.selectMachine'),
+  },
+  {
+    validator: (rule, value, callback) => {
+      if (!form.value.machineId)
+        callback(new Error(t('Input.message.selectMachine')))
+      else callback()
+    },
+    trigger: ['blur', 'change', 'focus'],
+  },
+])
+
+const [renewInRestartValue, renewInRestartAttrs] = useElField<string>('channelConfig.machineConfig.renewInRestart', [])
+const [manualStrategyDeployValue, manualStrategyDeployAttrs] = useElField<string>('channelConfig.machineConfig.manualStrategyDeploy', [])
+
+function replaceDataByInput(params: PackageInput | TranscodeInput) {
+  if (params.baseOnMachine) {
+    modeValue.value = 'MANUAL'
+    machineTypeValue.value = params.machineConfig.machineType
+    machineIdValue.value = params.machineConfig.machineId
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-48px">
+    <div class="flex flex-wrap gap-48px" :class="form.mode === 'MANUAL' ? 'flex-1' : ''">
+      <el-form-item class="flex-1" label="Mode" v-bind="modeAttrs">
+        <template #label>
+          <SSInformationLabel :label="t('channel.mode')" :info="schemaObj.mode" />
+        </template>
+        <div>
+          <el-select v-model="modeValue" :disabled="disabledField" placeholder="">
+            <el-option v-for="item in ['AUTO', 'MANUAL']" :key="item" :label="item" :value="item" />
+          </el-select>
+        </div>
+      </el-form-item>
+
+      <el-form-item
+        v-if="form.mode === 'MANUAL'" class="flex-1" :label="$t('channel.machineType')"
+        v-bind="machineTypeAttrs"
+      >
+        <template #label>
+          <SSInformationLabel :label="t('channel.machineType')" :info="schemaObj.machineType" />
+        </template>
+        <el-select
+          v-model="machineTypeValue" class="min-w-275px" :disabled="disabledField"
+          @change="machineIdValue = ''"
+        >
+          <el-option
+            v-for="item in ['SIGMA_MACHINE', 'SIGMA_MACHINE_CLUSTER', 'SIGMA_COMPONENT_CLUSTER']" :key="item"
+            :label="item" :value="item"
+          />
+        </el-select>
+      </el-form-item>
+    </div>
+    <div class="flex flex-wrap gap-48px" :class="form.mode === 'MANUAL' ? 'flex-1' : ''">
+      <el-form-item class="flex-1" label="Renew Machine" v-bind="renewInRestartAttrs">
+        <template #label>
+          <SSInformationLabel :label="t('channel.renewMachine')" :info="schemaObj.renewInRestart" />
+        </template>
+        <el-switch v-model="renewInRestartValue" />
+      </el-form-item>
+
+      <el-form-item class="min-w-250px flex-1" v-bind="manualStrategyDeployAttrs">
+        <template #label>
+          <SSInformationLabel :label="t('channel.strategyDeploy')" :info="schemaObj.manualStrategyDeploy" />
+        </template>
+        <el-select v-model="manualStrategyDeployValue" placeholder="">
+          <el-option v-for="item in ['LOWEST_RESOURCE', 'SEQUENCE']" :key="item" :label="item" :value="item" />
+        </el-select>
+      </el-form-item>
+    </div>
+  </div>
+  <div>
+    <el-row v-if="form.mode === 'MANUAL'" :gutter="20">
+      <el-col :span="12">
+        <el-form-item :label="t('Input.label.machine')" v-bind="machineIdAttrs">
+          <el-select
+            v-model="machineIdValue" class="w-full" size="large" :disabled="disabledField"
+            :placeholder="t('channel.select')"
+          >
+            <template v-if="machineTypeValue === 'SIGMA_MACHINE'">
+              <el-option
+                v-for="item in listMachine?.data || []" :key="item.id" class="w-full border-b !h-auto"
+                :label="`${item.name}`" :value="item.id" :disabled="item.isDeleted"
+              >
+                <div>
+                  <div class="font-semibold">
+                    <div v-if="!item?.isDeleted">
+                      {{ item?.name }}
+                    </div>
+                    <div v-else>
+                      ID: {{ item?.id }}
+                    </div>
+                  </div>
+                  <div v-if="item.isDeleted" class="text-red-500">
+                    {{ t('Input.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="machineTypeValue === 'SIGMA_COMPONENT_CLUSTER'">
+              <el-option
+                v-for="item in listComponent?.data || []" :key="item.id" class="w-full border-b !h-auto"
+                :label="item.name" :value="item.id!" :disabled="item.isDeleted"
+              >
+                <div class="font-semibold">
+                  {{ item.name }}
+                </div>
+                <div class="max-w-740px flex justify-between gap-2">
+                  <div>Transcoder Live ({{ item.transcoder.machines?.length }})</div>
+                  <div>
+                    Packager Live ({{ filterListMachineByType('packager-live', item.packager.machines)?.length }})
+                  </div>
+                  <div>
+                    Packager Catchup ({{ filterListMachineByType('packager-catchup', item.packager.machines)?.length
+                    }})
+                  </div>
+                  <div>
+                    Packager Start Over ({{ filterListMachineByType('packager-startover',
+                                                                    item.packager.machines)?.length }})
+                  </div>
+                </div>
+              </el-option>
+            </template>
+            <template v-else>
+              <el-option
+                v-for="item in listClusters?.data || []" :key="item.id" class="w-full border-b !h-auto"
+                :label="item.name" :value="item.id!" :disabled="item.isDeleted"
+              >
+                <div>
+                  <div class="font-semibold">
+                    <div v-if="!item?.isDeleted">
+                      {{ item?.name }}
+                    </div>
+                    <div v-else>
+                      ID: {{ item?.id }}
+                    </div>
+                  </div>
+                  <div v-if="item.isDeleted" class="text-red-500">
+                    {{ t('Input.form.validate.existMachine') }}
+                  </div>
+                  <div v-else class="flex items-center justify-between">
+                    <div>Machines({{ item.machines.length }})</div>
+                    <el-tag :type="MAP_STATUS_CLUSTER[item.status]">
+                      {{ item.status.toUpperCase() }}
+                    </el-tag>
+                  </div>
+                </div>
+              </el-option>
+            </template>
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="Selected Machines List">
+          <template #label>
+            <div class="flex items-center gap-1">
+              <label class="ml-4">{{ t('EventChannel.form.label.selectMachine') }}</label>
+              <el-tooltip effect="dark" :content="t('channel.selectMachine')" placement="top">
+                <div class="i-ep:info-filled text-blue-500" />
+              </el-tooltip>
+            </div>
+          </template>
+          <draggable
+            v-if="machinesSelected.length > 0 && machineTypeValue !== 'SIGMA_COMPONENT_CLUSTER'"
+            v-model="machinesSelected" item-key="name" class="list-group ml-4 w-full" v-bind="{
+              animation: 200,
+              group: 'description',
+              disabled: true,
+              ghostClass: 'ghost',
+            }"
+          >
+            <template #item="{ element }">
+              <div class="w-300px cursor-move border rounded px-2 py-1">
+                <div>
+                  <div>
+                    <div class="flex justify-between font-semibold">
+                      <div v-if="!element?.isDeleted">
+                        {{ element?.machine }}
+                      </div>
+                      <div v-else>
+                        ID: {{ element?.id }}
+                      </div>
+                    </div>
+                    <div v-if="element.isDeleted" class="text-red-500">
+                      {{ t('Input.form.validate.existMachine') }}
+                    </div>
+                    <div v-else class="flex items-center justify-between gap-2">
+                      <div> Usage({{ element.percent }}%) </div>
+                      <div> Memmory({{ Number(Number(element.ramUsage).toFixed(2)) + 0 }}%)</div>
+                      <el-tag :type="statusMachine[element.status]">
+                        {{ element.status.toUpperCase() }}
+                      </el-tag>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </draggable>
+          <MapListMachine
+            v-else-if="machinesSelected.length > 0 && machineTypeValue === 'SIGMA_COMPONENT_CLUSTER'"
+            :machine-id="form?.machineId" :create="true"
+          />
+          <BaseEmptyData v-else :empty-txt="t('EventChannel.message.noData')" />
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </div>
+</template>