@sigmaott/base-next 1.0.6

package/src/components/Server/useQueryMachine.ts

@@ -0,0 +1,380 @@
+import type { MaybeRef } from '@vueuse/shared'
+import { computed } from 'vue'
+import { QueryKeys } from '@/enums'
+
+export function useQueryMachineFindAll(params: MaybeRef<Record<string, any>>, enabled: MaybeRef<boolean>) {
+  return useQuery(
+    [QueryKeys.SIGMA_MACHINE, params],
+    async () => await $machineApi('/api/machine/sigma-machines', {
+      method: 'GET',
+      query: params.value,
+      headers: {
+        noNotify: 'true',
+      },
+    }),
+    {
+      enabled,
+      refetchOnWindowFocus: false,
+    },
+  )
+}
+
+export function useQueryMachineClusterFindAll(params: MaybeRef<Record<string, any>>, enabled: MaybeRef<boolean>) {
+  return useQuery(
+    [QueryKeys.SIGMA_MACHINE_CLUSTER, params],
+    async () => await $machineApi('/api/machine/sigma-clusters', {
+      method: 'GET',
+      query: params.value,
+      headers: {
+        noNotify: 'true',
+      },
+    }),
+    {
+      enabled,
+      refetchOnWindowFocus: false,
+    },
+  )
+}
+
+export function useQueryComponentClusterFindAll(params: Record<string, any>, enabled: MaybeRef<boolean>) {
+  return useQuery(
+    [QueryKeys.COMPONENT_MACHINE_CLUSTER, params],
+    async () => await $machineApi('/api/machine/component-clusters', {
+      method: 'GET',
+      query: params.value,
+    }),
+    {
+      enabled,
+      refetchOnWindowFocus: false,
+    },
+  )
+}
+
+export function useFindAllMachineList(paramsMachine, form) {
+  const { data: listMachine } = useQueryMachineFindAll(
+    { ...paramsMachine, q: { $and: [...paramsMachine.q.$and, { $or: [{ status: 'running' }, { status: 'paused' }] }] } },
+    computed(() => form.value.machineConfig.machineType === 'SIGMA_MACHINE'),
+  )
+
+  const { data: listClusters } = useQueryMachineClusterFindAll(
+    paramsMachine,
+    computed(() => form.value.machineConfig.machineType === 'SIGMA_MACHINE_CLUSTER'),
+  )
+
+  // const { data: listComponent } = useQueryComponentMachineClusterFindAll(
+  //   paramsMachine,
+  //   computed(() => form.value.machineConfig.machineType === 'SIGMA_COMPONENT_CLUSTER'),
+  // )
+
+  const sigmaCluster = computed(() => {
+    return listClusters.value?.data?.find(item => item.id === form.value.machineConfig.machineId)
+  })
+  // const componentCluster = computed(() => {
+  //   return listComponent.value?.data?.find(item => item.id === form.value.machineConfig.machineId)
+  // })
+
+  return { listMachine, listClusters, sigmaCluster }
+}
+
+export function useFindOneMachine(sourceList, type?: string) {
+  const machineId = computed(() => {
+    return sourceList.value?.[type || 'machineConfig'].machineId as string
+  })
+  const { data: machineDetail, suspense: suspenseSigmaMachine } = useQuery(
+    [QueryKeys.SIGMA_MACHINE, machineId],
+    async () => await $machineApi('/api/machine/sigma-machines/{id}', {
+      method: 'GET',
+      pathParams: { id: machineId.value },
+      headers: {
+        noNotify: 'true',
+      },
+    }),
+    {
+      enabled: computed(() => !!machineId.value && sourceList.value?.[type || 'machineConfig']?.machineType === 'SIGMA_MACHINE'),
+      refetchOnWindowFocus: false,
+      retry: 0,
+      cacheTime: 10000,
+    },
+  )
+
+  const { data: sigmaClusterDetail, suspense: suspenseSigmaCluster } = useQuery(
+    [QueryKeys.SIGMA_MACHINE_CLUSTER, machineId],
+    async () => await $machineApi('/api/machine/sigma-clusters/{id}', {
+      method: 'GET',
+      pathParams: { id: machineId.value },
+      headers: {
+        noNotify: 'true',
+      },
+    }),
+    {
+      enabled: computed(() => !!machineId.value && sourceList.value?.[type || 'machineConfig']?.machineType === 'SIGMA_MACHINE_CLUSTER'),
+      refetchOnWindowFocus: false,
+      retry: 0,
+      cacheTime: 10000,
+    },
+  )
+
+  const { data: componentClusterDetail, suspense: suspenseComponentCluster } = useQuery(
+    [QueryKeys.COMPONENT_MACHINE_CLUSTER, machineId],
+    async () => await $machineApi('/api/machine/component-clusters/{id}', {
+      method: 'GET',
+      pathParams: { id: machineId.value },
+    }),
+    {
+      enabled: computed(() => !!machineId.value && sourceList.value?.type === 'SIGMA_COMPONENT_CLUSTER'),
+      refetchOnWindowFocus: false,
+      retry: 0,
+      cacheTime: 10000,
+    },
+  )
+
+  const listNetworks = computed(() => {
+    if (sourceList.value?.[type || 'machineConfig']?.machineType === 'SIGMA_MACHINE') {
+      return machineDetail.value?.network ?? []
+    }
+    else if (sourceList.value?.[type || 'machineConfig']?.machineType === 'SIGMA_MACHINE_CLUSTER') {
+      const networks = sigmaClusterDetail.value?.machines?.flatMap(machine => machine.machine.network)
+
+      const uniqueNetworks = networks?.filter((network, index, self) => {
+        return index === self?.findIndex(t => t.name === network.name && t.ip === network.ip)
+      })
+      return uniqueNetworks ?? []
+    }
+    // else {
+    //   const packagerNetworks = componentClusterDetail.value?.packager?.machines?.flatMap(machine => machine?.machine?.network) || []
+    //   const transcoderNetworks = componentClusterDetail.value?.transcoder?.machines?.flatMap(machine => machine?.machine?.network) || []
+
+    //   return [...packagerNetworks, ...transcoderNetworks]
+    // }
+  })
+  function getNetmask(name: string) {
+    const element = listNetworks.value?.filter(el => el?.name === name) ?? []
+    return element[0]?.netmask
+  }
+
+  const machineIds = computed(() => {
+    if (sourceList.value?.[type || 'machineConfig']?.machineType === 'SIGMA_MACHINE') {
+      return machineDetail.value?.id ? [machineDetail.value?.id] : []
+    }
+    else if (sourceList.value?.[type || 'machineConfig']?.machineType === 'SIGMA_MACHINE_CLUSTER') {
+      if (sigmaClusterDetail.value?.mode === 'N+M') {
+        return sigmaClusterDetail.value?.nPlusMMachines?.map(el => el.id) ?? []
+      }
+      else if (sigmaClusterDetail.value?.mode === '1+1') {
+        return sigmaClusterDetail.value?.onePlusOneMachines?.flatMap(server => [server.primary.id, server.backup.id])
+      }
+      else {
+        return sigmaClusterDetail.value?.machines?.map(el => el.id) ?? []
+      }
+    }
+    // else {
+    //   const packagerMachines = componentClusterDetail.value?.packager?.machines?.map(el => el.id) || []
+    //   const transcoderMachines = componentClusterDetail.value?.transcoder?.machines?.map(el => el.id) || []
+    //   return packagerMachines ? [...packagerMachines, ...transcoderMachines] : []
+    // }
+  })
+
+  async function suspenseAll() {
+    if (sourceList.value?.[type || 'machineConfig']?.machineType === 'SIGMA_MACHINE')
+      await suspenseSigmaMachine()
+
+    else if (sourceList.value?.[type || 'machineConfig']?.machineType === 'SIGMA_MACHINE_CLUSTER')
+      await suspenseSigmaCluster()
+
+    // else
+    //   await suspenseComponentCluster()
+  }
+
+  return { machineIds, machineDetail, getNetmask, sigmaClusterDetail, listNetworks, suspenseAll }
+}
+
+export function getListMachineByClusterId(clusterId, enabled) {
+  return useQuery(
+    [clusterId],
+    async () => await $machineApi('/api/machine/sigma-clusters/{id}', {
+      method: 'GET',
+      pathParams: { id: clusterId.value },
+      headers: {
+        noNotify: 'true',
+      },
+    }),
+    {
+      enabled,
+      refetchOnWindowFocus: false,
+      retry: 0,
+      cacheTime: 10000,
+    },
+  )
+}
+
+function getAllUniqueMachineIds(_machineIds, _secondMachineIds) {
+  const combinedIds = []
+  if (_machineIds)
+    combinedIds.push(..._machineIds)
+  if (_secondMachineIds)
+    combinedIds.push(..._secondMachineIds)
+  return [...new Set(combinedIds)]
+}
+
+function filterListNetwork(Arr: any) {
+  const newArr = []
+
+  Arr?.forEach((el) => {
+    newArr.push(el?.network)
+  })
+
+  const commonElements = newArr?.reduce((acc, arr) =>
+    acc.filter(element => arr?.some(e => e?.name === element?.name)), newArr[0])
+
+  const result = commonElements?.filter((element: { name: string, netmask: string }) =>
+    newArr?.every(arr => arr?.some((e: { name: string, netmask: string }) => e?.name === element?.name && e?.netmask === element?.netmask)))
+
+  return result ?? []
+}
+
+export function useGetInfoSourceInput(sourceList) {
+  const machineId = computed(() => {
+    return sourceList.value?.machineConfig?.machineId as string
+  })
+  const secondMachineId = computed(() => {
+    return sourceList.value?.secondMachineConfig?.machineId as string
+  })
+
+  const { data: machineDetail } = useQuery(
+    [QueryKeys.GET_MACHINE_INFO, machineId],
+    async () => await $machineApi('/api/machine/sigma-machines/{id}', {
+      method: 'GET',
+      pathParams: {
+        id: machineId.value,
+      },
+      headers: {
+        noNotify: 'true',
+      },
+    }),
+    {
+      enabled: computed(() => (!!machineId.value && sourceList.value?.machineConfig?.machineType === 'SIGMA_MACHINE')),
+      refetchOnWindowFocus: false,
+    },
+  )
+  const { data: secondMachineDetail } = useQuery(
+    [QueryKeys.GET_SECOND_MACHINE_INFO, secondMachineId],
+    async () => await $machineApi('/api/machine/sigma-machines/{id}', {
+      method: 'GET',
+      pathParams: {
+        id: secondMachineId.value,
+      },
+      headers: {
+        noNotify: 'true',
+      },
+    }),
+    {
+      enabled: computed(() => (!!secondMachineId.value && sourceList.value?.secondMachineConfig?.machineType === 'SIGMA_MACHINE')),
+      refetchOnWindowFocus: false,
+    },
+  )
+
+  const { data: sigmaClusterDetail } = useQuery(
+    [QueryKeys.GET_CLUSTER_INFO, machineId],
+    async () => await $machineApi('/api/machine/sigma-clusters/{id}', {
+      method: 'GET',
+      pathParams: {
+        id: machineId.value,
+      },
+      headers: {
+        noNotify: true,
+      },
+    }),
+    {
+      enabled: computed(() => (!!machineId.value && sourceList.value?.machineConfig?.machineType === 'SIGMA_MACHINE_CLUSTER')),
+      refetchOnWindowFocus: false,
+    },
+  )
+  const { data: secondSigmaClusterDetail } = useQuery(
+    [QueryKeys.GET_SECOND_CLUSTER_INFO, secondMachineId],
+    async () => await $machineApi('/api/machine/sigma-clusters/{id}', {
+      method: 'GET',
+      pathParams: {
+        id: secondMachineId.value,
+      },
+      headers: {
+        noNotify: 'true',
+      },
+    }),
+    {
+      enabled: computed(() => (!!secondMachineId.value && sourceList.value?.secondMachineConfig?.machineType === 'SIGMA_MACHINE_CLUSTER')),
+      refetchOnWindowFocus: false,
+    },
+  )
+
+  const machineIds = computed(() => {
+    if (sourceList.value?.machineConfig?.machineType === 'SIGMA_MACHINE') {
+      return machineDetail.value?.id ? [machineDetail.value?.id] : []
+    }
+    else if (sourceList.value?.machineConfig?.machineType === 'SIGMA_MACHINE_CLUSTER') {
+      if (sigmaClusterDetail.value?.mode === 'N+M') {
+        return sigmaClusterDetail.value?.nPlusMMachines?.map(el => el.id) || []
+      }
+      else if (sigmaClusterDetail.value?.mode === '1+1') {
+        return sigmaClusterDetail.value?.onePlusOneMachines?.flatMap(server => [server.primary.id, server.backup.id])
+      }
+      else {
+        return sigmaClusterDetail.value?.machines?.map(el => el.id) || []
+      }
+    }
+  })
+
+  const secondMachineIds = computed(() => {
+    if (sourceList.value?.secondMachineConfig?.machineType === 'SIGMA_MACHINE') {
+      return secondMachineDetail.value?.id ? [secondMachineDetail.value?.id] : []
+    }
+    else if (sourceList.value?.secondMachineConfig?.machineType === 'SIGMA_MACHINE_CLUSTER') {
+      if (secondSigmaClusterDetail.value?.mode === 'N+M') {
+        return secondSigmaClusterDetail.value?.nPlusMMachines?.map(el => el.id) || []
+      }
+      else if (secondSigmaClusterDetail.value?.mode === '1+1') {
+        return secondSigmaClusterDetail.value?.onePlusOneMachines?.flatMap(server => [server.primary.id, server.backup.id])
+      }
+      else {
+        return secondSigmaClusterDetail.value?.machines?.map(el => el.id) || []
+      }
+    }
+  })
+  const combinedIds = computed(() => {
+    return getAllUniqueMachineIds(machineIds?.value, secondMachineIds?.value)
+  })
+
+  const params = computed(() => {
+    return {
+      q: JSON.stringify({ id: { $in: combinedIds.value } }),
+      sort: '',
+    }
+  })
+
+  const { data: machineList, suspense } = useQuery(
+    [QueryKeys.MACHINES, params],
+    async () => await $machineApi('/api/machine/sigma-machines', {
+      method: 'GET',
+      query: params.value,
+      headers: {
+        noNotify: 'true',
+      },
+    }),
+    {
+      enabled: computed(() => combinedIds.value?.length > 0),
+      refetchOnWindowFocus: false,
+    },
+  )
+
+  const addressIPList = computed(() => {
+    if (!machineList.value)
+      return []
+    else
+      return filterListNetwork(machineList.value.data)
+  })
+
+  function getNetmask(name: string) {
+    const element = addressIPList.value?.filter(el => el?.name === name) ?? []
+    return element[0]?.netmask
+  }
+  return { combinedIds, getNetmask }
+}

