lodash#ceil TypeScript Examples

InstanceList = ({
  clusters,
  instanceType,
}: // onClickMachine,
IProps) => {
  const orgName = orgStore.useStore((s) => s.currentOrg.name);
  const [serviceList, jobList, instanceList] = clusterDashboardStore.useStore((s) => [
    s.serviceList,
    s.jobList,
    s.instanceList,
  ]);
  const [loading] = useLoading(clusterDashboardStore, ['getInstanceList']);
  const { getInstanceList } = clusterDashboardStore.effects;

  const [renderOp, drawer] = useInstanceOperation<IInstance>({
    log: true,
    console: true,
    monitor: true,
    getProps(type, record) {
      let fetchApi;
      if (instanceType === 'job') {
        set(record, 'id', record.jobId);
        fetchApi = '/api/orgCenter/job/logs';
      } else {
        set(record, 'id', record.instanceId || record.containerId);
        fetchApi = '/api/orgCenter/logs';
      }
      return {
        log: {
          fetchApi,
          extraQuery: { clusterName: record.clusterName },
          sourceType: instanceType === 'job' ? 'job' : 'container',
        },
        monitor: {
          api: '/api/orgCenter/metrics',
          extraQuery: { filter_cluster_name: record.clusterName },
        },
      }[type];
    },
  });

  const getList = React.useCallback(() => {
    const payload: Merge<ORG_DASHBOARD.IInstanceListQuery, { isWithoutOrg: boolean }> = {
      clusters,
      instanceType,
      isWithoutOrg: true,
    };
    if (instanceType !== 'all') {
      payload.filters = [
        {
          key: 'org_name',
          values: [orgName],
        },
      ];
    }
    getInstanceList(payload);
  }, [instanceType, clusters, getInstanceList, orgName]);

  useEffect(() => {
    getList();
  }, [getList]);

  const instanceMap = {
    service: serviceList,
    job: jobList,
    all: instanceList,
  };

  const instanceTypeColMap = {
    job: [
      {
        title: i18n.t('ID'),
        dataIndex: 'jobId',
        render: (id: string) => <Tooltip title={id}>{id || '--'}</Tooltip>,
      },
    ],
    service: [
      {
        title: i18n.t('name-service'),
        dataIndex: 'serviceName',
        render: (name: string) => <Tooltip title={name}>{name || '--'}</Tooltip>,
      },
      {
        title: i18n.t('Position'),
        dataIndex: 'projectName',
        render: (_: any, { projectName, applicationName, runtimeName }: any) => (
          <Tooltip
            title={`${i18n.t('project')}/${i18n.t('application')}/${i18n.t(
              'instance',
            )}：${projectName}/${applicationName}/${runtimeName}`}
          >
            {`${projectName}/${applicationName}/${runtimeName}`}
          </Tooltip>
        ),
      },
    ],
    all: [
      {
        title: i18n.t('Image'),
        key: 'image',
        dataIndex: 'image',
        width: 400,
        className: 'item-image',
        render: (image: string) => {
          if (!image) return null;

          return (
            <Tooltip title={`${i18n.t('click to copy')}：${image}`} overlayClassName="tooltip-word-break">
              <span
                className="image-name for-copy-image w-[400px]"
                data-clipboard-tip={i18n.t('Image name')}
                data-clipboard-text={image}
              >
                {getImageText(image)}
              </span>
            </Tooltip>
          );
        },
      },
    ],
  };

  const cols = [
    // {
    //   title: i18n.t('Host IP'),
    //   dataIndex: 'hostIP',
    //   render: (ip: string, record: any) => (ip ? <span className="hover-text" onClick={() => { onClickMachine({ ip, clusterName: record.clusterName }); }}>{ ip }</span> : '--'),
    // },
    {
      title: i18n.t('cluster'),
      dataIndex: 'clusterName',
    },
    {
      title: i18n.t('cmp:CPU usage'),
      dataIndex: 'cpuUsage',
      sorter: (a: any, b: any) => a.cpuUsage - b.cpuUsage,
      render(cpuUsage: number, { cpuRequest }: any) {
        return (
          <Tooltip
            title={
              <div className="table-tooltip">
                {i18n.t('usage')}
                <span>
                  {ceil(cpuUsage, 2)} {i18n.t('core')}
                </span>{' '}
                <br />
                {`${i18n.t('allocated')}${ceil(cpuRequest, 2)}`} {i18n.t('core')}
              </div>
            }
          >
            {`${ceil(cpuUsage, 2)} ${i18n.t('core')}`}
          </Tooltip>
        );
      },
    },
    {
      title: i18n.t('cmp:Memory usage'),
      sorter: (a: any, b: any) => a.memUsage - b.memUsage,
      dataIndex: 'memRequest',
      render(_: any, { memRequest, memUsage }: any) {
        return (
          <Tooltip
            title={
              <div className="table-tooltip">
                {i18n.t('usage')}
                <span>{getFormatter('STORAGE').format(memUsage, 2)}</span> <br />
                {`${i18n.t('allocated')}${getFormatter('STORAGE').format(memRequest, 2)}`}
              </div>
            }
          >
            {getFormatter('STORAGE').format(memUsage, 2)}
          </Tooltip>
        );
      },
    },
    {
      title: i18n.t('cmp:Disk usage'),
      dataIndex: 'diskUsage',
      render: (diskUsage: number) => getFormatter('STORAGE').format(diskUsage),
    },
    {
      title: i18n.t('operations'),
      width: 250,
      render: renderOp,
    },
  ];

  return (
    <div className="table-wraper">
      <ErdaTable
        onReload={getList}
        rowKey={(record: any, i: number) => `${i}${record.hostIP}`}
        columns={[...instanceTypeColMap[instanceType], ...cols] as Array<ColumnProps<any>>}
        dataSource={instanceMap[instanceType]}
        loading={loading}
      />
      <Copy selector=".for-copy-image" />
      {drawer}
    </div>
  );
}