diff --git a/src/App.jsx b/src/App.jsx index 6cdbde9023..1d9a3beae9 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,8 +1,6 @@ import React, { Fragment } from 'react'; import { HashRouter as Router, - Route, - Link, Redirect, Switch, } from 'react-router-dom'; @@ -10,30 +8,22 @@ import { import { BackgroundImage, BackgroundImageSrc, - Brand, Button, ButtonVariant, Nav, NavExpandable, - NavGroup, + NavList, NavItem, Page, PageHeader, - PageSection, - PageSectionVariants, - PageSidebar, - TextContent, - Text, - Toolbar, - ToolbarGroup, - ToolbarItem + PageSidebar } from '@patternfly/react-core'; +import { UserIcon } from '@patternfly/react-icons'; import { global_breakpoint_md as breakpointMd } from '@patternfly/react-tokens'; -import { css } from '@patternfly/react-styles'; import api from './api'; -import About from './components/About'; +// import About from './components/About'; import TowerLogo from './components/TowerLogo'; import ConditionalRedirect from './components/ConditionalRedirect'; @@ -52,63 +42,69 @@ import Organizations from './pages/Organizations'; import Portal from './pages/Portal'; import Projects from './pages/Projects'; import Schedules from './pages/Schedules'; -import Settings from './pages/Settings'; +import AuthSettings from './pages/AuthSettings'; +import JobsSettings from './pages/JobsSettings'; +import SystemSettings from './pages/SystemSettings'; +import UISettings from './pages/UISettings'; +import License from './pages/License'; import Teams from './pages/Teams'; import Templates from './pages/Templates'; import Users from './pages/Users'; class App extends React.Component { - constructor(props) { + constructor (props) { super(props); + const isNavOpen = typeof window !== 'undefined' && window.innerWidth >= parseInt(breakpointMd.value, 10); this.state = { - activeItem: window.location.hash.split("#/").pop().split("/").shift(), - isNavOpen: (typeof window !== 'undefined' && - window.innerWidth >= parseInt(breakpointMd.value, 10)), + isNavOpen, + activeGroup: 'views_group', + activeItem: 'views_group_dashboard' }; - - this.state.activeGroup = this.state.activeItem.startsWith("settings_group_") ? "settings": ""; } + onNavSelect = result => { + this.setState({ + activeItem: result.itemId, + activeGroup: result.groupId + }); + }; + onNavToggle = () => { - const { isNavOpen } = this.state; - - this.setState({ isNavOpen: !isNavOpen }); - } - - onNavSelect = ({ groupId, itemId }) => { - this.setState({ activeGroup: groupId || "", activeItem: itemId }); + this.setState(({ isNavOpen }) => ({ isNavOpen: !isNavOpen })); }; onLogoClick = () => { - this.setState({ activeItem: "dashboard" }); + this.setState({ activeGroup: 'views_group', activeItem: 'views_group_dashboard' }); } onDevLogout = () => { api.logout() .then(() => { - this.setState({ activeItem: "dashboard" }); - }) + this.setState({ activeGroup: 'views_group', activeItem: 'views_group_dashboard' }); + }); } - render() { + render () { const { activeItem, activeGroup, isNavOpen } = this.state; const { logo, loginInfo } = this.props; return ( - + api.isAuthenticated()} redirectPath="/" path="/login" component={() => } /> @@ -116,7 +112,7 @@ class App extends React.Component { header={( } - avatar={} + avatar={} showNavToggle onNavToggle={this.onNavToggle} /> @@ -125,50 +121,217 @@ class App extends React.Component { - - Dashboard - Jobs - Schedules - My View - - - Templates - Credentials - Projects - Inventories - Inventory Scripts - - - Organizations - Users - Teams - - - Credential Types - Notifications - Management Jobs - Instance Groups - Applications - - - Authentication + )} /> - )}> + )} + > !api.isAuthenticated()} redirectPath="/login" exact path="/" component={() => ()} /> !api.isAuthenticated()} redirectPath="/login" path="/home" component={Dashboard} /> !api.isAuthenticated()} redirectPath="/login" path="/jobs" component={Jobs} /> @@ -187,7 +350,11 @@ class App extends React.Component { !api.isAuthenticated()} redirectPath="/login" path="/management_jobs" component={ManagementJobs} /> !api.isAuthenticated()} redirectPath="/login" path="/instance_groups" component={InstanceGroups} /> !api.isAuthenticated()} redirectPath="/login" path="/applications" component={Applications} /> - !api.isAuthenticated()} redirectPath="/login" path="/settings" component={Settings} /> + !api.isAuthenticated()} redirectPath="/login" path="/auth_settings" component={AuthSettings} /> + !api.isAuthenticated()} redirectPath="/login" path="/jobs_settings" component={JobsSettings} /> + !api.isAuthenticated()} redirectPath="/login" path="/system_settings" component={SystemSettings} /> + !api.isAuthenticated()} redirectPath="/login" path="/ui_settings" component={UISettings} /> + !api.isAuthenticated()} redirectPath="/login" path="/license" component={License} /> diff --git a/src/pages/AuthSettings.jsx b/src/pages/AuthSettings.jsx new file mode 100644 index 0000000000..80da23f545 --- /dev/null +++ b/src/pages/AuthSettings.jsx @@ -0,0 +1,21 @@ +import React, { Component, Fragment } from 'react'; +import { + PageSection, + PageSectionVariants, + Title, +} from '@patternfly/react-core'; + +class AuthSettings extends Component { + render () { + const { light, medium } = PageSectionVariants; + + return ( + + Authentication Settings + + + ); + } +} + +export default AuthSettings; diff --git a/src/pages/JobsSettings.jsx b/src/pages/JobsSettings.jsx new file mode 100644 index 0000000000..cdc2b97ba7 --- /dev/null +++ b/src/pages/JobsSettings.jsx @@ -0,0 +1,21 @@ +import React, { Component, Fragment } from 'react'; +import { + PageSection, + PageSectionVariants, + Title, +} from '@patternfly/react-core'; + +class JobsSettings extends Component { + render () { + const { light, medium } = PageSectionVariants; + + return ( + + Jobs Settings + + + ); + } +} + +export default JobsSettings; diff --git a/src/pages/Settings.jsx b/src/pages/License.jsx similarity index 68% rename from src/pages/Settings.jsx rename to src/pages/License.jsx index 9e5e360db8..b06add756a 100644 --- a/src/pages/Settings.jsx +++ b/src/pages/License.jsx @@ -5,17 +5,17 @@ import { Title, } from '@patternfly/react-core'; -class Settings extends Component { +class License extends Component { render () { const { light, medium } = PageSectionVariants; return ( - Settings + License ); } } -export default Settings; +export default License; diff --git a/src/pages/SystemSettings.jsx b/src/pages/SystemSettings.jsx new file mode 100644 index 0000000000..2ecf2f3289 --- /dev/null +++ b/src/pages/SystemSettings.jsx @@ -0,0 +1,21 @@ +import React, { Component, Fragment } from 'react'; +import { + PageSection, + PageSectionVariants, + Title, +} from '@patternfly/react-core'; + +class SystemSettings extends Component { + render () { + const { light, medium } = PageSectionVariants; + + return ( + + System Settings + + + ); + } +} + +export default SystemSettings; diff --git a/src/pages/UISettings.jsx b/src/pages/UISettings.jsx new file mode 100644 index 0000000000..3753ec77eb --- /dev/null +++ b/src/pages/UISettings.jsx @@ -0,0 +1,21 @@ +import React, { Component, Fragment } from 'react'; +import { + PageSection, + PageSectionVariants, + Title, +} from '@patternfly/react-core'; + +class UISettings extends Component { + render () { + const { light, medium } = PageSectionVariants; + + return ( + + User Interface Settings + + + ); + } +} + +export default UISettings;