function PoolCard()

in client/src/components/cluster/hot-node-pool/pool-card.js [108:251]

• 144 lines of code
• 12 McCabe index (conditional complexity)

function PoolCard ({
  awsRegions,
  disabled,
  pool,
  onEdit,
  onRemove,
  onClick,
  nodes,
  router
}) {
  if (!pool) {
    return null;
  }
  const {
    id,
    name,
    schedule,
    count: nodeCount,
    dockerImages = [],
    usage = 0
  } = pool;
  const poolNodes = (nodes || [])
    .filter(node => node.labels &&
      node.labels.hasOwnProperty('pool_id') &&
      `${node.labels.pool_id}` === `${pool.id}`
    );
  const runs = usage;
  const total = Math.max(usage, poolNodes.length);
  const runsCountLabel = displayCount(runs);
  const totalLabel = displayCount(total);
  const fontSize = total >= 100 ? 10 : 12;
  const navigate = (path) => {
    if (!router) {
      return;
    }
    if (path) {
      router.push(path);
    }
  };
  return (
    <div
      className={
        classNames(
          styles.container,
          'cp-panel-card',
          'cp-hot-node-pool',
          {
            [styles.poolDisabled]: nodeCount === 0,
            'cp-disabled': nodeCount === 0
          }
        )
      }
      onClick={onClick}
    >
      <div className={styles.headerContainer}>
        <div
          className={
            classNames(
              styles.infoBlock,
              'cp-text-not-important',
              {
                'cp-success': runs > 0
              }
            )
          }
          style={{fontSize: `${fontSize}pt`}}
        >
          <div className={styles.progress}>
            <Progress
              type="circle"
              status={runs > 0 ? 'success' : 'active'}
              percent={(runs / (total || 1)) * 100.0}
              width={55}
              strokeWidth={8}
              showInfo={false}
            />
          </div>
          <span>
            {runsCountLabel}
          </span>
          <span style={{fontWeight: 'normal', margin: '0 2px'}}>
            /
          </span>
          <span>
            {totalLabel}
          </span>
        </div>
        <div className={styles.nameBlock}>
          <div className={styles.header}>
            <div className={styles.title}>
              <span className={styles.main}>{name}</span>
              {
                nodeCount === 0 && (
                  <span className={styles.disabledLabel}>(disabled)</span>
                )
              }
            </div>
            <div className={styles.actions}>
              <Button
                disabled={disabled}
                size="small"
                onClick={onEdit}
              >
                <Icon type="edit" />
              </Button>
              <Button
                disabled={disabled}
                size="small"
                onClick={(e) => {
                  e && e.stopPropagation();
                  navigate(`/cluster/usage?pool=${id}`);
                }}
              >
                <Icon type="area-chart" />
              </Button>
              <Button
                disabled={disabled}
                size="small"
                type="danger"
                onClick={onRemove}
              >
                <Icon type="delete" />
              </Button>
            </div>
          </div>
          <PoolShortDescription pool={pool} />
        </div>
      </div>
      <div className={styles.images}>
        {
          dockerImages.map((d, index) => (
            <DockerImageDetails
              key={index}
              className={styles.image}
              docker={d}
              onlyImage
            />
          ))
        }
      </div>
      <Schedule schedule={schedule} />
    </div>
  );
}