feat: refactor transaction

shell/app/common/components/table/interface.ts

@@ -14,7 +14,7 @@
 import { SorterResult, TablePaginationConfig, TableRowSelection } from 'antd/es/table/interface';
 import { ColumnProps as AntdColumnProps, TableProps } from 'antd/es/table';
 
-export { SorterResult, TablePaginationConfig, TableProps };
+export { SorterResult, TablePaginationConfig, TableProps, AntdColumnProps };
 
 export interface IActions<T> {
   width?: number | string;

shell/app/common/components/time-select/time-select.scss

@@ -3,24 +3,99 @@
     min-width: 120px;
   }
 
-  .manual-refresh {
-    left: -2px;
-  }
-
   .auto-refresh {
-    left: -1px;
+    left: 1px;
 
     .ant-select-selector {
       padding-right: 6px;
       padding-left: 6px;
-      height: 30px;
 
       .ant-select-selection-item {
         padding-right: 10px !important;
         text-align: center;
       }
     }
   }
+
+  .time-range-dropdown {
+    background: $color-default;
+    border-color: rgba($white, 0.08);
+  }
+
+  .ant-picker {
+    background: rgba($white, 0.08);
+    border: none;
+
+    .ant-picker-input {
+      > input {
+        color: rgba($white, 0.6);
+
+        &::placeholder {
+          color: rgba($white, 0.3);
+        }
+      }
+    }
+
+    .ant-picker-suffix {
+      color: rgba($white, 0.4);
+    }
+  }
+
+  .ant-select {
+    .ant-select-dropdown {
+      background: $color-default;
+
+      .ant-select-item-option {
+        color: rgba($white, 0.9);
+        font-weight: 400;
+      }
+
+      .ant-select-item-option-selected,
+      .ant-select-item-option-active {
+        background: rgba($white, 0.08);
+        color: $white;
+      }
+    }
+  }
+
+  &.light {
+    .manual-refresh {
+      color: rgba($color-default, 0.6);
+
+      &:hover {
+        color: rgba($color-default, 0.8);
+      }
+    }
+    .time-range,
+    .ant-select {
+      background: rgba($color-default, 0.06);
+      color: $color-default;
+
+      &:hover {
+        background: rgba($color-default, 0.1);
+      }
+    }
+  }
+
+  &.dark {
+    .manual-refresh {
+      color: rgba($white, 0.6);
+
+      &:hover {
+        color: rgba($white, 0.8);
+      }
+    }
+
+    .time-range,
+    .ant-select {
+      background: rgba($white, 0.06);
+      color: rgba($white, 0.9);
+
+      &:hover {
+        background: rgba($white, 0.1);
+      }
+    }
+  }
 }
 
 .time-range-dropdown {

shell/app/common/components/time-select/time-select.tsx

@@ -16,7 +16,7 @@ import { DatePicker, Dropdown, Select } from 'antd';
 import { produce } from 'immer';
 import { useMount } from 'react-use';
 import { Moment } from 'moment';
-import { SelectProps } from 'core/common/interface';
+import { SelectProps } from 'antd/lib/select';
 import i18n from 'i18n';
 import './time-select.scss';
 import { useUpdate } from 'common/use-hooks';
@@ -31,15 +31,15 @@ import {
   transformRange,
   translateAutoRefreshDuration,
 } from './common';
-import { ErdaIcon } from 'common';;
+import { ErdaIcon } from 'common';
 
 type IRefreshStrategy = 'off' | IRefreshDuration;
 
 const { Option } = Select;
 
 export const AutoRefreshStrategy = (props: SelectProps<IRefreshStrategy>) => {
   return (
-    <div className="auto-refresh relative border-all hover:border-primary bg-white hover:z-10">
+    <div className="auto-refresh relative  hover:border-primary">
       <Select defaultValue="off" bordered={false} dropdownMatchSelectWidth={false} {...props}>
         <Option key="off" value="off">
           OFF
@@ -145,8 +145,8 @@ export const TimeRange = ({ onChange, value, format }: ITimeRangeProps) => {
   return (
     <div className="flex h-full items-stretch">
       <div className="w-56 h-full px-3">
-        <p className="pt-3 font-medium">{i18n.t('absolute time range')}</p>
-        <p className="mt-3 mb-1">{i18n.t('common:start at')}</p>
+        <p className="pt-3 font-medium text-white-9">{i18n.t('absolute time range')}</p>
+        <p className="mt-3 mb-1 text-white-6">{i18n.t('common:start at')}</p>
         <DatePicker
           format={format}
           disabledDate={disabledStart}
@@ -161,7 +161,7 @@ export const TimeRange = ({ onChange, value, format }: ITimeRangeProps) => {
             handleChangeDate('start', ...arg);
           }}
         />
-        <p className="mt-3 mb-1">{i18n.t('common:end at')}</p>
+        <p className="mt-3 mb-1 text-white-6">{i18n.t('common:end at')}</p>
         <DatePicker
           format={format}
           disabledDate={disabledEnd}
@@ -178,13 +178,13 @@ export const TimeRange = ({ onChange, value, format }: ITimeRangeProps) => {
         />
       </div>
       <div className="w-44 h-full border-left flex flex-col">
-        <p className="px-3 pt-3 font-medium">{i18n.t('relative time range')}</p>
-        <ul className="time-quick-select overflow-y-auto flex-1 mt-3">
+        <p className="px-3 pt-3 font-medium text-white-9">{i18n.t('relative time range')}</p>
+        <ul className="time-quick-select overflow-y-auto flex-1 mt-3 scroll-bar-dark">
           {map(relativeTimeRange, (label, range: IRelativeTime) => {
             return (
               <li
-                className={`time-quick-select-item h-9 px-3 flex items-center hover:bg-grey cursor-pointer ${
-                  mode === 'quick' && activeQuick === range ? 'text-primary font-medium' : ''
+                className={`time-quick-select-item font-normal h-9 px-3 flex items-center hover:bg-white-08 cursor-pointer ${
+                  mode === 'quick' && activeQuick === range ? 'text-white bg-white-08' : 'text-white-9'
                 }`}
                 key={range}
                 onClick={() => {
@@ -210,6 +210,7 @@ interface IState {
 }
 
 export interface IProps {
+  theme: 'dark' | 'light';
   className?: string;
   triggerChangeOnMounted?: boolean;
   defaultValue?: ITimeRange;
@@ -331,18 +332,19 @@ const TimeSelect = (props: IProps) => {
   };
 
   return (
-    <div className={`time-select h-8 flex rounded ${props.className ?? ''}`}>
+    <div className={`time-select h-7 flex rounded ${props.className ?? ''} ${props.theme || 'light'}`}>
       <Dropdown
+        getPopupContainer={(triggerNode) => triggerNode.parentElement as HTMLElement}
         visible={visible}
         trigger={['click']}
-        overlayClassName="time-range-dropdown bg-white"
+        overlayClassName="time-range-dropdown scroll-bar-dark"
         overlay={
           <TimeRange format={format} key={`${visible}`} value={props?.value ?? data} onChange={handleSelectDate} />
         }
         onVisibleChange={updater.visible}
       >
         <div
-          className="time-range cursor-pointer border-all rounded-l flex items-center px-2 hover:border-primary bg-white hover:z-10"
+          className="time-range cursor-pointer rounded-l flex items-center px-2"
           onClick={() => {
             updater.visible(true);
           }}
@@ -355,9 +357,12 @@ const TimeSelect = (props: IProps) => {
         suffixIcon={<ErdaIcon type="caret-down" className="ml-1 -mt-0.5" size="16" />}
         style={{ width: 70 }}
         defaultValue={refreshStrategy}
+        bordered={false}
+        size="small"
+        getPopupContainer={(triggerNode) => triggerNode.parentNode as HTMLElement}
         onChange={handleChangeRefreshStrategy}
       />
-      <div className="manual-refresh flex justify-center items-center w-8 relative border-all rounded-r hover:border-primary bg-white">
+      <div className="ml-3 manual-refresh flex justify-center items-center w-7 relative  rounded-r hover:border-primary">
         <ErdaIcon
           size="14"
           type="refresh1"

shell/app/common/utils/index.ts

@@ -16,7 +16,7 @@ import i18n from 'i18n';
 import { get } from 'lodash';
 import { PAGINATION } from 'app/constants';
 import moment from 'moment';
-import { Key, pathToRegexp, compile } from 'path-to-regexp';
+import { compile, Key, pathToRegexp } from 'path-to-regexp';
 import { AxiosResponse } from 'axios';
 import AnsiUp from 'ansi_up';
 

shell/app/config-page/components/index.tsx

@@ -12,6 +12,7 @@
 // along with this program. If not, see <http://www.gnu.org/licenses/>.
 
 import { Table } from './table/table';
+import Table2 from './table/v2/table';
 import ContractiveFilter from './contractive-filter/contractive-filter';
 import ConfigurableFilter from './configurable-filter/configurable-filter';
 import { Form } from './form/form';
@@ -77,13 +78,16 @@ import UserProfile from './user-profile/user-profile';
 import List2 from './base-list/base-list';
 import TopN from './top-n';
 import ScaleCard from './scale-card/scale-card';
+import LineGraph from './line-graph';
+import KV from './kv';
 
 export const containerMap = {
   Alert,
   Badge,
   Button,
   FormModal,
   Table,
+  Table2,
   PieChart,
   Card,
   Container,
@@ -148,4 +152,6 @@ export const containerMap = {
   TopN,
   ScaleCard,
   DropdownSelect2,
+  LineGraph,
+  KV,
 };

shell/app/config-page/components/kv/index.scss

@@ -0,0 +1,31 @@
+.cp-kv {
+  &.dark {
+    .items {
+      background: rgba($white, 0.04);
+
+      .items-value {
+        color: $white;
+      }
+
+      .items-title,
+      .items-unit {
+        color: rgba($white, 0.6);
+      }
+    }
+  }
+
+  &.light {
+    .items {
+      background: rgba($color-default, 0.04);
+
+      .items-value {
+        color: $color-default;
+      }
+
+      .items-title,
+      .items-unit {
+        color: rgba($color-default, 0.6);
+      }
+    }
+  }
+}

shell/app/config-page/components/kv/index.tsx

@@ -0,0 +1,51 @@
+// Copyright (c) 2021 Terminus, Inc.
+//
+// This program is free software: you can use, redistribute, and/or modify
+// it under the terms of the GNU Affero General Public License, version 3
+// or later ("AGPL"), as published by the Free Software Foundation.
+//
+// This program is distributed in the hope that it will be useful, but WITHOUT
+// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+// FITNESS FOR A PARTICULAR PURPOSE.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <http://www.gnu.org/licenses/>.
+
+import React from 'react';
+import { Col, Row, Tooltip } from 'antd';
+import Ellipsis from 'common/components/ellipsis';
+import ErdaIcon from 'common/components/erda-icon';
+import './index.scss';
+
+const IndicatorCard: React.FC<CP_KV.Props> = (props) => {
+  const { props: configProps, data } = props;
+  const { gutter = 8, span } = configProps || {};
+  const list = data.list ?? [];
+  const itemSpan = span ?? new Array(list.length).fill(Math.ceil(24 / list.length));
+  return (
+    <Row className={`${configProps.wrapperClass ?? ''} ${configProps.theme ?? 'light'} cp-kv w-full`} gutter={gutter}>
+      {list.map((item, index) => {
+        return (
+          <Col key={item.key} span={itemSpan[index]}>
+            <div className="items p-3">
+              <div className="text-center">
+                <span className="text-xl items-value">{item.value}</span>
+                {item.subKey ? <span className="text-xs	items-unit ml-0.5">{item.subKey}</span> : null}
+              </div>
+              <div className="flex justify-center items-center items-title">
+                <Ellipsis className="text-xs text-center" title={item.key} />
+                {item.tip ? (
+                  <Tooltip title={item.tip}>
+                    <ErdaIcon type="help" color="currentColor" className="ml-0.5 cursor-pointer" />
+                  </Tooltip>
+                ) : null}
+              </div>
+            </div>
+          </Col>
+        );
+      })}
+    </Row>
+  );
+};
+
+export default IndicatorCard;

shell/app/config-page/components/kv/kv.spec.d.ts

@@ -0,0 +1,37 @@
+// Copyright (c) 2021 Terminus, Inc.
+//
+// This program is free software: you can use, redistribute, and/or modify
+// it under the terms of the GNU Affero General Public License, version 3
+// or later ("AGPL"), as published by the Free Software Foundation.
+//
+// This program is distributed in the hope that it will be useful, but WITHOUT
+// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+// FITNESS FOR A PARTICULAR PURPOSE.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <http://www.gnu.org/licenses/>.
+
+declare namespace CP_KV {
+  interface IProps {
+    theme?: 'dark' | 'light';
+    gutter?: number;
+    span?: number[];
+    wrapperClass?: string;
+    className?: string;
+  }
+
+  interface Spec {
+    type: 'KV';
+    props: IProps;
+    data: {
+      list: {
+        key: string;
+        value: string | number;
+        subKey?: string;
+        tip?: string;
+      }[];
+    };
+  }
+
+  type Props = MakeProps<Spec>;
+}