This is an automated email from the ASF dual-hosted git repository.
arafat2198 pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/ozone.git
The following commit(s) were added to refs/heads/master by this push:
new 2b1524b596 HDDS-11609. Switch to Recon v2 UI as the default UI (#7358)
2b1524b596 is described below
commit 2b1524b596f84ce3c7c04e7e1bdca1f49324b77f
Author: Abhishek Pal <[email protected]>
AuthorDate: Wed Nov 6 13:35:59 2024 +0530
HDDS-11609. Switch to Recon v2 UI as the default UI (#7358)
---
.../webapps/recon/ozone-recon-web/src/app.tsx | 69 +++++++-------
.../src/v2/pages/notFound/notFound.tsx | 103 +++++++++++++++++++++
.../recon/ozone-recon-web/src/v2/routes-v2.tsx | 9 ++
3 files changed, 150 insertions(+), 31 deletions(-)
diff --git
a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx
b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx
index ceb633f603..0b7607f297 100644
---
a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx
+++
b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx
@@ -32,6 +32,7 @@ import classNames from 'classnames';
import Loader from '@/v2/components/loader/loader';
import './app.less';
+import NotFound from '@/v2/pages/notFound/notFound';
const {
Header, Content, Footer
@@ -39,7 +40,7 @@ const {
interface IAppState {
collapsed: boolean;
- enableNewUI: boolean;
+ enableOldUI: boolean;
}
class App extends React.Component<Record<string, object>, IAppState> {
@@ -47,7 +48,7 @@ class App extends React.Component<Record<string, object>,
IAppState> {
super(props);
this.state = {
collapsed: false,
- enableNewUI: false
+ enableOldUI: false
};
}
@@ -56,7 +57,7 @@ class App extends React.Component<Record<string, object>,
IAppState> {
};
render() {
- const { collapsed, enableNewUI } = this.state;
+ const { collapsed, enableOldUI } = this.state;
const layoutClass = classNames('content-layout', { 'sidebar-collapsed':
collapsed });
@@ -64,40 +65,46 @@ class App extends React.Component<Record<string, object>,
IAppState> {
<Router>
<Layout style={{ minHeight: '100vh' }}>
{
- (enableNewUI)
- ? <NavBarV2 collapsed={collapsed} onCollapse={this.onCollapse} />
- : <NavBar collapsed={collapsed} onCollapse={this.onCollapse} />
+ (enableOldUI)
+ ? <NavBar collapsed={collapsed} onCollapse={this.onCollapse} />
+ : <NavBarV2 collapsed={collapsed} onCollapse={this.onCollapse} />
}
<Layout className={layoutClass}>
<Header>
- <div style={{ margin: '16px 0', display: 'flex', justifyContent:
'space-between' }}>
- {(enableNewUI) ? <BreadcrumbsV2 /> : <Breadcrumbs />}
- <AntDSwitch
- disabled={true}
- checkedChildren={<div style={{ paddingLeft: '2px' }}>New
UI</div>}
- onChange={(checked: boolean) => {
- this.setState({
- enableNewUI: checked
- });
- }} />
+ <div style={{ display: 'flex', justifyContent: 'space-between',
alignItems: 'center' }}>
+ {(enableOldUI) ? <Breadcrumbs /> : <BreadcrumbsV2 />}
+ <span>
+ <span style={{ marginRight: '8px', color: '#515151'}}>Switch
to</span>
+ <AntDSwitch
+ unCheckedChildren={<div style={{ paddingRight: '2px'
}}>Old UI</div>}
+ checkedChildren={<div style={{ paddingLeft: '2px' }}>New
UI</div>}
+ onChange={(checked: boolean) => {
+ this.setState({
+ enableOldUI: checked
+ });
+ }} />
+ </span>
</div>
</Header>
- <Content style={(enableNewUI) ? {} : { margin: '0 16px 0',
overflow: 'initial' }}>
- <Switch>
- <Route exact path='/'>
- <Redirect to='/Overview' />
- </Route>
- {(enableNewUI)
- ? <Suspense fallback={<Loader/>}>
- {routesV2.map(
+ <Content style={(enableOldUI) ? { margin: '0 16px 0', overflow:
'initial' } : {}}>
+ <Suspense fallback={<Loader />}>
+ <Switch>
+ <Route exact path='/'>
+ <Redirect to='/Overview' />
+ </Route>
+ {(enableOldUI)
+ ? routes.map(
(route, index) => <MakeRouteWithSubRoutes key={index}
{...route} />
- )}
- </Suspense>
- : routes.map(
- (route, index) => <MakeRouteWithSubRoutes key={index}
{...route} />
- )
- }
- </Switch>
+ )
+ : routesV2.map(
+ (route, index) => {
+ return <MakeRouteWithSubRoutes key={index} {...route}
/>
+ }
+ )
+ }
+ <Route component={NotFound} />
+ </Switch>
+ </Suspense>
</Content>
<Footer style={{ textAlign: 'center' }} />
</Layout>
diff --git
a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/notFound/notFound.tsx
b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/notFound/notFound.tsx
new file mode 100644
index 0000000000..4664f99f2c
--- /dev/null
+++
b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/notFound/notFound.tsx
@@ -0,0 +1,103 @@
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements. See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership. The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License. You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+import React from 'react';
+import { Button } from 'antd';
+import { ArrowLeftOutlined } from '@ant-design/icons';
+import { useHistory } from 'react-router-dom';
+
+// Declare SVG constant instead of importing a file to help loading
+const notFoundIcon = (
+ <svg width="100%" height="100%" viewBox="0 0 1080 1080" style={{ fillRule:
'evenodd', clipRule: 'evenodd', strokeLinecap: 'round', strokeLinejoin:
'round', strokeMiterlimit: 1.5 }}>
+ <g transform="matrix(1.44095,0,0,1.44095,-185.216,-251.373)">
+ <g transform="matrix(0.944978,0,0,0.914657,24.9329,68.941)">
+ <path d="M247.428,443.796C248.822,443.952 391.105,376.828
247.428,443.796C103.751,510.764 115.658,684.797 231.483,694.498C347.308,704.199
384.351,672.783 454.345,635.793C524.34,598.803 525.667,599.868
561.552,593.322C597.437,586.777 583.99,603.712 574.32,632.611C564.65,661.511
493.253,787.738 741.087,710.394C988.922,633.051 882.616,522.813
771.238,531.547C659.86,540.281 579.512,617.269 590.123,579.339C600.734,541.408
714.633,402.262 579.57,382.851C444.507,363.439 246.035,443.641 [...]
+ </g>
+ <g
transform="matrix(0.644866,-1.18562e-16,-8.57454e-17,-0.27393,51.8343,793.841)">
+ <rect x="215.614" y="745.673" width="711.164" height="5.027" style={{
fill: 'rgb(4,15,66)', stroke: 'black', strokeOpacity: 0, strokeWidth: '16.81px'
}} />
+ </g>
+ <g
transform="matrix(0.0449181,2.51391e-16,-3.87546e-16,-0.298306,128.725,812.065)">
+ <rect x="215.614" y="745.673" width="711.164" height="5.027" style={{
fill: 'rgb(4,15,66)', stroke: 'black', strokeOpacity: 0, strokeWidth: '39.04px'
}} />
+ </g>
+ <g
transform="matrix(0.0536855,1.21321e-16,-4.8904e-18,0.178017,501.717,463.557)">
+ <rect x="215.614" y="745.673" width="711.164" height="5.027" style={{
fill: 'rgb(4,15,66)', stroke: 'black', strokeOpacity: 0, strokeWidth: '63.34px'
}} />
+ </g>
+ <g transform="matrix(14.9468,0,0,14.9468,-2160.92,-6553.61)">
+ <g transform="matrix(24,0,0,24,170.176,478.583)">
+ </g>
+ <text x="156.406px" y="478.583px" style={{ fontFamily: 'Roboto-Bold,
Roboto', fontWeight: 700, fontSize: '24px', fill: 'rgb(11,36,0)' }}>4</text>
+ </g>
+ <g transform="matrix(1.74862,0,0,1.74862,-357.721,-43.1954)">
+ <g transform="matrix(192,0,0,192,526.902,357.026)">
+ </g>
+ <text x="416.746px" y="357.026px" style={{ fontFamily: 'Roboto-Bold,
Roboto', fontWeight: 700, fontSize: '192px', fill: 'rgb(11,36,0)' }}>0</text>
+ </g>
+ <g transform="matrix(21.2052,0,0,21.2052,-2759.51,-9389.18)">
+ <g transform="matrix(24,0,0,24,170.176,478.583)">
+ </g>
+ <text x="156.406px" y="478.583px" style={{ fontFamily: 'Roboto-Bold,
Roboto', fontWeight: 700, fontSize: '24px', fill: 'rgb(11,36,0)' }}>4</text>
+ </g>
+ <g transform="matrix(1,0,0,1,-27,0)">
+ <g transform="matrix(1,0,0,0.589632,0,242.476)">
+ <path d="M617.69,423.839L617.69,589.68C617.69,590.339
617.375,590.874 616.986,590.874L615.578,590.874C615.19,590.874 614.874,590.339
614.874,589.68L614.874,423.839C614.874,423.18 615.19,422.645
615.578,422.645L616.986,422.645C617.375,422.645 617.69,423.18 617.69,423.839Z"
style={{ fill: 'rgb(23,51,38)', stroke: 'rgb(43,43,43)', strokeOpacity: 0,
strokeWidth: '0.85px' }} />
+ </g>
+ <g
transform="matrix(0.851104,0.0593827,-0.0701034,1.00476,128.082,-24.3374)">
+ <path
d="M601.027,497.013L640.442,497.013L648.218,502.656L641.04,509.834L600.77,509.834L601.027,497.013Z"
style={{ fill: 'rgb(9,172,98)', stroke: 'rgb(43,43,43)', strokeOpacity: 0,
strokeWidth: '0.74px' }} />
+ </g>
+ <g transform="matrix(-0.716372,0,0,1,1058.43,-0.0408301)">
+ <path
d="M601.027,497.013L640.442,497.013L650.733,504.094L641.04,509.834L600.77,509.834L601.027,497.013Z"
style={{ fill: 'rgb(0,166,91)', stroke: 'rgb(43,43,43)', strokeOpacity: 0,
strokeWidth: '0.8px' }} />
+ </g>
+ </g>
+ <g transform="matrix(0.100667,0,0,0.100667,514.784,673.301)">
+ <g transform="matrix(22,0,0,22,1001.53,645.714)">
+ </g>
+ <text x="846.825px" y="645.714px" style={{ fontFamily: 'Roboto-Bold,
Roboto', fontWeight: 700, fontSize: '22px', fill: 'rgb(108,217,156)'
}}>de<tspan x="870.974px 881.931px " y="645.714px 645.714px
">va</tspan>bhishekpal</text>
+ </g>
+ </g>
+ </svg>
+)
+
+const contentStyles: React.CSSProperties = {
+ height: '80vh',
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ gap: '20px',
+ fontSize: '18px',
+ color: '#8a8a8a',
+ fontWeight: 400
+}
+
+const NotFound: React.FC<{}> = () => {
+ const history = useHistory();
+
+ return (
+ <div style={contentStyles}>
+ <div style={{ width: '100%', height: '70%' }}> {notFoundIcon} </div>
+ The page you visited does not exist
+ <Button type='primary'
+ onClick={() => { history.goBack() }}>
+ <ArrowLeftOutlined />
+ Go Back
+ </Button>
+ </div>
+ )
+}
+
+export default NotFound;
\ No newline at end of file
diff --git
a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/routes-v2.tsx
b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/routes-v2.tsx
index 9f27b7cae7..c3ff1b97e3 100644
---
a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/routes-v2.tsx
+++
b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/routes-v2.tsx
@@ -17,6 +17,9 @@
*/
import { lazy } from 'react';
+import { Heatmap } from '@/views/heatMap/heatmap';
+import NotFound from '@/v2/pages/notFound/notFound';
+
const Overview = lazy(() => import('@/v2/pages/overview/overview'));
const Volumes = lazy(() => import('@/v2/pages/volumes/volumes'))
const Buckets = lazy(() => import('@/v2/pages/buckets/buckets'));
@@ -27,6 +30,7 @@ const Containers = lazy(() =>
import('@/v2/pages/containers/containers'));
const Insights = lazy(() => import('@/v2/pages/insights/insights'));
const OMDBInsights = lazy(() => import('@/v2/pages/insights/omInsights'));
+
export const routesV2 = [
{
path: '/Overview',
@@ -63,5 +67,10 @@ export const routesV2 = [
{
path: '/Om',
component: OMDBInsights
+ },
+ // TODO: Replace with V2 heatmap once rea
+ {
+ path: '/Heatmap',
+ component: Heatmap
}
];
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
