8x48/KnowStreaming
1
0
Fork 0
mirror of https://github.com/didi/KnowStreaming.git synced 2026-01-05 13:08:48 +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,

3
km-console/packages/layout-clusters-fe/src/constants/axiosConfig.ts
View File

@@ -7,7 +7,6 @@ export const licenseEventBus = new EventBus();
export const goLogin = () => {
if (!window.location.pathname.includes('login')) {
// notification.error({ message: '当前未登录，将自动跳转到登录页' });
window.history.replaceState({}, '', `/login?redirect=${window.location.href.slice(window.location.origin.length)}`);
}
};
@@ -22,7 +21,7 @@ serviceInstance.interceptors.request.use(
(config: any) => {
const user = Utils.getCookie('X-SSO-USER');
const id = Utils.getCookie('X-SSO-USER-ID');
if ((!user || !id) && !window.location.pathname.toLowerCase().startsWith('/login')) {
if (!user || !id) {
goLogin();
} else {
config.headers['X-SSO-USER'] = user; // 请求携带token

34
km-console/packages/layout-clusters-fe/src/constants/chartConfig.ts
View File

@@ -1,5 +1,32 @@
import moment from 'moment';
export const CHART_COLOR_LIST = [
'#657DFC',
'#A7B1EB',
'#85C80D',
'#C9E795',
'#FFC300',
'#F9D77B',
'#8BA3C4',
'#C2D0E3',
'#FF7066',
'#F5B6B3',
'#2AC8E4',
'#9DDEEB',
'#A76CEC',
'#CCABF1',
'#FF9C1B',
'#F5C993',
'#3991FF',
'#94BEF2',
'#12CA7A',
'#A7E6C7',
'#FF5AB2',
'#F19FC9',
'#AEAEAE',
'#D1D1D1',
];
export const UNIT_MAP = {
TB: Math.pow(1024, 4),
GB: Math.pow(1024, 3),
@@ -160,11 +187,8 @@ export const getBasicChartConfig = (props: any = {}) => {
yAxis: {
type: 'value',
axisLabel: {
interval: 0,
hideOverlap: false,
color: '#495057',
fontSize: 12,
lineHeight: 20,
},
splitLine: {
show: true,
@@ -183,11 +207,11 @@ export const getBasicChartConfig = (props: any = {}) => {
const result =
tooltipWidth + pos[0] < size.viewSize[0]
? {
top: 40,
top: 10,
left: pos[0] + 30,
}
: {
top: 40,
top: 10,
left: pos[0] - tooltipWidth - 30,
};
return result;

2
km-console/packages/layout-clusters-fe/src/locales/zh.tsx
View File

@@ -32,7 +32,7 @@ export default {
[`menu.${systemKey}.topic.dashbord`]: 'Overview',
[`menu.${systemKey}.topic.list`]: 'Topics',
[`menu.${systemKey}.produce-consume`]: 'Testing',
[`menu.${systemKey}.produce-consume`]: 'Message',
[`menu.${systemKey}.produce-consume.producer`]: 'Produce',
[`menu.${systemKey}.produce-consume.consumer`]: 'Consume',

57
km-console/packages/layout-clusters-fe/src/pages/Consumers/ConsumerGroupDetail.tsx
View File

@@ -3,7 +3,7 @@ import { useParams, useHistory } from 'react-router-dom';
import CopyToClipboard from 'react-copy-to-clipboard';
import { AppContainer, Divider, Drawer, IconFont, ProTable, Select, SingleChart, Space, Tooltip, Utils } from 'knowdesign';
import { DRangeTime } from 'knowdesign';
import { getBasicChartConfig } from '@src/constants/chartConfig';
import { CHART_COLOR_LIST, getBasicChartConfig } from '@src/constants/chartConfig';
import Api from '@src/api/index';
import { hashDataParse } from '@src/constants/common';
import { ClustersPermissionMap } from '../CommonConfig';
@@ -277,10 +277,9 @@ export default (props: any) => {
return curPartition === '__all__'
? allData
: {
metricName: item.metricName,
// metricLine: curPartition === '__all__' ? {} : item.metricLines.find(line => line.name.indexOf(curPartition) >= 0)
metricLine: item.metricLines.find((line) => line.name.indexOf(curPartition) >= 0),
};
metricName: item.metricName,
metricLine: item.metricLines.find((line) => line.name.indexOf(curPartition) >= 0),
};
});
setGroupMetricsData(filteredData);
}, [curPartition, allGroupMetricsData]);
@@ -419,10 +418,10 @@ export default (props: any) => {
paginationProps:
pageTotal > 0
? {
current: pageIndex,
total: pageTotal,
pageSize: pageSize,
}
current: pageIndex,
total: pageTotal,
pageSize: pageSize,
}
: null,
attrs: {
sortDirections: ['descend', 'ascend', 'default'],
@@ -458,6 +457,7 @@ export default (props: any) => {
legend: {
left: 'center',
},
color: CHART_COLOR_LIST,
grid: {
left: 0,
right: 0,
@@ -467,53 +467,16 @@ export default (props: any) => {
customWidth: 200,
},
})}
// option={{
// title: {
// show: false,
// },
// xAxis: {
// show: true,
// type: 'category',
// },
// yAxis: {
// type: 'value',
// show: true,
// },
// legend: {
// show: true,
// right: 'auto',
// top: 220,
// },
// toolBox: {
// show: false,
// },
// grid: {
// left: 0,
// right: 0,
// top: 10,
// },
// }}
chartTypeProp="line"
propChartData={groupMetricsData}
// xAxisCallback={(data: []) => {
// // @ts-ignore
// return data.length > 0 ? data[0].metricLine.metricPoints.map((item: any) => item.timeStamp) : '';
// }}
seriesCallback={(data: any) => {
// return data.map((metricData: any) => {
// const partitionMetricData = metricData.metricLine?.metricPoints || []
// return {
// name: metricData.metricName,
// data: partitionMetricData.map((pmd: any) => pmd.value)
// }
// })
return data.map((metricData: any) => {
const partitionMetricData = metricData.metricLine?.metricPoints || [];
return {
name: metricData.metricName,
data: partitionMetricData.map((item: any) => [item.timeStamp, item.value, item.unit]),
lineStyle: {
width: 1,
width: 1.5,
},
symbol: 'emptyCircle',
symbolSize: 4,

2
km-console/packages/layout-clusters-fe/src/pages/Consumers/index.tsx
View File

@@ -249,7 +249,7 @@ const AutoPage = (props: any) => {
// rowExpandable: (record: any) => true,
// },
onChange: onTableChange,
scroll: { y: 'calc(100vh - 390px)' },
scroll: { y: 'calc(100vh - 400px)' },
// className: `frameless-table ${scene !== 'topicDetail' && 'clustom-table-content'}`, // 纯无边框表格类名
},
}}

28
km-console/packages/layout-clusters-fe/src/pages/Jobs/RebalancePlan.tsx
View File

@@ -223,8 +223,6 @@ const RebalancePlan = (props: PropsType) => {
style={{ fontSize: '13px' }}
column={2}
labelStyle={{
width: '100px',
textAlign: 'right',
display: 'flex',
justifyContent: 'end',
color: '#74788D',
@@ -232,27 +230,21 @@ const RebalancePlan = (props: PropsType) => {
}}
contentStyle={{ fontSize: '13px' }}
>
<Descriptions.Item labelStyle={{ width: '79px' }} label="任务类型">
{typeObj[data?.type] || '-'}
</Descriptions.Item>
<Descriptions.Item labelStyle={{ width: '79px' }} label="总迁移大小">
{Utils.getSizeAndUnit(data?.moveSize, 'B').valueWithUnit}
</Descriptions.Item>
<Descriptions.Item label="任务类型">{typeObj[data?.type] || '-'}</Descriptions.Item>
<Descriptions.Item label="总迁移大小">{Utils.getSizeAndUnit(data?.moveSize, 'B').valueWithUnit}</Descriptions.Item>
<Descriptions.Item label="Topic黑名单">
{data?.blackTopics && data?.blackTopics?.length > 0 ? data?.blackTopics.join('、') : '-'}
</Descriptions.Item>
<Descriptions.Item labelStyle={{ width: '79px' }} label="迁移副本数">
{data?.replicas || '-'}
</Descriptions.Item>
<Descriptions.Item labelStyle={{ width: '79px' }} label="均衡阈值">
<Descriptions.Item label="迁移副本数">{data?.replicas || '-'}</Descriptions.Item>
<Descriptions.Item label="均衡阈值">
{data?.clusterBalanceIntervalList
? data?.clusterBalanceIntervalList?.map((item: any) => {
return (
<Tag style={{ padding: '4px 8px', backgroundColor: 'rgba(33,37,41,0.08)', marginRight: '4px' }} key={item?.priority}>
{item.type + ':' + item.intervalPercent + '%'}
</Tag>
);
})
return (
<Tag style={{ padding: '4px 8px', backgroundColor: 'rgba(33,37,41,0.08)', marginRight: '4px' }} key={item?.priority}>
{item.type + ':' + item.intervalPercent + '%'}
</Tag>
);
})
: '-'}
</Descriptions.Item>
</Descriptions>

6
km-console/packages/layout-clusters-fe/src/pages/Jobs/index.less
View File

@@ -123,7 +123,7 @@
width: 50px;
}
&-text-right{
text-align: right;
text-align: center;
color: #556EE6;
}
&-img {
@@ -154,3 +154,7 @@
text-align: left;
}
}
.dcloud-checkbox-table-serch{
padding-top: 0;
}

10
km-console/packages/layout-clusters-fe/src/pages/Jobs/index.tsx
View File

@@ -174,13 +174,7 @@ const JobsList: React.FC = (props: any) => {
<div style={{ display: 'flex', alignItems: 'center', marginBottom: '12px' }}>
<Form form={form} layout="inline" onFinish={onFinish}>
<Form.Item name="type">
<Select
allowClear
options={jobType}
style={{ width: '190px' }}
className={'detail-table-select'}
placeholder="选择任务类型"
/>
<Select options={jobType} style={{ width: '190px' }} className={'detail-table-select'} placeholder="选择任务类型" />
</Form.Item>
<Form.Item name="jobTarget">
<Input allowClear style={{ width: '190px' }} placeholder="请输入执行任务对象" />
@@ -188,7 +182,7 @@ const JobsList: React.FC = (props: any) => {
<Form.Item name="status">
<Select
mode="multiple"
maxTagCount={1}
maxTagCount={'responsive'}
options={runningStatus}
style={{ width: '190px' }}
className={'detail-table-select'}

2
km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/index.less
View File

@@ -22,7 +22,7 @@
min-width: 1200px;
margin: 0 auto;
padding: 24px 40px 20px 40px;
background-image: linear-gradient(#ebebf3, #ebebf3 95%, transparent);
background-image: linear-gradient(rgb(235, 235, 243), rgb(235, 235, 243) 95%, rgba(235, 235, 243, 0));
}
.multi-cluster-header {
display: flex;

6
km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/ChangeLog.tsx
View File

@@ -30,11 +30,11 @@ const ChangeLog = () => {
total: 0,
});
const getChangeLog = () => {
const getChangeLog = (pageSize = 10) => {
const promise = Utils.request(API.getClusterChangeLog(+clusterId), {
params: {
pageNo: pagination.pageNo + 1,
pageSize: 10,
pageSize,
},
});
promise.then((res: any) => {
@@ -45,7 +45,7 @@ const ChangeLog = () => {
};
React.useEffect(() => {
getChangeLog().then(
getChangeLog(20).then(
() => setLoading(false),
() => setLoading(false)
);

22
km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/config.tsx
View File

@@ -250,17 +250,17 @@ export const getHealthySettingColumn = (form: any, data: any, clusterId: string)
rules={
validator
? [
{
required: true,
validator: validator,
},
]
{
required: true,
validator: validator,
},
]
: [
{
required: true,
message: '请输入',
},
]
{
required: true,
message: '请输入',
},
]
}
>
{percent ? (
@@ -280,7 +280,7 @@ export const getHealthySettingColumn = (form: any, data: any, clusterId: string)
};
if (record.configItemName === 'Controller') {
return <div className="table-form-item">不等于 1 则不通过</div>;
return <div className="table-form-item">≠ 1 则不通过</div>;
}
if (record.configItemName === 'RequestQueueSize' || record.configItemName === 'NoLeader') {
return (

1
km-console/packages/layout-clusters-fe/src/pages/TestingProduce/Produce.tsx
View File

@@ -230,6 +230,7 @@ const ProduceClientTest = () => {
<TestResult
showProcessList={false}
tableProps={{
showHeader: false,
scroll: { y: 600 },
columns: getTableColumns(),
dataSource: tableData,

8
km-console/packages/layout-clusters-fe/src/pages/TestingProduce/component/style/form.less
View File

@@ -38,6 +38,14 @@
overflow-y: auto;
height: calc(100vh - 326px);
min-height: 90px;
.dcloud-row{
margin-left:0 !important;
margin-right:0 !important;
.dcloud-col{
padding-left:0 !important;
padding-right:0 !important;
}
}
}
&-footer-btn {

2
km-console/packages/layout-clusters-fe/src/pages/TestingProduce/config.tsx
View File

@@ -292,6 +292,8 @@ export const getFormConfig = (params: any) => {
type: FormItemType.select,
attrs: {
mode: 'multiple',
maxTagCount: 'responsive',
allowClear: true,
},
options: info.partitionIdList || [],
rules: [{ required: false, message: '请选择' }],

2
km-console/packages/layout-clusters-fe/src/pages/TopicDetail/Configuration.tsx
View File

@@ -77,7 +77,7 @@ const BrokerConfiguration = (props: any) => {
// 多选配置
const checkedBoxOptions = [
{ label: 'Hide read-only', value: 'readOnly' },
// { label: 'Hide read-only', value: 'readOnly' },
{ label: 'Show Overrides Only', value: 'override' },
];

32
km-console/packages/layout-clusters-fe/src/pages/TopicDetail/config.tsx
View File

@@ -129,22 +129,22 @@ export const getTopicMessagesColmns = () => {
export const getTopicConfigurationColmns = (arg: any) => {
const columns: any = [
{
title: '',
dataIndex: 'readOnly',
key: 'readOnly',
align: 'right',
// eslint-disable-next-line react/display-name
render: (t: string, r: any) => {
return t ? (
<Tooltip title="该配置无法修改" visible={r.name === arg?.readOnlyRecord?.name && arg?.readOnlyVisible}>
<IconFont style={{ color: '#556EE6', fontSize: '16px' }} type="icon-suoding" />
</Tooltip>
) : null;
},
width: 56,
classsName: 'xxxxxxxx',
},
// {
// title: '',
// dataIndex: 'readOnly',
// key: 'readOnly',
// align: 'right',
// // eslint-disable-next-line react/display-name
// render: (t: string, r: any) => {
// return t ? (
// <Tooltip title="该配置无法修改" visible={r.name === arg?.readOnlyRecord?.name && arg?.readOnlyVisible}>
// <IconFont style={{ color: '#556EE6', fontSize: '16px' }} type="icon-suoding" />
// </Tooltip>
// ) : null;
// },
// width: 56,
// classsName: 'xxxxxxxx',
// },
{
title: '配置名',
dataIndex: 'name',

4
km-console/packages/layout-clusters-fe/src/pages/TopicDetail/index.less
View File

@@ -226,7 +226,7 @@
flex-flow: row wrap;
width: 100%;
&-item {
width: 16px;
width: 32px;
height: 16px;
margin-bottom: 22px;
border-radius: 4px;
@@ -235,7 +235,7 @@
transition: all ease 0.2s;
cursor: pointer;
&:not(&:nth-of-type(5n)) {
margin-right: 51px;
margin-right: 31px;
}
&-leader {
background: rgba(85, 110, 230, 0.1);

8
km-console/packages/layout-clusters-fe/src/pages/TopicList/Delete.tsx
View File

@@ -56,9 +56,17 @@ export default (props: { record: any; onConfirm?: () => void }) => {
okButtonProps={{
danger: true,
size: 'small',
style: {
paddingLeft: '16px',
paddingRight: '16px',
},
}}
cancelButtonProps={{
size: 'small',
style: {
paddingLeft: '16px',
paddingRight: '16px',
},
}}
>
<div className="tip-info">

1
km-console/packages/layout-clusters-fe/src/pages/TopicList/index.less
View File

@@ -71,6 +71,7 @@
padding: 0 14px;
font-size: 13px;
background: #fffae0;
border-radius: 4px;
.anticon {
color: #ffc300;
margin-right: 4px;

4
km-console/packages/layout-clusters-fe/src/pages/TopicList/index.tsx
View File

@@ -269,10 +269,10 @@ const AutoPage = (props: any) => {
const menu = (
<Menu>
<Menu.Item>
<a onClick={() => setChangeVisible(true)}>批量扩缩副本</a>
<a onClick={() => setChangeVisible(true)}>扩缩副本</a>
</Menu.Item>
<Menu.Item>
<a onClick={() => setMoveVisible(true)}>批量迁移</a>
<a onClick={() => setMoveVisible(true)}>迁移副本</a>
</Menu.Item>
</Menu>
);

6
km-console/packages/layout-clusters-fe/src/style-addition.less
View File

@@ -281,7 +281,7 @@
border-top-right-radius: 12px;
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);
height: calc(100vh - 222px);
// overflow: auto;
overflow: hidden;
}
// select 覆盖hover样式
@@ -337,6 +337,10 @@
.@{select-prefix-cls}-selector {
background: rgba(33, 37, 41, 0.06);
border: none;
// select 单选选中后再次打开选择列表时，输入框内文字颜色保持一致
.@{select-prefix-cls}-selection-item{
color: @input-color;
}
}
}