mirror of
https://github.com/ansible/awx.git
synced 2024-10-31 23:51:09 +03:00
one way of approaching nav
This commit is contained in:
Jake McDermott
parent
b2ebbc6a0a
commit
b31edef9b2
@ -24,6 +24,7 @@
|
||||
"window": true,
|
||||
},
|
||||
"rules": {
|
||||
"camelcase": "off",
|
||||
"arrow-parens": "off",
|
||||
"comma-dangle": "off",
|
||||
"indent": ["error", 2, {
|
||||
@ -45,5 +46,7 @@
|
||||
"object-curly-newline": "off",
|
||||
"space-before-function-paren": ["error", "always"],
|
||||
"no-trailing-spaces": ["error"],
|
||||
"react/prefer-stateless-function": "off",
|
||||
"react/prop-types": "off",
|
||||
}
|
||||
}
|
||||
|
||||
5827
package-lock.json
generated
5827
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -17,12 +17,17 @@
|
||||
"babel-loader": "^7.1.5",
|
||||
"babel-preset-react": "^6.24.1",
|
||||
"babel-preset-stage-2": "^6.24.1",
|
||||
"css-loader": "^1.0.0",
|
||||
"eslint": "^5.6.0",
|
||||
"eslint-config-airbnb": "^17.1.0",
|
||||
"eslint-plugin-import": "^2.14.0",
|
||||
"eslint-plugin-jsx-a11y": "^6.1.1",
|
||||
"eslint-plugin-react": "^7.11.1",
|
||||
"file-loader": "^2.0.0",
|
||||
"node-sass": "^4.9.3",
|
||||
"react-hot-loader": "^4.3.3",
|
||||
"sass-loader": "^7.1.0",
|
||||
"style-loader": "^0.23.0",
|
||||
"webpack": "^4.15.1",
|
||||
"webpack-cli": "^3.0.8",
|
||||
"webpack-dev-server": "^3.1.4"
|
||||
@ -36,6 +41,6 @@
|
||||
"react-router-dom": "^4.3.1",
|
||||
"redux": "^4.0.0",
|
||||
"@patternfly/patternfly-next": "^1.0.41",
|
||||
"@patternfly/react-core": "1.11.0"
|
||||
"@patternfly/react-core": "1.19.1"
|
||||
}
|
||||
}
|
||||
|
||||
154
src/App.jsx
154
src/App.jsx
@ -4,15 +4,49 @@ import {
|
||||
HashRouter as Router,
|
||||
Route,
|
||||
Link,
|
||||
Redirect
|
||||
Redirect,
|
||||
Switch,
|
||||
} from 'react-router-dom';
|
||||
import {
|
||||
Brand,
|
||||
Nav,
|
||||
NavList,
|
||||
NavGroup,
|
||||
NavItem,
|
||||
Page,
|
||||
PageHeader,
|
||||
PageSidebar,
|
||||
Title,
|
||||
Toolbar,
|
||||
ToolbarGroup,
|
||||
ToolbarItem,
|
||||
} from '@patternfly/react-core';
|
||||
|
||||
import api from './api';
|
||||
|
||||
import About from './components/About';
|
||||
import Dashboard from './components/Dashboard';
|
||||
import Login from './components/Login';
|
||||
import Organizations from './components/Organizations';
|
||||
import TowerLogo from './components/TowerLogo';
|
||||
|
||||
import Applications from './pages/Applications';
|
||||
import Credentials from './pages/Credentials';
|
||||
import CredentialTypes from './pages/CredentialTypes';
|
||||
import Dashboard from './pages/Dashboard';
|
||||
import InstanceGroups from './pages/InstanceGroups';
|
||||
import Inventories from './pages/Inventories';
|
||||
import InventoryScripts from './pages/InventoryScripts';
|
||||
import Jobs from './pages/Jobs';
|
||||
import Login from './pages/Login';
|
||||
import ManagementJobs from './pages/ManagementJobs';
|
||||
import NotificationTemplates from './pages/NotificationTemplates';
|
||||
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 Teams from './pages/Teams';
|
||||
import Templates from './pages/Templates';
|
||||
import Users from './pages/Users';
|
||||
|
||||
|
||||
const AuthenticatedRoute = ({ component: Component, ...rest }) => (
|
||||
<Route {...rest} render={props => (
|
||||
@ -25,18 +59,116 @@ const AuthenticatedRoute = ({ component: Component, ...rest }) => (
|
||||
}}/>
|
||||
)
|
||||
)}/>
|
||||
)
|
||||
);
|
||||
|
||||
const App = () => (
|
||||
class App extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = { activeItem: 'dashboard', isNavOpen: true };
|
||||
}
|
||||
|
||||
onNavToggle = () => {
|
||||
const { isNavOpen } = this.state;
|
||||
|
||||
this.setState({ isNavOpen: !isNavOpen });
|
||||
};
|
||||
|
||||
onNavSelect = ({ itemId }) => {
|
||||
this.setState({ activeItem: itemId });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { activeItem, isNavOpen } = this.state;
|
||||
|
||||
return (
|
||||
<Router>
|
||||
<div>
|
||||
<Switch>
|
||||
<Route path="/login" component={Login} />
|
||||
<AuthenticatedRoute exact path="/" component={Dashboard} />
|
||||
<AuthenticatedRoute exact path="/about" component={About} />
|
||||
<AuthenticatedRoute exact path="/organizations" component={Organizations} />
|
||||
</div>
|
||||
<AuthenticatedRoute component={() => (
|
||||
<Page
|
||||
header={(
|
||||
<PageHeader
|
||||
logo={<TowerLogo />}
|
||||
toolbar={(
|
||||
<Toolbar>
|
||||
<ToolbarGroup>
|
||||
<ToolbarItem>Item 1</ToolbarItem>
|
||||
</ToolbarGroup>
|
||||
<ToolbarGroup>
|
||||
<ToolbarItem>Item 2</ToolbarItem>
|
||||
<ToolbarItem>Item 3</ToolbarItem>
|
||||
</ToolbarGroup>
|
||||
</Toolbar>
|
||||
)}
|
||||
avatar="| avatar"
|
||||
showNavToggle
|
||||
onNavToggle={this.onNavToggle}
|
||||
/>
|
||||
)}
|
||||
sidebar={(
|
||||
<PageSidebar
|
||||
isNavOpen={isNavOpen}
|
||||
nav={(
|
||||
<Nav onSelect={this.onNavSelect} aria-label="Primary Navigation">
|
||||
<NavGroup title="Views">
|
||||
<NavItem to="#/home" itemId="dashboard" isActive={activeItem === 'dashboard'}>Dashboard</NavItem>
|
||||
<NavItem to="#/jobs" itemId="jobs" isActive={activeItem === 'jobs'}>Jobs</NavItem>
|
||||
<NavItem to="#/schedules" itemId="schedules" isActive={activeItem === 'schedules'}>Schedules</NavItem>
|
||||
<NavItem to="#/portal" itemId="portal" isActive={activeItem === 'portal'}>My View</NavItem>
|
||||
</NavGroup>
|
||||
<NavGroup title="Resources">
|
||||
<NavItem to="#/templates" itemId="templates" isActive={activeItem === 'templates'}>Templates</NavItem>
|
||||
<NavItem to="#/credentials" itemId="credentials" isActive={activeItem === 'credentials'}>Credentials</NavItem>
|
||||
<NavItem to="#/projects" itemId="projects" isActive={activeItem === 'projects'}>Projects</NavItem>
|
||||
<NavItem to="#/inventories" itemId="inventories" isActive={activeItem === 'inventories'}>Inventories</NavItem>
|
||||
<NavItem to="#/inventory_scripts" itemId="inventory_scripts" isActive={activeItem === 'inventory_scripts'}>Inventory Scripts</NavItem>
|
||||
</NavGroup>
|
||||
<NavGroup title="Access">
|
||||
<NavItem to="#/organizations" itemId="organizations" isActive={activeItem === 'organizations'}>Organizations</NavItem>
|
||||
<NavItem to="#/users" itemId="users" isActive={activeItem === 'users'}>Users</NavItem>
|
||||
<NavItem to="#/teams" itemId="teams" isActive={activeItem === 'teams'}>Teams</NavItem>
|
||||
</NavGroup>
|
||||
<NavGroup title="Administration">
|
||||
<NavItem to="#/credential_types" itemId="credential_types" isActive={activeItem === 'credential_types'}>Credential Types</NavItem>
|
||||
<NavItem to="#/notification_templates" itemId="notification_templates" isActive={activeItem === 'notification_templates'}>Notifications</NavItem>
|
||||
<NavItem to="#/management_jobs" itemId="management_jobs" isActive={activeItem === 'management_jobs'}>Management Jobs</NavItem>
|
||||
<NavItem to="#/instance_groups" itemId="instance_groups" isActive={activeItem === 'instance_groups'}>Instance Groups</NavItem>
|
||||
<NavItem to="#/applications" itemId="applications" isActive={activeItem === 'applications'}>Applications</NavItem>
|
||||
<NavItem to="#/settings" itemId="settings" isActive={activeItem === 'settings'}>Settings</NavItem>
|
||||
</NavGroup>
|
||||
</Nav>
|
||||
)}
|
||||
/>
|
||||
)}>
|
||||
<Switch>
|
||||
<Route exact path="/" component={() => (<Redirect to="/home" />)} />
|
||||
<Route path="/home" component={Dashboard} />
|
||||
<Route path="/jobs" component={Jobs} />
|
||||
<Route path="/schedules" component={Schedules} />
|
||||
<Route path="/portal" component={Portal} />
|
||||
<Route path="/templates" component={Templates} />
|
||||
<Route path="/credentials" component={Credentials} />
|
||||
<Route path="/projects" component={Projects} />
|
||||
<Route path="/inventories" component={Inventories} />
|
||||
<Route path="/inventory_scripts" component={InventoryScripts} />
|
||||
<Route path="/organizations" component={Organizations} />
|
||||
<Route path="/users" component={Users} />
|
||||
<Route path="/teams" component={Teams} />
|
||||
<Route path="/credential_types" component={CredentialTypes} />
|
||||
<Route path="/notification_templates" component={NotificationTemplates} />
|
||||
<Route path="/management_jobs" component={ManagementJobs} />
|
||||
<Route path="/instance_groups" component={InstanceGroups} />
|
||||
<Route path="/applications" component={Applications} />
|
||||
<Route path="/settings" component={Settings} />
|
||||
</Switch>
|
||||
</Page>
|
||||
)} />
|
||||
</Switch>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const el = document.getElementById('app');
|
||||
|
||||
|
||||
34
src/app.scss
Normal file
34
src/app.scss
Normal file
@ -0,0 +1,34 @@
|
||||
.pf-l-page__header {
|
||||
--pf-l-page__header--MinHeight: 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
background-color: #030303;
|
||||
|
||||
}
|
||||
|
||||
.pf-l-page__header-brand {
|
||||
--pf-l-page__header-brand--PaddingBottom: 0px;
|
||||
}
|
||||
|
||||
.pf-l-page__main-section {
|
||||
--pf-l-page__main-section--PaddingTop: 11px;
|
||||
--pf-l-page__main-section--PaddingLeft: 11px;
|
||||
}
|
||||
|
||||
.pf-c-nav__section + .pf-c-nav__section {
|
||||
--pf-c-nav__section--MarginTop: 16px;
|
||||
}
|
||||
|
||||
.pf-l-page__header-brand-toggle {
|
||||
padding-bottom: 4px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.pf-l-page__header-brand-link {
|
||||
transform: scale(0.75, 0.75);
|
||||
}
|
||||
|
||||
.pf-l-page__sidebar{
|
||||
--pf-l-page__sidebar--Width--lg: 200px;
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
const Dashboard = () => (
|
||||
<div>
|
||||
<h2>Dashboard</h2>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default Dashboard;
|
||||
31
src/components/OrganizationCard.jsx
Normal file
31
src/components/OrganizationCard.jsx
Normal file
@ -0,0 +1,31 @@
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardBody,
|
||||
} from '@patternfly/react-core';
|
||||
|
||||
class OrganizationCard extends Component {
|
||||
static title = 'Organization Card';
|
||||
|
||||
constructor (props) {
|
||||
super(props);
|
||||
|
||||
const { name } = props.organization;
|
||||
|
||||
this.state = { name };
|
||||
}
|
||||
|
||||
render () {
|
||||
const { name } = this.state;
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>{name}</CardHeader>
|
||||
<CardBody>Card Body</CardBody>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default OrganizationCard;
|
||||
@ -1,9 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
const Organizations = () => (
|
||||
<div>
|
||||
<h2>Organizations</h2>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default Organizations;
|
||||
50
src/components/TowerLogo.jsx
Normal file
50
src/components/TowerLogo.jsx
Normal file
@ -0,0 +1,50 @@
|
||||
import React, { Component } from 'react';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import { Brand } from '@patternfly/react-core';
|
||||
|
||||
import TowerLogoHeader from './tower-logo-header.svg';
|
||||
import TowerLogoHeaderHover from './tower-logo-header-hover.svg';
|
||||
|
||||
class TowerLogo extends Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
|
||||
this.state = { hover: false };
|
||||
}
|
||||
|
||||
onClick = () => {
|
||||
const { history } = this.props;
|
||||
|
||||
history.push('/');
|
||||
};
|
||||
|
||||
onHover = () => {
|
||||
const { hover } = this.state;
|
||||
|
||||
this.setState({ hover: !hover });
|
||||
};
|
||||
|
||||
render () {
|
||||
const { hover } = this.state;
|
||||
|
||||
let src = TowerLogoHeader;
|
||||
|
||||
if (hover) {
|
||||
src = TowerLogoHeaderHover;
|
||||
}
|
||||
|
||||
return (
|
||||
<Brand
|
||||
src={src}
|
||||
alt="Tower Brand Image"
|
||||
onMouseOut={this.onHover}
|
||||
onMouseOver={this.onHover}
|
||||
onBlur={this.onHover}
|
||||
onFocus={this.onHover}
|
||||
onClick={this.onClick}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withRouter(TowerLogo);
|
||||
25
src/components/tower-logo-header-hover.svg
Normal file
25
src/components/tower-logo-header-hover.svg
Normal file
@ -0,0 +1,25 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 100 35" style="enable-background:new 0 0 100 35;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#5FBDBE;}
|
||||
.st1{fill:#1D1D1D;}
|
||||
</style>
|
||||
<g id="Layer_1_1_">
|
||||
<g>
|
||||
<path class="st0" d="M43.6,11.8v11.6h-1.5V11.8h-3.8v-1.4h9v1.3L43.6,11.8L43.6,11.8z"/>
|
||||
<path class="st0" d="M54.4,23.7c-3.3,0-5.3-2.7-5.3-6.7s2.2-6.7,5.4-6.7c3.3,0,5.4,2.7,5.4,6.7S57.6,23.7,54.4,23.7z M54.4,11.6
|
||||
c-2.2,0-3.9,2.1-3.9,5.3s1.6,5.4,4,5.4c2.3,0,3.9-2.1,3.9-5.3S56.6,11.6,54.4,11.6L54.4,11.6z"/>
|
||||
<path class="st0" d="M72.8,23.5h-1.6l-2-8.2c-0.2-0.9-0.5-2.2-0.6-2.9c-0.1,0.9-0.4,2-0.6,2.9l-2,8.2h-1.6l-2.7-13h1.5l1.5,8.2
|
||||
c0.1,0.9,0.4,2.3,0.5,2.9c0.1-0.6,0.4-2,0.6-2.8l2.1-8.4h1.5l2.1,8.4c0.2,0.9,0.5,2.2,0.6,2.8c0.1-0.6,0.3-2,0.5-2.9l1.5-8.2h1.4
|
||||
L72.8,23.5z"/>
|
||||
<path class="st0" d="M78,23.5V10.4h7.8v1.3h-6.4v4.1h3.7v1.4h-3.7V22h6.7v1.3C86.3,23.5,78,23.5,78,23.5z"/>
|
||||
<path class="st0" d="M95,17.8l2.8,5.6h-1.6l-2.8-5.5h-3v5.5h-1.5v-13H94c2.3,0,4,1.2,4,3.7c0.2,1.7-1,3.4-2.7,3.7
|
||||
C95.2,17.8,95.2,17.8,95,17.8z M94,11.8h-3.6v4.8h3.5c1.8,0,2.8-0.9,2.8-2.4S95.8,11.8,94,11.8L94,11.8z"/>
|
||||
</g>
|
||||
<circle class="st0" cx="16.8" cy="17.3" r="15.7"/>
|
||||
<path class="st1" d="M24.2,23.6L18,8.5C17.8,8,17.1,7.7,16.6,8c-0.2,0.1-0.4,0.3-0.5,0.5L9.2,25h2.4l2.7-6.8l8,6.6
|
||||
c0.2,0.2,0.5,0.3,0.9,0.4c0.5,0.1,1.1-0.3,1.2-1v-0.1V24C24.3,23.9,24.3,23.7,24.2,23.6z M17,11.2l4.1,10.1l-6.2-4.8L17,11.2z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
25
src/components/tower-logo-header.svg
Normal file
25
src/components/tower-logo-header.svg
Normal file
@ -0,0 +1,25 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 100 35" style="enable-background:new 0 0 100 35;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFFFFF;}
|
||||
.st1{fill:#1D1D1D;}
|
||||
</style>
|
||||
<g id="Layer_1_1_">
|
||||
<g>
|
||||
<path class="st0" d="M43.6,11.8v11.6h-1.5V11.8h-3.8v-1.4h9v1.3L43.6,11.8L43.6,11.8z"/>
|
||||
<path class="st0" d="M54.4,23.7c-3.3,0-5.3-2.7-5.3-6.7s2.2-6.7,5.4-6.7c3.3,0,5.4,2.7,5.4,6.7S57.6,23.7,54.4,23.7z M54.4,11.6
|
||||
c-2.2,0-3.9,2.1-3.9,5.3s1.6,5.4,4,5.4c2.3,0,3.9-2.1,3.9-5.3S56.6,11.6,54.4,11.6L54.4,11.6z"/>
|
||||
<path class="st0" d="M72.8,23.5h-1.6l-2-8.2c-0.2-0.9-0.5-2.2-0.6-2.9c-0.1,0.9-0.4,2-0.6,2.9l-2,8.2h-1.6l-2.7-13h1.5l1.5,8.2
|
||||
c0.1,0.9,0.4,2.3,0.5,2.9c0.1-0.6,0.4-2,0.6-2.8l2.1-8.4h1.5l2.1,8.4c0.2,0.9,0.5,2.2,0.6,2.8c0.1-0.6,0.3-2,0.5-2.9l1.5-8.2h1.4
|
||||
L72.8,23.5z"/>
|
||||
<path class="st0" d="M78,23.5V10.4h7.8v1.3h-6.4v4.1h3.7v1.4h-3.7V22h6.7v1.3C86.3,23.5,78,23.5,78,23.5z"/>
|
||||
<path class="st0" d="M95,17.8l2.8,5.6h-1.6l-2.8-5.5h-3v5.5h-1.5v-13H94c2.3,0,4,1.2,4,3.7c0.2,1.7-1,3.4-2.7,3.7
|
||||
C95.2,17.8,95.2,17.8,95,17.8z M94,11.8h-3.6v4.8h3.5c1.8,0,2.8-0.9,2.8-2.4S95.8,11.8,94,11.8L94,11.8z"/>
|
||||
</g>
|
||||
<circle class="st0" cx="16.8" cy="17.3" r="15.7"/>
|
||||
<path class="st1" d="M24.2,23.6L18,8.5C17.8,8,17.1,7.7,16.6,8c-0.2,0.1-0.4,0.3-0.5,0.5L9.2,25h2.4l2.7-6.8l8,6.6
|
||||
c0.2,0.2,0.5,0.3,0.9,0.4c0.5,0.1,1.1-0.3,1.2-1v-0.1V24C24.3,23.9,24.3,23.7,24.2,23.6z M17,11.2l4.1,10.1l-6.2-4.8L17,11.2z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@ -1,3 +1,6 @@
|
||||
import App from './App';
|
||||
|
||||
import '@patternfly/react-core/dist/styles/base.css';
|
||||
import './app.scss';
|
||||
|
||||
export default App;
|
||||
|
||||
21
src/pages/Applications.jsx
Normal file
21
src/pages/Applications.jsx
Normal file
@ -0,0 +1,21 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import {
|
||||
PageSection,
|
||||
PageSectionVariants,
|
||||
Title,
|
||||
} from '@patternfly/react-core';
|
||||
|
||||
class Applications extends Component {
|
||||
render () {
|
||||
const { light, medium } = PageSectionVariants;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<PageSection variant={light}><Title size="2xl">Applications</Title></PageSection>
|
||||
<PageSection variant={medium} />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Applications;
|
||||
21
src/pages/CredentialTypes.jsx
Normal file
21
src/pages/CredentialTypes.jsx
Normal file
@ -0,0 +1,21 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import {
|
||||
PageSection,
|
||||
PageSectionVariants,
|
||||
Title,
|
||||
} from '@patternfly/react-core';
|
||||
|
||||
class CredentialTypes extends Component {
|
||||
render () {
|
||||
const { light, medium } = PageSectionVariants;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<PageSection variant={light}><Title size="2xl">Credential Types</Title></PageSection>
|
||||
<PageSection variant={medium} />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default CredentialTypes;
|
||||
21
src/pages/Credentials.jsx
Normal file
21
src/pages/Credentials.jsx
Normal file
@ -0,0 +1,21 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import {
|
||||
PageSection,
|
||||
PageSectionVariants,
|
||||
Title,
|
||||
} from '@patternfly/react-core';
|
||||
|
||||
class Credentials extends Component {
|
||||
render () {
|
||||
const { light, medium } = PageSectionVariants;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<PageSection variant={light}><Title size="2xl">Credentials</Title></PageSection>
|
||||
<PageSection variant={medium} />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Credentials;
|
||||
21
src/pages/Dashboard.jsx
Normal file
21
src/pages/Dashboard.jsx
Normal file
@ -0,0 +1,21 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import {
|
||||
PageSection,
|
||||
PageSectionVariants,
|
||||
Title,
|
||||
} from '@patternfly/react-core';
|
||||
|
||||
class Dashboard extends Component {
|
||||
render () {
|
||||
const { light, medium } = PageSectionVariants;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<PageSection variant={light}><Title size="2xl">Dashboard</Title></PageSection>
|
||||
<PageSection variant={medium} />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Dashboard;
|
||||
21
src/pages/InstanceGroups.jsx
Normal file
21
src/pages/InstanceGroups.jsx
Normal file
@ -0,0 +1,21 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import {
|
||||
PageSection,
|
||||
PageSectionVariants,
|
||||
Title,
|
||||
} from '@patternfly/react-core';
|
||||
|
||||
class InstanceGroups extends Component {
|
||||
render () {
|
||||
const { light, medium } = PageSectionVariants;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<PageSection variant={light}><Title size="2xl">Instance Groups</Title></PageSection>
|
||||
<PageSection variant={medium} />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default InstanceGroups;
|
||||
21
src/pages/Inventories.jsx
Normal file
21
src/pages/Inventories.jsx
Normal file
@ -0,0 +1,21 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import {
|
||||
PageSection,
|
||||
PageSectionVariants,
|
||||
Title,
|
||||
} from '@patternfly/react-core';
|
||||
|
||||
class Inventories extends Component {
|
||||
render () {
|
||||
const { light, medium } = PageSectionVariants;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<PageSection variant={light}><Title size="2xl">Inventories</Title></PageSection>
|
||||
<PageSection variant={medium} />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Inventories;
|
||||
21
src/pages/InventoryScripts.jsx
Normal file
21
src/pages/InventoryScripts.jsx
Normal file
@ -0,0 +1,21 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import {
|
||||
PageSection,
|
||||
PageSectionVariants,
|
||||
Title,
|
||||
} from '@patternfly/react-core';
|
||||
|
||||
class InventoryScripts extends Component {
|
||||
render () {
|
||||
const { light, medium } = PageSectionVariants;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<PageSection variant={light}><Title size="2xl">Inventory Scripts</Title></PageSection>
|
||||
<PageSection variant={medium} />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default InventoryScripts;
|
||||
21
src/pages/Jobs.jsx
Normal file
21
src/pages/Jobs.jsx
Normal file
@ -0,0 +1,21 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import {
|
||||
PageSection,
|
||||
PageSectionVariants,
|
||||
Title,
|
||||
} from '@patternfly/react-core';
|
||||
|
||||
class Jobs extends Component {
|
||||
render () {
|
||||
const { light, medium } = PageSectionVariants;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<PageSection variant={light}><Title size="2xl">Jobz</Title></PageSection>
|
||||
<PageSection variant={medium} />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Jobs;
|
||||
21
src/pages/ManagementJobs.jsx
Normal file
21
src/pages/ManagementJobs.jsx
Normal file
@ -0,0 +1,21 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import {
|
||||
PageSection,
|
||||
PageSectionVariants,
|
||||
Title,
|
||||
} from '@patternfly/react-core';
|
||||
|
||||
class ManagementJobs extends Component {
|
||||
render () {
|
||||
const { light, medium } = PageSectionVariants;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<PageSection variant={light}><Title size="2xl">Management Jobs</Title></PageSection>
|
||||
<PageSection variant={medium} />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ManagementJobs;
|
||||
21
src/pages/NotificationTemplates.jsx
Normal file
21
src/pages/NotificationTemplates.jsx
Normal file
@ -0,0 +1,21 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import {
|
||||
PageSection,
|
||||
PageSectionVariants,
|
||||
Title,
|
||||
} from '@patternfly/react-core';
|
||||
|
||||
class NotificationTemplates extends Component {
|
||||
render () {
|
||||
const { light, medium } = PageSectionVariants;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<PageSection variant={light}><Title size="2xl">Notification Templates</Title></PageSection>
|
||||
<PageSection variant={medium} />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default NotificationTemplates;
|
||||
48
src/pages/Organizations.jsx
Normal file
48
src/pages/Organizations.jsx
Normal file
@ -0,0 +1,48 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import {
|
||||
Gallery,
|
||||
GalleryItem,
|
||||
PageSection,
|
||||
PageSectionVariants,
|
||||
Title,
|
||||
} from '@patternfly/react-core';
|
||||
|
||||
import OrganizationCard from '../components/OrganizationCard';
|
||||
import api from '../api';
|
||||
|
||||
class Organizations extends Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
|
||||
this.state = { organizations: [] };
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
api.getOrganizations()
|
||||
.then(({ data }) => this.setState({ organizations: data.results }));
|
||||
}
|
||||
|
||||
render () {
|
||||
const { light, medium } = PageSectionVariants;
|
||||
const { organizations } = this.state;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<PageSection variant={light}>
|
||||
<Title size="2xl">Organizations</Title>
|
||||
</PageSection>
|
||||
<PageSection variant={medium}>
|
||||
<Gallery gutter="md">
|
||||
{organizations.map(o => (
|
||||
<GalleryItem key={o.id}>
|
||||
<OrganizationCard key={o.id} organization={o} />
|
||||
</GalleryItem>
|
||||
))}
|
||||
</Gallery>
|
||||
</PageSection>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Organizations;
|
||||
21
src/pages/Portal.jsx
Normal file
21
src/pages/Portal.jsx
Normal file
@ -0,0 +1,21 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import {
|
||||
PageSection,
|
||||
PageSectionVariants,
|
||||
Title,
|
||||
} from '@patternfly/react-core';
|
||||
|
||||
class Portal extends Component {
|
||||
render () {
|
||||
const { light, medium } = PageSectionVariants;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<PageSection variant={light}><Title size="2xl">My View</Title></PageSection>
|
||||
<PageSection variant={medium} />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Portal;
|
||||
21
src/pages/Projects.jsx
Normal file
21
src/pages/Projects.jsx
Normal file
@ -0,0 +1,21 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import {
|
||||
PageSection,
|
||||
PageSectionVariants,
|
||||
Title,
|
||||
} from '@patternfly/react-core';
|
||||
|
||||
class Projects extends Component {
|
||||
render () {
|
||||
const { light, medium } = PageSectionVariants;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<PageSection variant={light}><Title size="2xl">Projects</Title></PageSection>
|
||||
<PageSection variant={medium} />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Projects;
|
||||
21
src/pages/Schedules.jsx
Normal file
21
src/pages/Schedules.jsx
Normal file
@ -0,0 +1,21 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import {
|
||||
PageSection,
|
||||
PageSectionVariants,
|
||||
Title,
|
||||
} from '@patternfly/react-core';
|
||||
|
||||
class Schedules extends Component {
|
||||
render () {
|
||||
const { light, medium } = PageSectionVariants;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<PageSection variant={light}><Title size="2xl">Schedules</Title></PageSection>
|
||||
<PageSection variant={medium} />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Schedules;
|
||||
21
src/pages/Settings.jsx
Normal file
21
src/pages/Settings.jsx
Normal file
@ -0,0 +1,21 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import {
|
||||
PageSection,
|
||||
PageSectionVariants,
|
||||
Title,
|
||||
} from '@patternfly/react-core';
|
||||
|
||||
class Settings extends Component {
|
||||
render () {
|
||||
const { light, medium } = PageSectionVariants;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<PageSection variant={light}><Title size="2xl">Settings</Title></PageSection>
|
||||
<PageSection variant={medium} />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Settings;
|
||||
21
src/pages/Teams.jsx
Normal file
21
src/pages/Teams.jsx
Normal file
@ -0,0 +1,21 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import {
|
||||
PageSection,
|
||||
PageSectionVariants,
|
||||
Title,
|
||||
} from '@patternfly/react-core';
|
||||
|
||||
class Teams extends Component {
|
||||
render () {
|
||||
const { light, medium } = PageSectionVariants;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<PageSection variant={light}><Title size="2xl">Teams</Title></PageSection>
|
||||
<PageSection variant={medium} />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Teams;
|
||||
21
src/pages/Templates.jsx
Normal file
21
src/pages/Templates.jsx
Normal file
@ -0,0 +1,21 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import {
|
||||
PageSection,
|
||||
PageSectionVariants,
|
||||
Title,
|
||||
} from '@patternfly/react-core';
|
||||
|
||||
class Templates extends Component {
|
||||
render () {
|
||||
const { light, medium } = PageSectionVariants;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<PageSection variant={light}><Title size="2xl">Templates</Title></PageSection>
|
||||
<PageSection variant={medium} />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Templates;
|
||||
21
src/pages/Users.jsx
Normal file
21
src/pages/Users.jsx
Normal file
@ -0,0 +1,21 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import {
|
||||
PageSection,
|
||||
PageSectionVariants,
|
||||
Title,
|
||||
} from '@patternfly/react-core';
|
||||
|
||||
class Users extends Component {
|
||||
render () {
|
||||
const { light, medium } = PageSectionVariants;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<PageSection variant={light}><Title size="2xl">Users</Title></PageSection>
|
||||
<PageSection variant={medium} />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Users;
|
||||
@ -1,5 +1,4 @@
|
||||
const webpack = require('webpack');
|
||||
|
||||
const TARGET_PORT = 8043;
|
||||
const TARGET = `https://localhost:${TARGET_PORT}`;
|
||||
|
||||
@ -11,11 +10,39 @@ module.exports = {
|
||||
test: /\.(js|jsx)$/,
|
||||
exclude: /node_modules/,
|
||||
use: ['babel-loader']
|
||||
},
|
||||
{
|
||||
test: /\.s?[ac]ss$/,
|
||||
use: [
|
||||
{ loader: 'style-loader' },
|
||||
{ loader: 'css-loader' },
|
||||
{
|
||||
loader: 'sass-loader',
|
||||
options: {
|
||||
includePaths: [
|
||||
'node_modules/patternfly/dist/sass',
|
||||
'node_modules/patternfly/node_modules/bootstrap-sass/assets/stylesheet',
|
||||
'node_modules/patternfly/node_modules/font-awesome-sass/assets/stylesheets'
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.(woff(2)?|ttf|jpg|png|eot|gif|svg)(\?v=\d+\.\d+\.\d+)?$/,
|
||||
use: [{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[ext]',
|
||||
outputPath: 'fonts/',
|
||||
publicPatH: '../'
|
||||
}
|
||||
}]
|
||||
}
|
||||
]
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['*', '.js', '.jsx']
|
||||
extensions: ['*', '.js', '.jsx', '.css']
|
||||
},
|
||||
output: {
|
||||
path: __dirname + '/dist',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user