chore: access, endpoints to route targets

2026-02-03 18:21:08 +08:00
parent 6d65797b4f
commit 051d9421b0
36 changed files with 411 additions and 435 deletions
@@ -0,0 +1,162 @@
+import AutoTooltip from '@/components/auto-tooltip';
+import DropdownButtons from '@/components/drop-down-buttons';
+import IconFont from '@/components/icon-font';
+import RowChildren from '@/components/seal-table/components/row-children';
+import StatusTag from '@/components/status-tag';
+import { DeleteOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Col, Row } from 'antd';
+import dayjs from 'dayjs';
+import React from 'react';
+import styled from 'styled-components';
+import { TargetStatus, TargetStatusValueMap } from '../config';
+import { RouteTarget } from '../config/types';
+const CellContent = styled.div`
+  display: flex;
+  align-items: center;
+  height: 100%;
+`;
+
+interface ProviderModelProps {
+  dataList: RouteTarget[];
+  onSelect: (val: any, record: any) => void;
+  sourceModels: any[];
+}
+
+interface AccessItemProps {
+  onSelect: (val: any, record: any) => void;
+  data: any;
+  sourceModels: any[];
+}
+
+export const childActionList = [
+  {
+    key: 'fallback',
+    label: 'routes.table.setAsFallback',
+    icon: <IconFont type="icon-shield" />
+  },
+  {
+    key: 'delete',
+    label: 'common.button.delete',
+    icon: <DeleteOutlined />,
+    props: {
+      danger: true
+    }
+  }
+];
+
+const RouteItem: React.FC<AccessItemProps> = ({
+  onSelect,
+  data,
+  sourceModels
+}) => {
+  const intl = useIntl();
+
+  const renderProviderSource = () => {
+    const model = sourceModels.find((item: any) => {
+      if (data.model_id) {
+        return item.value === 'deployments';
+      }
+      return item.value === data.provider_id;
+    });
+    console.log('renderProviderSource model:', data, sourceModels);
+    return model?.label || '-';
+  };
+  return (
+    <div style={{ borderRadius: 'var(--ant-table-header-border-radius)' }}>
+      <RowChildren>
+        <Row gutter={16} style={{ width: '100%' }}>
+          <Col span={5}>
+            <CellContent
+              style={{
+                paddingInline: 'var(--ant-table-cell-padding-inline)'
+              }}
+            >
+              <AutoTooltip ghost>{data.name}</AutoTooltip>
+            </CellContent>
+          </Col>
+          <Col span={4} style={{ paddingLeft: 56 }}>
+            <CellContent>{renderProviderSource()}</CellContent>
+          </Col>
+          <Col span={3}>
+            <CellContent>
+              {data.weight > 0 && (
+                <AutoTooltip ghost>
+                  {intl.formatMessage({ id: 'routes.form.target.weight' })}:{' '}
+                  {data.weight}
+                </AutoTooltip>
+              )}
+
+              {data.fallback_status_codes &&
+                data.fallback_status_codes?.length > 0 && (
+                  <>
+                    {data.weight > 0 && (
+                      <span style={{ marginInline: 8 }}>/</span>
+                    )}
+                    <span>
+                      {intl.formatMessage({
+                        id: 'routes.table.label.fallback'
+                      })}
+                    </span>
+                  </>
+                )}
+            </CellContent>
+          </Col>
+          <Col span={3}>
+            <CellContent>
+              <AutoTooltip ghost>
+                <StatusTag
+                  statusValue={{
+                    status: TargetStatus[data.state],
+                    text: TargetStatusValueMap[data.state],
+                    message: ''
+                  }}
+                />
+              </AutoTooltip>
+            </CellContent>
+          </Col>
+          <Col span={5}>
+            <CellContent style={{ paddingLeft: 45 }}>
+              <AutoTooltip ghost minWidth={20}>
+                {dayjs(data.created_at).format('YYYY-MM-DD HH:mm:ss')}
+              </AutoTooltip>
+            </CellContent>
+          </Col>
+          <Col span={4}>
+            <CellContent
+              style={{
+                paddingLeft: 38
+              }}
+            >
+              <DropdownButtons
+                items={childActionList}
+                onSelect={(val) => onSelect(val, data)}
+              ></DropdownButtons>
+            </CellContent>
+          </Col>
+        </Row>
+      </RowChildren>
+    </div>
+  );
+};
+
+const RouteTargets: React.FC<ProviderModelProps> = ({
+  dataList,
+  onSelect,
+  sourceModels
+}) => {
+  return (
+    <div>
+      {dataList.map((item, index) => (
+        <RouteItem
+          data={item}
+          key={index}
+          onSelect={onSelect}
+          sourceModels={sourceModels}
+        ></RouteItem>
+      ))}
+    </div>
+  );
+};
+
+export default RouteTargets;