gpustack-ui/src/pages/backends/components/backend-card.tsx

import AutoTooltip from '@/components/auto-tooltip';
import DropDownActions from '@/components/drop-down-actions';
import IconFont from '@/components/icon-font';
import ThemeTag from '@/components/tags-wrapper/theme-tag';
import Card from '@/components/templates/card';
import { useIntl } from '@umijs/max';
import { Button, Tag } from 'antd';
import _ from 'lodash';
import { useMemo } from 'react';
import styled from 'styled-components';
import {
  backendActions,
  builtInBackendLogos,
  customColors,
  customIcons,
  getGpuColor
} from '../config';
import { ListItem } from '../config/types';

const TagInner = styled(Tag)`
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  height: 28px;
  width: 28px;
  border-radius: 6px;
  font-weight: 400;
`;

const Header = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  .title {
    display: flex;
    align-items: center;
    gap: 24px;
  }
`;

const CardName = styled.div`
  font-weight: 500;
  font-size: 16px;
  display: flex;
  align-items: center;
  color: var(--ant-color-text);
  margin-bottom: 4px;
  gap: 16px;
`;

const Content = styled.div`
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 12px;
  gap: 16px;
  color: var(--ant-color-text-secondary);
  .description {
    margin-block: 12px;
    color: var(--ant-color-text-tertiary);
  }
  .text {
    margin-left: 4px;
    color: var(--ant-color-text);
  }
  .title {
    color: var(--ant-color-text);
    font-weight: 500;
    line-height: 1.5;
  }
  .info {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: center;
    gap: 8px;
    color: var(--ant-color-text-tertiary);
    .icon {
      color: var(--ant-color-text-tertiary);
    }
    .label {
      display: flex;
      align-items: center;
      gap: 4px;
    }
  }
`;

const InfoItem = styled.div`
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  gap: 8px;
  color: var(--ant-color-text-tertiary);
  .icon {
    color: var(--ant-color-text-tertiary);
  }
  .label {
    display: flex;
    align-items: center;
    gap: 4px;
  }
`;

const BackendBox = styled.div`
  display: flex;
  align-items: center;
  gap: 8px;
`;

interface BackendCardProps {
  onClick?: (data: any) => void;
  onSelect?: (item: any) => void;
  data: ListItem;
}

const BackendCard: React.FC<BackendCardProps> = ({ data, onSelect }) => {
  const intl = useIntl();

  const handleOnSelect = (item: any) => {
    onSelect?.({ action: item.key, data: data });
  };

  const handleClick = () => {
    onSelect?.({ action: 'view_versions', data: data });
  };

  const renderIcon = () => {
    if (builtInBackendLogos[data.backend_name]) {
      return <img src={builtInBackendLogos[data.backend_name]} height={20} />;
    }
    const color = customColors[data.id % customColors.length];
    const icon = customIcons[data.id % customIcons.length];

    return (
      <TagInner color={color} bordered={false}>
        {icon}
      </TagInner>
    );
  };

  const actions = useMemo(() => {
    if (data.is_build_in) {
      return backendActions.filter((item) => item.key !== 'delete');
    }
    return backendActions.filter((item) => item.key !== 'view_versions');
  }, [data.is_build_in]);

  const onClick = (e: React.MouseEvent) => {
    e.stopPropagation();
  };

  const renderFrameworks = () => {
    const frameworks = _.keys(data.framework_index_map || {});

    return (
      <InfoItem>
        <span className="label">
          <IconFont className="icon" type="icon-gpu1" />
          <span>
            {intl.formatMessage({ id: 'backend.availableFrameworks' })}:{' '}
          </span>
        </span>

        <BackendBox>
          {_.take(frameworks, 3).map((item: string) => {
            return (
              <div key={item}>
                <AutoTooltip
                  ghost
                  minWidth={20}
                  showTitle
                  title={
                    _.join(data.framework_index_map?.[item], ', ') || false
                  }
                >
                  <ThemeTag
                    key={item}
                    style={{ marginRight: 0 }}
                    color={getGpuColor(item)}
                  >
                    {item}
                  </ThemeTag>
                </AutoTooltip>
              </div>
            );
          })}
        </BackendBox>
      </InfoItem>
    );
  };

  return (
    <Card
      onClick={handleClick}
      clickable={true}
      hoverable={true}
      disabled={false}
      height={140}
      ghost
      header={
        <Header>
          <div className="title">{renderIcon()}</div>
          <span onClick={onClick}>
            <DropDownActions
              menu={{
                items: actions,
                onClick: handleOnSelect
              }}
            >
              <Button
                icon={<IconFont type="icon-more"></IconFont>}
                size="small"
                type="text"
              ></Button>
            </DropDownActions>
          </span>
        </Header>
      }
    >
      <Content>
        <CardName>
          <span>{data.backend_name}</span>
          {data.is_build_in && (
            <Tag
              color="geekblue"
              className="font-400"
              bordered={false}
              style={{ borderRadius: 'var(--ant-border-radius)' }}
            >
              {intl.formatMessage({ id: 'backend.builtin' })}
            </Tag>
          )}
        </CardName>
        {renderFrameworks()}
      </Content>
    </Card>
  );
};

export default BackendCard;