Skip to content

Commit f013b67

Browse files
devabhishekpaldevabhishekpal
committed
HDDS-13183. Create cluster capacity page
1 parent a5e1cd0 commit f013b67

File tree

19 files changed

+982
-5
lines changed

19 files changed

+982
-5
lines changed

‎hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/api/db.json‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6866,5 +6866,63 @@
68666866
"selectedRowKeys": [
68676867
"b5907812-a5f2-11ea-bb37-0242ac130011"
68686868
]
6869+
},
6870+
"utilization": {
6871+
"globalStorage": {
6872+
"totalUsedSpace": 1632526336,
6873+
"totalFreeSpace": 596013527040,
6874+
"totalCapacity": 746331226935
6875+
},
6876+
"globalNamespace": {
6877+
"totalUsedSpace": 0,
6878+
"totalKeys": 0
6879+
},
6880+
"usedSpaceBreakdown": {
6881+
"openKeysBytes": 10000,
6882+
"committedBytes": 250100,
6883+
"containerPreAllocated": 1073725932,
6884+
"deletionPendingBytes": {
6885+
"total": 3765706484,
6886+
"byStage": {
6887+
"DN": {
6888+
"pendingBytes": 3758096384
6889+
},
6890+
"SCM": {
6891+
"pendingBytes": 3145600
6892+
},
6893+
"OM": {
6894+
"pendingKeyBytes": 1254500,
6895+
"pendingBytes": 4464500,
6896+
"pendingDirectoryBytes": 3210000
6897+
}
6898+
}
6899+
}
6900+
},
6901+
"dataNodeUsage": [
6902+
{
6903+
"uuid": "1477a674-b86c-43b9-ae84-1586c5720125",
6904+
"capacity": 1080992018248,
6905+
"used": 4398612,
6906+
"remaining": 1019728228844,
6907+
"committed": 1073725932,
6908+
"pendingDeletion": 1013125932
6909+
},
6910+
{
6911+
"uuid": "c040c145-b44f-42a8-a3a3-b18171c8c01c",
6912+
"capacity": 1080992018248,
6913+
"used": 4382720,
6914+
"remaining": 1019728248832,
6915+
"committed": 0,
6916+
"pendingDeletion": 11025932
6917+
},
6918+
{
6919+
"uuid": "1d076fc9-ece2-43e7-9fca-bb1e8646a56d",
6920+
"capacity": 1080992018248,
6921+
"used": 4382720,
6922+
"remaining": 1019728248832,
6923+
"committed": 1023725932,
6924+
"pendingDeletion": 21125932
6925+
}
6926+
]
68696927
}
68706928
}

‎hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/api/routes.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,5 +53,7 @@
5353
"/keys/deletePending/dirs?limit=*": "/dirdeletePending",
5454
"/datanodes/decommission/info": "/decommissioninfo",
5555
"/datanodes/decommission/info/datanode?uuid=*": "/DatanodesDecommissionInfo",
56-
"/datanodes/remove": "/datanodesRemove"
56+
"/datanodes/remove": "/datanodesRemove",
57+
58+
"/storageDistribution": "/utilization"
5759
}

‎hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/utils/themeIcons.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,3 +98,30 @@ export class ReplicationIcon extends React.PureComponent<IReplicationIconProps>
9898
return icon;
9999
}
100100
}
101+
102+
interface IGraphLegendIconProps {
103+
color: string;
104+
height?: number;
105+
};
106+
export class GraphLegendIcon extends React.PureComponent<IGraphLegendIconProps> {
107+
render() {
108+
const { color, height = 14 } = this.props;
109+
110+
return (
111+
<svg
112+
width="18"
113+
height={height}
114+
viewBox={`0 0 18 ${height}`}
115+
xmlns="http://www.w3.org/2000/svg"
116+
style={{ display: 'inline-block', verticalAlign: 'middle' }} // Optional: helps with alignment
117+
>
118+
<circle
119+
cx="6"
120+
cy="6"
121+
r="6"
122+
fill={color} // Use the color prop for the fill
123+
/>
124+
</svg>
125+
)
126+
}
127+
};

hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewCardWrapper.tsx renamed to hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/cards/overviewCardWrapper.tsx

File renamed without changes.

hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewSimpleCard.tsx renamed to hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/cards/overviewSimpleCard.tsx

File renamed without changes.

hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewStorageCard.tsx renamed to hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/cards/overviewStorageCard.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import filesize from 'filesize';
2121
import { Card, Row, Col, Table, Tag } from 'antd';
2222