package/src/components/Server/validator.ts

@@ -0,0 +1,13 @@
+import type { ComponentCluster, MachineCluster, Transcoder } from '@/api-client-transcoders'
+
+export function machineExits(listMachine: Transcoder[], machineId: string) {
+  return !listMachine.find(item => item.id === machineId)?.isDeleted
+}
+
+export function clusterExits(listCluster: MachineCluster[], clusterId: string) {
+  return !listCluster.find(item => item.id === clusterId)?.isDeleted
+}
+
+export function componentExits(listComponent: ComponentCluster[], clusterId: string) {
+  return !listComponent.find(item => item.id === clusterId)?.isDeleted
+}

package/src/components/SwitchDark.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { Moon, Sunny } from '@element-plus/icons-vue'
+
+const { isDark } = useLayoutStore()
+const toggleDark = useToggle(isDark)
+</script>
+
+<template>
+  <el-switch
+    :model-value="isDark"
+    inline-prompt
+    size="large"
+    active-color="#0a0a0a"
+    inactive-color="#dcdfe6"
+    :active-icon="Sunny"
+    :inactive-icon="Moon"
+    @change="toggleDark()"
+  />
+</template>

package/src/components/SwitchLang.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+const { locale } = useI18n({
+  useScope: 'global',
+})
+syncRef(locale, __LANGUAGE__)
+
+function handleCommand(lang: string) {
+  locale.value = lang
+  window.location.reload()
+}
+</script>
+
+<template>
+  <el-dropdown trigger="click" @command="handleCommand">
+    <el-button text>
+      <el-icon size="22px">
+        <div class="i-carbon:language" />
+      </el-icon>
+    </el-button>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item command="en" :class="[locale === 'en' && '!text-primary']">
+          English
+        </el-dropdown-item>
+        <el-dropdown-item command="vi" :class="[locale === 'vi' && '!text-primary']">
+          Tiếng Việt
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>

