Skip to content

Commit 941dd4f

Browse files
GraceWalkZQKC
GraceWalk
authored and
ZQKC
committed
feat: 支持 Zookeeper 模块
1 parent 5f6df36 commit 941dd4f

File tree

22 files changed

+1065
-92
lines changed

22 files changed

+1065
-92
lines changed

‎km-console/packages/config-manager-fe/package-lock.json‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎km-console/packages/config-manager-fe/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
"build": "cross-env NODE_ENV=production webpack --max_old_space_size=8000"
2222
},
2323
"dependencies": {
24-
"@knowdesign/icons": "^1.0.0",
24+
"@knowdesign/icons": "^1.0.2",
2525
"babel-preset-react-app": "^10.0.0",
2626
"classnames": "^2.2.6",
2727
"dotenv": "^16.0.1",

‎km-console/packages/layout-clusters-fe/package-lock.json‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎km-console/packages/layout-clusters-fe/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
"dependencies": {
3636
"@ant-design/compatible": "^1.0.8",
3737
"@ant-design/icons": "^4.6.2",
38-
"@knowdesign/icons": "^1.0.1",
38+
"@knowdesign/icons": "^1.0.2",
3939
"@types/react": "^17.0.39",
4040
"@types/react-copy-to-clipboard": "^5.0.2",
4141
"@types/react-dom": "^17.0.11",

‎km-console/packages/layout-clusters-fe/src/assets/beta-tag.png‎

6.25 KB
Loading

‎km-console/packages/layout-clusters-fe/src/components/ChartOperateBar/NodeScope.tsx‎

Lines changed: 63 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ const OptionsDefault = [
2626

2727
const NodeScope = ({ nodeScopeModule, change }: propsType) => {
2828
const {
29-
hasCustomScope,
3029
customScopeList: customList,
3130
scopeName = '',
3231
scopeLabel = '自定义范围',
@@ -129,79 +128,75 @@ const NodeScope = ({ nodeScopeModule, change }: propsType) => {
129128
</Space>
130129
</Radio.Group>
131130
</div>
132-
{hasCustomScope && (
133-
<div className="flx_r">
134-
<h6 className="time_title">{scopeLabel}</h6>
135-
<div className="custom-scope">
136-
<div className="check-row">
137-
<Checkbox className="check-all" indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
138-
全选
139-
</Checkbox>
140-
<Input
141-
className="search-input"
142-
suffix={<IconFont type="icon-fangdajing" style={{ fontSize: '16px' }} />}
143-
size="small"
144-
placeholder={searchPlaceholder}
145-
onChange={(e) => setScopeSearchValue(e.target.value)}
146-
/>
147-
</div>
148-
<div className="fixed-height">
149-
<Checkbox.Group style={{ width: '100%' }} onChange={checkChange} value={checkedListTemp}>
150-
<Row gutter={[10, 12]}>
151-
{customList
152-
.filter((item) => item.label.includes(scopeSearchValue))
153-
.map((item) => (
154-
<Col span={12} key={item.value}>
155-
<Checkbox value={item.value}>{item.label}</Checkbox>
156-
</Col>
157-
))}
158-
</Row>
159-
</Checkbox.Group>
160-
</div>
161-
162-
<div className="btn-con">
163-
<Button
164-
type="primary"
165-
size="small"
166-
className="btn-sure"
167-
onClick={customSure}
168-
disabled={checkedListTemp?.length > 0 ? false : true}
169-
>
170-
确定
171-
</Button>
172-
<Button size="small" onClick={customCancel}>
173-
取消
174-
</Button>
175-
</div>
131+
<div className="flx_r">
132+
<h6 className="time_title">{scopeLabel}</h6>
133+
<div className="custom-scope">
134+
<div className="check-row">
135+
<Checkbox className="check-all" indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
136+
全选
137+
</Checkbox>
138+
<Input
139+
className="search-input"
140+
suffix={<IconFont type="icon-fangdajing" style={{ fontSize: '16px' }} />}
141+
size="small"
142+
placeholder={searchPlaceholder}
143+
onChange={(e) => setScopeSearchValue(e.target.value)}
144+
/>
145+
</div>
146+
<div className="fixed-height">
147+
<Checkbox.Group style={{ width: '100%' }} onChange={checkChange} value={checkedListTemp}>
148+
<Row gutter={[10, 12]}>
149+
{customList
150+
.filter((item) => item.label.includes(scopeSearchValue))
151+
.map((item) => (
152+
<Col span={12} key={item.value}>
153+
<Checkbox value={item.value}>{item.label}</Checkbox>
154+
</Col>
155+
))}
156+
</Row>
157+
</Checkbox.Group>
158+
</div>
159+
160+
<div className="btn-con">
161+
<Button
162+
type="primary"
163+
size="small"
164+
className="btn-sure"
165+
onClick={customSure}
166+
disabled={checkedListTemp?.length > 0 ? false : true}
167+
>
168+
确定
169+
</Button>
170+
<Button size="small" onClick={customCancel}>
171+
取消
172+
</Button>
176173
</div>
177174
</div>
178-
)}
175+
</div>
179176
</div>
180177
</div>
181178
);
182179
return (
183-
<>
184-
<div id="d-node-scope">
185-
<div className="scope-title">{scopeName}筛选：</div>
186-
<Popover
187-
trigger={['click']}
188-
visible={popVisible}
189-
content={clickContent}
190-
placement="bottomRight"
191-
overlayClassName={`d-node-scope-popover ${hasCustomScope ? 'large-size' : ''}`}
192-
onVisibleChange={visibleChange}
193-
>
194-
<span className="input-span">
195-
<Input
196-
className={isTop ? 'relativeTime d-node-scope-input' : 'absoluteTime d-node-scope-input'}
197-
value={inputValue}
198-
readOnly={true}
199-
suffix={<IconFont type="icon-jiantou1" rotate={90} style={{ color: '#74788D' }}></IconFont>}
200-
/>
201-
</span>
202-
</Popover>
203-
</div>
204-
</>
180+
<div id="d-node-scope">
181+
<div className="scope-title">{scopeName}筛选：</div>
182+
<Popover
183+
trigger={['click']}
184+
visible={popVisible}
185+
content={clickContent}
186+
placement="bottomRight"
187+
overlayClassName="d-node-scope-popover large-size"
188+
onVisibleChange={visibleChange}
189+
>
190+
<span className="input-span">
191+
<Input
192+
className={isTop ? 'relativeTime d-node-scope-input' : 'absoluteTime d-node-scope-input'}
193+
value={inputValue}
194+
readOnly={true}
195+
suffix={<IconFont type="icon-jiantou1" rotate={90} style={{ color: '#74788D' }}></IconFont>}
196+
/>
197+
</span>
198+
</Popover>
199+
</div>
205200
);
206201
};
207202

‎km-console/packages/layout-clusters-fe/src/components/ChartOperateBar/index.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,6 @@ export interface IcustomScope {
4747
}
4848

4949
export interface InodeScopeModule {
50-
hasCustomScope: boolean;
5150
customScopeList: IcustomScope[];
5251
scopeName?: string;
5352
scopeLabel?: string;
@@ -87,7 +86,6 @@ const GRID_SIZE_OPTIONS = [
8786
const MetricOperateBar = ({
8887
metricSelect,
8988
nodeScopeModule = {
90-
hasCustomScope: false,
9189
customScopeList: [],
9290
},
9391
hideNodeScope = false,

‎km-console/packages/layout-clusters-fe/src/components/DraggableCharts/config.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { getBasicChartConfig, CHART_COLOR_LIST } from '@src/constants/chartConfi
44
const METRIC_DASHBOARD_REQ_MAP = {
55
[MetricType.Broker]: (clusterId: string) => api.getDashboardMetricChartData(clusterId, MetricType.Broker),
66
[MetricType.Topic]: (clusterId: string) => api.getDashboardMetricChartData(clusterId, MetricType.Topic),
7-
[MetricType.Zookeeper]: (clusterId: string) => '',
7+
[MetricType.Zookeeper]: (clusterId: string) => api.getZookeeperMetrics(clusterId),
88
};
99

1010
export const getMetricDashboardReq = (clusterId: string, type: MetricType.Broker | MetricType.Topic | MetricType.Zookeeper) =>

‎km-console/packages/layout-clusters-fe/src/components/DraggableCharts/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -108,10 +108,10 @@ const DraggableCharts = (props: PropsType): JSX.Element => {
108108
startTime,
109109
endTime,
110110
metricsNames: selectedMetricNames,
111-
topNu: curHeaderOptions?.scopeData?.isTop ? curHeaderOptions.scopeData.data : null,
112111
},
113112
dashboardType === MetricType.Broker || dashboardType === MetricType.Topic
114113
? {
114+
topNu: curHeaderOptions?.scopeData?.isTop ? curHeaderOptions.scopeData.data : null,
115115
[dashboardType === MetricType.Broker ? 'brokerIds' : 'topics']: curHeaderOptions?.scopeData?.isTop
116116
? null
117117
: curHeaderOptions.scopeData.data,
@@ -233,8 +233,8 @@ const DraggableCharts = (props: PropsType): JSX.Element => {
233233
<div id="dashboard-drag-chart" className="topic-dashboard">
234234
<ChartOperateBar
235235
onChange={ksHeaderChange}
236+
hideNodeScope={dashboardType === MetricType.Zookeeper}
236237
nodeScopeModule={{
237-
hasCustomScope: !(dashboardType === MetricType.Zookeeper),
238238
customScopeList: scopeList,
239239
scopeName: dashboardType === MetricType.Broker ? 'Broker' : dashboardType === MetricType.Topic ? 'Topic' : 'Zookeeper',
240240
scopeLabel: `自定义 ${

km-console/packages/layout-clusters-fe/src/constants/menu.ts renamed to km-console/packages/layout-clusters-fe/src/constants/menu.tsx

Lines changed: 36 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,23 @@
1+
import React from 'react';
12
import { ClustersPermissionMap } from '@src/pages/CommonConfig';
2-
3+
import { ClusterRunState } from '@src/pages/MutliClusterPage/List';
34
const pkgJson = require('../../package');
45
export const systemKey = pkgJson.ident;
56

6-
export const leftMenus = (clusterId?: string) => ({
7+
export const leftMenus = (clusterId?: string, clusterRunState?: number) => ({
78
name: `${systemKey}`,
89
icon: 'icon-jiqun',
910
path: `cluster/${clusterId}`,
1011
children: [
1112
{
1213
name: 'cluster',
1314
path: 'cluster',
14-
icon: 'icon-Cluster',
15+
icon: 'icon-Cluster1',
1516
},
1617
{
1718
name: 'broker',
1819
path: 'broker',
19-
icon: 'icon-Brokers',
20+
icon: 'icon-Brokers1',
2021
children: [
2122
{
2223
name: 'dashbord',
@@ -38,7 +39,7 @@ export const leftMenus = (clusterId?: string) => ({
3839
{
3940
name: 'topic',
4041
path: 'topic',
41-
icon: 'icon-Topics',
42+
icon: 'icon-Topics1',
4243
children: [
4344
{
4445
name: 'dashbord',
@@ -52,10 +53,36 @@ export const leftMenus = (clusterId?: string) => ({
5253
},
5354
],
5455
},
56+
clusterRunState && clusterRunState !== ClusterRunState.Raft
57+
? {
58+
name: (intl: any) => {
59+
return (
60+
<div className="menu-item-with-beta-tag">
61+
<span>{intl.formatMessage({ id: 'menu.cluster.zookeeper' })}</span>
62+
<div className="beta-tag"></div>
63+
</div>
64+
);
65+
},
66+
path: 'zookeeper',
67+
icon: 'icon-Zookeeper',
68+
children: [
69+
{
70+
name: (intl: any) => <span>{intl.formatMessage({ id: 'menu.cluster.zookeeper.dashboard' })}</span>,
71+
path: '',
72+
icon: '#icon-luoji',
73+
},
74+
{
75+
name: (intl: any) => <span>{intl.formatMessage({ id: 'menu.cluster.zookeeper.servers' })}</span>,
76+
path: 'servers',
77+
icon: 'icon-Jobs',
78+
},
79+
],
80+
}
81+
: undefined,
5582
{
5683
name: 'consumer-group',
5784
path: 'consumers',
58-
icon: 'icon-ConsumerGroups',
85+
icon: 'icon-Consumer',
5986
// children: [
6087
// {
6188
// name: 'operating-state',
@@ -72,7 +99,7 @@ export const leftMenus = (clusterId?: string) => ({
7299
{
73100
name: 'operation',
74101
path: 'operation',
75-
icon: 'icon-Jobs',
102+
icon: 'icon-Operation',
76103
children: [
77104
process.env.BUSINESS_VERSION
78105
? {
@@ -92,7 +119,7 @@ export const leftMenus = (clusterId?: string) => ({
92119
? {
93120
name: 'produce-consume',
94121
path: 'testing',
95-
icon: 'icon-a-ProduceConsume',
122+
icon: 'icon-Message',
96123
permissionPoint: [ClustersPermissionMap.TEST_CONSUMER, ClustersPermissionMap.TEST_PRODUCER],
97124
children: [
98125
{
@@ -113,7 +140,7 @@ export const leftMenus = (clusterId?: string) => ({
113140
{
114141
name: 'security',
115142
path: 'security',
116-
icon: 'icon-ACLs',
143+
icon: 'icon-Security',
117144
children: [
118145
{
119146
name: 'acls',

0 commit comments

Comments
 (0)