2323
import EChart from '@/v2/components/eChart/eChart';
24-
import OverviewCardWrapper from '@/v2/components/overviewCard/overviewCardWrapper';
24+
import OverviewCardWrapper from '@/v2/components/cards/overviewCardWrapper';
2525

2626
import { StorageReport } from '@/v2/types/overview.types';
2727

hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewSummaryCard.tsx renamed to hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/cards/overviewSummaryCard.tsx

File renamed without changes.

‎hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/navBar/navBar.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,12 @@ const NavBar: React.FC<NavBarProps> = ({
138138
<Link to='/NamespaceUsage' />
139139
</Menu.Item>
140140
), (
141+
<Menu.Item key='/Capacity'
142+
icon={<PieChartOutlined />}>
143+
<span>Cluster Capacity</span>
144+
<Link to='/Capacity' />
145+
</Menu.Item>
146+
),(
141147
isHeatmapEnabled &&
142148
<Menu.Item key='/Heatmap'
143149
icon={<LayoutOutlined />}>

‎hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/capacity/capacity.less‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
/*
2+
* Licensed to the Apache Software Foundation (ASF) under one
3+
* or more contributor license agreements. See the NOTICE file
4+
* distributed with this work for additional information
5+
* regarding copyright ownership. The ASF licenses this file
6+
* to you under the Apache License, Version 2.0 (the
7+
* "License"); you may not use this file except in compliance
8+
* with the License. You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing, software
13+
* distributed under the License is distributed on an "AS IS" BASIS,
14+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15+
* See the License for the specific language governing permissions and
16+
* limitations under the License.
17+
*/
18+
19+
.data-container {
20+
display: flex;
21+
flex-direction: column;
22+
gap: 16px;
23+
height: 100%;
24+
25+
.section-title {
26+
flex-grow: 0;
27+
font-family: Roboto;
28+
font-size: 20px;
29+
font-weight: 500;
30+
font-stretch: normal;
31+
font-style: normal;
32+
line-height: 1.4;
33+
letter-spacing: normal;
34+
text-align: left;
35+
color: #1b2329;
36+
}
37+
38+
.cluster-card-data-container {
39+
display: flex;
40+
justify-content: space-between;
41+
gap: 16px;
42+
43+
.cluster-card-statistic {
44+
flex: 2 1 10em;
45+
}
46+
47+
.data-detail-item {
48+
display: flex;
49+
width: 100%;
50+
flex-direction: column;
51+
justify-content: flex-start;
52+
align-items: stretch;
53+
padding: 16px;
54+
border-radius: 3px;
55+
background-color: #f4f5f6;
56+
57+
.data-detail-breakdown-container {
58+
.data-detail-breakdown-statistic {
59+
flex: 1 0 10em;
60+
}
61+
}
62+
}
63+
64+
.data-detail-breakdown-container {
65+
.ant-statistic-title {
66+
margin-bottom: 0;
67+
}
68+
69+
.ant-statistic-content {
70+
.ant-statistic-content-prefix {
71+
margin-right: 1px;
72+
}
73+
.ant-statistic-content-value {
74+
font-size: 16px;
75+
}
76+
}
77+
}
78+
}
79+
80+
.stacked-progress {
81+
display: flex;
82+
width: 100%;
83+
height: 8px;
84+
border-radius: 100px;
85+
overflow: hidden;
86+
margin: 24px auto 8px auto;
87+
}
88+
.stacked-progress-empty {
89+
width: 100%;
90+
height: 8px;
91+
border-radius: 100px;
92+
background-color: #f4f5f6;
93+
}
94+
}
95+
96+
.unused-space-breakdown {
97+
display: grid;
98+
grid-template-columns: 150px auto;
99+
grid-column-gap: 20px;
100+
grid-row-gap: 4px;
101+
102+
.ant-tag {
103+
text-align: center;
104+
}
105+
}
106+
107+
.ant-statistic-title {
108+
font-size: 12px;
109+
}
110+
111+
// This is for the suffix part of the value ex: TB, GB etc
112+
.ant-statistic-content-suffix {
113+
font-family: Roboto;
114+
font-size: 14px;
115+
font-weight: normal;
116+
font-stretch: normal;
117+
font-style: normal;
118+
line-height: 1.43;
119+
letter-spacing: normal;
120+
text-align: left;
121+
vertical-align: text-top;
122+
color: rgba(0, 0, 0, 0.85);
123+
margin: 3px 0 0 1px;
124+
}
125+
126+
.ant-divider-horizontal {
127+
margin: 16px 0;
128+
}
129+
130+
.ant-card-body {
131+
// This is to enforce 16px padding for card body which is 12px by default
132+
padding: 16px !important;
133+
}

0 commit comments

Comments
 (0)