8x48/KnowStreaming
1
0
Fork 0
mirror of https://github.com/didi/KnowStreaming.git synced 2026-01-06 13:51:08 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

同步代码

Browse Source
This commit is contained in:
zengqiao
2022-08-23 19:01:53 +08:00
parent e90c5003ae
commit e1514c901b
76 changed files with 796 additions and 577 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
km-console/packages/layout-clusters-fe/src/components/CodeMirrorFormItem/index.less
View File

@@ -7,9 +7,16 @@
&.CodeMirror-focused {
border-color: #74788d;
}
// 隐藏多余的滚动条
.CodeMirror-hscrollbar,.CodeMirror-vscrollbar{
display: none !important;
}
.CodeMirror-scroll {
width: 100%; // 和父级宽度保持一致
background: #f2f2f2;
transition: background-color 0.3s ease;
border-radius: 8px;
overflow: hidden;
.CodeMirror-gutters {
background: #f2f2f2;
transition: background-color 0.3s ease;

8
km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/ChartDetail.tsx
View File

@@ -6,6 +6,7 @@ import { useParams } from 'react-router-dom';
import { debounce } from 'lodash';
import { MetricDefaultChartDataType, MetricChartDataType, formatChartData, getDetailChartConfig } from './config';
import { UNIT_MAP } from '@src/constants/chartConfig';
import { CloseOutlined } from '@ant-design/icons';
interface ChartDetailProps {
metricType: MetricType;
@@ -51,6 +52,7 @@ const colunms = [
{
title: 'Host',
dataIndex: 'name',
width: 200,
render(name: string, record: any) {
return (
<div style={{ display: 'flex', alignItems: 'center' }}>
@@ -63,6 +65,7 @@ const colunms = [
{
title: 'Avg',
dataIndex: 'avg',
width: 120,
render(num: number) {
return num.toFixed(2);
},
@@ -70,6 +73,7 @@ const colunms = [
{
title: 'Max',
dataIndex: 'max',
width: 120,
render(num: number, record: any) {
return (
<div>
@@ -81,6 +85,7 @@ const colunms = [
{
title: 'Min',
dataIndex: 'min',
width: 120,
render(num: number, record: any) {
return (
<div>
@@ -92,6 +97,7 @@ const colunms = [
{
title: 'Latest',
dataIndex: 'latest',
width: 120,
render(latest: number[]) {
return `${latest[1].toFixed(2)}`;
},
@@ -553,7 +559,7 @@ const ChartDetail = (props: ChartDetailProps) => {
</div>
<div className="right">
<Button type="text" size="small" onClick={onClose}>
<IconFont type="icon-guanbi" />
<CloseOutlined />
</Button>
</div>
</div>

5
km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/config.tsx
View File

@@ -1,4 +1,4 @@
import { getUnit, getDataNumberUnit, getBasicChartConfig } from '@src/constants/chartConfig';
import { getUnit, getDataNumberUnit, getBasicChartConfig, CHART_COLOR_LIST } from '@src/constants/chartConfig';
import { MetricType } from '@src/api';
import { MetricsDefine } from '@src/pages/CommonConfig';
@@ -140,7 +140,7 @@ const seriesCallback = (lines: { name: string; data: [number, string | number][]
return {
...line,
lineStyle: {
width: 1,
width: 1.5,
},
symbol: 'emptyCircle',
symbolSize: 4,
@@ -158,6 +158,7 @@ export const getChartConfig = (title: string, metricLength: number) => {
title: { show: false },
grid: { top: 24 },
tooltip: { enterable: metricLength > 9, legendContextMaxHeight: 192 },
color: CHART_COLOR_LIST,
// xAxis: {
// type: 'time',
// boundaryGap: ['5%', '5%'],

93
km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/index.less
View File

@@ -10,51 +10,52 @@
.drag-sort-item:last-child {
margin-bottom: 10px;
}
.dashboard-drag-item-box {
position: relative;
width: auto;
height: 262px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.01), 0 3px 6px 3px rgba(0, 0, 0, 0.01), 0 2px 6px 0 rgba(0, 0, 0, 0.03);
&-title {
padding: 18px 0 0 20px;
font-family: @font-family-bold;
line-height: 16px;
.name {
font-size: 14px;
color: #212529;
}
.unit {
font-size: 12px;
color: #495057;
}
> span {
cursor: pointer;
}
}
.expand-icon-box {
position: absolute;
z-index: 1000;
top: 14px;
right: 44px;
width: 24px;
height: 24px;
cursor: pointer;
font-size: 16px;
text-align: center;
border-radius: 50%;
transition: background-color 0.3s ease;
.expand-icon {
color: #adb5bc;
line-height: 24px;
}
&:hover {
background: rgba(33, 37, 41, 0.06);
.expand-icon {
color: #74788d;
}
}
}
}
.dashboard-drag-item-box {
position: relative;
width: auto;
height: 262px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.01), 0 3px 6px 3px rgba(0, 0, 0, 0.01), 0 2px 6px 0 rgba(0, 0, 0, 0.03);
&-title {
padding: 18px 0 0 20px;
font-family: @font-family-bold;
line-height: 16px;
.name {
font-size: 14px;
color: #212529;
}
.unit {
font-size: 12px;
color: #495057;
}
> span {
cursor: pointer;
}
}
.expand-icon-box {
position: absolute;
z-index: 1000;
top: 14px;
right: 44px;
width: 24px;
height: 24px;
cursor: pointer;
font-size: 16px;
text-align: center;
border-radius: 50%;
transition: background-color 0.3s ease;
.expand-icon {
color: #adb5bc;
line-height: 24px;
}
&:hover {
background: rgba(33, 37, 41, 0.06);
.expand-icon {
color: #74788d;
}
}
}
@@ -91,7 +92,7 @@
align-items: center;
.left {
display: flex;
align-items: center;
align-items: flex-end;
.title {
font-family: @font-family-bold;
font-size: 18px;

2
km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/IndicatorDrawer.tsx
View File

@@ -249,6 +249,7 @@ const IndicatorDrawer = ({ onClose, visible, indicatorSelectModule }: PropsType)
return (
<>
<Drawer
className="indicator-drawer"
title={indicatorSelectModule.drawerTitle || '指标筛选'}
width="868px"
forceRender={true}
@@ -275,6 +276,7 @@ const IndicatorDrawer = ({ onClose, visible, indicatorSelectModule }: PropsType)
>
<ProTable
tableProps={{
showHeader: false,
rowKey: 'category',
columns: columns,
dataSource: categoryData,

6
km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/style/indicator-drawer.less
View File

@@ -2,6 +2,12 @@
@import '~knowdesign/es/basic/style/themes/index';
@import '~knowdesign/es/basic/style/mixins/index';
.indicator-drawer{
.dcloud-drawer-body{
padding-top: 2px !important;
}
}
// .dd-indicator-drawer {
// @drawerItemH: 27px;
// @primary-color: #556ee6;

4
km-console/packages/layout-clusters-fe/src/components/TopicJob/PreviewTaskPlan.tsx
View File

@@ -97,7 +97,7 @@ export default (props: any) => {
className="preview-task-plan-drawer"
maskClosable={false}
destroyOnClose
// closeIcon={<ArrowLeftOutlined />}
// closeIcon={<ArrowLeftOutlined />}
>
<Table
rowKey={'topicName'}
@@ -130,6 +130,8 @@ export default (props: any) => {
<Select
value={reassignBrokerIdList}
mode="multiple"
maxTagCount={'responsive'}
allowClear
onChange={(selBrokerIds) => {
let reassignBrokerIdListEditStatusMapCopy = JSON.parse(JSON.stringify(reassignBrokerIdListEditStatusMap));
reassignBrokerIdListEditStatusMapCopy[topicRecord.topicName][partitionRecord.partitionId].reassignBrokerIdList =

8
km-console/packages/layout-clusters-fe/src/components/TopicJob/ReplicaChange.tsx
View File

@@ -30,8 +30,8 @@ const { TextArea } = Input;
const { Option } = Select;
const jobNameMap: any = {
expandAndReduce: '批量扩缩容',
transfer: '批量迁移',
expandAndReduce: '批量扩缩副本',
transfer: '批量迁移副本',
};
interface DefaultConfig {
@@ -454,6 +454,8 @@ export default (props: DefaultConfig) => {
<Select
placeholder="请选择Topic，可多选"
mode="multiple"
maxTagCount={'responsive'}
allowClear
onChange={(v: any) => {
setTopicSelectValue(v);
}}
@@ -473,6 +475,8 @@ export default (props: DefaultConfig) => {
<Select
placeholder="请选择Broker，可多选"
mode="multiple"
maxTagCount={'responsive'}
allowClear
onChange={(v: any) => {
setSelectBrokerList(v);
}}

9
km-console/packages/layout-clusters-fe/src/components/TopicJob/ReplicaMove.tsx
View File

@@ -31,8 +31,8 @@ const { TextArea } = Input;
const { Option } = Select;
const jobNameMap: any = {
expandAndReduce: '批量扩缩容',
transfer: '批量迁移',
expandAndReduce: '批量扩缩副本',
transfer: '批量迁移副本',
};
interface DefaultConfig {
@@ -101,6 +101,7 @@ export default (props: DefaultConfig) => {
{
title: '需迁移Partition',
dataIndex: 'partitionIdList',
width: 220,
render: (v: any, r: any, i: number) => {
return (
<Select
@@ -109,6 +110,8 @@ export default (props: DefaultConfig) => {
defaultValue={v}
value={needMovePartitions[i]}
mode="multiple"
maxTagCount={'responsive'}
allowClear
onChange={(a: any) => {
const needMovePartitionsCopy = JSON.parse(JSON.stringify(needMovePartitions));
needMovePartitionsCopy[i] = a;
@@ -468,6 +471,8 @@ export default (props: DefaultConfig) => {
<Select
placeholder="请选择Topic，可多选"
mode="multiple"
maxTagCount={'responsive'}
allowClear
onChange={(v: any) => {
setTopicSelectValue(v);
}}

17
km-console/packages/layout-clusters-fe/src/components/TourGuide/index.less
View File

@@ -4,6 +4,7 @@
}
}
.joyride-tooltip {
position: relative;
min-width: 284px;
max-width: 384px;
padding: 16px 24px;
@@ -38,4 +39,20 @@
}
}
}
&-arrow {
position: absolute;
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #fff;
transform-origin: 4px;
&-line {
position: absolute;
top: 3px;
left: 7px;
width: 17px;
height: 1px;
background-color: #fff;
}
}
}

24
km-console/packages/layout-clusters-fe/src/components/TourGuide/index.tsx
View File

@@ -22,10 +22,23 @@ const joyrideCommonStyle = {
};
const JoyrideTooltip = (props: TooltipRenderProps) => {
const { continuous, index, size, step, isLastStep, backProps, skipProps, primaryProps, tooltipProps } = props;
const { continuous, index, size, step, isLastStep, skipProps, primaryProps, tooltipProps } = props;
const isTop = step.placement.startsWith('top');
const isRight = step.placement.startsWith('right');
const isBottom = step.placement.startsWith('bottom');
const tooltipStyle = {
[`margin-${isTop ? 'bottom' : isRight ? 'left' : isBottom ? 'top' : 'right'}`]: 20,
[`margin-${isTop || isBottom ? 'left' : 'top'}`]: -10,
};
const arrowStyle = {
[isTop || isBottom ? 'left' : 'top']: 24,
[isTop ? 'bottom' : isRight ? 'left' : isBottom ? 'top' : 'right']: -24,
transform: `rotate(${isTop ? -90 : isRight ? 0 : isBottom ? 90 : 180}deg)`,
};
return (
<div className="joyride-tooltip" {...tooltipProps}>
<div className="joyride-tooltip" {...tooltipProps} style={tooltipStyle}>
{step.title && <div className="joyride-tooltip-header">{step.title}</div>}
<div className="joyride-tooltip-body">{step.content}</div>
<div className="joyride-tooltip-footer">
@@ -50,6 +63,9 @@ const JoyrideTooltip = (props: TooltipRenderProps) => {
</Space>
</div>
</div>
<div className="joyride-tooltip-arrow" style={arrowStyle}>
<div className="joyride-tooltip-arrow-line"></div>
</div>
</div>
);
};
@@ -89,6 +105,10 @@ const TourGuide = ({ guide, run: ready }: TourGuideProps) => {
disableScrollParentFix
tooltipComponent={JoyrideTooltip}
styles={joyrideCommonStyle}
floaterProps={{
hideArrow: true,
offset: 60,
}}
/>
);
};

3
km-console/packages/layout-clusters-fe/src/components/TourGuide/steps.ts
View File

@@ -38,6 +38,7 @@ const ClusterDetailSteps = {
title: '设置健康度',
content: '点击这里可以设置集群的健康检查项、权重及规则',
placement: 'right-start' as const,
spotlightPadding: 5,
styles: {
spotlight: {
borderRadius: 6,
@@ -49,6 +50,7 @@ const ClusterDetailSteps = {
title: '查看健康状态详情',
content: '点击这里可以查看集群的健康状态的检查结果',
placement: 'right-start' as const,
spotlightPadding: 6,
styles: {
spotlight: {
borderRadius: 6,
@@ -60,6 +62,7 @@ const ClusterDetailSteps = {
title: '编辑集群信息',
content: '点击这里可以查看集群配置信息，并且可以对信息进行编辑',
placement: 'right-start' as const,
spotlightPadding: 1,
styles: {
spotlight: {
borderRadius: 6,