Skip to content

Commit

Permalink
feat: refactor transaction (#2478)
Browse files Browse the repository at this point in the history
* feat: add table version 2 in config page

feat: tr

feat(msp): refactor transaction

feat(msp): refactor transaction

feat(msp): refactor transaction

feat(msp): refactor transaction

* feat(msp): refactor transaction

* feat(msp): remove mock

feat(msp): remove empty file

feat(msp): adjust chart grid

* feat(msp): rename tab name

feat(msp): remove extra entry

* feat(msp): rename mode to theme

Co-authored-by: 老俊 <782803291@qq.com>
  • Loading branch information
Zero-Rock and laojun committed Dec 31, 2021
1 parent 56648ac commit 364a53a
Show file tree
Hide file tree
Showing 23 changed files with 1,385 additions and 1,716 deletions.
2 changes: 1 addition & 1 deletion shell/app/common/components/table/interface.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
87 changes: 81 additions & 6 deletions shell/app/common/components/time-select/time-select.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
33 changes: 19 additions & 14 deletions shell/app/common/components/time-select/time-select.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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
Expand Down Expand Up @@ -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}
Expand All @@ -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}
Expand All @@ -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={() => {
Expand All @@ -210,6 +210,7 @@ interface IState {
}

export interface IProps {
theme: 'dark' | 'light';
className?: string;
triggerChangeOnMounted?: boolean;
defaultValue?: ITimeRange;
Expand Down Expand Up @@ -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);
}}
Expand All @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion shell/app/common/utils/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
6 changes: 6 additions & 0 deletions shell/app/config-page/components/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -148,4 +152,6 @@ export const containerMap = {
TopN,
ScaleCard,
DropdownSelect2,
LineGraph,
KV,
};
31 changes: 31 additions & 0 deletions shell/app/config-page/components/kv/index.scss
Original file line number Diff line number Diff line change
@@ -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);
}
}
}
}
51 changes: 51 additions & 0 deletions shell/app/config-page/components/kv/index.tsx
Original file line number Diff line number Diff line change
@@ -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;
37 changes: 37 additions & 0 deletions shell/app/config-page/components/kv/kv.spec.d.ts
Original file line number Diff line number Diff line change
@@ -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>;
}
Loading

0 comments on commit 364a53a

Please sign in to comment.