Add template name to UI

Add template name to the UI loop viewer + change color of logs panel

Issue-ID: CLAMP-826
Signed-off-by: sebdet <sebastien.determe@intl.att.com>
Change-Id: I6776729cefc0597067ae8ef722f7d6e488a12cad

diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js
index 5e2da79..efd02b4 100644 (file)
--- a/ui-react/src/LoopUI.js
+++ b/ui-react/src/LoopUI.js
@@ -195,7 +195,7 @@ export default class LoopUI extends React.Component {
        renderLoopViewHeader() {
                return (
                        <LoopViewHeaderDivStyled>
-                               Loop Viewer - {this.state.loopName}
+                               Loop Viewer - {this.state.loopName} - ({this.state.loopCache.getTemplateName()})
                        </LoopViewHeaderDivStyled>
                );
        }

diff --git a/ui-react/src/__snapshots__/LoopUI.test.js.snap b/ui-react/src/__snapshots__/LoopUI.test.js.snap
index e523de9..ff08f7a 100644 (file)
--- a/ui-react/src/__snapshots__/LoopUI.test.js.snap
+++ b/ui-react/src/__snapshots__/LoopUI.test.js.snap
@@ -176,6 +176,8 @@ exports[`Verify LoopUI Test the render method 1`] = `
     <styled.div>
       Loop Viewer - 
       testLoopName
+       - (
+      )
     </styled.div>
     <styled.div>
       <withRouter(LoopViewSvg)

diff --git a/ui-react/src/__snapshots__/OnapClamp.test.js.snap b/ui-react/src/__snapshots__/OnapClamp.test.js.snap
index 2351853..93dc442 100644 (file)
--- a/ui-react/src/__snapshots__/OnapClamp.test.js.snap
+++ b/ui-react/src/__snapshots__/OnapClamp.test.js.snap
@@ -13,6 +13,8 @@ exports[`Verify OnapClamp Test the render method 1`] = `
       "fontNormal": "black",
       "fontSize": "16px",
       "fontWarning": "#eb238e",
+      "loopLogsHeaderBackgroundColor": "white",
+      "loopLogsHeaderFontColor": "black",
       "loopViewerBackgroundColor": "white",
       "loopViewerFontColor": "yellow",
       "loopViewerHeaderBackgroundColor": "#337ab7",
@@ -199,6 +201,8 @@ exports[`Verify OnapClamp Test the render method 1`] = `
       <styled.div>
         Loop Viewer - 
         Empty (NO loop loaded yet)
+         - (
+        )
       </styled.div>
       <styled.div>
         <withRouter(LoopViewSvg)

diff --git a/ui-react/src/api/LoopCache.js b/ui-react/src/api/LoopCache.js
index c54337f..4f22dc2 100644 (file)
--- a/ui-react/src/api/LoopCache.js
+++ b/ui-react/src/api/LoopCache.js
@@ -219,4 +219,11 @@ export default class LoopCache {
        getComponentStates() {
                return this.loopJsonCache.components;
        }
+
+       getTemplateName() {
+           if (this.loopJsonCache["loopTemplate"] !== undefined) {
+                               return this.loopJsonCache["loopTemplate"].name;
+        }
+           return null;
+       }
 }

diff --git a/ui-react/src/components/dialogs/Loop/CreateLoopModal.js b/ui-react/src/components/dialogs/Loop/CreateLoopModal.js
index c5762a8..321304a 100644 (file)
--- a/ui-react/src/components/dialogs/Loop/CreateLoopModal.js
+++ b/ui-react/src/components/dialogs/Loop/CreateLoopModal.js
@@ -118,7 +118,7 @@ export default class CreateLoopModal extends React.Component {
 
        render() {
                return (
-                       <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}>
+                       <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static">
                                <Modal.Header closeButton>
                                        <Modal.Title>Create Model</Modal.Title>
                                </Modal.Header>

diff --git a/ui-react/src/components/dialogs/Loop/DeployLoopModal.js b/ui-react/src/components/dialogs/Loop/DeployLoopModal.js
index 6e74370..853df1c 100644 (file)
--- a/ui-react/src/components/dialogs/Loop/DeployLoopModal.js
+++ b/ui-react/src/components/dialogs/Loop/DeployLoopModal.js
@@ -161,7 +161,7 @@ export default class DeployLoopModal extends React.Component {
        }
        render() {
                return (
-                                       <ModalStyled size="lg" show={this.state.show} onHide={this.handleClose} >
+                                       <ModalStyled size="lg" show={this.state.show} onHide={this.handleClose} backdrop="static">
                                                <Modal.Header closeButton>
                                                        <Modal.Title>Deployment parameters</Modal.Title>
                                                </Modal.Header>

diff --git a/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js b/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js
index 73946f4..97b7822 100644 (file)
--- a/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js
+++ b/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js
@@ -102,7 +102,7 @@ export default class LoopPropertiesModal extends React.Component {
 
        render() {
                return (
-                       <ModalStyled size="lg" show={this.state.show} onHide={this.handleClose} >
+                       <ModalStyled size="lg" show={this.state.show} onHide={this.handleClose} backdrop="static">
                                <Modal.Header closeButton>
                                        <Modal.Title>Model Properties</Modal.Title>
                                </Modal.Header>

diff --git a/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js b/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js
index 42c03da..1802e43 100644 (file)
--- a/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js
+++ b/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js
@@ -174,7 +174,7 @@ export default class ModifyLoopModal extends React.Component {
 
        render() {
                return (
-                       <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}>
+                       <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static">
                                <Modal.Header closeButton>
                                        <Modal.Title>Modify Loop Operational Policies</Modal.Title>
                                </Modal.Header>

diff --git a/ui-react/src/components/dialogs/Loop/OpenLoopModal.js b/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
index 7c98fab..15a7188 100644 (file)
--- a/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
+++ b/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
@@ -101,7 +101,7 @@ export default class OpenLoopModal extends React.Component {
 
        render() {
                return (
-                       <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}>
+                       <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static">
                                <Modal.Header closeButton>
                                        <Modal.Title>Open Model</Modal.Title>
                                </Modal.Header>

diff --git a/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap b/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap
index d7beecd..c9acb9e 100644 (file)
--- a/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap
+++ b/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap
@@ -2,6 +2,7 @@
 
 exports[`Verify DeployLoopModal Test the render method 1`] = `
 <Styled(Bootstrap(Modal))
+  backdrop="static"
   onHide={[Function]}
   show={true}
   size="lg"

diff --git a/ui-react/src/components/dialogs/Loop/__snapshots__/LoopPropertiesModal.test.js.snap b/ui-react/src/components/dialogs/Loop/__snapshots__/LoopPropertiesModal.test.js.snap
index fe9aee2..0fde7a5 100644 (file)
--- a/ui-react/src/components/dialogs/Loop/__snapshots__/LoopPropertiesModal.test.js.snap
+++ b/ui-react/src/components/dialogs/Loop/__snapshots__/LoopPropertiesModal.test.js.snap
@@ -2,6 +2,7 @@
 
 exports[`Verify LoopPropertiesModal Test the render method 1`] = `
 <Styled(Bootstrap(Modal))
+  backdrop="static"
   onHide={[Function]}
   show={true}
   size="lg"

diff --git a/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap b/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap
index 1aa0b5a..1c98195 100644 (file)
--- a/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap
+++ b/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap
@@ -2,6 +2,7 @@
 
 exports[`Verify OpenLoopModal Test the render method 1`] = `
 <Styled(Bootstrap(Modal))
+  backdrop="static"
   onHide={[Function]}
   show={true}
   size="xl"

diff --git a/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.js b/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.js
index d8065ed..d435036 100644 (file)
--- a/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.js
+++ b/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.js
@@ -376,7 +376,7 @@ export default class ManageDictionaries extends React.Component {
     
     render() {
         return (
-            <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}>
+            <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static">
                 <Modal.Header closeButton>
                     <Modal.Title>Manage Dictionaries</Modal.Title>
                 </Modal.Header>

diff --git a/ui-react/src/components/dialogs/ManageDictionaries/__snapshots__/ManageDictionaries.test.js.snap b/ui-react/src/components/dialogs/ManageDictionaries/__snapshots__/ManageDictionaries.test.js.snap
index e782922..a73513e 100644 (file)
--- a/ui-react/src/components/dialogs/ManageDictionaries/__snapshots__/ManageDictionaries.test.js.snap
+++ b/ui-react/src/components/dialogs/ManageDictionaries/__snapshots__/ManageDictionaries.test.js.snap
@@ -2,6 +2,7 @@
 
 exports[`Verify ManageDictionaries Test API Successful 1`] = `
 <Styled(Bootstrap(Modal))
+  backdrop="static"
   onHide={[Function]}
   show={true}
   size="xl"

diff --git a/ui-react/src/components/dialogs/Policy/PolicyModal.js b/ui-react/src/components/dialogs/Policy/PolicyModal.js
index 8b49d91..05db8e1 100644 (file)
--- a/ui-react/src/components/dialogs/Policy/PolicyModal.js
+++ b/ui-react/src/components/dialogs/Policy/PolicyModal.js
@@ -252,7 +252,7 @@ export default class PolicyModal extends React.Component {
 
        render() {
                return (
-                       <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}>
+                       <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose } backdrop="static">
                                <Modal.Header closeButton>
                                        <Modal.Title>Edit the policy</Modal.Title>
                                </Modal.Header>

diff --git a/ui-react/src/components/dialogs/Tosca/UploadToscaPolicyModal.js b/ui-react/src/components/dialogs/Tosca/UploadToscaPolicyModal.js
index 1937485..ec08058 100644 (file)
--- a/ui-react/src/components/dialogs/Tosca/UploadToscaPolicyModal.js
+++ b/ui-react/src/components/dialogs/Tosca/UploadToscaPolicyModal.js
@@ -86,7 +86,7 @@ export default class UploadToscaPolicyModal extends React.Component {
 
        render() {
                return (
-                       <ModalStyled size="lg" show={this.state.show} onHide={this.handleClose}>
+                       <ModalStyled size="lg" show={this.state.show} onHide={this.handleClose} backdrop="static">
                                <Modal.Header closeButton>
                                        <Modal.Title>Upload Tosca Model</Modal.Title>
                                </Modal.Header>

diff --git a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
index cec6722..c5a91ea 100644 (file)
--- a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
+++ b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
@@ -133,7 +133,7 @@ export default class ViewLoopTemplatesModal extends React.Component {
 
        render() {
     return (
-               <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}>
+               <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static">
                        <Modal.Header closeButton>
                        </Modal.Header>
                        <Modal.Body>

diff --git a/ui-react/src/components/dialogs/Tosca/ViewToscaPolicyModal.js b/ui-react/src/components/dialogs/Tosca/ViewToscaPolicyModal.js
index 6500805..71f371a 100644 (file)
--- a/ui-react/src/components/dialogs/Tosca/ViewToscaPolicyModal.js
+++ b/ui-react/src/components/dialogs/Tosca/ViewToscaPolicyModal.js
@@ -139,7 +139,7 @@ export default class ViewToscalPolicyModal extends React.Component {
 
        render() {
                return (
-                       <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}>
+                       <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static">
                                <Modal.Header closeButton>
                                </Modal.Header>
                                <Modal.Body>

diff --git a/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap b/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap
index 253820f..2926e06 100644 (file)
--- a/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap
+++ b/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap
@@ -2,6 +2,7 @@
 
 exports[`Verify ViewLoopTemplatesModal Test the tosca model view render method 1`] = `
 <Styled(Bootstrap(Modal))
+  backdrop="static"
   onHide={[Function]}
   show={true}
   size="xl"

diff --git a/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewToscaPolicyModal.test.js.snap b/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewToscaPolicyModal.test.js.snap
index fc5eef0..babe597 100644 (file)
--- a/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewToscaPolicyModal.test.js.snap
+++ b/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewToscaPolicyModal.test.js.snap
@@ -2,6 +2,7 @@
 
 exports[`Verify ViewToscaPolicyModal Test the tosca model view render method 1`] = `
 <Styled(Bootstrap(Modal))
+  backdrop="static"
   onHide={[Function]}
   show={true}
   size="xl"

diff --git a/ui-react/src/components/loop_viewer/logs/LoopLogs.js b/ui-react/src/components/loop_viewer/logs/LoopLogs.js
index 6abdc4b..b3f0526 100644 (file)
--- a/ui-react/src/components/loop_viewer/logs/LoopLogs.js
+++ b/ui-react/src/components/loop_viewer/logs/LoopLogs.js
@@ -26,9 +26,9 @@ import LoopCache from '../../../api/LoopCache';
 import styled from 'styled-components';
 
 const LoopLogsHeaderDivStyled = styled.div`
-       background-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
+       background-color: ${props => props.theme.loopLogsHeaderBackgroundColor};
        padding: 10px 10px;
-       color: ${props => props.theme.loopViewerHeaderFontColor};
+       color: ${props => props.theme.loopLogsHeaderFontColor};
 `
 const TableStyled = styled(Table)`
     

diff --git a/ui-react/src/theme/globalStyle.js b/ui-react/src/theme/globalStyle.js
index 3656f9e..64fd7c5 100644 (file)
--- a/ui-react/src/theme/globalStyle.js
+++ b/ui-react/src/theme/globalStyle.js
@@ -87,6 +87,9 @@ export const DefaultClampTheme = {
        loopViewerHeaderBackgroundColor: '#337ab7',
        loopViewerHeaderFontColor: 'white',
 
+    loopLogsHeaderBackgroundColor:  'white',
+    loopLogsHeaderFontColor: 'black',
+
        menuBackgroundColor: 'white',
        menuFontColor: 'black',
        menuHighlightedBackgroundColor: '#337ab7',