package/src/components/TableEmpty.vue

@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+const { isError, hasFilter, isFetching } = defineProps<{
+  isError?: boolean
+  hasFilter?: boolean
+  isFetching?: boolean
+}>()
+
+const emit = defineEmits<{
+  refetch: []
+  add: []
+  clearFilter: []
+}>()
+</script>
+
+<template>
+  <div v-if="!isFetching" class="h-300px pb-60px xl:h-580px">
+    <div v-if="isError" class="h-full w-full flex flex-col items-center justify-center pt-10">
+      <el-text type="danger" tag="b" class="leading-5">
+        {{ $t('base.error_loading_data') }}
+      </el-text>
+      <el-text type="danger">
+        {{ $t('base.an_error_occurred_while_loading_data_please_try_again_later') }}
+      </el-text>
+      <el-button type="primary" plain @click="emit('refetch')">
+        {{ $t('base.retry') }}
+      </el-button>
+    </div>
+    <div v-else-if="hasFilter" class="h-full w-full flex flex-col items-center justify-center pt-10">
+      <el-text tag="b" class="leading-60px">
+        {{ $t('base.no_matches') }}. {{ $t('base.we_cant_find_a_match') }}
+      </el-text>
+      <el-button type="primary" plain @click="emit('clearFilter')">
+        {{ $t('base.clear_filter') }}
+      </el-button>
+    </div>
+    <div v-else class="h-full w-full flex flex-col items-center justify-center pt-10">
+      <el-text tag="b" class="mb-1 leading-60px">
+        {{ $t('base.no_data') }}
+      </el-text>
+      <slot name="add">
+        <el-button type="primary" plain @click="emit('add')">
+          {{ $t('Actions.add') }}
+        </el-button>
+      </slot>
+    </div>
+  </div>
+  <div v-else>
+    &nbsp;
+  </div>
+</template>

