Add New UI component for policies list
Add new Ui components to list policies + the small refactoring of React Routes
Issue-ID: POLICY-2925
Signed-off-by: sebdet <sebastien.determe@intl.att.com>
Change-Id: I784d7c144a3a3af98a9d62b5d40b5172dbdaed47
Signed-off-by: sebdet <sebastien.determe@intl.att.com>
diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js
index 5491ab1..339a2c0 100644
--- a/ui-react/src/LoopUI.js
+++ b/ui-react/src/LoopUI.js
@@ -2,7 +2,7 @@
* ============LICENSE_START=======================================================
* ONAP CLAMP
* ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights
+ * Copyright (C) 2019, 2021 AT&T Intellectual Property. All rights
* reserved.
* ================================================================================
* Licensed under the Apache License, Version 2.0 (the "License");
@@ -41,6 +41,7 @@
import OpenLoopModal from './components/dialogs/Loop/OpenLoopModal';
import ModifyLoopModal from './components/dialogs/Loop/ModifyLoopModal';
import PolicyModal from './components/dialogs/Policy/PolicyModal';
+import ViewAllPolicies from './components/dialogs/Policy/ViewAllPolicies';
import LoopPropertiesModal from './components/dialogs/Loop/LoopPropertiesModal';
import UserInfoModal from './components/dialogs/UserInfoModal';
import LoopService from './api/LoopService';
@@ -57,334 +58,334 @@
import { Link } from 'react-router-dom';
const StyledMainDiv = styled.div`
- background-color: ${props => props.theme.backgroundColor};
+ background-color: ${props => props.theme.backgroundColor};
`
const StyledSpinnerDiv = styled.div`
- justify-content: center !important;
- display: flex !important;
+ justify-content: center !important;
+ display: flex !important;
`;
const ProjectNameStyled = styled.a`
- vertical-align: middle;
- padding-left: 30px;
- font-size: 36px;
- font-weight: bold;
+ vertical-align: middle;
+ padding-left: 30px;
+ font-size: 36px;
+ font-weight: bold;
`
const StyledRouterLink = styled(Link)`
- color: ${props => props.theme.menuFontColor};
- background-color: ${props => props.theme.backgroundColor};
+ 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};
+ color: ${props => props.theme.menuFontColor};
+ background-color: ${props => props.theme.backgroundColor};
`
const LoopViewDivStyled = styled.div`
- height: 100%;
- overflow: hidden;
- margin-left: 10px;
- margin-right: 10px;
- margin-bottom: 10px;
- color: ${props => props.theme.loopViewerFontColor};
- background-color: ${props => props.theme.loopViewerBackgroundColor};
- border: 1px solid transparent;
- border-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
+ height: 100%;
+ overflow: hidden;
+ margin-left: 10px;
+ margin-right: 10px;
+ margin-bottom: 10px;
+ color: ${props => props.theme.loopViewerFontColor};
+ background-color: ${props => props.theme.loopViewerBackgroundColor};
+ border: 1px solid transparent;
+ border-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
`
const LoopViewHeaderDivStyled = styled.div`
- background-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
- padding: 10px 10px;
- color: ${props => props.theme.loopViewerHeaderFontColor};
+ background-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
+ padding: 10px 10px;
+ color: ${props => props.theme.loopViewerHeaderFontColor};
`
const LoopViewBodyDivStyled = styled.div`
- background-color: ${props => (props.theme.loopViewerBackgroundColor)};
- padding: 10px 10px;
- color: ${props => (props.theme.loopViewerHeaderFontColor)};
- height: 95%;
+ background-color: ${props => (props.theme.loopViewerBackgroundColor)};
+ padding: 10px 10px;
+ color: ${props => (props.theme.loopViewerHeaderFontColor)};
+ height: 95%;
`
export default class LoopUI extends React.Component {
- state = {
- userName: null,
- loopName: OnapConstants.defaultLoopName,
- loopCache: new LoopCache({}),
- showSucAlert: false,
- showFailAlert: false,
- busyLoadingCount: 0
- };
+ state = {
+ userName: null,
+ loopName: OnapConstants.defaultLoopName,
+ loopCache: new LoopCache({}),
+ showSucAlert: false,
+ showFailAlert: false,
+ busyLoadingCount: 0
+ };
- constructor() {
- super();
- this.getUser = this.getUser.bind(this);
- this.updateLoopCache = this.updateLoopCache.bind(this);
- this.loadLoop = this.loadLoop.bind(this);
- this.closeLoop = this.closeLoop.bind(this);
- this.showSucAlert = this.showSucAlert.bind(this);
- this.showFailAlert = this.showFailAlert.bind(this);
- this.disableAlert = this.disableAlert.bind(this);
- this.setBusyLoading = this.setBusyLoading.bind(this);
- this.clearBusyLoading = this.clearBusyLoading.bind(this);
- this.isBusyLoading = this.isBusyLoading.bind(this);
- this.renderGlobalStyle = this.renderGlobalStyle.bind(this);
- this.renderSvg = this.renderSvg.bind(this);
- }
+ constructor() {
+ super();
+ this.getUser = this.getUser.bind(this);
+ this.updateLoopCache = this.updateLoopCache.bind(this);
+ this.loadLoop = this.loadLoop.bind(this);
+ this.closeLoop = this.closeLoop.bind(this);
+ this.showSucAlert = this.showSucAlert.bind(this);
+ this.showFailAlert = this.showFailAlert.bind(this);
+ this.disableAlert = this.disableAlert.bind(this);
+ this.setBusyLoading = this.setBusyLoading.bind(this);
+ this.clearBusyLoading = this.clearBusyLoading.bind(this);
+ this.isBusyLoading = this.isBusyLoading.bind(this);
+ this.renderGlobalStyle = this.renderGlobalStyle.bind(this);
+ this.renderSvg = this.renderSvg.bind(this);
+ }
- componentWillMount() {
- this.getUser();
- }
+ componentWillMount() {
+ this.getUser();
+ }
- getUser() {
- UserService.login().then(user => {
- this.setState({ userName: user })
- });
- }
+ getUser() {
+ UserService.login().then(user => {
+ this.setState({ userName: user })
+ });
+ }
- renderMenuNavBar() {
- return (
- <MenuBar loopName={this.state.loopName}/>
- );
- }
+ renderMenuNavBar() {
+ return (
+ <MenuBar loopName={this.state.loopName}/>
+ );
+ }
- renderUserLoggedNavBar() {
- return (
- <Navbar.Text>
- <StyledLoginInfo>Signed in as: </StyledLoginInfo>
- <StyledRouterLink to="/userInfo">{this.state.userName}</StyledRouterLink>
- </Navbar.Text>
- );
- }
+ renderUserLoggedNavBar() {
+ return (
+ <Navbar.Text>
+ <StyledLoginInfo>Signed in as: </StyledLoginInfo>
+ <StyledRouterLink to="/userInfo">{this.state.userName}</StyledRouterLink>
+ </Navbar.Text>
+ );
+ }
- renderLogoNavBar() {
- return (
- <Navbar.Brand>
- <img height="50px" width="234px" src={logo} alt="" />
- <ProjectNameStyled>CLAMP</ProjectNameStyled>
- </Navbar.Brand>
- );
- }
+ renderLogoNavBar() {
+ return (
+ <Navbar.Brand>
+ <img height="50px" width="234px" src={logo} alt="" />
+ <ProjectNameStyled>CLAMP</ProjectNameStyled>
+ </Navbar.Brand>
+ );
+ }
- renderAlertBar() {
- return (
- <div>
- <Alert variant="success" show={this.state.showSucAlert} onClose={this.disableAlert} dismissible>
- {this.state.showMessage}
- </Alert>
- <Alert variant="danger" show={this.state.showFailAlert} onClose={this.disableAlert} dismissible>
- {this.state.showMessage}
- </Alert>
- </div>
- );
- }
+ renderAlertBar() {
+ return (
+ <div>
+ <Alert variant="success" show={this.state.showSucAlert} onClose={this.disableAlert} dismissible>
+ {this.state.showMessage}
+ </Alert>
+ <Alert variant="danger" show={this.state.showFailAlert} onClose={this.disableAlert} dismissible>
+ {this.state.showMessage}
+ </Alert>
+ </div>
+ );
+ }
- renderNavBar() {
- return (
- <Navbar >
- {this.renderLogoNavBar()}
- <Navbar.Toggle aria-controls="responsive-navbar-nav" />
- {this.renderMenuNavBar()}
- {this.renderUserLoggedNavBar()}
- </Navbar>
- );
- }
+ renderNavBar() {
+ return (
+ <Navbar >
+ {this.renderLogoNavBar()}
+ <Navbar.Toggle aria-controls="responsive-navbar-nav" />
+ {this.renderMenuNavBar()}
+ {this.renderUserLoggedNavBar()}
+ </Navbar>
+ );
+ }
- renderLoopViewHeader() {
- return (
- <LoopViewHeaderDivStyled>
- Loop Viewer - {this.state.loopName} - ({this.state.loopCache.getTemplateName()})
- </LoopViewHeaderDivStyled>
- );
- }
+ renderLoopViewHeader() {
+ return (
+ <LoopViewHeaderDivStyled>
+ Loop Viewer - {this.state.loopName} - ({this.state.loopCache.getTemplateName()})
+ </LoopViewHeaderDivStyled>
+ );
+ }
- renderSvg() {
- return (
- <SvgGenerator loopCache={this.state.loopCache} clickable={true} generatedFrom={SvgGenerator.GENERATED_FROM_INSTANCE} isBusyLoading={this.isBusyLoading}/>
- )
- }
- renderLoopViewBody() {
- return (
- <LoopViewBodyDivStyled>
- {this.renderSvg()}
- <LoopStatus loopCache={this.state.loopCache}/>
- <LoopLogs loopCache={this.state.loopCache} />
- </LoopViewBodyDivStyled>
- );
- }
+ renderSvg() {
+ return (
+ <SvgGenerator loopCache={this.state.loopCache} clickable={true} generatedFrom={SvgGenerator.GENERATED_FROM_INSTANCE} isBusyLoading={this.isBusyLoading}/>
+ )
+ }
+ renderLoopViewBody() {
+ return (
+ <LoopViewBodyDivStyled>
+ {this.renderSvg()}
+ <LoopStatus loopCache={this.state.loopCache}/>
+ <LoopLogs loopCache={this.state.loopCache} />
+ </LoopViewBodyDivStyled>
+ );
+ }
- getLoopCache() {
- return this.state.loopCache;
+ getLoopCache() {
+ return this.state.loopCache;
- }
+ }
- renderLoopViewer() {
- return (
- <LoopViewDivStyled>
- {this.renderLoopViewHeader()}
- {this.renderLoopViewBody()}
- </LoopViewDivStyled>
- );
- }
+ renderLoopViewer() {
+ return (
+ <LoopViewDivStyled>
+ {this.renderLoopViewHeader()}
+ {this.renderLoopViewBody()}
+ </LoopViewDivStyled>
+ );
+ }
- updateLoopCache(loopJson) {
+ updateLoopCache(loopJson) {
- // If call with an empty object for loopJson, this is a reset to empty
- // from someplace like PerformActions for the case where we are "deleting"
- // a Control Loop model. Set the loopName to the default.
+ // If call with an empty object for loopJson, this is a reset to empty
+ // from someplace like PerformActions for the case where we are "deleting"
+ // a Control Loop model. Set the loopName to the default.
- if (loopJson === null) {
- this.setState({ loopName: OnapConstants.defaultLoopName });
- this.setState({ loopCache: new LoopCache({}) });
- } else {
- this.setState({ loopCache: new LoopCache(loopJson) });
- this.setState({ loopName: this.state.loopCache.getLoopName() });
- }
- console.info(this.state.loopName+" loop loaded successfully");
+ if (loopJson === null) {
+ this.setState({ loopName: OnapConstants.defaultLoopName });
+ this.setState({ loopCache: new LoopCache({}) });
+ } else {
+ this.setState({ loopCache: new LoopCache(loopJson) });
+ this.setState({ loopName: this.state.loopCache.getLoopName() });
+ }
+ console.info(this.state.loopName+" loop loaded successfully");
}
- showSucAlert(message) {
- this.setState ({ showSucAlert: true, showMessage:message });
- }
+ showSucAlert(message) {
+ this.setState ({ showSucAlert: true, showMessage:message });
+ }
- showFailAlert(message) {
- this.setState ({ showFailAlert: true, showMessage:message });
- }
+ showFailAlert(message) {
+ this.setState ({ showFailAlert: true, showMessage:message });
+ }
- disableAlert() {
- this.setState ({ showSucAlert: false, showFailAlert: false });
- }
+ disableAlert() {
+ this.setState ({ showSucAlert: false, showFailAlert: false });
+ }
- loadLoop(loopName) {
- this.setBusyLoading();
- LoopService.getLoop(loopName).then(loop => {
- console.debug("Updating loopCache");
- LoopActionService.refreshStatus(loopName).then(data => {
- this.updateLoopCache(data);
- this.clearBusyLoading();
- this.props.history.push('/');
- })
- .catch(error => {
- this.updateLoopCache(loop);
- this.clearBusyLoading();
- this.props.history.push('/');
- });
- });
- }
+ loadLoop(loopName) {
+ this.setBusyLoading();
+ LoopService.getLoop(loopName).then(loop => {
+ console.debug("Updating loopCache");
+ LoopActionService.refreshStatus(loopName).then(data => {
+ this.updateLoopCache(data);
+ this.clearBusyLoading();
+ this.props.history.push('/');
+ })
+ .catch(error => {
+ this.updateLoopCache(loop);
+ this.clearBusyLoading();
+ this.props.history.push('/');
+ });
+ });
+ }
- setBusyLoading() {
- this.setState((state,props) => ({ busyLoadingCount: ++state.busyLoadingCount }));
- }
+ setBusyLoading() {
+ this.setState((state,props) => ({ busyLoadingCount: ++state.busyLoadingCount }));
+ }
- clearBusyLoading() {
- this.setState((state,props) => ({ busyLoadingCount: --state.busyLoadingCount }));
- }
+ clearBusyLoading() {
+ this.setState((state,props) => ({ busyLoadingCount: --state.busyLoadingCount }));
+ }
- isBusyLoading() {
- if (this.state.busyLoadingCount === 0) {
- return false;
- } else {
- return true;
- }
- }
+ isBusyLoading() {
+ if (this.state.busyLoadingCount === 0) {
+ return false;
+ } else {
+ return true;
+ }
+ }
- closeLoop() {
- this.setState({ loopCache: new LoopCache({}), loopName: OnapConstants.defaultLoopName });
- this.props.history.push('/');
- }
+ closeLoop() {
+ this.setState({ loopCache: new LoopCache({}), loopName: OnapConstants.defaultLoopName });
+ this.props.history.push('/');
+ }
- renderRoutes() {
- return(
- <React.Fragment>
- <Route path="/uploadToscaPolicyModal" render={(routeProps) => (<UploadToscaPolicyModal {...routeProps} />)} />
- <Route path="/viewToscaPolicyModal" render={(routeProps) => (<ViewToscaPolicyModal {...routeProps} />)} />
- <Route path="/ViewLoopTemplatesModal" render={(routeProps) => (<ViewLoopTemplatesModal {...routeProps} />)} />
- <Route path="/ManageDictionaries" render={(routeProps) => (<ManageDictionaries {...routeProps} />)} />
+ renderRoutes() {
+ return(
+ <React.Fragment>
+ <Route path="/uploadToscaPolicyModal" render={(routeProps) => (<UploadToscaPolicyModal {...routeProps} />)} />
+ <Route path="/viewToscaPolicyModal" render={(routeProps) => (<ViewToscaPolicyModal {...routeProps} />)} />
+ <Route path="/viewLoopTemplatesModal" render={(routeProps) => (<ViewLoopTemplatesModal {...routeProps} />)} />
+ <Route path="/manageDictionaries" render={(routeProps) => (<ManageDictionaries {...routeProps} />)} />
+ <Route path="/viewAllPolicies" render={(routeProps) => (<ViewAllPolicies {...routeProps} />)} />
+ <Route path="/policyModal/:policyInstanceType/:policyName" render={(routeProps) => (<PolicyModal {...routeProps}
+ loopCache={this.getLoopCache()}
+ loadLoopFunction={this.loadLoop}/>)}
+ />
+ <Route path="/createLoop" render={(routeProps) => (<CreateLoopModal {...routeProps}
+ loadLoopFunction={this.loadLoop} />)}
+ />
+ <Route path="/openLoop" render={(routeProps) => (<OpenLoopModal {...routeProps}
+ loadLoopFunction={this.loadLoop} />)}
+ />
+ <Route path="/loopProperties" render={(routeProps) => (<LoopPropertiesModal {...routeProps}
+ loopCache={this.getLoopCache()}
+ loadLoopFunction={this.loadLoop}/>)}
+ />
+ <Route path="/modifyLoop" render={(routeProps) => (<ModifyLoopModal {...routeProps}
+ loopCache={this.getLoopCache()}
+ loadLoopFunction={this.loadLoop}/>)}
+ />
- <Route path="/policyModal/:policyInstanceType/:policyName" render={(routeProps) => (<PolicyModal {...routeProps}
- loopCache={this.getLoopCache()}
- loadLoopFunction={this.loadLoop}/>)}
- />
- <Route path="/createLoop" render={(routeProps) => (<CreateLoopModal {...routeProps}
- loadLoopFunction={this.loadLoop} />)}
- />
- <Route path="/openLoop" render={(routeProps) => (<OpenLoopModal {...routeProps}
- loadLoopFunction={this.loadLoop} />)}
- />
- <Route path="/loopProperties" render={(routeProps) => (<LoopPropertiesModal {...routeProps}
- loopCache={this.getLoopCache()}
- loadLoopFunction={this.loadLoop}/>)}
- />
- <Route path="/modifyLoop" render={(routeProps) => (<ModifyLoopModal {...routeProps}
- loopCache={this.getLoopCache()}
- loadLoopFunction={this.loadLoop}/>)}
- />
+ <Route path="/userInfo" render={(routeProps) => (<UserInfoModal {...routeProps} />)} />
+ <Route path="/closeLoop" render={this.closeLoop} />
- <Route path="/userInfo" render={(routeProps) => (<UserInfoModal {...routeProps} />)} />
- <Route path="/closeLoop" render={this.closeLoop} />
-
- <Route path="/submit" render={(routeProps) => (<PerformAction {...routeProps}
- loopAction="submit"
- loopCache={this.getLoopCache()}
- updateLoopFunction={this.updateLoopCache}
- showSucAlert={this.showSucAlert}
- showFailAlert={this.showFailAlert}
- setBusyLoading={this.setBusyLoading}
- clearBusyLoading={this.clearBusyLoading}/>)}
- />
- <Route path="/stop" render={(routeProps) => (<PerformAction {...routeProps}
- loopAction="stop"
- loopCache={this.getLoopCache()}
- updateLoopFunction={this.updateLoopCache}
- showSucAlert={this.showSucAlert}
- showFailAlert={this.showFailAlert}
- setBusyLoading={this.setBusyLoading}
- clearBusyLoading={this.clearBusyLoading}/>)}
- />
- <Route path="/restart" render={(routeProps) => (<PerformAction {...routeProps}
- loopAction="restart"
- loopCache={this.getLoopCache()}
- updateLoopFunction={this.updateLoopCache}
- showSucAlert={this.showSucAlert}
- showFailAlert={this.showFailAlert}
- setBusyLoading={this.setBusyLoading}
- clearBusyLoading={this.clearBusyLoading}/>)}
- />
- <Route path="/delete" render={(routeProps) => (<PerformAction {...routeProps}
- loopAction="delete"
- loopCache={this.getLoopCache()}
- updateLoopFunction={this.updateLoopCache}
- showSucAlert={this.showSucAlert}
- showFailAlert={this.showFailAlert}
- setBusyLoading={this.setBusyLoading}
- clearBusyLoading={this.clearBusyLoading}/>)}
- />
- <Route path="/undeploy" render={(routeProps) => (<PerformAction {...routeProps}
- loopAction="undeploy"
- loopCache={this.getLoopCache()}
- updateLoopFunction={this.updateLoopCache}
- showSucAlert={this.showSucAlert}
- showFailAlert={this.showFailAlert}
- setBusyLoading={this.setBusyLoading}
- clearBusyLoading={this.clearBusyLoading}/>)}
- />
- <Route path="/deploy" render={(routeProps) => (<DeployLoopModal {...routeProps}
- loopCache={this.getLoopCache()}
- updateLoopFunction={this.updateLoopCache}
- showSucAlert={this.showSucAlert}
- showFailAlert={this.showFailAlert}/>)}
- />
- <Route path="/refreshStatus" render={(routeProps) => (<RefreshStatus {...routeProps}
- loopCache={this.getLoopCache()}
- updateLoopFunction={this.updateLoopCache}
- showSucAlert={this.showSucAlert}
- showFailAlert={this.showFailAlert}/>)}
- />
- </React.Fragment>
- );
- }
+ <Route path="/submit" render={(routeProps) => (<PerformAction {...routeProps}
+ loopAction="submit"
+ loopCache={this.getLoopCache()}
+ updateLoopFunction={this.updateLoopCache}
+ showSucAlert={this.showSucAlert}
+ showFailAlert={this.showFailAlert}
+ setBusyLoading={this.setBusyLoading}
+ clearBusyLoading={this.clearBusyLoading}/>)}
+ />
+ <Route path="/stop" render={(routeProps) => (<PerformAction {...routeProps}
+ loopAction="stop"
+ loopCache={this.getLoopCache()}
+ updateLoopFunction={this.updateLoopCache}
+ showSucAlert={this.showSucAlert}
+ showFailAlert={this.showFailAlert}
+ setBusyLoading={this.setBusyLoading}
+ clearBusyLoading={this.clearBusyLoading}/>)}
+ />
+ <Route path="/restart" render={(routeProps) => (<PerformAction {...routeProps}
+ loopAction="restart"
+ loopCache={this.getLoopCache()}
+ updateLoopFunction={this.updateLoopCache}
+ showSucAlert={this.showSucAlert}
+ showFailAlert={this.showFailAlert}
+ setBusyLoading={this.setBusyLoading}
+ clearBusyLoading={this.clearBusyLoading}/>)}
+ />
+ <Route path="/delete" render={(routeProps) => (<PerformAction {...routeProps}
+ loopAction="delete"
+ loopCache={this.getLoopCache()}
+ updateLoopFunction={this.updateLoopCache}
+ showSucAlert={this.showSucAlert}
+ showFailAlert={this.showFailAlert}
+ setBusyLoading={this.setBusyLoading}
+ clearBusyLoading={this.clearBusyLoading}/>)}
+ />
+ <Route path="/undeploy" render={(routeProps) => (<PerformAction {...routeProps}
+ loopAction="undeploy"
+ loopCache={this.getLoopCache()}
+ updateLoopFunction={this.updateLoopCache}
+ showSucAlert={this.showSucAlert}
+ showFailAlert={this.showFailAlert}
+ setBusyLoading={this.setBusyLoading}
+ clearBusyLoading={this.clearBusyLoading}/>)}
+ />
+ <Route path="/deploy" render={(routeProps) => (<DeployLoopModal {...routeProps}
+ loopCache={this.getLoopCache()}
+ updateLoopFunction={this.updateLoopCache}
+ showSucAlert={this.showSucAlert}
+ showFailAlert={this.showFailAlert}/>)}
+ />
+ <Route path="/refreshStatus" render={(routeProps) => (<RefreshStatus {...routeProps}
+ loopCache={this.getLoopCache()}
+ updateLoopFunction={this.updateLoopCache}
+ showSucAlert={this.showSucAlert}
+ showFailAlert={this.showFailAlert}/>)}
+ />
+ </React.Fragment>
+ );
+ }
renderGlobalStyle() {
return (
@@ -393,30 +394,30 @@
};
- renderSpinner() {
- if (this.isBusyLoading()) {
- return (
- <StyledSpinnerDiv>
- <Spinner animation="border" role="status">
- <span className="sr-only">Loading...</span>
- </Spinner>
- </StyledSpinnerDiv>
- );
- } else {
- return (<div></div>);
- }
- }
+ renderSpinner() {
+ if (this.isBusyLoading()) {
+ return (
+ <StyledSpinnerDiv>
+ <Spinner animation="border" role="status">
+ <span className="sr-only">Loading...</span>
+ </Spinner>
+ </StyledSpinnerDiv>
+ );
+ } else {
+ return (<div></div>);
+ }
+ }
- render() {
- return (
- <StyledMainDiv id="main_div">
- {this.renderGlobalStyle()}
- {this.renderRoutes()}
- {this.renderSpinner()}
- {this.renderAlertBar()}
- {this.renderNavBar()}
- {this.renderLoopViewer()}
- </StyledMainDiv>
- );
- }
+ render() {
+ return (
+ <StyledMainDiv id="main_div">
+ {this.renderGlobalStyle()}
+ {this.renderRoutes()}
+ {this.renderSpinner()}
+ {this.renderAlertBar()}
+ {this.renderNavBar()}
+ {this.renderLoopViewer()}
+ </StyledMainDiv>
+ );
+ }
}
diff --git a/ui-react/src/__snapshots__/LoopUI.test.js.snap b/ui-react/src/__snapshots__/LoopUI.test.js.snap
index cae9182..1a8a982 100644
--- a/ui-react/src/__snapshots__/LoopUI.test.js.snap
+++ b/ui-react/src/__snapshots__/LoopUI.test.js.snap
@@ -14,11 +14,15 @@
render={[Function]}
/>
<Route
- path="/ViewLoopTemplatesModal"
+ path="/viewLoopTemplatesModal"
render={[Function]}
/>
<Route
- path="/ManageDictionaries"
+ path="/manageDictionaries"
+ render={[Function]}
+ />
+ <Route
+ path="/viewAllPolicies"
render={[Function]}
/>
<Route
diff --git a/ui-react/src/__snapshots__/OnapClamp.test.js.snap b/ui-react/src/__snapshots__/OnapClamp.test.js.snap
index d4573b3..fd1b0d5 100644
--- a/ui-react/src/__snapshots__/OnapClamp.test.js.snap
+++ b/ui-react/src/__snapshots__/OnapClamp.test.js.snap
@@ -41,11 +41,15 @@
render={[Function]}
/>
<Route
- path="/ViewLoopTemplatesModal"
+ path="/viewLoopTemplatesModal"
render={[Function]}
/>
<Route
- path="/ManageDictionaries"
+ path="/manageDictionaries"
+ render={[Function]}
+ />
+ <Route
+ path="/viewAllPolicies"
render={[Function]}
/>
<Route
diff --git a/ui-react/src/api/LoopCache.test.js b/ui-react/src/api/LoopCache.test.js
index 3ae0817..76f819c 100644
--- a/ui-react/src/api/LoopCache.test.js
+++ b/ui-react/src/api/LoopCache.test.js
@@ -22,7 +22,7 @@
*/
import LoopCache from '../api/LoopCache';
-const json = require('./LoopCache_mokeLoopJsonCache.json');
+const json = require('./LoopCacheMockFile.json');
describe('Verify LoopCache functions', () => {
const loopCache = new LoopCache(json);
diff --git a/ui-react/src/api/LoopCache_mokeLoopJsonCache.json b/ui-react/src/api/LoopCacheMockFile.json
similarity index 100%
rename from ui-react/src/api/LoopCache_mokeLoopJsonCache.json
rename to ui-react/src/api/LoopCacheMockFile.json
diff --git a/ui-react/src/api/PoliciesListCache.js b/ui-react/src/api/PoliciesListCache.js
new file mode 100644
index 0000000..30c9348
--- /dev/null
+++ b/ui-react/src/api/PoliciesListCache.js
@@ -0,0 +1,34 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP CLAMP
+ * ================================================================================
+ * Copyright (C) 2021 AT&T Intellectual Property. All rights
+ * reserved.
+ * ================================================================================
+ * Licensed 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.
+ * ============LICENSE_END============================================
+ * ===================================================================
+ *
+ */
+
+export default class PoliciesListCache {
+ policiesJsonCache;
+
+ constructor(policiesJson) {
+ this.policiesJsonCache=policiesJson;
+ }
+
+ getAllPolicies() {
+ return this.policiesJsonCache["policies"];
+ }
+}
diff --git a/ui-react/src/api/PoliciesListCacheMockFile.json b/ui-react/src/api/PoliciesListCacheMockFile.json
new file mode 100644
index 0000000..5c6bd5b
--- /dev/null
+++ b/ui-react/src/api/PoliciesListCacheMockFile.json
@@ -0,0 +1,215 @@
+{
+ "policies": [
+ {
+ "MICROSERVICE_vLoadBalancerMS_v1_0_tcagen2_1_0_0_AV0": {
+ "type": "onap.policies.monitoring.tcagen2",
+ "type_version": "1.0.0",
+ "properties": {
+ "tca.policy": {
+ "domain": "measurementsForVfScaling",
+ "metricsPerEventName": [
+ {
+ "policyScope": "DCAE",
+ "thresholds": [
+ {
+ "version": "1.0.2",
+ "severity": "MAJOR",
+ "thresholdValue": 200,
+ "closedLoopEventStatus": "ONSET",
+ "closedLoopControlName": "LOOP_test",
+ "direction": "LESS_OR_EQUAL",
+ "fieldPath": "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedTotalPacketsDelta"
+ }
+ ],
+ "eventName": "vLoadBalancer",
+ "policyVersion": "v0.0.1",
+ "controlLoopSchemaType": "VM",
+ "policyName": "DCAE.Config_tca-hi-lo"
+ }
+ ]
+ }
+ },
+ "name": "MICROSERVICE_vLoadBalancerMS_v1_0_tcagen2_1_0_0_AV0",
+ "version": "1.0.0",
+ "metadata": {
+ "policy-id": "MICROSERVICE_vLoadBalancerMS_v1_0_tcagen2_1_0_0_AV0",
+ "policy-version": "1.0.0"
+ },
+ "pdpGroupInfo": {
+ "pdpGroup": "pdpGroup2",
+ "pdpSubGroup": "subGroup2"
+ },
+ "supportedPdpGroups": [
+ {
+ "pdpGroup2": [
+ "subGroup2",
+ "subGroup3"
+ ]
+ }
+ ]
+ }
+ },
+ {
+ "OPERATIONAL_vLoadBalancerMS_v1_0_Drools_1_0_0_7xd": {
+ "type": "onap.policies.controlloop.operational.common.Drools",
+ "type_version": "1.0.0",
+ "properties": {
+ "abatement": false,
+ "operations": [
+ {
+ "failure_retries": "final_failure_retries",
+ "id": "test1",
+ "failure_timeout": "final_failure_timeout",
+ "failure": "final_failure",
+ "operation": {
+ "payload": {
+ "artifact_name": "baseconfiguration",
+ "artifact_version": "1.0.0",
+ "mode": "async",
+ "data": "{\"resource-assignment-properties\":{\"request-id\":\"\",\"service-instance-id\":\"\",\"hostname\":\"\",\"request-info\":{\"prop1\":\"\",\"prop2\":\"\"}}}"
+ },
+ "target": {
+ "entityIds": {
+ "resourceID": "Vloadbalancerms..vdns..module-3",
+ "modelInvariantId": "4c10ba9b-f88f-415e-9de3-5d33336047fa",
+ "modelVersionId": "4fa73b49-8a6c-493e-816b-eb401567b720",
+ "modelName": "Vloadbalancerms..vdns..module-3",
+ "modelVersion": "1",
+ "modelCustomizationId": "bafcdab0-801d-4d81-9ead-f464640a38b1"
+ },
+ "targetType": "VNF"
+ },
+ "actor": "SDNR",
+ "operation": "BandwidthOnDemand"
+ },
+ "failure_guard": "final_failure_guard",
+ "retries": 0,
+ "timeout": 0,
+ "failure_exception": "final_failure_exception",
+ "description": "test",
+ "success": "final_success"
+ }
+ ],
+ "trigger": "test1",
+ "timeout": 0,
+ "id": "LOOP_test"
+ },
+ "name": "OPERATIONAL_vLoadBalancerMS_v1_0_Drools_1_0_0_7xd",
+ "version": "1.0.0",
+ "metadata": {
+ "policy-id": "OPERATIONAL_vLoadBalancerMS_v1_0_Drools_1_0_0_7xd",
+ "policy-version": "1.0.0"
+ },
+ "pdpGroupInfo": {
+ "pdpGroup": "pdpGroup2",
+ "pdpSubGroup": "subGroup3"
+ },
+ "supportedPdpGroups": [
+ {
+ "pdpGroup2": [
+ "subGroup2",
+ "subGroup3"
+ ]
+ }
+ ]
+ }
+ },
+ {
+ "SDNC_Policy.ONAP_NF_NAMING_TIMESTAMP": {
+ "type": "onap.policies.Naming",
+ "type_version": "1.0.0",
+ "properties": {
+ "naming-models": [
+ {
+ "naming-type": "VNF",
+ "naming-recipe": "AIC_CLOUD_REGION|DELIMITER|CONSTANT|DELIMITER|TIMESTAMP",
+ "name-operation": "to_lower_case()",
+ "naming-properties": [
+ {
+ "property-name": "AIC_CLOUD_REGION"
+ },
+ {
+ "property-name": "CONSTANT",
+ "property-value": "onap-nf"
+ },
+ {
+ "property-name": "TIMESTAMP"
+ },
+ {
+ "property-value": "-",
+ "property-name": "DELIMITER"
+ }
+ ]
+ },
+ {
+ "naming-type": "VNFC",
+ "naming-recipe": "VNF_NAME|DELIMITER|NFC_NAMING_CODE|DELIMITER|SEQUENCE",
+ "name-operation": "to_lower_case()",
+ "naming-properties": [
+ {
+ "property-name": "VNF_NAME"
+ },
+ {
+ "property-name": "SEQUENCE",
+ "increment-sequence": {
+ "max": "zzz",
+ "scope": "ENTIRETY",
+ "start-value": "1",
+ "length": "3",
+ "increment": "1",
+ "sequence-type": "alpha-numeric"
+ }
+ },
+ {
+ "property-name": "NFC_NAMING_CODE"
+ },
+ {
+ "property-value": "-",
+ "property-name": "DELIMITER"
+ }
+ ]
+ },
+ {
+ "naming-type": "VF-MODULE",
+ "naming-recipe": "VNF_NAME|DELIMITER|VF_MODULE_LABEL|DELIMITER|VF_MODULE_TYPE|DELIMITER|SEQUENCE",
+ "name-operation": "to_lower_case()",
+ "naming-properties": [
+ {
+ "property-name": "VNF_NAME"
+ },
+ {
+ "property-value": "-",
+ "property-name": "DELIMITER"
+ },
+ {
+ "property-name": "VF_MODULE_LABEL"
+ },
+ {
+ "property-name": "VF_MODULE_TYPE"
+ },
+ {
+ "property-name": "SEQUENCE",
+ "increment-sequence": {
+ "max": "zzz",
+ "scope": "PRECEEDING",
+ "start-value": "1",
+ "length": "3",
+ "increment": "1",
+ "sequence-type": "alpha-numeric"
+ }
+ }
+ ]
+ }
+ ],
+ "policy-instance-name": "ONAP_NF_NAMING_TIMESTAMP"
+ },
+ "name": "SDNC_Policy.ONAP_NF_NAMING_TIMESTAMP",
+ "version": "1.0.0",
+ "metadata": {
+ "policy-id": "SDNC_Policy.ONAP_NF_NAMING_TIMESTAMP",
+ "policy-version": "1.0.0"
+ }
+ }
+ }
+ ]
+}
\ No newline at end of file
diff --git a/ui-react/src/api/PolicyService.js b/ui-react/src/api/PolicyService.js
new file mode 100644
index 0000000..d591b09
--- /dev/null
+++ b/ui-react/src/api/PolicyService.js
@@ -0,0 +1,43 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP POLICY-CLAMP
+ * ================================================================================
+ * Copyright (C) 2021 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed 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.
+ * ============LICENSE_END============================================
+ * ===================================================================
+ *
+ */
+
+export default class PolicyService {
+ static getPoliciesList() {
+ return fetch(window.location.pathname + 'restservices/clds/v2/policies/list', {
+ method: 'GET',
+ credentials: 'same-origin'
+ })
+ .then(function (response) {
+ console.debug("getPoliciesList response received: ", response.status);
+ if (response.ok) {
+ return response.json();
+ } else {
+ console.error("getPoliciesList query failed");
+ return {};
+ }
+ })
+ .catch(function (error) {
+ console.error("getPoliciesList error received", error);
+ return {};
+ });
+ }
+}
diff --git a/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js b/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js
new file mode 100644
index 0000000..216a8ab
--- /dev/null
+++ b/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js
@@ -0,0 +1,188 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP POLICY-CLAMP
+ * ================================================================================
+ * Copyright (C) 2021 AT&T Intellectual Property. All rights
+ * reserved.
+ * ================================================================================
+ * Licensed 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.
+ * ============LICENSE_END============================================
+ * ===================================================================
+ *
+ */
+
+import React, { forwardRef } from 'react'
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+import styled from 'styled-components';
+import ArrowUpward from '@material-ui/icons/ArrowUpward';
+import ChevronLeft from '@material-ui/icons/ChevronLeft';
+import ChevronRight from '@material-ui/icons/ChevronRight';
+import Clear from '@material-ui/icons/Clear';
+import FirstPage from '@material-ui/icons/FirstPage';
+import LastPage from '@material-ui/icons/LastPage';
+import Search from '@material-ui/icons/Search';
+import MaterialTable from "material-table";
+import LoopCache from '../../../api/LoopCache';
+import PolicyService from '../../../api/PolicyService';
+import Select from 'react-select';
+
+const ModalStyled = styled(Modal)`
+ background-color: transparent;
+`
+
+const standardCellStyle = { border: '1px solid black' };
+const cellPdpGroupStyle = { backgroundColor: '#039be5', color: '#FFF', border: '1px solid black'};
+const headerStyle = { backgroundColor: '#ddd', border: '2px solid black' };
+const rowHeaderStyle = {backgroundColor:'#ddd', fontSize: '15pt', text: 'bold', border: '1px solid black'};
+const selectPdpGroupStyle = {
+ width: 2000
+}
+
+export default class ViewAllPolicies extends React.Component {
+ state = {
+ show: true,
+ content: 'Please select a policy to display it',
+ selectedRow: -1,
+ policiesListData: [],
+ policyColumnsDefinition: [
+ {
+ title: "#", field: "index", render: rowData => rowData.tableData.id + 1,
+ cellStyle: standardCellStyle,
+ headerStyle: headerStyle
+ },
+ {
+ title: "Policy Name", field: "name",
+ cellStyle: standardCellStyle,
+ headerStyle: headerStyle
+ },
+ {
+ title: "Policy Version", field: "version",
+ cellStyle: standardCellStyle,
+ headerStyle: headerStyle
+ },
+ {
+ title: "Policy Type", field: "type",
+ cellStyle: standardCellStyle,
+ headerStyle: headerStyle
+ },
+ {
+ title: "Policy Type Version", field: "type_version",
+ cellStyle: standardCellStyle,
+ headerStyle: headerStyle
+ },
+ {
+ title: "Deployed in PDP", field: "pdpGroupInfo.pdpGroup",
+ cellStyle: cellPdpGroupStyle,
+ headerStyle: headerStyle,
+ render: rowData => this.renderPdpGroupDropBox(rowData)
+ },
+ {
+ title: "PDP Group", field: "pdpGroupInfo.pdpGroup",
+ cellStyle: cellPdpGroupStyle,
+ headerStyle: headerStyle
+ },
+ {
+ title: "PDP SubGroup", field: "pdpGroupInfo.pdpSubGroup",
+ cellStyle: cellPdpGroupStyle,
+ headerStyle: headerStyle
+ }
+ ],
+ tableIcons: {
+ FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
+ LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
+ NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
+ PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
+ ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
+ Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
+ SortArrow: forwardRef((props, ref) => <ArrowUpward {...props} ref={ref} />)
+ }
+ };
+
+ constructor(props, context) {
+ super(props, context);
+ this.handleClose = this.handleClose.bind(this);
+ this.renderPdpGroupDropBox = this.renderPdpGroupDropBox.bind(this);
+ this.handlePdpGroupChange = this.handlePdpGroupChange.bind(this);
+
+ this.getAllPolicies();
+
+ }
+
+ handlePdpGroupChange(e) {
+ let pdpSplit = e.value.split("/");
+ let selectedPdpGroup = pdpSplit[0];
+ let selectedSubPdpGroup = pdpSplit[1];
+ if (typeof selectedSubPdpGroup !== "undefined") {
+ this.state.policiesListData[this.state.selectedRow]["pdpGroupInfo"] = {"pdpGroup":selectedPdpGroup,"pdpSubGroup":selectedSubPdpGroup};
+ } else {
+ delete this.state.policiesListData[this.state.selectedRow]["pdpGroupInfo"];
+ }
+ }
+
+ renderPdpGroupDropBox(dataRow) {
+ let optionItems = [{label: "NOT DEPLOYED", value: "NOT DEPLOYED"}];
+ let selectedItem = {label: "NOT DEPLOYED", value: "NOT DEPLOYED"};
+ if (typeof dataRow.supportedPdpGroups !== "undefined") {
+ for (const pdpGroup of dataRow["supportedPdpGroups"]) {
+ for (const pdpSubGroup of Object.values(pdpGroup)[0]) {
+ optionItems.push({ label: Object.keys(pdpGroup)[0]+"/"+pdpSubGroup,
+ value: Object.keys(pdpGroup)[0]+"/"+pdpSubGroup });
+ }
+ }
+ }
+ if (typeof dataRow.pdpGroupInfo !== "undefined") {
+ selectedItem = {label: dataRow["pdpGroupInfo"]["pdpGroup"]+"/"+dataRow["pdpGroupInfo"]["pdpSubGroup"],
+ value: dataRow["pdpGroupInfo"]["pdpGroup"]+"/"+dataRow["pdpGroupInfo"]["pdpSubGroup"]};
+ }
+ return (<div style={{width: '250px'}}><Select value={selectedItem} options={optionItems} onChange={this.handlePdpGroupChange}/></div>);
+ }
+
+ getAllPolicies() {
+ PolicyService.getPoliciesList().then(allPolicies => {
+ this.setState({ policiesListData: allPolicies["policies"] })
+ });
+ }
+
+ handleClose() {
+ this.setState({ show: false });
+ this.props.history.push('/')
+ }
+
+ render() {
+ return (
+ <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false}>
+ <Modal.Header closeButton>
+ </Modal.Header>
+ <Modal.Body>
+ <MaterialTable
+ title={"View All Policies in Policy Engine"}
+ data={this.state.policiesListData}
+ columns={this.state.policyColumnsDefinition}
+ icons={this.state.tableIcons}
+ onRowClick={(event, rowData) => {this.setState({selectedRow: rowData.tableData.id})}}
+ options={{
+ headerStyle:rowHeaderStyle,
+ rowStyle: rowData => ({
+ backgroundColor: (this.state.selectedRow !== -1 && this.state.selectedRow === rowData.tableData.id) ? '#EEE' : '#FFF'
+ })
+ }}
+ />
+ </Modal.Body>
+ <Modal.Footer>
+ <Button variant="secondary" onClick={this.handleClose}>Close</Button>
+ </Modal.Footer>
+ </ModalStyled>
+ );
+ }
+ }
\ No newline at end of file
diff --git a/ui-react/src/components/menu/MenuBar.js b/ui-react/src/components/menu/MenuBar.js
index 7cf5657..40a3890 100644
--- a/ui-react/src/components/menu/MenuBar.js
+++ b/ui-react/src/components/menu/MenuBar.js
@@ -2,7 +2,7 @@
* ============LICENSE_START=======================================================
* ONAP CLAMP
* ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights
+ * Copyright (C) 2019, 2021 AT&T Intellectual Property. All rights
* reserved.
* ================================================================================
* Licensed under the Apache License, Version 2.0 (the "License");
@@ -30,94 +30,95 @@
import { Link } from 'react-router-dom';
const StyledLink = styled(Link)`
- color: ${props => props.theme.menuFontColor};
- background-color: ${props => props.theme.menuBackgroundColor};
- font-weight: normal;
- display: block;
- width: 100%;
- padding: .25rem 1.5rem;
- clear: both;
- text-align: inherit;
- white-space: nowrap;
- border: 0;
- :hover {
- text-decoration: none;
- background-color: ${props => props.theme.menuHighlightedBackgroundColor};
- color: ${props => props.theme.menuHighlightedFontColor};
- }
+ color: ${props => props.theme.menuFontColor};
+ background-color: ${props => props.theme.menuBackgroundColor};
+ font-weight: normal;
+ display: block;
+ width: 100%;
+ padding: .25rem 1.5rem;
+ clear: both;
+ text-align: inherit;
+ white-space: nowrap;
+ border: 0;
+ :hover {
+ text-decoration: none;
+ background-color: ${props => props.theme.menuHighlightedBackgroundColor};
+ color: ${props => props.theme.menuHighlightedFontColor};
+ }
`;
const StyledNavLink = styled(Nav.Link)`
- color: ${props => props.theme.menuFontColor};
- background-color: ${props => props.theme.menuBackgroundColor};
- font-weight: normal;
- padding: .25rem 1.5rem;
- :hover {
- background-color: ${props => props.theme.menuHighlightedBackgroundColor};
- color: ${props => props.theme.menuHighlightedFontColor};
- }
+ color: ${props => props.theme.menuFontColor};
+ background-color: ${props => props.theme.menuBackgroundColor};
+ font-weight: normal;
+ padding: .25rem 1.5rem;
+ :hover {
+ 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;
- }
- }
+ 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,
- disabled: true
- };
+ state = {
+ loopName: this.props.loopName,
+ disabled: true
+ };
- componentWillReceiveProps(newProps) {
- if (newProps.loopName !== OnapConstants.defaultLoopName) {
- this.setState({ disabled: false });
- } else {
- this.setState({ disabled: true });
- }
- }
+ componentWillReceiveProps(newProps) {
+ if (newProps.loopName !== OnapConstants.defaultLoopName) {
+ this.setState({ disabled: false });
+ } else {
+ this.setState({ disabled: true });
+ }
+ }
- render () {
- return (
- <Navbar.Collapse>
- <StyledNavDropdown title="Loop Templates">
- <NavDropdown.Item as={StyledLink} to="/ViewLoopTemplatesModal">View All Templates</NavDropdown.Item>
- </StyledNavDropdown>
- <StyledNavDropdown title="Policy Models">
- <NavDropdown.Item as={StyledLink} to="/uploadToscaPolicyModal">Upload Tosca Model</NavDropdown.Item>
- <NavDropdown.Item as={StyledLink} to="/viewToscaPolicyModal">View Tosca Models</NavDropdown.Item>
- <NavDropdown.Item as={StyledLink} to="/ManageDictionaries">Manage Metadata Dictionaries</NavDropdown.Item>
+ render () {
+ return (
+ <Navbar.Collapse>
+ <StyledNavDropdown title="Loop Templates">
+ <NavDropdown.Item as={StyledLink} to="/viewLoopTemplatesModal">View All Templates</NavDropdown.Item>
</StyledNavDropdown>
- <StyledNavDropdown title="Loop Instance">
- <NavDropdown.Item as={StyledLink} to="/createLoop">Create</NavDropdown.Item>
- <NavDropdown.Item as={StyledLink} to="/openLoop">Open</NavDropdown.Item>
- <NavDropdown.Item as={StyledLink} to="/closeLoop" disabled={this.state.disabled}>Close</NavDropdown.Item>
- <NavDropdown.Item as={StyledLink} to="/modifyLoop" disabled={this.state.disabled}>Modify</NavDropdown.Item>
- <NavDropdown.Divider />
- <NavDropdown.Item as={StyledLink} to="/loopProperties" disabled={this.state.disabled}>Properties</NavDropdown.Item>
- <NavDropdown.Item as={StyledLink} to="/refreshStatus" disabled={this.state.disabled}>Refresh Status</NavDropdown.Item>
- </StyledNavDropdown>
- <StyledNavDropdown title="Loop Operations">
- <NavDropdown.Item as={StyledLink} to="/submit" disabled={this.state.disabled}>Create and deploy to Policy Engine(SUBMIT)</NavDropdown.Item>
- <NavDropdown.Item as={StyledLink} to="/stop" disabled={this.state.disabled}>Undeploy from Policy Engine (STOP)</NavDropdown.Item>
- <NavDropdown.Item as={StyledLink} to="/restart" disabled={this.state.disabled}>ReDeploy to Policy Engine (RESTART)</NavDropdown.Item>
- <NavDropdown.Item as={StyledLink} to="/delete" disabled={this.state.disabled}>Delete loop instance (DELETE)</NavDropdown.Item>
- <NavDropdown.Divider />
- <NavDropdown.Item as={StyledLink} to="/deploy" disabled={this.state.disabled}>Deploy to DCAE (DEPLOY)</NavDropdown.Item>
- <NavDropdown.Item as={StyledLink} to="/undeploy" disabled={this.state.disabled}>UnDeploy to DCAE (UNDEPLOY)</NavDropdown.Item>
- </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>
- </StyledNavDropdown>
- </Navbar.Collapse>
- );
- }
+ <StyledNavDropdown title="Policy Models">
+ <NavDropdown.Item as={StyledLink} to="/uploadToscaPolicyModal">Upload Tosca Model</NavDropdown.Item>
+ <NavDropdown.Item as={StyledLink} to="/viewToscaPolicyModal">View Tosca Models</NavDropdown.Item>
+ <NavDropdown.Item as={StyledLink} to="/manageDictionaries">Manage Metadata Dictionaries</NavDropdown.Item>
+ <NavDropdown.Item as={StyledLink} to="/viewAllPolicies">View All Policies</NavDropdown.Item>
+ </StyledNavDropdown>
+ <StyledNavDropdown title="Loop Instance">
+ <NavDropdown.Item as={StyledLink} to="/createLoop">Create</NavDropdown.Item>
+ <NavDropdown.Item as={StyledLink} to="/openLoop">Open</NavDropdown.Item>
+ <NavDropdown.Item as={StyledLink} to="/closeLoop" disabled={this.state.disabled}>Close</NavDropdown.Item>
+ <NavDropdown.Item as={StyledLink} to="/modifyLoop" disabled={this.state.disabled}>Modify</NavDropdown.Item>
+ <NavDropdown.Divider />
+ <NavDropdown.Item as={StyledLink} to="/loopProperties" disabled={this.state.disabled}>Properties</NavDropdown.Item>
+ <NavDropdown.Item as={StyledLink} to="/refreshStatus" disabled={this.state.disabled}>Refresh Status</NavDropdown.Item>
+ </StyledNavDropdown>
+ <StyledNavDropdown title="Loop Operations">
+ <NavDropdown.Item as={StyledLink} to="/submit" disabled={this.state.disabled}>Create and deploy to Policy Engine(SUBMIT)</NavDropdown.Item>
+ <NavDropdown.Item as={StyledLink} to="/stop" disabled={this.state.disabled}>Undeploy from Policy Engine (STOP)</NavDropdown.Item>
+ <NavDropdown.Item as={StyledLink} to="/restart" disabled={this.state.disabled}>ReDeploy to Policy Engine (RESTART)</NavDropdown.Item>
+ <NavDropdown.Item as={StyledLink} to="/delete" disabled={this.state.disabled}>Delete loop instance (DELETE)</NavDropdown.Item>
+ <NavDropdown.Divider />
+ <NavDropdown.Item as={StyledLink} to="/deploy" disabled={this.state.disabled}>Deploy to DCAE (DEPLOY)</NavDropdown.Item>
+ <NavDropdown.Item as={StyledLink} to="/undeploy" disabled={this.state.disabled}>UnDeploy to DCAE (UNDEPLOY)</NavDropdown.Item>
+ </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>
+ </StyledNavDropdown>
+ </Navbar.Collapse>
+ );
+ }
}
diff --git a/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap b/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap
index 92444ea..69a0e85 100644
--- a/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap
+++ b/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap
@@ -15,29 +15,29 @@
"isStatic": false,
"rules": Array [
"
- color: ",
+ color: ",
[Function],
";
- background-color: ",
+ background-color: ",
[Function],
";
- font-weight: normal;
- display: block;
- width: 100%;
- padding: .25rem 1.5rem;
- clear: both;
- text-align: inherit;
- white-space: nowrap;
- border: 0;
- :hover {
- text-decoration: none;
- background-color: ",
+ font-weight: normal;
+ display: block;
+ width: 100%;
+ padding: .25rem 1.5rem;
+ clear: both;
+ text-align: inherit;
+ white-space: nowrap;
+ border: 0;
+ :hover {
+ text-decoration: none;
+ background-color: ",
[Function],
";
- color: ",
+ color: ",
[Function],
";
- }
+ }
",
],
},
@@ -52,7 +52,7 @@
}
}
disabled={false}
- to="/ViewLoopTemplatesModal"
+ to="/viewLoopTemplatesModal"
>
View All Templates
</DropdownItem>
@@ -70,29 +70,29 @@
"isStatic": false,
"rules": Array [
"
- color: ",
+ color: ",
[Function],
";
- background-color: ",
+ background-color: ",
[Function],
";
- font-weight: normal;
- display: block;
- width: 100%;
- padding: .25rem 1.5rem;
- clear: both;
- text-align: inherit;
- white-space: nowrap;
- border: 0;
- :hover {
- text-decoration: none;
- background-color: ",
+ font-weight: normal;
+ display: block;
+ width: 100%;
+ padding: .25rem 1.5rem;
+ clear: both;
+ text-align: inherit;
+ white-space: nowrap;
+ border: 0;
+ :hover {
+ text-decoration: none;
+ background-color: ",
[Function],
";
- color: ",
+ color: ",
[Function],
";
- }
+ }
",
],
},
@@ -121,29 +121,29 @@
"isStatic": false,
"rules": Array [
"
- color: ",
+ color: ",
[Function],
";
- background-color: ",
+ background-color: ",
[Function],
";
- font-weight: normal;
- display: block;
- width: 100%;
- padding: .25rem 1.5rem;
- clear: both;
- text-align: inherit;
- white-space: nowrap;
- border: 0;
- :hover {
- text-decoration: none;
- background-color: ",
+ font-weight: normal;
+ display: block;
+ width: 100%;
+ padding: .25rem 1.5rem;
+ clear: both;
+ text-align: inherit;
+ white-space: nowrap;
+ border: 0;
+ :hover {
+ text-decoration: none;
+ background-color: ",
[Function],
";
- color: ",
+ color: ",
[Function],
";
- }
+ }
",
],
},
@@ -172,29 +172,29 @@
"isStatic": false,
"rules": Array [
"
- color: ",
+ color: ",
[Function],
";
- background-color: ",
+ background-color: ",
[Function],
";
- font-weight: normal;
- display: block;
- width: 100%;
- padding: .25rem 1.5rem;
- clear: both;
- text-align: inherit;
- white-space: nowrap;
- border: 0;
- :hover {
- text-decoration: none;
- background-color: ",
+ font-weight: normal;
+ display: block;
+ width: 100%;
+ padding: .25rem 1.5rem;
+ clear: both;
+ text-align: inherit;
+ white-space: nowrap;
+ border: 0;
+ :hover {
+ text-decoration: none;
+ background-color: ",
[Function],
";
- color: ",
+ color: ",
[Function],
";
- }
+ }
",
],
},
@@ -209,10 +209,61 @@
}
}
disabled={false}
- to="/ManageDictionaries"
+ to="/manageDictionaries"
>
Manage Metadata Dictionaries
</DropdownItem>
+ <DropdownItem
+ as={
+ Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "attrs": Array [],
+ "componentStyle": ComponentStyle {
+ "componentId": "sc-bdVaJa",
+ "isStatic": false,
+ "rules": Array [
+ "
+ color: ",
+ [Function],
+ ";
+ background-color: ",
+ [Function],
+ ";
+ font-weight: normal;
+ display: block;
+ width: 100%;
+ padding: .25rem 1.5rem;
+ clear: both;
+ text-align: inherit;
+ white-space: nowrap;
+ border: 0;
+ :hover {
+ text-decoration: none;
+ background-color: ",
+ [Function],
+ ";
+ color: ",
+ [Function],
+ ";
+ }
+",
+ ],
+ },
+ "displayName": "Styled(Link)",
+ "foldedComponentIds": Array [],
+ "render": [Function],
+ "styledComponentId": "sc-bdVaJa",
+ "target": [Function],
+ "toString": [Function],
+ "warnTooManyClasses": [Function],
+ "withComponent": [Function],
+ }
+ }
+ disabled={false}
+ to="/viewAllPolicies"
+ >
+ View All Policies
+ </DropdownItem>
</Styled(NavDropdown)>
<Styled(NavDropdown)
title="Loop Instance"
@@ -227,29 +278,29 @@
"isStatic": false,
"rules": Array [
"
- color: ",
+ color: ",
[Function],
";
- background-color: ",
+ background-color: ",
[Function],
";
- font-weight: normal;
- display: block;
- width: 100%;
- padding: .25rem 1.5rem;
- clear: both;
- text-align: inherit;
- white-space: nowrap;
- border: 0;
- :hover {
- text-decoration: none;
- background-color: ",
+ font-weight: normal;
+ display: block;
+ width: 100%;
+ padding: .25rem 1.5rem;
+ clear: both;
+ text-align: inherit;
+ white-space: nowrap;
+ border: 0;
+ :hover {
+ text-decoration: none;
+ background-color: ",
[Function],
";
- color: ",
+ color: ",
[Function],
";
- }
+ }
",
],
},
@@ -278,29 +329,29 @@
"isStatic": false,
"rules": Array [
"
- color: ",
+ color: ",
[Function],
";
- background-color: ",
+ background-color: ",
[Function],
";
- font-weight: normal;
- display: block;
- width: 100%;
- padding: .25rem 1.5rem;
- clear: both;
- text-align: inherit;
- white-space: nowrap;
- border: 0;
- :hover {
- text-decoration: none;
- background-color: ",
+ font-weight: normal;
+ display: block;
+ width: 100%;
+ padding: .25rem 1.5rem;
+ clear: both;
+ text-align: inherit;
+ white-space: nowrap;
+ border: 0;
+ :hover {
+ text-decoration: none;
+ background-color: ",
[Function],
";
- color: ",
+ color: ",
[Function],
";
- }
+ }
",
],
},
@@ -329,29 +380,29 @@
"isStatic": false,
"rules": Array [
"
- color: ",
+ color: ",
[Function],
";
- background-color: ",
+ background-color: ",
[Function],
";
- font-weight: normal;
- display: block;
- width: 100%;
- padding: .25rem 1.5rem;
- clear: both;
- text-align: inherit;
- white-space: nowrap;
- border: 0;
- :hover {
- text-decoration: none;
- background-color: ",
+ font-weight: normal;
+ display: block;
+ width: 100%;
+ padding: .25rem 1.5rem;
+ clear: both;
+ text-align: inherit;
+ white-space: nowrap;
+ border: 0;
+ :hover {
+ text-decoration: none;
+ background-color: ",
[Function],
";
- color: ",
+ color: ",
[Function],
";
- }
+ }
",
],
},
@@ -380,29 +431,29 @@
"isStatic": false,
"rules": Array [
"
- color: ",
+ color: ",
[Function],
";
- background-color: ",
+ background-color: ",
[Function],
";
- font-weight: normal;
- display: block;
- width: 100%;
- padding: .25rem 1.5rem;
- clear: both;
- text-align: inherit;
- white-space: nowrap;
- border: 0;
- :hover {
- text-decoration: none;
- background-color: ",
+ font-weight: normal;
+ display: block;
+ width: 100%;
+ padding: .25rem 1.5rem;
+ clear: both;
+ text-align: inherit;
+ white-space: nowrap;
+ border: 0;
+ :hover {
+ text-decoration: none;
+ background-color: ",
[Function],
";
- color: ",
+ color: ",
[Function],
";
- }
+ }
",
],
},
@@ -434,29 +485,29 @@
"isStatic": false,
"rules": Array [
"
- color: ",
+ color: ",
[Function],
";
- background-color: ",
+ background-color: ",
[Function],
";
- font-weight: normal;
- display: block;
- width: 100%;
- padding: .25rem 1.5rem;
- clear: both;
- text-align: inherit;
- white-space: nowrap;
- border: 0;
- :hover {
- text-decoration: none;
- background-color: ",
+ font-weight: normal;
+ display: block;
+ width: 100%;
+ padding: .25rem 1.5rem;
+ clear: both;
+ text-align: inherit;
+ white-space: nowrap;
+ border: 0;
+ :hover {
+ text-decoration: none;
+ background-color: ",
[Function],
";
- color: ",
+ color: ",
[Function],
";
- }
+ }
",
],
},
@@ -485,29 +536,29 @@
"isStatic": false,
"rules": Array [
"
- color: ",
+ color: ",
[Function],
";
- background-color: ",
+ background-color: ",
[Function],
";
- font-weight: normal;
- display: block;
- width: 100%;
- padding: .25rem 1.5rem;
- clear: both;
- text-align: inherit;
- white-space: nowrap;
- border: 0;
- :hover {
- text-decoration: none;
- background-color: ",
+ font-weight: normal;
+ display: block;
+ width: 100%;
+ padding: .25rem 1.5rem;
+ clear: both;
+ text-align: inherit;
+ white-space: nowrap;
+ border: 0;
+ :hover {
+ text-decoration: none;
+ background-color: ",
[Function],
";
- color: ",
+ color: ",
[Function],
";
- }
+ }
",
],
},
@@ -540,29 +591,29 @@
"isStatic": false,
"rules": Array [
"
- color: ",
+ color: ",
[Function],
";
- background-color: ",
+ background-color: ",
[Function],
";
- font-weight: normal;
- display: block;
- width: 100%;
- padding: .25rem 1.5rem;
- clear: both;
- text-align: inherit;
- white-space: nowrap;
- border: 0;
- :hover {
- text-decoration: none;
- background-color: ",
+ font-weight: normal;
+ display: block;
+ width: 100%;
+ padding: .25rem 1.5rem;
+ clear: both;
+ text-align: inherit;
+ white-space: nowrap;
+ border: 0;
+ :hover {
+ text-decoration: none;
+ background-color: ",
[Function],
";
- color: ",
+ color: ",
[Function],
";
- }
+ }
",
],
},
@@ -591,29 +642,29 @@
"isStatic": false,
"rules": Array [
"
- color: ",
+ color: ",
[Function],
";
- background-color: ",
+ background-color: ",
[Function],
";
- font-weight: normal;
- display: block;
- width: 100%;
- padding: .25rem 1.5rem;
- clear: both;
- text-align: inherit;
- white-space: nowrap;
- border: 0;
- :hover {
- text-decoration: none;
- background-color: ",
+ font-weight: normal;
+ display: block;
+ width: 100%;
+ padding: .25rem 1.5rem;
+ clear: both;
+ text-align: inherit;
+ white-space: nowrap;
+ border: 0;
+ :hover {
+ text-decoration: none;
+ background-color: ",
[Function],
";
- color: ",
+ color: ",
[Function],
";
- }
+ }
",
],
},
@@ -642,29 +693,29 @@
"isStatic": false,
"rules": Array [
"
- color: ",
+ color: ",
[Function],
";
- background-color: ",
+ background-color: ",
[Function],
";
- font-weight: normal;
- display: block;
- width: 100%;
- padding: .25rem 1.5rem;
- clear: both;
- text-align: inherit;
- white-space: nowrap;
- border: 0;
- :hover {
- text-decoration: none;
- background-color: ",
+ font-weight: normal;
+ display: block;
+ width: 100%;
+ padding: .25rem 1.5rem;
+ clear: both;
+ text-align: inherit;
+ white-space: nowrap;
+ border: 0;
+ :hover {
+ text-decoration: none;
+ background-color: ",
[Function],
";
- color: ",
+ color: ",
[Function],
";
- }
+ }
",
],
},
@@ -693,29 +744,29 @@
"isStatic": false,
"rules": Array [
"
- color: ",
+ color: ",
[Function],
";
- background-color: ",
+ background-color: ",
[Function],
";
- font-weight: normal;
- display: block;
- width: 100%;
- padding: .25rem 1.5rem;
- clear: both;
- text-align: inherit;
- white-space: nowrap;
- border: 0;
- :hover {
- text-decoration: none;
- background-color: ",
+ font-weight: normal;
+ display: block;
+ width: 100%;
+ padding: .25rem 1.5rem;
+ clear: both;
+ text-align: inherit;
+ white-space: nowrap;
+ border: 0;
+ :hover {
+ text-decoration: none;
+ background-color: ",
[Function],
";
- color: ",
+ color: ",
[Function],
";
- }
+ }
",
],
},
@@ -747,29 +798,29 @@
"isStatic": false,
"rules": Array [
"
- color: ",
+ color: ",
[Function],
";
- background-color: ",
+ background-color: ",
[Function],
";
- font-weight: normal;
- display: block;
- width: 100%;
- padding: .25rem 1.5rem;
- clear: both;
- text-align: inherit;
- white-space: nowrap;
- border: 0;
- :hover {
- text-decoration: none;
- background-color: ",
+ font-weight: normal;
+ display: block;
+ width: 100%;
+ padding: .25rem 1.5rem;
+ clear: both;
+ text-align: inherit;
+ white-space: nowrap;
+ border: 0;
+ :hover {
+ text-decoration: none;
+ background-color: ",
[Function],
";
- color: ",
+ color: ",
[Function],
";
- }
+ }
",
],
},
@@ -798,29 +849,29 @@
"isStatic": false,
"rules": Array [
"
- color: ",
+ color: ",
[Function],
";
- background-color: ",
+ background-color: ",
[Function],
";
- font-weight: normal;
- display: block;
- width: 100%;
- padding: .25rem 1.5rem;
- clear: both;
- text-align: inherit;
- white-space: nowrap;
- border: 0;
- :hover {
- text-decoration: none;
- background-color: ",
+ font-weight: normal;
+ display: block;
+ width: 100%;
+ padding: .25rem 1.5rem;
+ clear: both;
+ text-align: inherit;
+ white-space: nowrap;
+ border: 0;
+ :hover {
+ text-decoration: none;
+ background-color: ",
[Function],
";
- color: ",
+ color: ",
[Function],
";
- }
+ }
",
],
},
@@ -864,29 +915,29 @@
"isStatic": false,
"rules": Array [
"
- color: ",
+ color: ",
[Function],
";
- background-color: ",
+ background-color: ",
[Function],
";
- font-weight: normal;
- display: block;
- width: 100%;
- padding: .25rem 1.5rem;
- clear: both;
- text-align: inherit;
- white-space: nowrap;
- border: 0;
- :hover {
- text-decoration: none;
- background-color: ",
+ font-weight: normal;
+ display: block;
+ width: 100%;
+ padding: .25rem 1.5rem;
+ clear: both;
+ text-align: inherit;
+ white-space: nowrap;
+ border: 0;
+ :hover {
+ text-decoration: none;
+ background-color: ",
[Function],
";
- color: ",
+ color: ",
[Function],
";
- }
+ }
",
],
},