Skip to content

HDDS-11188. Initial setup for new UI layout and enable users to switch to new UI #6953

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tanvipenumudy merged 10 commits into from
Jul 23, 2024
Merged

HDDS-11188. Initial setup for new UI layout and enable users to switch to new UI #6953

Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
9d43c91
Added switch for New UI with initial V2 changes
devabhishekpal Jul 16, 2024
94dce25
Disabled the UI switch
devabhishekpal Jul 16, 2024
dc00eec
Added apache license text to error boundary component, and removed un…
devabhishekpal Jul 16, 2024
c788a82
Merge branch 'master' into HDDS-11188
devabhishekpal Jul 19, 2024
c20733a
Fixed overview file imports, removed empty files
devabhishekpal Jul 19, 2024
203b00f
Fixed build issues
devabhishekpal Jul 19, 2024
ce70730
Changed to better state name for switch
devabhishekpal Jul 23, 2024
5bdb850
Disable switch
devabhishekpal Jul 23, 2024
84b8fe3
Removed all unrelated file setup and route mappings
devabhishekpal Jul 23, 2024
08d1d7d
Removed unused import
devabhishekpal Jul 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 20 additions & 7 deletions hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,28 +18,32 @@

import React from 'react';

import { Layout } from 'antd';
import './app.less';
import { Switch as AntDSwitch, Layout } from 'antd';
import NavBar from './components/navBar/navBar';
import Breadcrumbs from './components/breadcrumbs/breadcrumbs';
import { HashRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
import { routes } from './routes';
import { MakeRouteWithSubRoutes } from './makeRouteWithSubRoutes';
import { routes } from '@/routes';
import { MakeRouteWithSubRoutes } from '@/makeRouteWithSubRoutes';
import classNames from 'classnames';

import './app.less';

const {
Header, Content, Footer
} = Layout;

interface IAppState {
collapsed: boolean;
enableNewUI: boolean;
}

class App extends React.Component<Record<string, object>, IAppState> {
constructor(props = {}) {
super(props);
this.state = { collapsed: false };
this.state = {
collapsed: false,
enableNewUI: false
};
}

onCollapse = (collapsed: boolean) => {
Expand All @@ -50,14 +54,23 @@ class App extends React.Component<Record<string, object>, IAppState> {
const { collapsed } = this.state;
const layoutClass = classNames('content-layout', { 'sidebar-collapsed': collapsed });


return (
<Router>
<Layout style={{ minHeight: '100vh' }}>
<NavBar collapsed={collapsed} onCollapse={this.onCollapse} />
<Layout className={layoutClass}>
<Header>
<div style={{ margin: '16px 0' }}>
<div style={{ margin: '16px 0', display: 'flex', justifyContent: 'space-between' }}>
<Breadcrumbs />
<AntDSwitch
disabled={true}
checkedChildren={<div style={{ paddingLeft: '2px' }}>New UI</div>}
onChange={(checked: boolean) => {
this.setState({
enableNewUI: checked
});
}} />
</div>
</Header>
<Content style={{ margin: '0 16px 0', overflow: 'initial' }}>
Expand All @@ -80,4 +93,4 @@ class App extends React.Component<Record<string, object>, IAppState> {
}
}

export default App;
export default App;