package/src/components/Toast/ToastNoti.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+// const { t } = useI18n()
+const { noti } = useToast()
+
+const showNotiType = {
+  success: {
+    type: 'success',
+    icon: 'i-ep:success-filled text-#87CF63 text-xl',
+    bgColor: 'bg-#F0F9EB',
+  },
+  info: {
+    type: 'info',
+    icon: 'i-ep:info-filled text-#70B6FF text-xl',
+    bgColor: 'bg-#ECF5FF',
+  },
+  warning: {
+    type: 'warning',
+    icon: 'i-ep:warning text-#EBB565 text-xl',
+    bgColor: 'bg-#FDF6EC',
+  },
+  error: {
+    type: 'error',
+    icon: 'i-carbon:close-outline text-#F67878 text-xl',
+    bgColor: 'bg-#FEF0F0',
+  },
+}
+</script>
+
+<template>
+  <div v-if="noti.length">
+    <el-card v-for="(item, index) in noti" :key="index" :class="showNotiType[item.type]?.bgColor">
+      <div class="flex items-center gap-2">
+        <div :class="showNotiType[item.type]?.icon" />
+        <div>
+          <div class="text-lg font-bold">
+            {{ item?.title }}
+          </div>
+          <div>{{ item?.message }}</div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<i18n lang="yaml" global>
+en:
+  warningOutResource: Your trial/package has used up resources. Upgrade now to continue using products/services
+  seeMoreOptions: See more options
+vi:
+  warningOutResource: Bản dùng thử của bạn đã sử dụng hết tài nguyên. Nâng cấp ngay để tiếp tục sử dụng sản phẩm/dịch vụ
+  seeMoreOptions: Xem thêm tùy chọn
+</i18n>

package/src/components/Tool/ForensicWatermarkingDialog.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import Watermarking from './Watermarking.vue'
+
+const emit = defineEmits<{
+  goToChannel: [id: string]
+}>()
+
+const { modelValue } = defineModels<{
+  modelValue: boolean
+}>()
+const { t } = useI18n()
+function handleClose(done: () => void) {
+  ElMessageBox.confirm(t('watermark.message.handleConfirmClose'), t('watermark.warning'), {
+    confirmButtonText: t('watermark.confirm'),
+    cancelButtonText: t('watermark.cancel'),
+    type: 'warning',
+  })
+    .then(() => {
+      done()
+    })
+}
+function handleGoToChannel(id: string) {
+  console.log('🚀 ~ handleGoToChannel ~ id:', id)
+  emit('goToChannel', id)
+}
+</script>
+
+<template>
+  <el-dialog
+    v-model="modelValue"
+    :title="$t('watermark.forensic_watermarking')"
+    width="770"
+    destroy-on-close center
+    class="[&_.el-dialog\_\_title]:(font-bold!)"
+    :before-close="handleClose"
+  >
+    <Watermarking @go-to-channel="handleGoToChannel" />
+  </el-dialog>
+</template>