aboutsummaryrefslogtreecommitdiffstats
path: root/ui-react
diff options
context:
space:
mode:
Diffstat (limited to 'ui-react')
-rw-r--r--ui-react/package-lock.json6
-rw-r--r--ui-react/package.json2
-rw-r--r--ui-react/src/LoopUI.js30
-rw-r--r--ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicy.css73
-rw-r--r--ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js2
-rw-r--r--ui-react/src/components/menu/MenuBar.js48
-rw-r--r--ui-react/src/theme/globalStyle.js92
7 files changed, 101 insertions, 152 deletions
diff --git a/ui-react/package-lock.json b/ui-react/package-lock.json
index 886130424..4f64bb353 100644
--- a/ui-react/package-lock.json
+++ b/ui-react/package-lock.json
@@ -10739,9 +10739,9 @@
}
},
"react-bootstrap": {
- "version": "1.0.0-beta.11",
- "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.0.0-beta.11.tgz",
- "integrity": "sha512-D8rAORkNRMf0ECvB8LHCTibeo1JeWptKs4CA5/tn1x5fTu5W4DUD7fQxLm9QdbzOM0qg2FjcfTKeM9gCqhTcoA==",
+ "version": "1.0.0-beta.12",
+ "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.0.0-beta.12.tgz",
+ "integrity": "sha512-qBEAthAzqM+OTS2h5ZCfV5/yZUadQcMlaep4iPyPqsu92JzdcznhSDjw6b+asiepsyQgiS33t8OPeLLRiIDh9Q==",
"requires": {
"@babel/runtime": "^7.4.2",
"@react-bootstrap/react-popper": "1.2.1",
diff --git a/ui-react/package.json b/ui-react/package.json
index 25176058c..358152b5b 100644
--- a/ui-react/package.json
+++ b/ui-react/package.json
@@ -29,7 +29,7 @@
"react": "16.9.0",
"react-dom": "16.9.0",
"react-scripts": "3.1.1",
- "react-bootstrap": "1.0.0-beta.11",
+ "react-bootstrap": "1.0.0-beta.12",
"bootstrap-css-only": "4.3.1",
"styled-components": "4.3.2",
"react-router-dom": "5.0.1",
diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js
index b64cfbaa3..9389ad656 100644
--- a/ui-react/src/LoopUI.js
+++ b/ui-react/src/LoopUI.js
@@ -45,12 +45,29 @@ import PerformAction from './components/dialogs/PerformActions';
import RefreshStatus from './components/dialogs/RefreshStatus';
import DeployLoop from './components/dialogs/DeployLoop';
+import { Link } from 'react-router-dom';
+
+const StyledMainDiv = styled.div`
+ background-color: ${props => props.theme.backgroundColor};
+`
+
const ProjectNameStyled = styled.a`
vertical-align: middle;
padding-left: 30px;
- font-size: 30px;
+ font-size: 36px;
+ font-weight: bold;
+`
+const StyledRouterLink = styled(Link)`
+ color: ${props => props.theme.menuFontColor};
+ background-color: ${props => props.theme.backgroundColor};
`
+
+const StyledLoginInfo = styled.a`
+ color: ${props => props.theme.menuFontColor};
+ background-color: ${props => props.theme.backgroundColor};
+`
+
const LoopViewDivStyled = styled.div`
height: 100%;
overflow: hidden;
@@ -113,7 +130,9 @@ export default class LoopUI extends React.Component {
renderUserLoggedNavBar() {
return (
<Navbar.Text>
- Signed in as: <a href="/login">{this.state.userName}</a>
+ <StyledLoginInfo>Signed in as: </StyledLoginInfo>
+ <StyledRouterLink to="/userInfo">{this.state.userName}</StyledRouterLink>
+ <StyledRouterLink to="/logout/"> (logout)</StyledRouterLink>
</Navbar.Text>
);
}
@@ -129,8 +148,9 @@ export default class LoopUI extends React.Component {
renderNavBar() {
return (
- <Navbar expand="lg">
+ <Navbar >
{this.renderLogoNavBar()}
+ <Navbar.Toggle aria-controls="responsive-navbar-nav" />
{this.renderMenuNavBar()}
{this.renderUserLoggedNavBar()}
</Navbar>
@@ -188,7 +208,7 @@ export default class LoopUI extends React.Component {
render() {
return (
- <div id="main_div">
+ <StyledMainDiv id="main_div">
<Route path="/operationalPolicyModal"
render={(routeProps) => (<OperationalPolicyModal {...routeProps} loopCache={this.getLoopCache()} loadLoopFunction={this.loadLoop}/>)} />
<Route path="/configurationPolicyModal/:componentName" render={(routeProps) => (<ConfigurationPolicyModal {...routeProps} loopCache={this.getLoopCache()} loadLoopFunction={this.loadLoop}/>)} />
@@ -206,7 +226,7 @@ export default class LoopUI extends React.Component {
<GlobalClampStyle />
{this.renderNavBar()}
{this.renderLoopViewer()}
- </div>
+ </StyledMainDiv>
);
}
}
diff --git a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicy.css b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicy.css
deleted file mode 100644
index 94a91c234..000000000
--- a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicy.css
+++ /dev/null
@@ -1,73 +0,0 @@
-.disabled {
- background-color: #dddd;
-}
-
-label {
- text-align: right;
- vertical-align: middle;
-}
-
-.leftPolicyPanel {
- padding: 0 10px 0 0;
-}
-
-.idError {
- color: red;
- padding: 50px 0px;
- text-align: center;
- display: none;
-}
-
-.policyPanel {
- background-color: #f5f5f5;
- padding: 15px 5px 0 5px;
-}
-
-.form-group.clearfix {
- display: -webkit-flex;
- display: flex;
- align-items: center;
-}
-
-label {
- margin-bottom: 0px;
-}
-
-.withnote {
- margin-bottom: 0px;
-}
-
-.note {
- font-size:10px;
- margin-left: 250px;
- font-weight: normal;
-}
-
-#policyTable {
- cursor: pointer;
- width: 100%;
-}
-
-#policyTable tr {
- border-bottom: 1px solid #ddd;
- border-collapse: collapse;
- text-align: left;
- font-size: 12px;
- font-weight: normal;
-}
-
-#policyTable td {
- padding: 8px 10px;
-}
-
-#policyTable tr.highlight {
- background-color: #f5f5f5;
- font-weight: bold;
- font-size: 13px;
-}
-
-#policyTableHolder {
- height: 200px;
- width: 100%;
- overflow: auto;
-} \ No newline at end of file
diff --git a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js
index 6db38fd23..7f349a10f 100644
--- a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js
+++ b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js
@@ -78,7 +78,6 @@ export default class OperationalPolicyModal extends React.Component {
setDefaultJsonEditorOptions() {
JSONEditor.defaults.options.theme = 'bootstrap4';
- // JSONEditor.defaults.options.iconlib = 'bootstrap2';
JSONEditor.defaults.options.object_layout = 'grid';
JSONEditor.defaults.options.disable_properties = true;
@@ -89,7 +88,6 @@ export default class OperationalPolicyModal extends React.Component {
JSONEditor.defaults.options.array_controls_top=true;
JSONEditor.defaults.options.show_errors = 'always';
JSONEditor.defaults.options.keep_oneof_values=false;
- JSONEditor.defaults.options.ajax=true;
JSONEditor.defaults.options.collapsed=true;
//JSONEditor.defaults.options.template = 'default';
}
diff --git a/ui-react/src/components/menu/MenuBar.js b/ui-react/src/components/menu/MenuBar.js
index 121787ffd..b68e2376a 100644
--- a/ui-react/src/components/menu/MenuBar.js
+++ b/ui-react/src/components/menu/MenuBar.js
@@ -27,10 +27,10 @@ import NavDropdown from 'react-bootstrap/NavDropdown';
import LoopUI from '../../LoopUI';
import 'bootstrap-css-only/css/bootstrap.min.css';
import styled from 'styled-components';
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router-dom';
const StyledLink = styled(Link)`
- color: ${props => props.theme.menuColor};
+ color: ${props => props.theme.menuFontColor};
background-color: ${props => props.theme.menuBackgroundColor};
font-weight: normal;
display: block;
@@ -41,21 +41,34 @@ const StyledLink = styled(Link)`
white-space: nowrap;
border: 0;
:hover {
- text-decoration: none;
- background-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
- color: ${props => props.theme.loopViewerHeaderFontColor};
+ text-decoration: none;
+ background-color: ${props => props.theme.menuHighlightedBackgroundColor};
+ color: ${props => props.theme.menuHighlightedFontColor};
}
`;
const StyledNavLink = styled(Nav.Link)`
- color: ${props => props.theme.menuColor};
+ color: ${props => props.theme.menuFontColor};
background-color: ${props => props.theme.menuBackgroundColor};
- font-weight: normal;
+ font-weight: normal;
padding: .25rem 1.5rem;
:hover {
- background-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
- color: ${props => props.theme.loopViewerHeaderFontColor}
+ background-color: ${props => props.theme.menuHighlightedBackgroundColor};
+ color: ${props => props.theme.menuHighlightedFontColor};
+ }
+`;
+
+const StyledNavDropdown = styled(NavDropdown)`
+ color: ${props => props.theme.menuFontColor};
+ & .dropdown-toggle {
+ color: ${props => props.theme.menuFontColor};
+ background-color: ${props => props.theme.backgroundColor};
+ font-weight: normal;
+ :hover {
+ font-weight: bold;
+ }
}
`;
+
export default class MenuBar extends React.Component {
state = {
loopName: this.props.loopName,
@@ -72,28 +85,29 @@ export default class MenuBar extends React.Component {
render () {
return (
+
<Navbar.Collapse>
- <NavDropdown title="Closed Loop">
+ <StyledNavDropdown title="Closed Loop">
<NavDropdown.Item as={StyledLink} to="/openLoop">Open CL</NavDropdown.Item>
<NavDropdown.Item as={StyledLink} to="/loopProperties" disabled={this.state.disabled}>Properties CL</NavDropdown.Item>
<NavDropdown.Item as={StyledLink} to="/closeLoop" disabled={this.state.disabled}>Close Model</NavDropdown.Item>
- </NavDropdown>
- <NavDropdown title="Manage">
+ </StyledNavDropdown>
+ <StyledNavDropdown title="Manage">
<NavDropdown.Item as={StyledLink} to="/submit" disabled={this.state.disabled}>Submit</NavDropdown.Item>
<NavDropdown.Item as={StyledLink} to="/stop" disabled={this.state.disabled}>Stop</NavDropdown.Item>
<NavDropdown.Item as={StyledLink} to="/restart" disabled={this.state.disabled}>Restart</NavDropdown.Item>
<NavDropdown.Item as={StyledLink} to="/delete" disabled={this.state.disabled}>Delete</NavDropdown.Item>
<NavDropdown.Item as={StyledLink} to="/deploy" disabled={this.state.disabled}>Deploy</NavDropdown.Item>
<NavDropdown.Item as={StyledLink} to="/undeploy" disabled={this.state.disabled}>UnDeploy</NavDropdown.Item>
- </NavDropdown>
- <NavDropdown title="View">
+ </StyledNavDropdown>
+ <StyledNavDropdown title="View">
<NavDropdown.Item as={StyledLink} to="/refreshStatus" disabled={this.state.disabled}>Refresh Status</NavDropdown.Item>
- </NavDropdown>
- <NavDropdown title="Help">
+ </StyledNavDropdown>
+ <StyledNavDropdown title="Help">
<StyledNavLink href="https://wiki.onap.org/" target="_blank">Wiki</StyledNavLink>
<StyledNavLink href="mailto:onap-discuss@lists.onap.org?subject=CLAMP&body=Please send us suggestions or feature enhancements or defect. If possible, please send us the steps to replicate any defect.">Contact Us</StyledNavLink>
<NavDropdown.Item as={StyledLink} to="/userInfo">User Info</NavDropdown.Item>
- </NavDropdown>
+ </StyledNavDropdown>
</Navbar.Collapse>
);
}
diff --git a/ui-react/src/theme/globalStyle.js b/ui-react/src/theme/globalStyle.js
index 0f6fb91c6..a0c338cd4 100644
--- a/ui-react/src/theme/globalStyle.js
+++ b/ui-react/src/theme/globalStyle.js
@@ -24,60 +24,50 @@
import { createGlobalStyle } from 'styled-components';
export const GlobalClampStyle = createGlobalStyle`
- body {
- padding: 0;
- margin: 0;
- font-family: ${props => props.theme.fontFamily};
- font-size: ${props => props.theme.fontSize};
- font-weight: normal;
- color: ${props => props.theme.fontNormal};
- background-color: ${props => props.theme.backgroundColor};
- }
+ body {
+ padding: 0;
+ margin: 0;
+ font-family: ${props => props.theme.fontFamily};
+ font-size: ${props => props.theme.fontSize};
+ font-weight: normal;
+ }
- span {
- font-family: ${props => props.theme.fontFamily};
- font-size: ${props => props.theme.fontSize};
- font-weight: bold;
- color: ${props => props.theme.fontNormal};
- background-color: ${props => props.theme.backgroundColor};
- }
-
- a {
- font-family: ${props => props.theme.fontFamily};
- font-size: ${props => props.theme.fontSize};
- font-weight: bold;
- color: ${props => props.theme.fontNormal};
- background-color: ${props => props.theme.backgroundColor};
+ span {
+ font-family: ${props => props.theme.fontFamily};
+ font-size: ${props => props.theme.fontSize};
+ font-weight: bold;
+ }
- }
-
- div {
- font-family: ${props => props.theme.fontFamily};
- font-size: ${props => props.theme.fontSize};
- border-radius: 4px;
- color: ${props => props.theme.fontNormal};
- background-color: ${props => (props.theme.backgroundColor)};
- margin-top: 1px;
- }
+ a {
+ font-family: ${props => props.theme.fontFamily};
+ font-size: ${props => props.theme.fontSize};
+ font-weight: bold;
+ }
- svg {
- overflow: hidden;
- width: 100%;
- height: 100%;
- }
-
- button {
- background-color: ${props => (props.theme.loopViewerHeaderBackgroundColor)};
- border: 1px;
- color: white;
- padding: 15px 32px;
- text-align: center;
- text-decoration: none;
- display: inline-block;
- font-size: ${props => props.theme.fontSize};
- font-family: ${props => props.theme.fontFamily};
+ div {
+ font-family: ${props => props.theme.fontFamily};
+ font-size: ${props => props.theme.fontSize};
+ border-radius: 4px;
+ margin-top: 1px;
+ }
- }
+ svg {
+ overflow: hidden;
+ width: 100%;
+ height: 100%;
+ }
+
+ label {
+ font-family: ${props => props.theme.fontFamily};
+ font-size: ${props => props.theme.fontSize};
+ font-weight: bold;
+ }
+
+ button {
+ font-family: ${props => props.theme.fontFamily};
+ font-size: ${props => props.theme.fontSize};
+ font-weight: bold;
+ }
`
export const DefaultClampTheme = {
@@ -90,7 +80,7 @@ export const DefaultClampTheme = {
backgroundColor: '#eeeeee',
fontFamily: 'Arial, Sans-serif',
- fontSize: '15px',
+ fontSize: '16px',
loopViewerBackgroundColor: 'white',
loopViewerFontColor: 'yellow',