hami/packages/web/projects/vgpu/hooks/useInstantVector.js

import cardApi from '~/vgpu/api/card';
import { onMounted, ref, watch, watchEffect } from 'vue';
import { timeParse } from '@/utils';

const useInstantVector = (configs, parseQuery = (query) => query, times) => {
  const data = ref(configs);

  const fetchInstantData = async () => {
    const reqs = configs.map(
      async ({ query, totalQuery, percentQuery, cntQuery }, index) => {
        if (parseQuery(query).includes('undefined')) {
          return;
        }
        if (query) {
          const usedData = await cardApi.getInstantVector({
            query: parseQuery(query),
          });

          const used = usedData.data.length ? usedData.data[0]?.value : 0;
          data.value[index].count = used;
          data.value[index].used = used;
        }

        if (totalQuery) {
          const totalData = await cardApi.getInstantVector({
            query: parseQuery(totalQuery),
          });
          if (totalData.data[0]) {
            data.value[index].total = totalData.data[0].value;
          }
        }
        if (data.value[index].total !== 0) {
            data.value[index].percent = data.value[index].used / data.value[index].total * 100;
        }
        if (percentQuery) {
          const percentData = await cardApi.getRangeVector({
            query: parseQuery(percentQuery),
            range: {
                start: timeParse(times?.value[0]),
                end: timeParse(times?.value[1]),
              step: '1m',
            },
          });

          data.value[index].data = percentData.data[0]?.values;
        }
      },
    );

    Promise.all(reqs);
  };

  const fetchRangeData = async () => {
    const reqs = configs.map(
      async ({ query, totalQuery, percentQuery }, index) => {
        if (parseQuery(query).includes('undefined')) {
          return;
        }

        if (percentQuery) {
          const percentData = await cardApi.getRangeVector({
            query: parseQuery(percentQuery),
            range: {
                start: timeParse(times.value[0]),
                end: timeParse(times.value[1]),
              step: '1m',
            },
          });

          data.value[index].data = percentData.data[0]?.values;
        }
      },
    );

    Promise.all(reqs);
  };

  watchEffect(() => {
    fetchInstantData();
  });

  watch(
    times,
    () => {
      fetchRangeData();
    },
    // { immediate: true },
  );

  return data;
};

export default useInstantVector;