Align ui-react file in policy-clamp and policy-gui 66/125666/2
authorliamfallon <liam.fallon@est.tech>
Tue, 9 Nov 2021 15:22:22 +0000 (15:22 +0000)
committerliamfallon <liam.fallon@est.tech>
Wed, 10 Nov 2021 08:57:23 +0000 (08:57 +0000)
When the ui-react code was transferred to policy-gui, the white space
was cleaned up and reformatted. This makes it difficult to track the
real functional changes if any between ui-react in policy-clamp and
policy-gui.

This review brings the white space changes into ui-react in policy-clamp
to make file comparisons easier.

Issue-ID: POLICY-3358
Change-Id: Ic303e71b341e5c0f7ca0de0ed4c4962ebf2f988a
Signed-off-by: liamfallon <liam.fallon@est.tech>
51 files changed:
runtime/ui-react/src/LoopUI.test.js
runtime/ui-react/src/NotFound.js
runtime/ui-react/src/NotFound.test.js
runtime/ui-react/src/OnapClamp.js
runtime/ui-react/src/OnapClamp.test.js
runtime/ui-react/src/api/LoopActionService.js
runtime/ui-react/src/api/LoopCache.js
runtime/ui-react/src/api/LoopCacheMockFile.json
runtime/ui-react/src/api/LoopService.js
runtime/ui-react/src/api/PoliciesListCacheMockFile.json
runtime/ui-react/src/api/PolicyService.js
runtime/ui-react/src/api/PolicyToscaService.js
runtime/ui-react/src/api/TemplateService.js
runtime/ui-react/src/api/UserService.js
runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.js
runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js
runtime/ui-react/src/components/dialogs/Loop/DeployLoopModal.js
runtime/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js
runtime/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js
runtime/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.test.js
runtime/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js
runtime/ui-react/src/components/dialogs/Loop/ModifyLoopModal.test.js
runtime/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
runtime/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js
runtime/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.js
runtime/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.test.js
runtime/ui-react/src/components/dialogs/PerformActions.js
runtime/ui-react/src/components/dialogs/PerformActions.test.js
runtime/ui-react/src/components/dialogs/Policy/PoliciesTreeViewer.js
runtime/ui-react/src/components/dialogs/Policy/PolicyEditor.test.js
runtime/ui-react/src/components/dialogs/Policy/PolicyToscaFileSelector.js
runtime/ui-react/src/components/dialogs/Policy/ToscaViewer.js
runtime/ui-react/src/components/dialogs/Policy/ToscaViewer.test.js
runtime/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js
runtime/ui-react/src/components/dialogs/RefreshStatus.js
runtime/ui-react/src/components/dialogs/RefreshStatus.test.js
runtime/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
runtime/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js
runtime/ui-react/src/components/dialogs/UserInfoModal.js
runtime/ui-react/src/components/dialogs/UserInfoModal.test.js
runtime/ui-react/src/components/loop_viewer/logs/LoopLogs.js
runtime/ui-react/src/components/loop_viewer/logs/LoopLogs.test.js
runtime/ui-react/src/components/loop_viewer/status/LoopStatus.js
runtime/ui-react/src/components/loop_viewer/status/LoopStatus.test.js
runtime/ui-react/src/components/menu/MenuBar.test.js
runtime/ui-react/src/index.js
runtime/ui-react/src/theme/globalStyle.js
runtime/ui-react/src/utils/CsvToJson.js
runtime/ui-react/src/utils/CsvToJson.test.js
runtime/ui-react/src/utils/OnapConstants.js
runtime/ui-react/src/utils/OnapUtils.js

index bfd6376..47ade44 100644 (file)
@@ -30,142 +30,144 @@ import LoopActionService from './api/LoopActionService';
 import LoopService from './api/LoopService';
 
 describe('Verify LoopUI', () => {
-       beforeEach(() => {
-               fetch.resetMocks();
-               fetch.mockImplementation(() => {
-                       return Promise.resolve({
-                               ok: true,
-                               status: 200,
-                               text: () => "testUser"
-
-                       });
-               });
-       })
-
-       const loopCache = new LoopCache({
-               "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
-               "components": {
-                       "POLICY": {
-                               "componentState": {
-                                       "stateName": "UNKNOWN",
-                                       "description": "The policies defined have NOT yet been created on the policy engine"
-                               }
-                       },
-                       "DCAE": {
-                               "componentState": {
-                                       "stateName": "BLUEPRINT_DEPLOYED",
-                                       "description": "The DCAE blueprint has been found in the DCAE inventory but not yet instancianted for this loop"
-                               }
-                       }
-               }
-       });
-
-       it('Test the render method', async () => {
-               const flushPromises = () => new Promise(setImmediate);
-
-               const component = shallow(<LoopUI />)
-               component.setState({
-                       loopName: "testLoopName",
-                       showSucAlert: false,
-                       showFailAlert: false 
-               });
-               await flushPromises();
-               expect(component).toMatchSnapshot();
-       });
-
-       test('Test closeLoop method', () => {
-               const historyMock = { push: jest.fn() };
-               const component = shallow(<LoopUI history={historyMock}/>)
-               const instance = component.instance();
-               instance.closeLoop();
-                       
-               expect(component.state('loopName')).toEqual(OnapConstants.defaultLoopName);
-               expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
-       })
-
-       test('Test loadLoop method refresh suc', async () => {
-               const historyMock = { push: jest.fn() };
-               LoopService.getLoop = jest.fn().mockImplementation(() => {
-                       return Promise.resolve({
-                               ok: true,
-                               status: 200,
-                               text: () => {}
-                       });
-               });
-
-               LoopActionService.refreshStatus = jest.fn().mockImplementation(() => {
-                       return Promise.resolve({name: "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca"});
-               });
-
-               const flushPromises = () => new Promise(setImmediate);
-               const component = shallow(<LoopUI history={historyMock}/>)
-               const instance = component.instance();
-               instance.loadLoop("LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca");
-
-               await flushPromises();
-
-               const resLoopCache = instance.getLoopCache();
-                       
-               expect(resLoopCache.getComponentStates()).toBeUndefined();
-               expect(component.state('loopName')).toEqual("LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca");
-       })
-
-       test('Test loadLoop method refresh fail', async () => {
-               const historyMock = { push: jest.fn() };
-               LoopService.getLoop = jest.fn().mockImplementation(() => {
-                       return Promise.resolve({
-                       name: "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
-                       "components": {
-                               "POLICY": {
-                                       "componentState": {
-                                               "stateName": "UNKNOWN",
-                                               "description": "The policies defined have NOT yet been created on the policy engine"
-                                       }
-                               },
-                               "DCAE": {
-                                       "componentState": {
-                                               "stateName": "BLUEPRINT_DEPLOYED",
-                                               "description": "The DCAE blueprint has been found in the DCAE inventory but not yet instancianted for this loop"
-                                       }
-                               }
-                       }});
-               });
-
-               LoopActionService.refreshStatus = jest.fn().mockImplementation(() => {
-                       return Promise.reject({error: "whatever"});
-               });
-
-               const flushPromises = () => new Promise(setImmediate);
-               const component = shallow(<LoopUI history={historyMock}/>)
-               const instance = component.instance();
-               instance.loadLoop("LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca");
-
-               await flushPromises();
-
-               const resLoopCache = instance.getLoopCache();
-                       
-               expect(resLoopCache).toEqual(loopCache);
-               expect(component.state('loopName')).toEqual("LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca");
-       })
-
-       test('Test alert methods', () => {
-               const component = shallow(<LoopUI />)
-               expect(component.state('showSucAlert')).toEqual(false);
-
-               const instance = component.instance();
-               instance.showSucAlert("testAlert");
-               expect(component.state('showSucAlert')).toEqual(true);
-               expect(component.state('showFailAlert')).toEqual(false);
-               expect(component.state('showMessage')).toEqual("testAlert");
-
-               instance.disableAlert();
-                       
-               expect(component.state('showSucAlert')).toEqual(false);
-               expect(component.state('showFailAlert')).toEqual(false);
-
-               instance.showFailAlert("testAlert2");
-               expect(component.state('showSucAlert')).toEqual(false);
-               expect(component.state('showFailAlert')).toEqual(true);
-               expect(component.state('showMessage')).toEqual("testAlert2");
-       })
+  beforeEach(() => {
+    fetch.resetMocks();
+    fetch.mockImplementation(() => {
+      return Promise.resolve({
+        ok: true,
+        status: 200,
+        text: () => "testUser"
+
+      });
+    });
+  })
+
+  const loopCache = new LoopCache({
+    "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
+    "components": {
+      "POLICY": {
+        "componentState": {
+          "stateName": "UNKNOWN",
+          "description": "The policies defined have NOT yet been created on the policy engine"
+        }
+      },
+      "DCAE": {
+        "componentState": {
+          "stateName": "BLUEPRINT_DEPLOYED",
+          "description": "The DCAE blueprint has been found in the DCAE inventory but not yet instancianted for this loop"
+        }
+      }
+    }
+  });
+
+  it('Test the render method', async () => {
+    const flushPromises = () => new Promise(setImmediate);
+
+    const component = shallow(<LoopUI/>)
+    component.setState({
+      loopName: "testLoopName",
+      showSucAlert: false,
+      showFailAlert: false
+    });
+    await flushPromises();
+    expect(component).toMatchSnapshot();
+  });
+
+  test('Test closeLoop method', () => {
+    const historyMock = { push: jest.fn() };
+    const component = shallow(<LoopUI history={ historyMock }/>)
+    const instance = component.instance();
+    instance.closeLoop();
+
+    expect(component.state('loopName')).toEqual(OnapConstants.defaultLoopName);
+    expect(historyMock.push.mock.calls[0]).toEqual(['/']);
+  })
+
+  test('Test loadLoop method refresh suc', async () => {
+    const historyMock = { push: jest.fn() };
+    LoopService.getLoop = jest.fn().mockImplementation(() => {
+      return Promise.resolve({
+        ok: true,
+        status: 200,
+        text: () => {
+        }
+      });
+    });
+
+    LoopActionService.refreshStatus = jest.fn().mockImplementation(() => {
+      return Promise.resolve({ name: "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca" });
+    });
+
+    const flushPromises = () => new Promise(setImmediate);
+    const component = shallow(<LoopUI history={ historyMock }/>)
+    const instance = component.instance();
+    instance.loadLoop("LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca");
+
+    await flushPromises();
+
+    const resLoopCache = instance.getLoopCache();
+
+    expect(resLoopCache.getComponentStates()).toBeUndefined();
+    expect(component.state('loopName')).toEqual("LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca");
+  })
+
+  test('Test loadLoop method refresh fail', async () => {
+    const historyMock = { push: jest.fn() };
+    LoopService.getLoop = jest.fn().mockImplementation(() => {
+      return Promise.resolve({
+        name: "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
+        "components": {
+          "POLICY": {
+            "componentState": {
+              "stateName": "UNKNOWN",
+              "description": "The policies defined have NOT yet been created on the policy engine"
+            }
+          },
+          "DCAE": {
+            "componentState": {
+              "stateName": "BLUEPRINT_DEPLOYED",
+              "description": "The DCAE blueprint has been found in the DCAE inventory but not yet instancianted for this loop"
+            }
+          }
+        }
+      });
+    });
+
+    LoopActionService.refreshStatus = jest.fn().mockImplementation(() => {
+      return Promise.reject({ error: "whatever" });
+    });
+
+    const flushPromises = () => new Promise(setImmediate);
+    const component = shallow(<LoopUI history={ historyMock }/>)
+    const instance = component.instance();
+    instance.loadLoop("LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca");
+
+    await flushPromises();
+
+    const resLoopCache = instance.getLoopCache();
+
+    expect(resLoopCache).toEqual(loopCache);
+    expect(component.state('loopName')).toEqual("LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca");
+  })
+
+  test('Test alert methods', () => {
+    const component = shallow(<LoopUI/>)
+    expect(component.state('showSucAlert')).toEqual(false);
+
+    const instance = component.instance();
+    instance.showSucAlert("testAlert");
+    expect(component.state('showSucAlert')).toEqual(true);
+    expect(component.state('showFailAlert')).toEqual(false);
+    expect(component.state('showMessage')).toEqual("testAlert");
+
+    instance.disableAlert();
+
+    expect(component.state('showSucAlert')).toEqual(false);
+    expect(component.state('showFailAlert')).toEqual(false);
+
+    instance.showFailAlert("testAlert2");
+    expect(component.state('showSucAlert')).toEqual(false);
+    expect(component.state('showFailAlert')).toEqual(true);
+    expect(component.state('showMessage')).toEqual("testAlert2");
+  })
 });
index d4b53fd..fb6d10a 100644 (file)
@@ -24,13 +24,13 @@ import React from 'react'
 
 
 export default class NotFound extends React.Component {
-       render () {
-               return (
+  render() {
+    return (
       <div id='main'>
-       <div class="divRow"><b>Page Not Found!</b></div>
-       <div class="divRow">Please cick <a href="/">here</a> to go back to the main page.</div>
+        <div class="divRow"><b>Page Not Found!</b></div>
+        <div class="divRow">Please cick <a href="/">here</a> to go back to the main page.</div>
       </div>
 
-               );
-       }
+    );
+  }
 }
index 3a5fc10..3b4dcb0 100644 (file)
@@ -26,11 +26,11 @@ import NotFound from './NotFound';
 
 describe('Verify OnapClamp', () => {
 
-       it('Test the render method',  () => {
+  it('Test the render method', () => {
 
-               const component = shallow(<NotFound />)
+    const component = shallow(<NotFound/>)
 
-               expect(component).toMatchSnapshot();
-       });
+    expect(component).toMatchSnapshot();
+  });
 
 });
index 506f6e0..b8615ac 100644 (file)
@@ -27,13 +27,13 @@ import { ThemeProvider } from 'styled-components';
 import { DefaultClampTheme } from './theme/globalStyle.js';
 
 export default class OnapClamp extends LoopUI {
-       
-       render() {
-               console.info("Onap Clamp UI starting");
-               return (
-               <ThemeProvider theme={DefaultClampTheme}>
-                       {super.render()}
-               </ThemeProvider>);
-       }
+
+  render() {
+    console.info("Onap Clamp UI starting");
+    return (
+      <ThemeProvider theme={ DefaultClampTheme }>
+        { super.render() }
+      </ThemeProvider>);
+  }
 }
 
index c3336a9..c711a95 100644 (file)
@@ -26,11 +26,11 @@ import OnapClamp from './OnapClamp';
 
 describe('Verify OnapClamp', () => {
 
-       it('Test the render method',  () => {
+  it('Test the render method', () => {
 
-               const component = shallow(<OnapClamp />)
+    const component = shallow(<OnapClamp/>)
 
-               expect(component).toMatchSnapshot();
-       });
+    expect(component).toMatchSnapshot();
+  });
 
 });
index 18ae90e..6f3b22f 100644 (file)
  *
  */
 
-export default class LoopActionService{
+export default class LoopActionService {
 
-       static performAction(cl_name, uiAction) {
-               console.info("LoopActionService perform action: " + uiAction + " closedloopName=" + cl_name);
-               const svcAction = uiAction.toLowerCase();
-               return fetch(window.location.pathname + "restservices/clds/v2/loop/" + svcAction + "/" + cl_name, {
-                               method: 'PUT',
-                               credentials: 'same-origin'
-                       })
-               .then(function (response) {
-                       if (response.ok) {
-                               return response;
-                       } else {
-                               return Promise.reject("Perform action failed with code:" + response.status);
-                       }
-               })
-               .then(function (data) {
-                       console.info("Action Successful: " + uiAction);
-                       return data;
-               })
-               .catch(function(error) {
-                       console.info("Action Failure: " + uiAction);
-                       return Promise.reject(error);
-               });
-       }
+  static performAction(cl_name, uiAction) {
+    console.info("LoopActionService perform action: " + uiAction + " closedloopName=" + cl_name);
+    const svcAction = uiAction.toLowerCase();
+    return fetch(window.location.pathname + "restservices/clds/v2/loop/" + svcAction + "/" + cl_name, {
+      method: 'PUT',
+      credentials: 'same-origin'
+    })
+      .then(function (response) {
+        if (response.ok) {
+          return response;
+        } else {
+          return Promise.reject("Perform action failed with code:" + response.status);
+        }
+      })
+      .then(function (data) {
+        console.info("Action Successful: " + uiAction);
+        return data;
+      })
+      .catch(function (error) {
+        console.info("Action Failure: " + uiAction);
+        return Promise.reject(error);
+      });
+  }
 
 
-       static refreshStatus(cl_name) {
-               console.info("Refresh the status for closedloopName=" + cl_name);
+  static refreshStatus(cl_name) {
+    console.info("Refresh the status for closedloopName=" + cl_name);
 
-               return fetch(window.location.pathname + "restservices/clds/v2/loop/getstatus/" + cl_name, {
-                       method: 'GET',
-                       credentials: 'same-origin'
-               })
-               .then(function (response) {
-                       if (response.ok) {
-                               return response.json();
-                       } else {
-                               return Promise.reject("Refresh status failed with code:" + response.status);
-                       }
-               })
-               .then(function (data) {
-                       console.info ("Refresh status Successful");
-                       return data;
-               })
-               .catch(function(error) {
-                       console.info ("Refresh status failed:", error);
-                       return Promise.reject(error);
-               });
-       }
+    return fetch(window.location.pathname + "restservices/clds/v2/loop/getstatus/" + cl_name, {
+      method: 'GET',
+      credentials: 'same-origin'
+    })
+      .then(function (response) {
+        if (response.ok) {
+          return response.json();
+        } else {
+          return Promise.reject("Refresh status failed with code:" + response.status);
+        }
+      })
+      .then(function (data) {
+        console.info("Refresh status Successful");
+        return data;
+      })
+      .catch(function (error) {
+        console.info("Refresh status failed:", error);
+        return Promise.reject(error);
+      });
+  }
 }
index 3e19b4f..ac2da07 100644 (file)
  */
 
 export default class LoopCache {
-       loopJsonCache;
-
-       constructor(loopJson) {
-               this.loopJsonCache=loopJson;
-       }
-
-       updateMicroServiceProperties(name, newMsProperties) {
-                       for (var policy in this.loopJsonCache["microServicePolicies"]) {
-                               if (this.loopJsonCache["microServicePolicies"][policy]["name"] === name) {
-                                       this.loopJsonCache["microServicePolicies"][policy]["configurationsJson"] = newMsProperties;
-                               }
-                       }
-       }
-
-       updateMicroServicePdpGroup(name, pdpGroup, pdpSubgroup) {
-                       for (var policy in this.loopJsonCache["microServicePolicies"]) {
-                               if (this.loopJsonCache["microServicePolicies"][policy]["name"] === name) {
-                                       this.loopJsonCache["microServicePolicies"][policy]["pdpGroup"] = pdpGroup;
-                                       this.loopJsonCache["microServicePolicies"][policy]["pdpSubgroup"] = pdpSubgroup;
-                               }
-                       }
-       }
-
-       updateGlobalProperties(newGlobalProperties) {
-               this.loopJsonCache["globalPropertiesJson"] = newGlobalProperties;
-       }
-
-       updateOperationalPolicyProperties(name, newOpProperties) {
-               for (var policy in this.loopJsonCache["operationalPolicies"]) {
-                               if (this.loopJsonCache["operationalPolicies"][policy]["name"] === name) {
-                                       this.loopJsonCache["operationalPolicies"][policy]["configurationsJson"] = newOpProperties;
-                               }
-                       }
-       }
-
-       updateOperationalPolicyPdpGroup(name, pdpGroup, pdpSubgroup) {
-               for (var policy in this.loopJsonCache["operationalPolicies"]) {
-                       if (this.loopJsonCache["operationalPolicies"][policy]["name"] === name) {
-                               this.loopJsonCache["operationalPolicies"][policy]["pdpGroup"] = pdpGroup;
-                               this.loopJsonCache["operationalPolicies"][policy]["pdpSubgroup"] = pdpSubgroup;
-                       }
-               }
-       }
-
-       getLoopName() {
-               return this.loopJsonCache["name"];
-       }
-
-       getOperationalPolicyJsonSchema() {
-               return this.loopJsonCache["operationalPolicies"]["0"]["jsonRepresentation"];
-       }
-
-       getOperationalPolicies() {
-               return this.loopJsonCache["operationalPolicies"];
-       }
-
-       getOperationalPoliciesNoJsonSchema() {
-               var operationalPolicies = JSON.parse(JSON.stringify(this.loopJsonCache["operationalPolicies"]));
-               delete operationalPolicies[0]["jsonRepresentation"];
-               return operationalPolicies;
-       }
-
-       getGlobalProperties() {
-               return this.loopJsonCache["globalPropertiesJson"];
-       }
-
-       getDcaeDeploymentProperties() {
-               return this.loopJsonCache["globalPropertiesJson"]["dcaeDeployParameters"];
-       }
-
-       getMicroServicePolicies() {
-               return this.loopJsonCache["microServicePolicies"];
-       }
-
-       getOperationalPolicyForName(name) {
-               var opProperties=this.getOperationalPolicies();
-               for (var policy in opProperties) {
-                       if (opProperties[policy]["name"] === name) {
-                               return opProperties[policy];
-                       }
-               }
-               return null;
-       }
-
-       getOperationalPolicyPropertiesForName(name) {
-               var opConfig = this.getOperationalPolicyForName(name);
-               if (opConfig !== null) {
-                       return opConfig["configurationsJson"];
-               }
-               return null;
-       }
-
-       getOperationalPolicyJsonRepresentationForName(name) {
-               var opConfig = this.getOperationalPolicyForName(name);
-               if (opConfig !== null) {
-                       return opConfig["jsonRepresentation"];
-               }
-               return null;
-       }
-
-       getOperationalPolicySupportedPdpGroup(name) {
-               var opConfig=this.getOperationalPolicyForName(name);
-               if (opConfig !== null) {
-                   if (opConfig["policyModel"]["policyPdpGroup"] !== undefined && opConfig["policyModel"]["policyPdpGroup"]["supportedPdpGroups"] !== undefined) {
-                           return opConfig["policyModel"]["policyPdpGroup"]["supportedPdpGroups"];
-                       }
-               }
-               return [];
-       }
-
-       getOperationalPolicyPdpGroup(name) {
-               var opConfig=this.getOperationalPolicyForName(name);
-               if (opConfig !== null) {
-                       return opConfig["pdpGroup"];
-               }
-               return null;
-       }
-
-       getOperationalPolicyPdpSubgroup(name) {
-               var opConfig=this.getOperationalPolicyForName(name);
-               if (opConfig !== null) {
-                       return opConfig["pdpSubgroup"];
-               }
-               return null;
-       }
-
-       getMicroServiceSupportedPdpGroup(name) {
-               var microService=this.getMicroServiceForName(name);
-               if (microService !== null) {
-                   if (microService["policyModel"]["policyPdpGroup"] !== undefined && microService["policyModel"]["policyPdpGroup"]["supportedPdpGroups"] !== undefined) {
-                           return microService["policyModel"]["policyPdpGroup"]["supportedPdpGroups"];
-                       }
-               }
-               return [];
-       }
-
-       getMicroServicePdpGroup(name) {
-               var microService=this.getMicroServiceForName(name);
-               if (microService !== null) {
-                       return microService["pdpGroup"];
-               }
-               return null;
-       }
-
-       getMicroServicePdpSubgroup(name) {
-               var microService=this.getMicroServiceForName(name);
-               if (microService !== null) {
-                       return microService["pdpSubgroup"];
-               }
-               return null;
-       }
-
-       getMicroServiceForName(name) {
-               var msProperties=this.getMicroServicePolicies();
-               for (var policy in msProperties) {
-                       if (msProperties[policy]["name"] === name) {
-                               return msProperties[policy];
-                       }
-               }
-               return null;
-       }
-
-       getMicroServicePropertiesForName(name) {
-               var msConfig = this.getMicroServiceForName(name);
-               if (msConfig !== null) {
-                       return msConfig["configurationsJson"];
-               }
-               return null;
-       }
-
-       getMicroServiceJsonRepresentationForName(name) {
-               var msConfig = this.getMicroServiceForName(name);
-               if (msConfig !== null) {
-                       return msConfig["jsonRepresentation"];
-               }
-               return null;
-       }
-
-       getResourceDetailsVfProperty() {
-               return this.loopJsonCache["modelService"]["resourceDetails"]["VF"];
-       }
-
-       getResourceDetailsVfModuleProperty() {
-               return this.loopJsonCache["modelService"]["resourceDetails"]["VFModule"];
-       }
-
-       getLoopLogsArray() {
-               return this.loopJsonCache.loopLogs;
-       }
-
-       getComputedState() {
-               return this.loopJsonCache.lastComputedState;
-       }
-
-       getComponentStates() {
-               return this.loopJsonCache.components;
-       }
-
-       getTemplateName() {
-           if (this.getLoopTemplate() !== undefined) {
-                               return this.getLoopTemplate().name;
-        }
-           return null;
-       }
-
-       getLoopTemplate() {
-               return this.loopJsonCache["loopTemplate"];
-       }
-
-       isOpenLoopTemplate() {
-               var loopTemplate = this.getLoopTemplate();
-               if(loopTemplate != null && loopTemplate["allowedLoopType"] === "OPEN") {
-                       return true;
-               }
-               return false;
-       }
-
-       getAllLoopElementModels() {
-           var loopTemplate = this.getLoopTemplate();
-           var loopElementModels = [];
-           if(loopTemplate != null) {
-               for (var element of loopTemplate['loopElementModelsUsed']) {
-                   loopElementModels.push(element['loopElementModel'])
-               }
-           }
-           return loopElementModels;
-       }
+  loopJsonCache;
+
+  constructor(loopJson) {
+    this.loopJsonCache = loopJson;
+  }
+
+  updateMicroServiceProperties(name, newMsProperties) {
+    for (var policy in this.loopJsonCache["microServicePolicies"]) {
+      if (this.loopJsonCache["microServicePolicies"][policy]["name"] === name) {
+        this.loopJsonCache["microServicePolicies"][policy]["configurationsJson"] = newMsProperties;
+      }
+    }
+  }
+
+  updateMicroServicePdpGroup(name, pdpGroup, pdpSubgroup) {
+    for (var policy in this.loopJsonCache["microServicePolicies"]) {
+      if (this.loopJsonCache["microServicePolicies"][policy]["name"] === name) {
+        this.loopJsonCache["microServicePolicies"][policy]["pdpGroup"] = pdpGroup;
+        this.loopJsonCache["microServicePolicies"][policy]["pdpSubgroup"] = pdpSubgroup;
+      }
+    }
+  }
+
+  updateGlobalProperties(newGlobalProperties) {
+    this.loopJsonCache["globalPropertiesJson"] = newGlobalProperties;
+  }
+
+  updateOperationalPolicyProperties(name, newOpProperties) {
+    for (var policy in this.loopJsonCache["operationalPolicies"]) {
+      if (this.loopJsonCache["operationalPolicies"][policy]["name"] === name) {
+        this.loopJsonCache["operationalPolicies"][policy]["configurationsJson"] = newOpProperties;
+      }
+    }
+  }
+
+  updateOperationalPolicyPdpGroup(name, pdpGroup, pdpSubgroup) {
+    for (var policy in this.loopJsonCache["operationalPolicies"]) {
+      if (this.loopJsonCache["operationalPolicies"][policy]["name"] === name) {
+        this.loopJsonCache["operationalPolicies"][policy]["pdpGroup"] = pdpGroup;
+        this.loopJsonCache["operationalPolicies"][policy]["pdpSubgroup"] = pdpSubgroup;
+      }
+    }
+  }
+
+  getLoopName() {
+    return this.loopJsonCache["name"];
+  }
+
+  getOperationalPolicyJsonSchema() {
+    return this.loopJsonCache["operationalPolicies"]["0"]["jsonRepresentation"];
+  }
+
+  getOperationalPolicies() {
+    return this.loopJsonCache["operationalPolicies"];
+  }
+
+  getOperationalPoliciesNoJsonSchema() {
+    var operationalPolicies = JSON.parse(JSON.stringify(this.loopJsonCache["operationalPolicies"]));
+    delete operationalPolicies[0]["jsonRepresentation"];
+    return operationalPolicies;
+  }
+
+  getGlobalProperties() {
+    return this.loopJsonCache["globalPropertiesJson"];
+  }
+
+  getDcaeDeploymentProperties() {
+    return this.loopJsonCache["globalPropertiesJson"]["dcaeDeployParameters"];
+  }
+
+  getMicroServicePolicies() {
+    return this.loopJsonCache["microServicePolicies"];
+  }
+
+  getOperationalPolicyForName(name) {
+    var opProperties = this.getOperationalPolicies();
+    for (var policy in opProperties) {
+      if (opProperties[policy]["name"] === name) {
+        return opProperties[policy];
+      }
+    }
+    return null;
+  }
+
+  getOperationalPolicyPropertiesForName(name) {
+    var opConfig = this.getOperationalPolicyForName(name);
+    if (opConfig !== null) {
+      return opConfig["configurationsJson"];
+    }
+    return null;
+  }
+
+  getOperationalPolicyJsonRepresentationForName(name) {
+    var opConfig = this.getOperationalPolicyForName(name);
+    if (opConfig !== null) {
+      return opConfig["jsonRepresentation"];
+    }
+    return null;
+  }
+
+  getOperationalPolicySupportedPdpGroup(name) {
+    var opConfig = this.getOperationalPolicyForName(name);
+    if (opConfig !== null) {
+      if (opConfig["policyModel"]["policyPdpGroup"] !== undefined && opConfig["policyModel"]["policyPdpGroup"]["supportedPdpGroups"] !== undefined) {
+        return opConfig["policyModel"]["policyPdpGroup"]["supportedPdpGroups"];
+      }
+    }
+    return [];
+  }
+
+  getOperationalPolicyPdpGroup(name) {
+    var opConfig = this.getOperationalPolicyForName(name);
+    if (opConfig !== null) {
+      return opConfig["pdpGroup"];
+    }
+    return null;
+  }
+
+  getOperationalPolicyPdpSubgroup(name) {
+    var opConfig = this.getOperationalPolicyForName(name);
+    if (opConfig !== null) {
+      return opConfig["pdpSubgroup"];
+    }
+    return null;
+  }
+
+  getMicroServiceSupportedPdpGroup(name) {
+    var microService = this.getMicroServiceForName(name);
+    if (microService !== null) {
+      if (microService["policyModel"]["policyPdpGroup"] !== undefined && microService["policyModel"]["policyPdpGroup"]["supportedPdpGroups"] !== undefined) {
+        return microService["policyModel"]["policyPdpGroup"]["supportedPdpGroups"];
+      }
+    }
+    return [];
+  }
+
+  getMicroServicePdpGroup(name) {
+    var microService = this.getMicroServiceForName(name);
+    if (microService !== null) {
+      return microService["pdpGroup"];
+    }
+    return null;
+  }
+
+  getMicroServicePdpSubgroup(name) {
+    var microService = this.getMicroServiceForName(name);
+    if (microService !== null) {
+      return microService["pdpSubgroup"];
+    }
+    return null;
+  }
+
+  getMicroServiceForName(name) {
+    var msProperties = this.getMicroServicePolicies();
+    for (var policy in msProperties) {
+      if (msProperties[policy]["name"] === name) {
+        return msProperties[policy];
+      }
+    }
+    return null;
+  }
+
+  getMicroServicePropertiesForName(name) {
+    var msConfig = this.getMicroServiceForName(name);
+    if (msConfig !== null) {
+      return msConfig["configurationsJson"];
+    }
+    return null;
+  }
+
+  getMicroServiceJsonRepresentationForName(name) {
+    var msConfig = this.getMicroServiceForName(name);
+    if (msConfig !== null) {
+      return msConfig["jsonRepresentation"];
+    }
+    return null;
+  }
+
+  getResourceDetailsVfProperty() {
+    return this.loopJsonCache["modelService"]["resourceDetails"]["VF"];
+  }
+
+  getResourceDetailsVfModuleProperty() {
+    return this.loopJsonCache["modelService"]["resourceDetails"]["VFModule"];
+  }
+
+  getLoopLogsArray() {
+    return this.loopJsonCache.loopLogs;
+  }
+
+  getComputedState() {
+    return this.loopJsonCache.lastComputedState;
+  }
+
+  getComponentStates() {
+    return this.loopJsonCache.components;
+  }
+
+  getTemplateName() {
+    if (this.getLoopTemplate() !== undefined) {
+      return this.getLoopTemplate().name;
+    }
+    return null;
+  }
+
+  getLoopTemplate() {
+    return this.loopJsonCache["loopTemplate"];
+  }
+
+  isOpenLoopTemplate() {
+    var loopTemplate = this.getLoopTemplate();
+    if (loopTemplate != null && loopTemplate["allowedLoopType"] === "OPEN") {
+      return true;
+    }
+    return false;
+  }
+
+  getAllLoopElementModels() {
+    var loopTemplate = this.getLoopTemplate();
+    var loopElementModels = [];
+    if (loopTemplate != null) {
+      for (var element of loopTemplate['loopElementModelsUsed']) {
+        loopElementModels.push(element['loopElementModel'])
+      }
+    }
+    return loopElementModels;
+  }
 }
index cb9ed87..e5a6702 100644 (file)
@@ -8,7 +8,9 @@
       "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
     }
   },
-  "loopTemplate": {"name": "loopTemplateTest"},
+  "loopTemplate": {
+    "name": "loopTemplateTest"
+  },
   "modelService": {
     "serviceDetails": {
       "serviceType": "",
     {
       "name": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca",
       "modelType": "onap.policies.monitoring.cdap.tca.hi.lo.app",
-      "configurationsJson": {"domain": "measurementsForVfScaling"},
+      "configurationsJson": {
+        "domain": "measurementsForVfScaling"
+      },
       "shared": false,
       "pdpGroup": "pdpGroupTest",
       "pdpSubgroup": "pdpSubgroupTest",
-      "policyModel": {"policyPdpGroup": {"supportedPdpGroups": "supportedPdpGroupsTest"}},
-      "jsonRepresentation": {"schema": {}}
+      "policyModel": {
+        "policyPdpGroup": {
+          "supportedPdpGroups": "supportedPdpGroupsTest"
+        }
+      },
+      "jsonRepresentation": {
+        "schema": {}
+      }
     }
   ],
   "loopLogs": [
index 96bb8a0..16f1bec 100644 (file)
  */
 
 export default class LoopService {
-       static getLoopNames() {
-               return fetch(window.location.pathname + 'restservices/clds/v2/loop/getAllNames', { method: 'GET', credentials: 'same-origin' })
-                       .then(function (response) {
-                               console.debug("GetLoopNames response received: ", response.status);
-                               if (response.ok) {
-                                       return response.json();
-                               } else {
-                                       console.error("GetLoopNames query failed");
-                                       return {};
-                               }
-                       })
-                       .catch(function (error) {
-                               console.error("GetLoopNames error received", error);
-                               return {};
-                       });
-       }
+  static getLoopNames() {
+    return fetch(window.location.pathname + 'restservices/clds/v2/loop/getAllNames', { method: 'GET', credentials: 'same-origin' })
+      .then(function (response) {
+        console.debug("GetLoopNames response received: ", response.status);
+        if (response.ok) {
+          return response.json();
+        } else {
+          console.error("GetLoopNames query failed");
+          return {};
+        }
+      })
+      .catch(function (error) {
+        console.error("GetLoopNames error received", error);
+        return {};
+      });
+  }
 
-       static createLoop(loopName, templateName) {
-               return fetch(window.location.pathname + 'restservices/clds/v2/loop/create/' + loopName + '?templateName=' + templateName, {
-                       method: 'POST',
-                       headers: {
-                               "Content-Type": "application/json"
-                       },
-                       credentials: 'same-origin'
-               })
-                       .then(function (response) {
-                               console.debug("CreateLoop response received: ", response.status);
-                               return response.json();
-                       })
-                       .catch(function (error) {
-                               console.error("CreateLoop error received", error);
-                               return "";
-                       });
-       }
+  static createLoop(loopName, templateName) {
+    return fetch(window.location.pathname + 'restservices/clds/v2/loop/create/' + loopName + '?templateName=' + templateName, {
+      method: 'POST',
+      headers: {
+        "Content-Type": "application/json"
+      },
+      credentials: 'same-origin'
+    })
+      .then(function (response) {
+        console.debug("CreateLoop response received: ", response.status);
+        return response.json();
+      })
+      .catch(function (error) {
+        console.error("CreateLoop error received", error);
+        return "";
+      });
+  }
 
-       static getLoop(loopName) {
-               return fetch(window.location.pathname + 'restservices/clds/v2/loop/' + loopName, {
-                       method: 'GET',
-                       headers: {
-                               "Content-Type": "application/json"
-                       },
-                       credentials: 'same-origin'
-               })
-                       .then(function (response) {
-                               console.debug("GetLoop response received: ", response.status);
-                               if (response.ok) {
-                                       return response.json();
-                               } else {
-                                       console.error("GetLoop query failed");
-                                       return {};
-                               }
-                       })
-                       .catch(function (error) {
-                               console.error("GetLoop error received", error);
-                               return {};
-                       });
-       }
+  static getLoop(loopName) {
+    return fetch(window.location.pathname + 'restservices/clds/v2/loop/' + loopName, {
+      method: 'GET',
+      headers: {
+        "Content-Type": "application/json"
+      },
+      credentials: 'same-origin'
+    })
+      .then(function (response) {
+        console.debug("GetLoop response received: ", response.status);
+        if (response.ok) {
+          return response.json();
+        } else {
+          console.error("GetLoop query failed");
+          return {};
+        }
+      })
+      .catch(function (error) {
+        console.error("GetLoop error received", error);
+        return {};
+      });
+  }
 
-       static setMicroServiceProperties(loopName, jsonData) {
-               return fetch(window.location.pathname + 'restservices/clds/v2/loop/updateMicroservicePolicy/' + loopName, {
-                       method: 'POST',
-                       credentials: 'same-origin',
-                       headers: {
-                               "Content-Type": "application/json"
-                       },
-                       body: JSON.stringify(jsonData)
-               })
-                       .then(function (response) {
-                               console.debug("updateMicroservicePolicy response received: ", response.status);
-                               if (response.ok) {
-                                       return response.text();
-                               } else {
-                                       console.error("updateMicroservicePolicy query failed");
-                                       return "";
-                               }
-                       })
-                       .catch(function (error) {
-                               console.error("updateMicroservicePolicy error received", error);
-                               return "";
-                       });
-       }
-       
-       static setOperationalPolicyProperties(loopName, jsonData) {
-               return fetch(window.location.pathname + 'restservices/clds/v2/loop/updateOperationalPolicies/' + loopName, {
-                       method: 'POST',
-                       credentials: 'same-origin',
-                       headers: {
-                               "Content-Type": "application/json"
-                       },
-                       body: JSON.stringify(jsonData)
-               })
-                       .then(function (response) {
-                               console.debug("updateOperationalPolicies response received: ", response.status);
-                               if (response.ok) {
-                                       return response.text();
-                               } else {
-                                       console.error("updateOperationalPolicies query failed");
-                                       return "";
-                               }
-                       })
-                       .catch(function (error) {
-                               console.error("updateOperationalPolicies error received", error);
-                               return "";
-                       });
-       }
+  static setMicroServiceProperties(loopName, jsonData) {
+    return fetch(window.location.pathname + 'restservices/clds/v2/loop/updateMicroservicePolicy/' + loopName, {
+      method: 'POST',
+      credentials: 'same-origin',
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(jsonData)
+    })
+      .then(function (response) {
+        console.debug("updateMicroservicePolicy response received: ", response.status);
+        if (response.ok) {
+          return response.text();
+        } else {
+          console.error("updateMicroservicePolicy query failed");
+          return "";
+        }
+      })
+      .catch(function (error) {
+        console.error("updateMicroservicePolicy error received", error);
+        return "";
+      });
+  }
 
-       static updateGlobalProperties(loopName, jsonData) {
-               return fetch(window.location.pathname + 'restservices/clds/v2/loop/updateGlobalProperties/' + loopName, {
-                       method: 'POST',
-                       credentials: 'same-origin',
-                       headers: {
-                               "Content-Type": "application/json"
-                       },
-                       body: JSON.stringify(jsonData)
-               })
-                       .then(function (response) {
-                               console.debug("updateGlobalProperties response received: ", response.status);
-                               if (response.ok) {
-                                       return response.text();
-                               } else {
-                                       console.error("updateGlobalProperties query failed");
-                                       return "";
-                               }
-                       })
-                       .catch(function (error) {
-                               console.error("updateGlobalProperties error received", error);
-                               return "";
-                       });
-       }
+  static setOperationalPolicyProperties(loopName, jsonData) {
+    return fetch(window.location.pathname + 'restservices/clds/v2/loop/updateOperationalPolicies/' + loopName, {
+      method: 'POST',
+      credentials: 'same-origin',
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(jsonData)
+    })
+      .then(function (response) {
+        console.debug("updateOperationalPolicies response received: ", response.status);
+        if (response.ok) {
+          return response.text();
+        } else {
+          console.error("updateOperationalPolicies query failed");
+          return "";
+        }
+      })
+      .catch(function (error) {
+        console.error("updateOperationalPolicies error received", error);
+        return "";
+      });
+  }
 
-       static refreshOperationalPolicyJson(loopName,operationalPolicyName) {
-               return fetch(window.location.pathname + 'restservices/clds/v2/loop/refreshOperationalPolicyJsonSchema/' + loopName + '/' + operationalPolicyName, {
-                       method: 'PUT',
-                       headers: {
-                               "Content-Type": "application/json"
-                       },
-                       credentials: 'same-origin'
-               })
-                       .then(function (response) {
-                               console.debug("Refresh Operational Policy Json Schema response received: ", response.status);
-                               if (response.ok) {
-                                       return response.json();
-                               } else {
-                                       console.error("Refresh Operational Policy Json Schema query failed");
-                                       return {};
-                               }
-                       })
-                       .catch(function (error) {
-                               console.error("Refresh Operational Policy Json Schema error received", error);
-                               return {};
-                       });
-       }
+  static updateGlobalProperties(loopName, jsonData) {
+    return fetch(window.location.pathname + 'restservices/clds/v2/loop/updateGlobalProperties/' + loopName, {
+      method: 'POST',
+      credentials: 'same-origin',
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(jsonData)
+    })
+      .then(function (response) {
+        console.debug("updateGlobalProperties response received: ", response.status);
+        if (response.ok) {
+          return response.text();
+        } else {
+          console.error("updateGlobalProperties query failed");
+          return "";
+        }
+      })
+      .catch(function (error) {
+        console.error("updateGlobalProperties error received", error);
+        return "";
+      });
+  }
 
-               static refreshMicroServicePolicyJson(loopName,microServicePolicyName) {
-               return fetch(window.location.pathname + 'restservices/clds/v2/loop/refreshMicroServicePolicyJsonSchema/' + loopName + '/' + microServicePolicyName, {
-                       method: 'PUT',
-                       headers: {
-                               "Content-Type": "application/json"
-                       },
-                       credentials: 'same-origin'
-               })
-                       .then(function (response) {
-                               console.debug("Refresh Operational Policy Json Schema response received: ", response.status);
-                               if (response.ok) {
-                                       return response.json();
-                               } else {
-                                       console.error("Refresh Operational Policy Json Schema query failed");
-                                       return {};
-                               }
-                       })
-                       .catch(function (error) {
-                               console.error("Refresh Operational Policy Json Schema error received", error);
-                               return {};
-                       });
-    }
+  static refreshOperationalPolicyJson(loopName, operationalPolicyName) {
+    return fetch(window.location.pathname + 'restservices/clds/v2/loop/refreshOperationalPolicyJsonSchema/' + loopName + '/' + operationalPolicyName, {
+      method: 'PUT',
+      headers: {
+        "Content-Type": "application/json"
+      },
+      credentials: 'same-origin'
+    })
+      .then(function (response) {
+        console.debug("Refresh Operational Policy Json Schema response received: ", response.status);
+        if (response.ok) {
+          return response.json();
+        } else {
+          console.error("Refresh Operational Policy Json Schema query failed");
+          return {};
+        }
+      })
+      .catch(function (error) {
+        console.error("Refresh Operational Policy Json Schema error received", error);
+        return {};
+      });
+  }
 
-       static addOperationalPolicyType(loopName, policyType, policyVersion) {
-               return fetch(window.location.pathname + 'restservices/clds/v2/loop/addOperationaPolicy/' + loopName + '/policyModel/' + policyType +'/' + policyVersion , {
-                       method: 'PUT',
-                       headers: {
-                               "Content-Type": "application/json"
-                       },
-                       credentials: 'same-origin'
-               })
-                               .then(function (response) {
-                               console.debug("Add Operational Policy response received: ", response.status);
-                               if (response.ok) {
-                                       return response.json();
-                               } else {
-                                       return response.text();
-                               }
-                       })
-                       .catch(function (error) {
-                               console.error("Add Operational Policy query failed");
-                               throw new Error(error);
-                       })
-       }
+  static refreshMicroServicePolicyJson(loopName, microServicePolicyName) {
+    return fetch(window.location.pathname + 'restservices/clds/v2/loop/refreshMicroServicePolicyJsonSchema/' + loopName + '/' + microServicePolicyName, {
+      method: 'PUT',
+      headers: {
+        "Content-Type": "application/json"
+      },
+      credentials: 'same-origin'
+    })
+      .then(function (response) {
+        console.debug("Refresh Operational Policy Json Schema response received: ", response.status);
+        if (response.ok) {
+          return response.json();
+        } else {
+          console.error("Refresh Operational Policy Json Schema query failed");
+          return {};
+        }
+      })
+      .catch(function (error) {
+        console.error("Refresh Operational Policy Json Schema error received", error);
+        return {};
+      });
+  }
 
-       static removeOperationalPolicyType(loopName, policyType, policyVersion, policyName) {
-               return fetch(window.location.pathname + 'restservices/clds/v2/loop/removeOperationaPolicy/' + loopName + '/policyModel/' + policyType +'/' + policyVersion + '/' + policyName , {
-                       method: 'PUT',
-                       headers: {
-                               "Content-Type": "application/json"
-                       },
-                       credentials: 'same-origin'
-               })
-                               .then(function (response) {
-                                       console.debug("Remove Operational Policy response received: ", response.status);
-                               if (response.ok) {
-                                       return response.json();
-                               } else {
-                                       console.error("Remove Operational Policy query failed");
-                                       return {};
-                               }
-                       })
-                       .catch(function (error) {
-                               console.error("Remove Operational Policy error received", error);
-                               return {};
-                       });
-       }
+  static addOperationalPolicyType(loopName, policyType, policyVersion) {
+    return fetch(window.location.pathname + 'restservices/clds/v2/loop/addOperationaPolicy/' + loopName + '/policyModel/' + policyType + '/' + policyVersion, {
+      method: 'PUT',
+      headers: {
+        "Content-Type": "application/json"
+      },
+      credentials: 'same-origin'
+    })
+      .then(function (response) {
+        console.debug("Add Operational Policy response received: ", response.status);
+        if (response.ok) {
+          return response.json();
+        } else {
+          return response.text();
+        }
+      })
+      .catch(function (error) {
+        console.error("Add Operational Policy query failed");
+        throw new Error(error);
+      })
+  }
+
+  static removeOperationalPolicyType(loopName, policyType, policyVersion, policyName) {
+    return fetch(window.location.pathname + 'restservices/clds/v2/loop/removeOperationaPolicy/' + loopName + '/policyModel/' + policyType + '/' + policyVersion + '/' + policyName, {
+      method: 'PUT',
+      headers: {
+        "Content-Type": "application/json"
+      },
+      credentials: 'same-origin'
+    })
+      .then(function (response) {
+        console.debug("Remove Operational Policy response received: ", response.status);
+        if (response.ok) {
+          return response.json();
+        } else {
+          console.error("Remove Operational Policy query failed");
+          return {};
+        }
+      })
+      .catch(function (error) {
+        console.error("Remove Operational Policy error received", error);
+        return {};
+      });
+  }
 }
index f2886b3..cf4f0fd 100644 (file)
 export default class PolicyService {
   static getPoliciesList() {
     return fetch(window.location.pathname + 'restservices/clds/v2/policies', {
-        method: 'GET',
-        credentials: 'same-origin'
-        })
-        .then(function(response) {
-            console.debug("getPoliciesList response received: ", response.status);
-            if (response.ok) {
-                console.info("getPoliciesList query successful");
-                return response.json();
-            } else {
-                return response.text().then(responseBody => {
-                    throw new Error("HTTP " + response.status + "," + responseBody);
-                })
-            }
-        })
-        .catch(function(error) {
-            console.error("getPoliciesList error occurred ", error);
-            alert("getPoliciesList error occurred " + error);
-            return undefined;
-        });
+      method: 'GET',
+      credentials: 'same-origin'
+    })
+      .then(function (response) {
+        console.debug("getPoliciesList response received: ", response.status);
+        if (response.ok) {
+          console.info("getPoliciesList query successful");
+          return response.json();
+        } else {
+          return response.text().then(responseBody => {
+            throw new Error("HTTP " + response.status + "," + responseBody);
+          })
+        }
+      })
+      .catch(function (error) {
+        console.error("getPoliciesList error occurred ", error);
+        alert("getPoliciesList error occurred " + error);
+        return undefined;
+      });
   }
+
   static createNewPolicy(policyModelType, policyModelVersion, policyName, policyVersion, policyJson) {
     return fetch(window.location.pathname + 'restservices/clds/v2/policies/' + policyModelType + '/'
-                    + policyModelVersion + '/' + policyName + '/' + policyVersion, {
-            method: 'POST',
-            credentials: 'same-origin',
-            headers: {
-                "Content-Type": "application/json"
-            },
-            body: JSON.stringify(policyJson)
-        })
-        .then(function (response) {
-            console.debug("createNewPolicy response received: ", response.status);
-            if (response.ok) {
-                console.info("createNewPolicy query successful");
-                return response.text();
-            } else {
-               return response.text().then(responseBody => {
-                    throw new Error("HTTP " + response.status + "," + responseBody);
-                })
-            }
-        })
-        .catch(function (error) {
-            console.error("createNewPolicy error occurred ", error);
-            alert ("createNewPolicy error occurred " + error);
-            return undefined;
-        });
+      + policyModelVersion + '/' + policyName + '/' + policyVersion, {
+      method: 'POST',
+      credentials: 'same-origin',
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(policyJson)
+    })
+      .then(function (response) {
+        console.debug("createNewPolicy response received: ", response.status);
+        if (response.ok) {
+          console.info("createNewPolicy query successful");
+          return response.text();
+        } else {
+          return response.text().then(responseBody => {
+            throw new Error("HTTP " + response.status + "," + responseBody);
+          })
+        }
+      })
+      .catch(function (error) {
+        console.error("createNewPolicy error occurred ", error);
+        alert("createNewPolicy error occurred " + error);
+        return undefined;
+      });
   }
+
   static deletePolicy(policyModelType, policyModelVersion, policyName, policyVersion) {
     return fetch(window.location.pathname + 'restservices/clds/v2/policies/' + policyModelType + '/'
-        + policyModelVersion + '/' + policyName + '/' + policyVersion, {
-            method: 'DELETE',
-            credentials: 'same-origin'
-        })
-        .then(function (response) {
-            console.debug("deletePolicy response received: ", response.status);
-            if (response.ok) {
-                console.info("deletePolicy query successful");
-                return response.text();
-            } else {
-                return response.text().then(responseBody => {
-                    throw new Error("HTTP " + response.status + "," + responseBody);
-                })
-            }
-        })
-        .catch(function (error) {
-            console.error("deletePolicy error occurred ", error);
-            alert ("deletePolicy error occurred " + error);
-            return undefined;
-        });
+      + policyModelVersion + '/' + policyName + '/' + policyVersion, {
+      method: 'DELETE',
+      credentials: 'same-origin'
+    })
+      .then(function (response) {
+        console.debug("deletePolicy response received: ", response.status);
+        if (response.ok) {
+          console.info("deletePolicy query successful");
+          return response.text();
+        } else {
+          return response.text().then(responseBody => {
+            throw new Error("HTTP " + response.status + "," + responseBody);
+          })
+        }
+      })
+      .catch(function (error) {
+        console.error("deletePolicy error occurred ", error);
+        alert("deletePolicy error occurred " + error);
+        return undefined;
+      });
   }
+
   static updatePdpDeployment(pdpOperationsList) {
     return fetch(window.location.pathname + 'restservices/clds/v2/policies/pdpDeployment', {
-            method: 'PUT',
-            credentials: 'same-origin',
-            headers: {
-                "Content-Type": "application/json"
-            },
-            body: JSON.stringify(pdpOperationsList)
-        })
-        .then(function (response) {
-            console.debug("updatePdpDeployment response received: ", response.status);
-            if (response.ok) {
-                console.info("updatePdpDeployment query successful");
-                return response.text();
-            } else {
-               return response.text().then(responseBody => {
-                    throw new Error("HTTP " + response.status + "," + responseBody);
-                })
-            }
-        })
-        .catch(function (error) {
-            console.error("updatePdpDeployment error occurred ", error);
-            alert ("updatePdpDeployment error occurred " + error);
-            return undefined;
-        });
+      method: 'PUT',
+      credentials: 'same-origin',
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(pdpOperationsList)
+    })
+      .then(function (response) {
+        console.debug("updatePdpDeployment response received: ", response.status);
+        if (response.ok) {
+          console.info("updatePdpDeployment query successful");
+          return response.text();
+        } else {
+          return response.text().then(responseBody => {
+            throw new Error("HTTP " + response.status + "," + responseBody);
+          })
+        }
+      })
+      .catch(function (error) {
+        console.error("updatePdpDeployment error occurred ", error);
+        alert("updatePdpDeployment error occurred " + error);
+        return undefined;
+      });
   }
+
   static sendNewPolicyModel(newPolicyModel) {
-      return fetch(window.location.pathname + 'restservices/clds/v2/policies/policytype', {
-              method: 'POST',
-              credentials: 'same-origin',
-              headers: {
-                "Content-Type": "plain/text"
-              },
-              body: newPolicyModel
+    return fetch(window.location.pathname + 'restservices/clds/v2/policies/policytype', {
+      method: 'POST',
+      credentials: 'same-origin',
+      headers: {
+        "Content-Type": "plain/text"
+      },
+      body: newPolicyModel
+    })
+      .then(function (response) {
+        console.debug("sendNewPolicyModel response received: ", response.status);
+        if (response.ok) {
+          console.info("sendNewPolicyModel query successful");
+          return response.text();
+        } else {
+          return response.text().then(responseBody => {
+            throw new Error("HTTP " + response.status + "," + responseBody);
           })
-          .then(function (response) {
-              console.debug("sendNewPolicyModel response received: ", response.status);
-              if (response.ok) {
-                  console.info("sendNewPolicyModel query successful");
-                  return response.text();
-              } else {
-                 return response.text().then(responseBody => {
-                      throw new Error("HTTP " + response.status + "," + responseBody);
-                  })
-              }
-          })
-          .catch(function (error) {
-              console.error("sendNewPolicyModel error occurred ", error);
-              alert ("sendNewPolicyModel error occurred " + error);
-              return undefined;
-          });
-    }
+        }
+      })
+      .catch(function (error) {
+        console.error("sendNewPolicyModel error occurred ", error);
+        alert("sendNewPolicyModel error occurred " + error);
+        return undefined;
+      });
+  }
 }
index e2a1f45..6c74149 100644 (file)
@@ -39,42 +39,42 @@ export default class PolicyToscaService {
   }
 
   static getToscaPolicyModelYaml(policyModelType, policyModelVersion) {
-        return fetch(window.location.pathname + 'restservices/clds/v2/policyToscaModels/yaml/' + policyModelType + "/" + policyModelVersion, {
-            method: 'GET',
-            credentials: 'same-origin'
-        })
-            .then(function (response) {
-                console.debug("getToscaPolicyModelYaml response received: ", response.status);
-                if (response.ok) {
-                    return response.json();
-                } else {
-                    console.error("getToscaPolicyModelYaml query failed");
-                    return "";
-                }
-            })
-            .catch(function (error) {
-                console.error("getToscaPolicyModelYaml error received", error);
-                return "";
-            });
+    return fetch(window.location.pathname + 'restservices/clds/v2/policyToscaModels/yaml/' + policyModelType + "/" + policyModelVersion, {
+      method: 'GET',
+      credentials: 'same-origin'
+    })
+      .then(function (response) {
+        console.debug("getToscaPolicyModelYaml response received: ", response.status);
+        if (response.ok) {
+          return response.json();
+        } else {
+          console.error("getToscaPolicyModelYaml query failed");
+          return "";
+        }
+      })
+      .catch(function (error) {
+        console.error("getToscaPolicyModelYaml error received", error);
+        return "";
+      });
   }
 
   static getToscaPolicyModel(policyModelType, policyModelVersion) {
-         return fetch(window.location.pathname + 'restservices/clds/v2/policyToscaModels/' + policyModelType + "/" + policyModelVersion, {
-             method: 'GET',
-             credentials: 'same-origin'
-         })
-             .then(function (response) {
-                 console.debug("getToscaPolicyModel response received: ", response.status);
-                 if (response.ok) {
-                     return response.json();
-                 } else {
-                     console.error("getToscaPolicyModel query failed");
-                     return {};
-                 }
-             })
-             .catch(function (error) {
-                 console.error("getToscaPolicyModel error received", error);
-                 return {};
-             });
+    return fetch(window.location.pathname + 'restservices/clds/v2/policyToscaModels/' + policyModelType + "/" + policyModelVersion, {
+      method: 'GET',
+      credentials: 'same-origin'
+    })
+      .then(function (response) {
+        console.debug("getToscaPolicyModel response received: ", response.status);
+        if (response.ok) {
+          return response.json();
+        } else {
+          console.error("getToscaPolicyModel query failed");
+          return {};
+        }
+      })
+      .catch(function (error) {
+        console.error("getToscaPolicyModel error received", error);
+        return {};
+      });
   }
 }
index 08436f2..a6e386e 100644 (file)
 
 export default class TemplateService {
 
-        static getLoopNames() {
-                return fetch(window.location.pathname + 'restservices/clds/v2/loop/getAllNames', { method: 'GET', credentials: 'same-origin' })
-                        .then(function (response) {
-                                console.debug("getLoopNames response received: ", response.status);
-                                if (response.ok) {
-                                        return response.json();
-                                } else {
-                                        console.error("getLoopNames query failed");
-                                        return {};
-                                }
-                        })
-                        .catch(function (error) {
-                                console.error("getLoopNames error received", error);
-                                return {};
-                        });
+  static getLoopNames() {
+    return fetch(window.location.pathname + 'restservices/clds/v2/loop/getAllNames', { method: 'GET', credentials: 'same-origin' })
+      .then(function (response) {
+        console.debug("getLoopNames response received: ", response.status);
+        if (response.ok) {
+          return response.json();
+        } else {
+          console.error("getLoopNames query failed");
+          return {};
         }
+      })
+      .catch(function (error) {
+        console.error("getLoopNames error received", error);
+        return {};
+      });
+  }
 
-       static getAllLoopTemplates() {
-           return fetch(window.location.pathname + 'restservices/clds/v2/templates', { method: 'GET', credentials: 'same-origin', })
-               .then(function (response) {
-                   console.debug("getAllLoopTemplates response received: ", response.status);
-                   if (response.ok) {
-                       return response.json();
-                   } else {
-                       console.error("getAllLoopTemplates query failed");
-                       return {};
-                   }
-               })
-               .catch(function (error) {
-                   console.error("getAllLoopTemplates error received", error);
-                   return {};
-               });
-           }
+  static getAllLoopTemplates() {
+    return fetch(window.location.pathname + 'restservices/clds/v2/templates', { method: 'GET', credentials: 'same-origin', })
+      .then(function (response) {
+        console.debug("getAllLoopTemplates response received: ", response.status);
+        if (response.ok) {
+          return response.json();
+        } else {
+          console.error("getAllLoopTemplates query failed");
+          return {};
+        }
+      })
+      .catch(function (error) {
+        console.error("getAllLoopTemplates error received", error);
+        return {};
+      });
+  }
 
-       static getDictionary() {
-           return fetch(window.location.pathname + 'restservices/clds/v2/dictionary/', { method: 'GET', credentials: 'same-origin', })
-             .then(function (response) {
-               console.debug("getDictionary response received: ", response.status);
-               if (response.ok) {
-                 return response.json();
-               } else {
-                 console.error("getDictionary query failed");
-                 return {};
-               }
-             })
-             .catch(function (error) {
-               console.error("getDictionary error received", error);
-               return {};
-             });
-         }
+  static getDictionary() {
+    return fetch(window.location.pathname + 'restservices/clds/v2/dictionary/', { method: 'GET', credentials: 'same-origin', })
+      .then(function (response) {
+        console.debug("getDictionary response received: ", response.status);
+        if (response.ok) {
+          return response.json();
+        } else {
+          console.error("getDictionary query failed");
+          return {};
+        }
+      })
+      .catch(function (error) {
+        console.error("getDictionary error received", error);
+        return {};
+      });
+  }
 
-         static getDictionaryElements(dictionaryName) {
-           return fetch(window.location.pathname + 'restservices/clds/v2/dictionary/' + dictionaryName, {
-             method: 'GET',
-             headers: {
-               "Content-Type": "application/json",
-             },
-             credentials: 'same-origin',
-           })
-             .then(function (response) {
-               console.debug("getDictionaryElements response received: ", response.status);
-               if (response.ok) {
-                 return response.json();
-               } else {
-                 console.error("getDictionaryElements query failed");
-                 return {};
-               }
-             })
-             .catch(function (error) {
-               console.error("getDictionaryElements error received", error);
-               return {};
-             });
-         }
+  static getDictionaryElements(dictionaryName) {
+    return fetch(window.location.pathname + 'restservices/clds/v2/dictionary/' + dictionaryName, {
+      method: 'GET',
+      headers: {
+        "Content-Type": "application/json",
+      },
+      credentials: 'same-origin',
+    })
+      .then(function (response) {
+        console.debug("getDictionaryElements response received: ", response.status);
+        if (response.ok) {
+          return response.json();
+        } else {
+          console.error("getDictionaryElements query failed");
+          return {};
+        }
+      })
+      .catch(function (error) {
+        console.error("getDictionaryElements error received", error);
+        return {};
+      });
+  }
 
-         static insDictionary(jsonData) {
-           console.log("dictionaryName is", jsonData.name)
-           return fetch(window.location.pathname + 'restservices/clds/v2/dictionary/', {
-             method: 'PUT',
-             credentials: 'same-origin',
-             headers: {
-               "Content-Type": "application/json",
-             },
-             body: JSON.stringify(jsonData)
-           })
-             .then(function (response) {
-               console.debug("insDictionary response received: ", response.status);
-               if (response.ok) {
-                 return response.status;
-               } else {
-                 var errorMessage = response.status;
-                 console.error("insDictionary query failed", response.status);
-                 return errorMessage;
-               }
-             })
-             .catch(function (error) {
-               console.error("insDictionary error received", error);
-               return "";
-             });
-         }
+  static insDictionary(jsonData) {
+    console.log("dictionaryName is", jsonData.name)
+    return fetch(window.location.pathname + 'restservices/clds/v2/dictionary/', {
+      method: 'PUT',
+      credentials: 'same-origin',
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(jsonData)
+    })
+      .then(function (response) {
+        console.debug("insDictionary response received: ", response.status);
+        if (response.ok) {
+          return response.status;
+        } else {
+          var errorMessage = response.status;
+          console.error("insDictionary query failed", response.status);
+          return errorMessage;
+        }
+      })
+      .catch(function (error) {
+        console.error("insDictionary error received", error);
+        return "";
+      });
+  }
 
-         static insDictionaryElements(jsonData) {
-           console.log("dictionaryName is", jsonData.name)
-           return fetch(window.location.pathname + 'restservices/clds/v2/dictionary/' + jsonData.name, {
-             method: 'PUT',
-             credentials: 'same-origin',
-             headers: {
-               "Content-Type": "application/json",
-             },
-             body: JSON.stringify(jsonData)
-           })
-             .then(function (response) {
-               console.debug("insDictionary response received: ", response.status);
-               if (response.ok) {
-                 return response.status;
-               } else {
-                 var errorMessage = response.status;
-                 console.error("insDictionary query failed", response.status);
-                 return errorMessage;
-               }
-             })
-             .catch(function (error) {
-               console.error("insDictionary error received", error);
-               return "";
-             });
-         }
+  static insDictionaryElements(jsonData) {
+    console.log("dictionaryName is", jsonData.name)
+    return fetch(window.location.pathname + 'restservices/clds/v2/dictionary/' + jsonData.name, {
+      method: 'PUT',
+      credentials: 'same-origin',
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(jsonData)
+    })
+      .then(function (response) {
+        console.debug("insDictionary response received: ", response.status);
+        if (response.ok) {
+          return response.status;
+        } else {
+          var errorMessage = response.status;
+          console.error("insDictionary query failed", response.status);
+          return errorMessage;
+        }
+      })
+      .catch(function (error) {
+        console.error("insDictionary error received", error);
+        return "";
+      });
+  }
 
-         static deleteDictionary(dictionaryName) {
-           console.log("inside templaemenu service", dictionaryName)
-           return fetch(window.location.pathname + 'restservices/clds/v2/dictionary/' + dictionaryName, {
-             method: 'DELETE',
-             headers: {
-               "Content-Type": "application/json",
-             },
-             credentials: 'same-origin',
-           })
-             .then(function (response) {
-               console.debug("deleteDictionary response received: ", response.status);
-               if (response.ok) {
-                 return response.status;
-               } else {
-                 console.error("deleteDictionary query failed");
-                 return {};
-               }
-             })
-             .catch(function (error) {
-               console.error("deleteDictionary error received", error);
-               return {};
-             });
-         }
+  static deleteDictionary(dictionaryName) {
+    console.log("inside templaemenu service", dictionaryName)
+    return fetch(window.location.pathname + 'restservices/clds/v2/dictionary/' + dictionaryName, {
+      method: 'DELETE',
+      headers: {
+        "Content-Type": "application/json",
+      },
+      credentials: 'same-origin',
+    })
+      .then(function (response) {
+        console.debug("deleteDictionary response received: ", response.status);
+        if (response.ok) {
+          return response.status;
+        } else {
+          console.error("deleteDictionary query failed");
+          return {};
+        }
+      })
+      .catch(function (error) {
+        console.error("deleteDictionary error received", error);
+        return {};
+      });
+  }
 
-         static deleteDictionaryElements(dictionaryData) {
-           return fetch(window.location.pathname + 'restservices/clds/v2/dictionary/' + dictionaryData.name + '/elements/' + dictionaryData.shortName , {
-             method: 'DELETE',
-             headers: {
-               "Content-Type": "application/json",
-             },
-             credentials: 'same-origin',
-           })
-             .then(function (response) {
-               console.debug("deleteDictionary response received: ", response.status);
-               if (response.ok) {
-                 return response.status;
-               } else {
-                 console.error("deleteDictionary query failed");
-                 return {};
-               }
-             })
-             .catch(function (error) {
-               console.error("deleteDictionary error received", error);
-               return {};
-             });
-         }
-    }
+  static deleteDictionaryElements(dictionaryData) {
+    return fetch(window.location.pathname + 'restservices/clds/v2/dictionary/' + dictionaryData.name + '/elements/' + dictionaryData.shortName, {
+      method: 'DELETE',
+      headers: {
+        "Content-Type": "application/json",
+      },
+      credentials: 'same-origin',
+    })
+      .then(function (response) {
+        console.debug("deleteDictionary response received: ", response.status);
+        if (response.ok) {
+          return response.status;
+        } else {
+          console.error("deleteDictionary query failed");
+          return {};
+        }
+      })
+      .catch(function (error) {
+        console.error("deleteDictionary error received", error);
+        return {};
+      });
+  }
+}
index 5fb4aa6..bcf46ea 100644 (file)
  */
 
 export default class UserService {
-       static notLoggedUserName='Anonymous';
-       static login() {
-               return fetch(window.location.pathname + 'restservices/clds/v1/user/getUser', {
-                               method: 'GET',
-                               credentials: 'same-origin'
-                       })
-               .then(function (response) {
-                       console.debug("getUser response received, status code:", response.status);
-                       if (response.ok) {
-                               return response.text();
-                       } else {
-                               console.error("getUser response is nok");
-                               return UserService.notLoggedUserName;
-                       }
-               })
-               .then(function (data) {
-                       console.info ("User connected:",data)
-                       return data;
-               })
-               .catch(function(error) {
-                       console.warn("getUser error received, user set to: ",UserService.notLoggedUserName);
-                       console.error("getUser error:",error);
-                       return UserService.notLoggedUserName;
-               });
-       }
+  static notLoggedUserName = 'Anonymous';
 
-       static getUserInfo() {
-               return fetch(window.location.pathname + 'restservices/clds/v2/clampInformation', {
-                               method: 'GET',
-                               credentials: 'same-origin'
-                       })
-               .then(function (response) {
-                       console.debug("getUserInfo response received, status code:", response.status);
-                       if (response.ok) {
-                               return response.json();
-                       } else {
-                           return {}
-                       }
-               })
-               .then(function (data) {
-                       console.info ("User info received:",data)
-                       return data;
-               })
-               .catch(function(error) {
-                       console.warn("getUserInfo error received, user set to: ",UserService.notLoggedUserName);
-                       console.error("getUserInfo error:",error);
-                       return {};
-               });
-       }
+  static login() {
+    return fetch(window.location.pathname + 'restservices/clds/v1/user/getUser', {
+      method: 'GET',
+      credentials: 'same-origin'
+    })
+      .then(function (response) {
+        console.debug("getUser response received, status code:", response.status);
+        if (response.ok) {
+          return response.text();
+        } else {
+          console.error("getUser response is nok");
+          return UserService.notLoggedUserName;
+        }
+      })
+      .then(function (data) {
+        console.info("User connected:", data)
+        return data;
+      })
+      .catch(function (error) {
+        console.warn("getUser error received, user set to: ", UserService.notLoggedUserName);
+        console.error("getUser error:", error);
+        return UserService.notLoggedUserName;
+      });
+  }
+
+  static getUserInfo() {
+    return fetch(window.location.pathname + 'restservices/clds/v2/clampInformation', {
+      method: 'GET',
+      credentials: 'same-origin'
+    })
+      .then(function (response) {
+        console.debug("getUserInfo response received, status code:", response.status);
+        if (response.ok) {
+          return response.json();
+        } else {
+          return {}
+        }
+      })
+      .then(function (data) {
+        console.info("User info received:", data)
+        return data;
+      })
+      .catch(function (error) {
+        console.warn("getUserInfo error received, user set to: ", UserService.notLoggedUserName);
+        console.error("getUserInfo error:", error);
+        return {};
+      });
+  }
 }
index 5663360..690dcbb 100644 (file)
@@ -34,157 +34,160 @@ import LoopCache from '../../../api/LoopCache';
 import SvgGenerator from '../../loop_viewer/svg/SvgGenerator';
 
 const ModalStyled = styled(Modal)`
-       background-color: transparent;
+  background-color: transparent;
 `
 
 const ErrMsgStyled = styled.div`
-       color: red;
+  color: red;
 `
 
 export default class CreateLoopModal extends React.Component {
-       constructor(props, context) {
-               super(props, context);
+  constructor(props, context) {
+    super(props, context);
 
-               this.getAllLoopTemplates = this.getAllLoopTemplates.bind(this);
-               this.handleCreate = this.handleCreate.bind(this);
-               this.handleModelName = this.handleModelName.bind(this);
-               this.handleClose = this.handleClose.bind(this);
-               this.handleDropDownListChange = this.handleDropDownListChange.bind(this);
-               this.renderSvg = this.renderSvg.bind(this);
-               this.state = {
-                       show: true,
-                       chosenTemplateName: '',
-                       modelInputErrMsg: '',
-                       modelName: '',
-                       templateNames: [],
-                       fakeLoopCacheWithTemplate: new LoopCache({})
-               };
-       }
+    this.getAllLoopTemplates = this.getAllLoopTemplates.bind(this);
+    this.handleCreate = this.handleCreate.bind(this);
+    this.handleModelName = this.handleModelName.bind(this);
+    this.handleClose = this.handleClose.bind(this);
+    this.handleDropDownListChange = this.handleDropDownListChange.bind(this);
+    this.renderSvg = this.renderSvg.bind(this);
+    this.state = {
+      show: true,
+      chosenTemplateName: '',
+      modelInputErrMsg: '',
+      modelName: '',
+      templateNames: [],
+      fakeLoopCacheWithTemplate: new LoopCache({})
+    };
+  }
 
-       async componentDidMount() {
-               await this.getAllLoopTemplates();
-               await this.getModelNames();
-       }
+  async componentDidMount() {
+    await this.getAllLoopTemplates();
+    await this.getModelNames();
+  }
 
-       handleClose() {
-               this.setState({ show: false });
-               this.props.history.push('/');
-       }
+  handleClose() {
+    this.setState({ show: false });
+    this.props.history.push('/');
+  }
 
-       handleDropDownListChange(e) {
-           if (typeof e.value !== "undefined") {
-               this.setState({
-               fakeLoopCacheWithTemplate:
-                new LoopCache({
-                    "loopTemplate":e.templateObject,
-                    "name": "fakeLoop"
-                }),
-                chosenTemplateName: e.value
-               })
-               } else {
-               this.setState({ fakeLoopCacheWithTemplate: new LoopCache({}) })
-        }
-       }
+  handleDropDownListChange(e) {
+    if (typeof e.value !== "undefined") {
+      this.setState({
+        fakeLoopCacheWithTemplate:
+          new LoopCache({
+            "loopTemplate": e.templateObject,
+            "name": "fakeLoop"
+          }),
+        chosenTemplateName: e.value
+      })
+    } else {
+      this.setState({ fakeLoopCacheWithTemplate: new LoopCache({}) })
+    }
+  }
 
-       getAllLoopTemplates() {
-               TemplateService.getAllLoopTemplates().then(templatesData => {
-                   const templateOptions = templatesData.map((templateData) => { return { label: templateData.name, value: templateData.name, templateObject: templateData } });
-            this.setState({
-                templateNames: templateOptions })
-               });
-       }
+  getAllLoopTemplates() {
+    TemplateService.getAllLoopTemplates().then(templatesData => {
+      const templateOptions = templatesData.map((templateData) => {
+        return { label: templateData.name, value: templateData.name, templateObject: templateData }
+      });
+      this.setState({
+        templateNames: templateOptions
+      })
+    });
+  }
 
-       getModelNames() {
-               TemplateService.getLoopNames().then(loopNames => {
-                       if (!loopNames) {
-                               loopNames = [];
-                       }
-                       // Remove LOOP_ prefix
-                       let trimmedLoopNames = loopNames.map(str => str.replace('LOOP_', ''));
-                       this.setState({ modelNames: trimmedLoopNames });
-               });
-       }
+  getModelNames() {
+    TemplateService.getLoopNames().then(loopNames => {
+      if (!loopNames) {
+        loopNames = [];
+      }
+      // Remove LOOP_ prefix
+      let trimmedLoopNames = loopNames.map(str => str.replace('LOOP_', ''));
+      this.setState({ modelNames: trimmedLoopNames });
+    });
+  }
 
-       handleCreate() {
-               if (!this.state.modelName) {
-                       alert("A model name is required");
-                       return;
-               }
-               console.debug("Create Model " + this.state.modelName + ", Template " + this.state.chosenTemplateName + " is chosen");
-               this.setState({ show: false });
-               LoopService.createLoop("LOOP_" + this.state.modelName, this.state.chosenTemplateName).then(text => {
-                       console.debug("CreateLoop response received: ", text);
-                       try {
-                               this.props.history.push('/');
-                               this.props.loadLoopFunction("LOOP_" + this.state.modelName);
-                       } catch(err) {
-                               alert(text);
-                               this.props.history.push('/');
-                       }
-               })
-               .catch(error => {
-                       console.debug("Create Loop failed");
-               });
-       }
+  handleCreate() {
+    if (!this.state.modelName) {
+      alert("A model name is required");
+      return;
+    }
+    console.debug("Create Model " + this.state.modelName + ", Template " + this.state.chosenTemplateName + " is chosen");
+    this.setState({ show: false });
+    LoopService.createLoop("LOOP_" + this.state.modelName, this.state.chosenTemplateName).then(text => {
+      console.debug("CreateLoop response received: ", text);
+      try {
+        this.props.history.push('/');
+        this.props.loadLoopFunction("LOOP_" + this.state.modelName);
+      } catch (err) {
+        alert(text);
+        this.props.history.push('/');
+      }
+    })
+      .catch(error => {
+        console.debug("Create Loop failed");
+      });
+  }
 
-       handleModelName(event) {
-               if (this.state.modelNames.includes(event.target.value)) {
-                       this.setState({
-                               modelInputErrMsg: 'A model named "' + event.target.value + '" already exists. Please pick another name.',
-                               modelName: event.target.value
-                       });
-                       return;
-               } else {
-                       this.setState({
-                               modelInputErrMsg: '',
-                               modelName: event.target.value
-                       });
-               }
-       }
+  handleModelName(event) {
+    if (this.state.modelNames.includes(event.target.value)) {
+      this.setState({
+        modelInputErrMsg: 'A model named "' + event.target.value + '" already exists. Please pick another name.',
+        modelName: event.target.value
+      });
+      return;
+    } else {
+      this.setState({
+        modelInputErrMsg: '',
+        modelName: event.target.value
+      });
+    }
+  }
 
-       renderSvg() {
-               return (
-                       <SvgGenerator loopCache={this.state.fakeLoopCacheWithTemplate} clickable={false} generatedFrom={SvgGenerator.GENERATED_FROM_TEMPLATE}/>
-               );
-       }
+  renderSvg() {
+    return (
+      <SvgGenerator loopCache={ this.state.fakeLoopCacheWithTemplate } clickable={ false } generatedFrom={ SvgGenerator.GENERATED_FROM_TEMPLATE }/>
+    );
+  }
 
-       render() {
-               return (
-                       <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false} >
-                               <Modal.Header closeButton>
-                                       <Modal.Title>Create Model</Modal.Title>
-                               </Modal.Header>
-                               <Modal.Body>
-                                       <Form.Group as={Row} controlId="formPlaintextEmail">
-                                               <Form.Label column sm="2">Template Name:</Form.Label>
-                                               <Col sm="10">
-                                                       <Select onChange={this.handleDropDownListChange} options={this.state.templateNames} />
-                                               </Col>
-                                       </Form.Group>
-                    <Form.Group as={Row} style={{alignItems: 'center'}} controlId="formSvgPreview">
-                    <Form.Label column sm="2">Model Preview:</Form.Label>
-                        <Col sm="10">
-                            {this.renderSvg()}
-                        </Col>
-                    </Form.Group>
-                                       <Form.Group as={Row} controlId="formPlaintextEmail">
-                                               <Form.Label column sm="2">Model Name:</Form.Label>
-                                               <input sm="5" type="text" style={{width: '50%', marginLeft: '1em' }}
-                                                       value={this.state.modelName}
-                                                       onChange={this.handleModelName}
-                                               />
-                                               <span sm="5"/>
-                                       </Form.Group>
-                                       <Form.Group as={Row} controlId="formPlaintextEmail">
-                                               <Form.Label column sm="2"> </Form.Label>
-                                               <ErrMsgStyled>{this.state.modelInputErrMsg}</ErrMsgStyled>
-                                       </Form.Group>
-                               </Modal.Body>
-                               <Modal.Footer>
-                                       <Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>
-                                       <Button variant="primary" type="submit" onClick={this.handleCreate}>Create</Button>
-                               </Modal.Footer>
-                       </ModalStyled>
-               );
-       }
+  render() {
+    return (
+      <ModalStyled size="xl" show={ this.state.show } onHide={ this.handleClose } backdrop="static" keyboard={ false }>
+        <Modal.Header closeButton>
+          <Modal.Title>Create Model</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Form.Group as={ Row } controlId="formPlaintextEmail">
+            <Form.Label column sm="2">Template Name:</Form.Label>
+            <Col sm="10">
+              <Select onChange={ this.handleDropDownListChange } options={ this.state.templateNames }/>
+            </Col>
+          </Form.Group>
+          <Form.Group as={ Row } style={ { alignItems: 'center' } } controlId="formSvgPreview">
+            <Form.Label column sm="2">Model Preview:</Form.Label>
+            <Col sm="10">
+              { this.renderSvg() }
+            </Col>
+          </Form.Group>
+          <Form.Group as={ Row } controlId="formPlaintextEmail">
+            <Form.Label column sm="2">Model Name:</Form.Label>
+            <input sm="5" type="text" style={ { width: '50%', marginLeft: '1em' } }
+                   value={ this.state.modelName }
+                   onChange={ this.handleModelName }
+            />
+            <span sm="5"/>
+          </Form.Group>
+          <Form.Group as={ Row } controlId="formPlaintextEmail">
+            <Form.Label column sm="2"> </Form.Label>
+            <ErrMsgStyled>{ this.state.modelInputErrMsg }</ErrMsgStyled>
+          </Form.Group>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" type="null" onClick={ this.handleClose }>Cancel</Button>
+          <Button variant="primary" type="submit" onClick={ this.handleCreate }>Create</Button>
+        </Modal.Footer>
+      </ModalStyled>
+    );
+  }
 }
index 8ef53b4..3d94833 100644 (file)
@@ -27,7 +27,10 @@ import LoopService from '../../../api/LoopService';
 import TemplateService from '../../../api/TemplateService';
 
 let errorMessage = '';
-window.alert = jest.fn().mockImplementation((mesg) => { errorMessage = mesg ; return });
+window.alert = jest.fn().mockImplementation((mesg) => {
+  errorMessage = mesg;
+  return
+});
 
 
 describe('Verify CreateLoopModal', () => {
@@ -35,7 +38,7 @@ describe('Verify CreateLoopModal', () => {
   it('Test the render method', async () => {
     const flushPromises = () => new Promise(setImmediate);
     TemplateService.getAllLoopTemplates = jest.fn().mockImplementation(() => {
-      return Promise.resolve([{"name":"template1"},{"name":"template2"}]);
+      return Promise.resolve([{ "name": "template1" }, { "name": "template2" }]);
     });
     TemplateService.getLoopNames = jest.fn().mockImplementation(() => {
       return Promise.resolve([]);
@@ -45,21 +48,25 @@ describe('Verify CreateLoopModal', () => {
     expect(component).toMatchSnapshot();
     await flushPromises();
     component.update();
-    expect(component.state('templateNames')).toStrictEqual([{"label": "template1", "value": "template1", "templateObject": {"name": "template1"}}, {"label": "template2", "value": "template2","templateObject": {"name": "template2"}}]);
+    expect(component.state('templateNames')).toStrictEqual([{ "label": "template1", "value": "template1", "templateObject": { "name": "template1" } }, {
+      "label": "template2",
+      "value": "template2",
+      "templateObject": { "name": "template2" }
+    }]);
   });
 
   it('handleDropdownListChange event', async () => {
-       const flushPromises = () => new Promise(setImmediate);
+    const flushPromises = () => new Promise(setImmediate);
 
     const component = shallow(<CreateLoopModal/>);
-    component.find('StateManager').simulate('change', {value: 'template1', templateObject: {"name":"template1"} });
+    component.find('StateManager').simulate('change', { value: 'template1', templateObject: { "name": "template1" } });
     await flushPromises();
     component.update();
     expect(component.state('chosenTemplateName')).toEqual("template1");
     expect(component.state('fakeLoopCacheWithTemplate').getLoopTemplate()['name']).toEqual("template1");
     expect(component.state('fakeLoopCacheWithTemplate').getLoopName()).toEqual("fakeLoop");
 
-       component.find('StateManager').simulate('change',{value: 'template2', templateObject: {"name":"template2"} });
+    component.find('StateManager').simulate('change', { value: 'template2', templateObject: { "name": "template2" } });
     await flushPromises();
     component.update();
     expect(component.state('chosenTemplateName')).toEqual("template2");
@@ -70,12 +77,12 @@ describe('Verify CreateLoopModal', () => {
   it('handleModelName event', async () => {
     const flushPromises = () => new Promise(setImmediate);
     TemplateService.getAllLoopTemplates = jest.fn().mockImplementation(() => {
-      return Promise.resolve([{"name":"template1"},{"name":"template2"}]);
+      return Promise.resolve([{ "name": "template1" }, { "name": "template2" }]);
     });
     TemplateService.getLoopNames = jest.fn().mockImplementation(() => {
       return Promise.resolve([]);
     });
-    const event = {target: {value : "model1"} };
+    const event = { target: { value: "model1" } };
     const component = shallow(<CreateLoopModal/>);
     await flushPromises();
     component.find('input').simulate('change', event);
@@ -84,21 +91,21 @@ describe('Verify CreateLoopModal', () => {
   });
 
   it('Test handleClose', () => {
-    const historyMock = { push: jest.fn() }; 
-    const handleClose = jest.spyOn(CreateLoopModal.prototype,'handleClose');
-    const component = shallow(<CreateLoopModal history={historyMock} />)
+    const historyMock = { push: jest.fn() };
+    const handleClose = jest.spyOn(CreateLoopModal.prototype, 'handleClose');
+    const component = shallow(<CreateLoopModal history={ historyMock }/>)
 
     component.find('[variant="secondary"]').prop('onClick')();
 
     expect(handleClose).toHaveBeenCalledTimes(1);
     expect(component.state('show')).toEqual(false);
-    expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
-    
+    expect(historyMock.push.mock.calls[0]).toEqual(['/']);
+
     handleClose.mockClear();
   });
 
   it('Test handleCreate Fail', () => {
-    const handleCreate = jest.spyOn(CreateLoopModal.prototype,'handleCreate');
+    const handleCreate = jest.spyOn(CreateLoopModal.prototype, 'handleCreate');
     const component = shallow(<CreateLoopModal/>)
 
     component.find('[variant="primary"]').prop('onClick')();
@@ -110,32 +117,33 @@ describe('Verify CreateLoopModal', () => {
   });
 
   it('Test handleCreate Suc', async () => {
-       const flushPromises = () => new Promise(setImmediate);
+    const flushPromises = () => new Promise(setImmediate);
     const historyMock = { push: jest.fn() };
-    const loadLoopFunction = jest.fn();  
-    
+    const loadLoopFunction = jest.fn();
+
     LoopService.createLoop = jest.fn().mockImplementation(() => {
-                       return Promise.resolve({
-                               ok: true,
-                               status: 200,
-                               json: () => {}
-                       });
-               });
-
-    const handleCreate = jest.spyOn(CreateLoopModal.prototype,'handleCreate');
-    const component = shallow(<CreateLoopModal history={historyMock} loadLoopFunction={loadLoopFunction}/>)
+      return Promise.resolve({
+        ok: true,
+        status: 200,
+        json: () => {
+        }
+      });
+    });
+
+    const handleCreate = jest.spyOn(CreateLoopModal.prototype, 'handleCreate');
+    const component = shallow(<CreateLoopModal history={ historyMock } loadLoopFunction={ loadLoopFunction }/>)
     component.setState({
-                       modelName: "modelNameTest",
-                       chosenTemplateName: "template1"
-               });
+      modelName: "modelNameTest",
+      chosenTemplateName: "template1"
+    });
 
     component.find('[variant="primary"]').prop('onClick')();
-       await flushPromises();
-       component.update();
+    await flushPromises();
+    component.update();
 
     expect(handleCreate).toHaveBeenCalledTimes(1);
     expect(component.state('show')).toEqual(false);
-    expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
+    expect(historyMock.push.mock.calls[0]).toEqual(['/']);
 
     handleCreate.mockClear();
   });
index 803cfa9..5fff586 100644 (file)
@@ -32,142 +32,147 @@ import styled from 'styled-components';
 import Spinner from 'react-bootstrap/Spinner'
 
 const StyledSpinnerDiv = styled.div`
-       justify-content: center !important;
-       display: flex !important;
+  justify-content: center !important;
+  display: flex !important;
 `;
 
 const ModalStyled = styled(Modal)`
-       background-color: transparent;
+  background-color: transparent;
 `
 const FormStyled = styled(Form.Group)`
-       padding: .25rem 1.5rem;
+  padding: .25rem 1.5rem;
 `
 export default class DeployLoopModal extends React.Component {
 
 
-               
-       constructor(props, context) {
-               super(props, context);
-
-               this.handleSave = this.handleSave.bind(this);
-               this.handleClose = this.handleClose.bind(this);
-               this.handleChange = this.handleChange.bind(this);
-               this.refreshStatus = this.refreshStatus.bind(this);
-               this.renderDeployParam = this.renderDeployParam.bind(this);
-               this.renderSpinner = this.renderSpinner.bind(this);
-
-               const propertiesJson = JSON.parse(JSON.stringify(this.props.loopCache.getGlobalProperties()));
-               this.state = {
-                       loopCache: this.props.loopCache,
-                       temporaryPropertiesJson: propertiesJson,
-                       show: true,
-                       key: this.getInitialKeyValue(propertiesJson)
-               };
-       }
-       getInitialKeyValue(temporaryPropertiesJson) {
-               const deployJsonList = temporaryPropertiesJson["dcaeDeployParameters"];
-               return Object.keys(deployJsonList).find((obj) => Object.keys(deployJsonList).indexOf(obj) === 0);
-       }
-       componentWillReceiveProps(newProps) {
-               this.setState({
-                       loopName: newProps.loopCache.getLoopName(),
-                       show: true
-               });
-       }
-
-       handleClose(){
-               this.setState({ show: false });
-               this.props.history.push('/');
-       }
-
-       renderSpinner() {
-               if (this.state.deploying) {
-                       return (
-                               <StyledSpinnerDiv>
-                                       <Spinner animation="border" role="status">
-                                               <span className="sr-only">Loading...</span>
-                                       </Spinner>
-                               </StyledSpinnerDiv>
-                       );
-               } else {
-                       return (<div></div>);
-               }
-       }
-
-       handleSave() {
-               const loopName = this.props.loopCache.getLoopName();
-               // save the global propserties
-               this.setState({ deploying: true });
-               LoopService.updateGlobalProperties(loopName, this.state.temporaryPropertiesJson).then(resp => {
-                       LoopActionService.performAction(loopName, "deploy").then(pars => {
-                               this.props.showSucAlert("Action deploy successfully performed");
-                               // refresh status and update loop logs
-                               this.refreshStatus(loopName);
-                       })
-                       .catch(error => {
-                               this.props.showFailAlert("Action deploy failed");
-                               // refresh status and update loop logs
-                               this.refreshStatus(loopName);
-                       });
-               });
-       }
-
-       refreshStatus(loopName) {
-               LoopActionService.refreshStatus(loopName).then(data => {
-                       this.props.updateLoopFunction(data);
-                       this.setState({ show: false, deploying: false });
-                       this.props.history.push('/');
-               })
-               .catch(error => {
-                       this.props.showFailAlert("Refresh status failed");
-                       this.setState({ show: false, deploying: false  });
-                       this.props.history.push('/');
-               });
-       }
-       handleChange(event) {
-               let deploymentParam = this.state.temporaryPropertiesJson["dcaeDeployParameters"];
-               deploymentParam[this.state.key][event.target.name] = event.target.value;
-
-               this.setState({temporaryPropertiesJson:{dcaeDeployParameters: deploymentParam}});
-       }
-       renderDeployParamTabs() {
-               if (typeof (this.state.temporaryPropertiesJson) === "undefined") {
-                        return "";
-               }
-
-               const deployJsonList = this.state.temporaryPropertiesJson["dcaeDeployParameters"];
-               var indents = [];
-               Object.keys(deployJsonList).forEach(item =>
-                       indents.push(<Tab key={item} eventKey={item} title={item}>
-                               {this.renderDeployParam(deployJsonList[item])}
-                               </Tab>)
-               );
-               return indents;
-       }
-       renderDeployParam(deployJson) {
-               var indents = [];
-               Object.keys(deployJson).forEach(item =>
-               indents.push(<FormStyled key={item}>
-                               <Form.Label>{item}</Form.Label>
-                               <Form.Control type="text" name={item} onChange={this.handleChange} defaultValue={deployJson[item]}></Form.Control>
-                       </FormStyled>));
-               return indents;
-       }
-       render() {
-               return (
-                                       <ModalStyled size="lg" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false} >
-                                               <Modal.Header closeButton>
-                                                       <Modal.Title>Deployment parameters</Modal.Title>
-                                               </Modal.Header>
-                                               <Tabs id="controlled-tab-example" activeKey={this.state.key} onSelect={key => this.setState({ key })}>
-                                               {this.renderDeployParamTabs()}
-                                               </Tabs>
-                                               {this.renderSpinner()}
-                                               <Modal.Footer>
-                                                       <Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>
-                                                       <Button variant="primary" type="submit" onClick={this.handleSave}>Deploy</Button>
-                                               </Modal.Footer>
-                                       </ModalStyled>
-               );
-       }
+  constructor(props, context) {
+    super(props, context);
+
+    this.handleSave = this.handleSave.bind(this);
+    this.handleClose = this.handleClose.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+    this.refreshStatus = this.refreshStatus.bind(this);
+    this.renderDeployParam = this.renderDeployParam.bind(this);
+    this.renderSpinner = this.renderSpinner.bind(this);
+
+    const propertiesJson = JSON.parse(JSON.stringify(this.props.loopCache.getGlobalProperties()));
+    this.state = {
+      loopCache: this.props.loopCache,
+      temporaryPropertiesJson: propertiesJson,
+      show: true,
+      key: this.getInitialKeyValue(propertiesJson)
+    };
+  }
+
+  getInitialKeyValue(temporaryPropertiesJson) {
+    const deployJsonList = temporaryPropertiesJson["dcaeDeployParameters"];
+    return Object.keys(deployJsonList).find((obj) => Object.keys(deployJsonList).indexOf(obj) === 0);
+  }
+
+  componentWillReceiveProps(newProps) {
+    this.setState({
+      loopName: newProps.loopCache.getLoopName(),
+      show: true
+    });
+  }
+
+  handleClose() {
+    this.setState({ show: false });
+    this.props.history.push('/');
+  }
+
+  renderSpinner() {
+    if (this.state.deploying) {
+      return (
+        <StyledSpinnerDiv>
+          <Spinner animation="border" role="status">
+            <span className="sr-only">Loading...</span>
+          </Spinner>
+        </StyledSpinnerDiv>
+      );
+    } else {
+      return (<div></div>);
+    }
+  }
+
+  handleSave() {
+    const loopName = this.props.loopCache.getLoopName();
+    // save the global propserties
+    this.setState({ deploying: true });
+    LoopService.updateGlobalProperties(loopName, this.state.temporaryPropertiesJson).then(resp => {
+      LoopActionService.performAction(loopName, "deploy").then(pars => {
+        this.props.showSucAlert("Action deploy successfully performed");
+        // refresh status and update loop logs
+        this.refreshStatus(loopName);
+      })
+        .catch(error => {
+          this.props.showFailAlert("Action deploy failed");
+          // refresh status and update loop logs
+          this.refreshStatus(loopName);
+        });
+    });
+  }
+
+  refreshStatus(loopName) {
+    LoopActionService.refreshStatus(loopName).then(data => {
+      this.props.updateLoopFunction(data);
+      this.setState({ show: false, deploying: false });
+      this.props.history.push('/');
+    })
+      .catch(error => {
+        this.props.showFailAlert("Refresh status failed");
+        this.setState({ show: false, deploying: false });
+        this.props.history.push('/');
+      });
+  }
+
+  handleChange(event) {
+    let deploymentParam = this.state.temporaryPropertiesJson["dcaeDeployParameters"];
+    deploymentParam[this.state.key][event.target.name] = event.target.value;
+
+    this.setState({ temporaryPropertiesJson: { dcaeDeployParameters: deploymentParam } });
+  }
+
+  renderDeployParamTabs() {
+    if (typeof (this.state.temporaryPropertiesJson) === "undefined") {
+      return "";
+    }
+
+    const deployJsonList = this.state.temporaryPropertiesJson["dcaeDeployParameters"];
+    var indents = [];
+    Object.keys(deployJsonList).forEach(item =>
+      indents.push(<Tab key={ item } eventKey={ item } title={ item }>
+        { this.renderDeployParam(deployJsonList[item]) }
+      </Tab>)
+    );
+    return indents;
+  }
+
+  renderDeployParam(deployJson) {
+    var indents = [];
+    Object.keys(deployJson).forEach(item =>
+      indents.push(<FormStyled key={ item }>
+        <Form.Label>{ item }</Form.Label>
+        <Form.Control type="text" name={ item } onChange={ this.handleChange } defaultValue={ deployJson[item] }></Form.Control>
+      </FormStyled>));
+    return indents;
+  }
+
+  render() {
+    return (
+      <ModalStyled size="lg" show={ this.state.show } onHide={ this.handleClose } backdrop="static" keyboard={ false }>
+        <Modal.Header closeButton>
+          <Modal.Title>Deployment parameters</Modal.Title>
+        </Modal.Header>
+        <Tabs id="controlled-tab-example" activeKey={ this.state.key } onSelect={ key => this.setState({ key }) }>
+          { this.renderDeployParamTabs() }
+        </Tabs>
+        { this.renderSpinner() }
+        <Modal.Footer>
+          <Button variant="secondary" type="null" onClick={ this.handleClose }>Cancel</Button>
+          <Button variant="primary" type="submit" onClick={ this.handleSave }>Deploy</Button>
+        </Modal.Footer>
+      </ModalStyled>
+    );
+  }
 }
index 84dbfd1..0c68f23 100644 (file)
@@ -28,85 +28,87 @@ import LoopActionService from '../../../api/LoopActionService';
 import LoopService from '../../../api/LoopService';
 
 describe('Verify DeployLoopModal', () => {
-       const loopCache = new LoopCache({
-               "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
-               "globalPropertiesJson": {
-                       "dcaeDeployParameters": {
-                               "testMs": {
-                                       "location_id": "",
-                                       "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
-                               }
-                       }
-               }
-       });
+  const loopCache = new LoopCache({
+    "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
+    "globalPropertiesJson": {
+      "dcaeDeployParameters": {
+        "testMs": {
+          "location_id": "",
+          "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
+        }
+      }
+    }
+  });
 
-       it('Test the render method', () => {
-               const component = shallow(
-                       <DeployLoopModal loopCache={loopCache}/>
-               )
+  it('Test the render method', () => {
+    const component = shallow(
+      <DeployLoopModal loopCache={ loopCache }/>
+    )
 
-       expect(component).toMatchSnapshot();
-       });
-       
-       it('Test handleClose', () => {
-               const historyMock = { push: jest.fn() };
-               const handleClose = jest.spyOn(DeployLoopModal.prototype,'handleClose');
-               const component = shallow(<DeployLoopModal history={historyMock} loopCache={loopCache}/>)
+    expect(component).toMatchSnapshot();
+  });
 
-               component.find('[variant="secondary"]').prop('onClick')();
+  it('Test handleClose', () => {
+    const historyMock = { push: jest.fn() };
+    const handleClose = jest.spyOn(DeployLoopModal.prototype, 'handleClose');
+    const component = shallow(<DeployLoopModal history={ historyMock } loopCache={ loopCache }/>)
 
-               expect(handleClose).toHaveBeenCalledTimes(1);
-               expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
-       });
+    component.find('[variant="secondary"]').prop('onClick')();
 
-       it('Test handleSave successful', async () => {
-               const flushPromises = () => new Promise(setImmediate);
-               const historyMock = { push: jest.fn() };
-               const updateLoopFunction = jest.fn();
-               const showSucAlert = jest.fn();
-               const showFailAlert = jest.fn();
-               const handleSave = jest.spyOn(DeployLoopModal.prototype,'handleSave');
-               LoopService.updateGlobalProperties = jest.fn().mockImplementation(() => {
-                       return Promise.resolve({
-                               ok: true,
-                               status: 200,
-                               text: () => "OK"
-                       });
-               });
-               LoopActionService.performAction = jest.fn().mockImplementation(() => {
-                       return Promise.resolve({
-                               ok: true,
-                               status: 200,
-                               json: () => {}
-                       });
-               });
-               LoopActionService.refreshStatus = jest.fn().mockImplementation(() => {
-                       return Promise.resolve({
-                               ok: true,
-                               status: 200,
-                               json: () => {}
-                       });
-               });
+    expect(handleClose).toHaveBeenCalledTimes(1);
+    expect(historyMock.push.mock.calls[0]).toEqual(['/']);
+  });
 
-               const component = shallow(<DeployLoopModal history={historyMock} 
-                                               loopCache={loopCache} updateLoopFunction={updateLoopFunction} showSucAlert={showSucAlert} showFailAlert={showFailAlert} />)
+  it('Test handleSave successful', async () => {
+    const flushPromises = () => new Promise(setImmediate);
+    const historyMock = { push: jest.fn() };
+    const updateLoopFunction = jest.fn();
+    const showSucAlert = jest.fn();
+    const showFailAlert = jest.fn();
+    const handleSave = jest.spyOn(DeployLoopModal.prototype, 'handleSave');
+    LoopService.updateGlobalProperties = jest.fn().mockImplementation(() => {
+      return Promise.resolve({
+        ok: true,
+        status: 200,
+        text: () => "OK"
+      });
+    });
+    LoopActionService.performAction = jest.fn().mockImplementation(() => {
+      return Promise.resolve({
+        ok: true,
+        status: 200,
+        json: () => {
+        }
+      });
+    });
+    LoopActionService.refreshStatus = jest.fn().mockImplementation(() => {
+      return Promise.resolve({
+        ok: true,
+        status: 200,
+        json: () => {
+        }
+      });
+    });
 
-               component.find('[variant="primary"]').prop('onClick')();
-               await flushPromises();
-               component.update();
+    const component = shallow(<DeployLoopModal history={ historyMock }
+                                               loopCache={ loopCache } updateLoopFunction={ updateLoopFunction } showSucAlert={ showSucAlert } showFailAlert={ showFailAlert }/>)
 
-               expect(handleSave).toHaveBeenCalledTimes(1);
-               expect(component.state('show')).toEqual(false);
-               expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
-               handleSave.mockClear();
-       });
+    component.find('[variant="primary"]').prop('onClick')();
+    await flushPromises();
+    component.update();
 
-       it('Onchange event', () => {
-               const event = { target: { name: "location_id", value: "testLocation"} };
-               const component = shallow(<DeployLoopModal loopCache={loopCache}/>);
+    expect(handleSave).toHaveBeenCalledTimes(1);
+    expect(component.state('show')).toEqual(false);
+    expect(historyMock.push.mock.calls[0]).toEqual(['/']);
+    handleSave.mockClear();
+  });
 
-               component.find('[name="location_id"]').simulate('change', event);
-               component.update();
-               expect(component.state('temporaryPropertiesJson').dcaeDeployParameters.testMs.location_id).toEqual("testLocation");
-       });
-});
\ No newline at end of file
+  it('Onchange event', () => {
+    const event = { target: { name: "location_id", value: "testLocation" } };
+    const component = shallow(<DeployLoopModal loopCache={ loopCache }/>);
+
+    component.find('[name="location_id"]').simulate('change', event);
+    component.update();
+    expect(component.state('temporaryPropertiesJson').dcaeDeployParameters.testMs.location_id).toEqual("testLocation");
+  });
+});
index acd0aca..6917713 100644 (file)
@@ -28,91 +28,91 @@ import styled from 'styled-components';
 import LoopService from '../../../api/LoopService';
 
 const ModalStyled = styled(Modal)`
-       background-color: transparent;
+  background-color: transparent;
 `
 export default class LoopPropertiesModal extends React.Component {
 
-       state = {
-               show: true,
-               loopCache: this.props.loopCache,
-               temporaryPropertiesJson: JSON.parse(JSON.stringify(this.props.loopCache.getGlobalProperties()))
-       };
+  state = {
+    show: true,
+    loopCache: this.props.loopCache,
+    temporaryPropertiesJson: JSON.parse(JSON.stringify(this.props.loopCache.getGlobalProperties()))
+  };
 
-       constructor(props, context) {
-               super(props, context);
+  constructor(props, context) {
+    super(props, context);
 
-               this.handleClose = this.handleClose.bind(this);
-               this.handleSave = this.handleSave.bind(this);
-               this.handleChange = this.handleChange.bind(this);
+    this.handleClose = this.handleClose.bind(this);
+    this.handleSave = this.handleSave.bind(this);
+    this.handleChange = this.handleChange.bind(this);
 
-               this.renderDcaeParameters = this.renderDcaeParameters.bind(this);
-               this.renderAllParameters = this.renderAllParameters.bind(this);
-               this.getDcaeParameters = this.getDcaeParameters.bind(this);
-               this.readOnly = props.readOnly !== undefined ? props.readOnly : false;
-       }
+    this.renderDcaeParameters = this.renderDcaeParameters.bind(this);
+    this.renderAllParameters = this.renderAllParameters.bind(this);
+    this.getDcaeParameters = this.getDcaeParameters.bind(this);
+    this.readOnly = props.readOnly !== undefined ? props.readOnly : false;
+  }
 
-       componentWillReceiveProps(newProps) {
-               this.setState({
-                       loopCache: newProps.loopCache,
-                       temporaryPropertiesJson: JSON.parse(JSON.stringify(newProps.loopCache.getGlobalProperties()))
-               });
-       }
+  componentWillReceiveProps(newProps) {
+    this.setState({
+      loopCache: newProps.loopCache,
+      temporaryPropertiesJson: JSON.parse(JSON.stringify(newProps.loopCache.getGlobalProperties()))
+    });
+  }
 
-       handleClose() {
-               this.props.history.push('/');
-       }
+  handleClose() {
+    this.props.history.push('/');
+  }
 
-       handleSave(event) {
-               LoopService.updateGlobalProperties(this.state.loopCache.getLoopName(), this.state.temporaryPropertiesJson).then(resp => {
-                       this.setState({ show: false });
-                       this.props.history.push('/');
-                       this.props.loadLoopFunction(this.state.loopCache.getLoopName());
-               });
-       }
+  handleSave(event) {
+    LoopService.updateGlobalProperties(this.state.loopCache.getLoopName(), this.state.temporaryPropertiesJson).then(resp => {
+      this.setState({ show: false });
+      this.props.history.push('/');
+      this.props.loadLoopFunction(this.state.loopCache.getLoopName());
+    });
+  }
 
-       handleChange(event) {
-               this.setState({temporaryPropertiesJson:{[event.target.name]: JSON.parse(event.target.value)}});
-       }
+  handleChange(event) {
+    this.setState({ temporaryPropertiesJson: { [event.target.name]: JSON.parse(event.target.value) } });
+  }
 
-       renderAllParameters() {
-               return (<Modal.Body>
-                       <Form>
-                               {this.renderDcaeParameters()}
-                       </Form>
-               </Modal.Body>
-               );
-       }
+  renderAllParameters() {
+    return (<Modal.Body>
+        <Form>
+          { this.renderDcaeParameters() }
+        </Form>
+      </Modal.Body>
+    );
+  }
 
-       getDcaeParameters() {
-               if (typeof (this.state.temporaryPropertiesJson) !== "undefined") {
-                       return JSON.stringify(this.state.temporaryPropertiesJson["dcaeDeployParameters"]);
-               } else {
-                       return "";
-               }
+  getDcaeParameters() {
+    if (typeof (this.state.temporaryPropertiesJson) !== "undefined") {
+      return JSON.stringify(this.state.temporaryPropertiesJson["dcaeDeployParameters"]);
+    } else {
+      return "";
+    }
 
-       }
+  }
 
-       renderDcaeParameters() {
-               return (
-                       <Form.Group >
-                               <Form.Label>Deploy Parameters</Form.Label>
-                               <Form.Control as="textarea" rows="3" name="dcaeDeployParameters" onChange={this.handleChange} defaultValue={this.getDcaeParameters()}></Form.Control>
-                       </Form.Group>
-               );
-       }
+  renderDcaeParameters() {
+    return (
+      <Form.Group>
+        <Form.Label>Deploy Parameters</Form.Label>
+        <Form.Control as="textarea" rows="3" name="dcaeDeployParameters" onChange={ this.handleChange } defaultValue={ this.getDcaeParameters() }></Form.Control>
+      </Form.Group>
+    );
+  }
 
-       render() {
-               return (
-                       <ModalStyled size="lg" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false} >
-                               <Modal.Header closeButton>
-                                       <Modal.Title>Model Properties</Modal.Title>
-                               </Modal.Header>
-                                       {this.renderAllParameters()}
-                               <Modal.Footer>
-                                       <Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>
-                                       <Button variant="primary" type="submit" disabled={this.readOnly}  onClick={this.handleSave}>Save Changes</Button>
-                               </Modal.Footer>
-                       </ModalStyled>
-               );
-       }
+  render() {
+    return (
+      <ModalStyled size="lg" show={ this.state.show } onHide={ this.handleClose } backdrop="static" keyboard={ false }>
+        <Modal.Header closeButton>
+          <Modal.Title>Model Properties</Modal.Title>
+        </Modal.Header>
+        { this.renderAllParameters() }
+        <Modal.Footer>
+          <Button variant="secondary" type="null" onClick={ this.handleClose }>Cancel</Button>
+          <Button variant="primary" type="submit" disabled={ this.readOnly } onClick={ this.handleSave }>Save Changes</Button>
+        </Modal.Footer>
+      </ModalStyled>
+    );
+  }
 }
index 5bbefe2..a9c5903 100644 (file)
@@ -27,82 +27,84 @@ import LoopCache from '../../../api/LoopCache';
 import LoopService from '../../../api/LoopService';
 
 describe('Verify LoopPropertiesModal', () => {
-       const loopCache = new LoopCache({
-               "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
-               "globalPropertiesJson": {
-                       "dcaeDeployParameters": {
-                               "location_id": "",
-                               "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
-                       }
-               }
-       });
+  const loopCache = new LoopCache({
+    "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
+    "globalPropertiesJson": {
+      "dcaeDeployParameters": {
+        "location_id": "",
+        "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
+      }
+    }
+  });
 
-       it('Test the render method', () => {
-               const component = shallow(
-                       <LoopPropertiesModal loopCache={loopCache}/>
-               )
-               component.setState({ show: true,
-                       temporaryPropertiesJson: {
-                               "dcaeDeployParameters": {
-                                       "location_id": "",
-                                       "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
-                               }
-                       }
-               });
+  it('Test the render method', () => {
+    const component = shallow(
+      <LoopPropertiesModal loopCache={ loopCache }/>
+    )
+    component.setState({
+      show: true,
+      temporaryPropertiesJson: {
+        "dcaeDeployParameters": {
+          "location_id": "",
+          "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
+        }
+      }
+    });
 
-       expect(component.state('temporaryPropertiesJson')).toEqual({
-       "dcaeDeployParameters": {
-               "location_id": "",
-               "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"}
-       });
-       expect(component.state('show')).toEqual(true);
+    expect(component.state('temporaryPropertiesJson')).toEqual({
+      "dcaeDeployParameters": {
+        "location_id": "",
+        "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
+      }
+    });
+    expect(component.state('show')).toEqual(true);
 
-       expect(component).toMatchSnapshot();
-       });
+    expect(component).toMatchSnapshot();
+  });
 
-       it('Test handleClose', () => {
-               const historyMock = { push: jest.fn() };
-               const handleClose = jest.spyOn(LoopPropertiesModal.prototype,'handleClose');
-               const component = shallow(<LoopPropertiesModal history={historyMock} loopCache={loopCache}/>)
+  it('Test handleClose', () => {
+    const historyMock = { push: jest.fn() };
+    const handleClose = jest.spyOn(LoopPropertiesModal.prototype, 'handleClose');
+    const component = shallow(<LoopPropertiesModal history={ historyMock } loopCache={ loopCache }/>)
 
-               component.find('[variant="secondary"]').prop('onClick')();
+    component.find('[variant="secondary"]').prop('onClick')();
 
-               expect(handleClose).toHaveBeenCalledTimes(1);
-               expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
-       });
+    expect(handleClose).toHaveBeenCalledTimes(1);
+    expect(historyMock.push.mock.calls[0]).toEqual(['/']);
+  });
 
-       it('Test handleSave successful', async () => {
-               const flushPromises = () => new Promise(setImmediate);
-               const historyMock = { push: jest.fn() };
-               const loadLoopFunction = jest.fn();
-               const handleSave = jest.spyOn(LoopPropertiesModal.prototype,'handleSave');
-               LoopService.updateGlobalProperties = jest.fn().mockImplementation(() => {
-                       return Promise.resolve({
-                               ok: true,
-                               status: 200,
-                               text: () => "OK"
-                       });
-               });
+  it('Test handleSave successful', async () => {
+    const flushPromises = () => new Promise(setImmediate);
+    const historyMock = { push: jest.fn() };
+    const loadLoopFunction = jest.fn();
+    const handleSave = jest.spyOn(LoopPropertiesModal.prototype, 'handleSave');
+    LoopService.updateGlobalProperties = jest.fn().mockImplementation(() => {
+      return Promise.resolve({
+        ok: true,
+        status: 200,
+        text: () => "OK"
+      });
+    });
 
-               const component = shallow(<LoopPropertiesModal history={historyMock} 
-                                               loopCache={loopCache} loadLoopFunction={loadLoopFunction} />)
+    const component = shallow(<LoopPropertiesModal history={ historyMock }
+                                                   loopCache={ loopCache } loadLoopFunction={ loadLoopFunction }/>)
 
-               component.find('[variant="primary"]').prop('onClick')();
-               await flushPromises();
-               component.update();
+    component.find('[variant="primary"]').prop('onClick')();
+    await flushPromises();
+    component.update();
 
-               expect(handleSave).toHaveBeenCalledTimes(1);
-               expect(component.state('show')).toEqual(false);
-               expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
-       });
+    expect(handleSave).toHaveBeenCalledTimes(1);
+    expect(component.state('show')).toEqual(false);
+    expect(historyMock.push.mock.calls[0]).toEqual(['/']);
+  });
 
-       it('Onchange event', () => {
-               const event = {target:{name:"dcaeDeployParameters", value:"{\"location_id\": \"testLocation\",\"policy_id\": \"TCA_h2NMX_v1_0_ResourceInstanceName1_tca\"}"}};
-               const component = shallow(<LoopPropertiesModal loopCache={loopCache}/>);
+  it('Onchange event', () => {
+    const event = { target: { name: "dcaeDeployParameters", value: "{\"location_id\": \"testLocation\",\"policy_id\": \"TCA_h2NMX_v1_0_ResourceInstanceName1_tca\"}" } };
+    const component = shallow(<LoopPropertiesModal loopCache={ loopCache }/>);
 
-               component.find('FormControl').simulate('change', event);
-               component.update();
+    component.find('FormControl').simulate('change', event);
+    component.update();
 
-               expect(component.state('temporaryPropertiesJson').dcaeDeployParameters.location_id).toEqual("testLocation");
-       });
+    expect(component.state('temporaryPropertiesJson').dcaeDeployParameters.location_id).toEqual("testLocation");
+  });
 });
index f6c0d2e..0d20341 100644 (file)
@@ -40,208 +40,223 @@ import Tab from 'react-bootstrap/Tab';
 import Alert from 'react-bootstrap/Alert';
 
 const ModalStyled = styled(Modal)`
-       background-color: transparent;
+  background-color: transparent;
 `
 const TextModal = styled.textarea`
-       margin-top: 20px;
-       white-space:pre;
-       background-color: ${props => props.theme.toscaTextareaBackgroundColor};
-       text-align: justify;
-       font-size: ${props => props.theme.toscaTextareaFontSize};
-       width: 100%;
-       height: 300px;
+  margin-top: 20px;
+  white-space: pre;
+  background-color: ${ props => props.theme.toscaTextareaBackgroundColor };
+  text-align: justify;
+  font-size: ${ props => props.theme.toscaTextareaFontSize };
+  width: 100%;
+  height: 300px;
 `
 const cellStyle = { 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 headerStyle = { backgroundColor: '#ddd', border: '2px solid black' };
+const rowHeaderStyle = { backgroundColor: '#ddd', fontSize: '15pt', text: 'bold', border: '1px solid black' };
 
 export default class ModifyLoopModal extends React.Component {
 
-       state = {
-               show: true,
-               loopCache: this.props.loopCache,
-               content: 'Please select Tosca model to view the details',
-               selectedRowData: {},
-               toscaPolicyModelsData: [],
-               selectedPolicyModelsData: [],
-               key: 'add',
-               showFailAlert: false,
-               toscaColumns: [
-                       { title: "#", field: "index", render: rowData => rowData.tableData.id + 1,
-                               cellStyle: cellStyle,
-                               headerStyle: headerStyle
-                       },
-                       { title: "Policy Model Type", field: "policyModelType",
-                               cellStyle: cellStyle,
-                               headerStyle: headerStyle
-                       },
-                       { title: "Policy Acronym", field: "policyAcronym",
-                               cellStyle: cellStyle,
-                               headerStyle: headerStyle
-                       },
-                       { title: "Policy Name", field: "policyName",
-               cellStyle: cellStyle,
-                headerStyle: headerStyle
-            },
-                       { title: "Version", field: "version",
-                               cellStyle: cellStyle,
-                               headerStyle: headerStyle
-                       },
-                       { title: "Uploaded By", field: "updatedBy",
-                               cellStyle: cellStyle,
-                               headerStyle: headerStyle
-                       },
-                       { title: "Uploaded Date", field: "updatedDate", editable: 'never',
-                               cellStyle: cellStyle,
-                               headerStyle: headerStyle
-                       },
-             { title: "Created Date", field: "createdDate", editable: 'never',
-               cellStyle: cellStyle,
-               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} />)
-               }
-       };
+  state = {
+    show: true,
+    loopCache: this.props.loopCache,
+    content: 'Please select Tosca model to view the details',
+    selectedRowData: {},
+    toscaPolicyModelsData: [],
+    selectedPolicyModelsData: [],
+    key: 'add',
+    showFailAlert: false,
+    toscaColumns: [
+      {
+        title: "#", field: "index", render: rowData => rowData.tableData.id + 1,
+        cellStyle: cellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Policy Model Type", field: "policyModelType",
+        cellStyle: cellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Policy Acronym", field: "policyAcronym",
+        cellStyle: cellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Policy Name", field: "policyName",
+        cellStyle: cellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Version", field: "version",
+        cellStyle: cellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Uploaded By", field: "updatedBy",
+        cellStyle: cellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Uploaded Date", field: "updatedDate", editable: 'never',
+        cellStyle: cellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Created Date", field: "createdDate", editable: 'never',
+        cellStyle: cellStyle,
+        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.initializeToscaPolicyModelsInfo = this.initializeToscaPolicyModelsInfo.bind(this);
-               this.handleYamlContent = this.handleYamlContent.bind(this);
-               this.getToscaPolicyModelYaml = this.getToscaPolicyModelYaml.bind(this);
-               this.handleAdd = this.handleAdd.bind(this);
-               this.handleRemove = this.handleRemove.bind(this);
-               this.initializeToscaPolicyModelsInfo();
-       }
+  constructor(props, context) {
+    super(props, context);
+    this.handleClose = this.handleClose.bind(this);
+    this.initializeToscaPolicyModelsInfo = this.initializeToscaPolicyModelsInfo.bind(this);
+    this.handleYamlContent = this.handleYamlContent.bind(this);
+    this.getToscaPolicyModelYaml = this.getToscaPolicyModelYaml.bind(this);
+    this.handleAdd = this.handleAdd.bind(this);
+    this.handleRemove = this.handleRemove.bind(this);
+    this.initializeToscaPolicyModelsInfo();
+  }
 
-       initializeToscaPolicyModelsInfo() {
-               var operationalPolicies = this.state.loopCache.getOperationalPolicies();
-               var selectedPolicyModels = [];
-               for (var policy in operationalPolicies) {
-                   var newRow = operationalPolicies[policy]["policyModel"];
-                   newRow["policyName"] = operationalPolicies[policy].name;
-                       selectedPolicyModels.push(newRow);
-               }
+  initializeToscaPolicyModelsInfo() {
+    var operationalPolicies = this.state.loopCache.getOperationalPolicies();
+    var selectedPolicyModels = [];
+    for (var policy in operationalPolicies) {
+      var newRow = operationalPolicies[policy]["policyModel"];
+      newRow["policyName"] = operationalPolicies[policy].name;
+      selectedPolicyModels.push(newRow);
+    }
 
-               PolicyToscaService.getToscaPolicyModels().then(allToscaModels => {
-                       this.setState({ toscaPolicyModelsData: allToscaModels,
-                                                       selectedPolicyModelsData: selectedPolicyModels});
-               });
-       }
+    PolicyToscaService.getToscaPolicyModels().then(allToscaModels => {
+      this.setState({
+        toscaPolicyModelsData: allToscaModels,
+        selectedPolicyModelsData: selectedPolicyModels
+      });
+    });
+  }
 
-       getToscaPolicyModelYaml(policyModelType, policyModelVersion) {
-               if (typeof policyModelType !== "undefined") {
-                       PolicyToscaService.getToscaPolicyModelYaml(policyModelType, policyModelVersion).then(toscaYaml => {
-                               if (toscaYaml.length !== 0) {
-                                       this.setState({content: toscaYaml})
-                               } else {
-                                       this.setState({ content: 'No Tosca model Yaml available' })
-                               }
-                       });
-               } else {
-                       this.setState({ content: 'Please select Tosca model to view the details' })
-               }
-       }
+  getToscaPolicyModelYaml(policyModelType, policyModelVersion) {
+    if (typeof policyModelType !== "undefined") {
+      PolicyToscaService.getToscaPolicyModelYaml(policyModelType, policyModelVersion).then(toscaYaml => {
+        if (toscaYaml.length !== 0) {
+          this.setState({ content: toscaYaml })
+        } else {
+          this.setState({ content: 'No Tosca model Yaml available' })
+        }
+      });
+    } else {
+      this.setState({ content: 'Please select Tosca model to view the details' })
+    }
+  }
 
-       handleYamlContent(event) {
-               this.setState({ content: event.target.value });
-       }
+  handleYamlContent(event) {
+    this.setState({ content: event.target.value });
+  }
 
-       handleClose() {
-               this.setState({ show: false });
-               this.props.history.push('/');
-       }
+  handleClose() {
+    this.setState({ show: false });
+    this.props.history.push('/');
+  }
 
-       renderAlert() {
-               return (
-                       <div>
-                               <Alert variant="danger" show={this.state.showFailAlert} onClose={this.disableAlert} dismissible>
-                                       {this.state.showMessage}
-                               </Alert>
-                       </div>
-               );
-       }
+  renderAlert() {
+    return (
+      <div>
+        <Alert variant="danger" show={ this.state.showFailAlert } onClose={ this.disableAlert } dismissible>
+          { this.state.showMessage }
+        </Alert>
+      </div>
+    );
+  }
 
-       handleAdd() {
-               LoopService.addOperationalPolicyType(this.state.loopCache.getLoopName(),this.state.selectedRowData.policyModelType,this.state.selectedRowData.version)
-               .then(pars => {
-                       this.props.loadLoopFunction(this.state.loopCache.getLoopName());
-                       this.handleClose();
-               })
-               .catch(error => {
-                       this.setState({ showFailAlert: true, showMessage: "Adding failed with error: " + error.message});
-               });
-       }
+  handleAdd() {
+    LoopService.addOperationalPolicyType(this.state.loopCache.getLoopName(), this.state.selectedRowData.policyModelType, this.state.selectedRowData.version)
+      .then(pars => {
+        this.props.loadLoopFunction(this.state.loopCache.getLoopName());
+        this.handleClose();
+      })
+      .catch(error => {
+        this.setState({ showFailAlert: true, showMessage: "Adding failed with error: " + error.message });
+      });
+  }
 
-       handleRemove() {
-               LoopService.removeOperationalPolicyType(this.state.loopCache.getLoopName(),this.state.selectedRowData.policyModelType,this.state.selectedRowData.version,this.state.selectedRowData.policyName);
-               this.props.loadLoopFunction(this.state.loopCache.getLoopName());
-               this.handleClose();
-       }
+  handleRemove() {
+    LoopService.removeOperationalPolicyType(this.state.loopCache.getLoopName(), this.state.selectedRowData.policyModelType, this.state.selectedRowData.version, this.state.selectedRowData.policyName);
+    this.props.loadLoopFunction(this.state.loopCache.getLoopName());
+    this.handleClose();
+  }
 
-       render() {
-               return (
-                       <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false} >
-                               <Modal.Header closeButton>
-                                       <Modal.Title>Modify Loop Operational Policies</Modal.Title>
-                               </Modal.Header>
-                               <Tabs id="controlled-tab-example" activeKey={this.state.key} onSelect={key => this.setState({ key, selectedRowData: {} })}>
-                                       <Tab eventKey="add" title="Add Operational Policies">
-                                               <Modal.Body>
-                                                       <MaterialTable
-                                                       title={"View Tosca Policy Models"}
-                                                       data={this.state.toscaPolicyModelsData}
-                                                       columns={this.state.toscaColumns}
-                                                       icons={this.state.tableIcons}
-                                                       onRowClick={(event, rowData) => {this.getToscaPolicyModelYaml(rowData.policyModelType, rowData.version);this.setState({selectedRowData: rowData})}}
-                                                       options={{
-                                                               headerStyle: rowHeaderStyle,
-                                                               rowStyle: rowData => ({
-                                                                       backgroundColor: (this.state.selectedRowData !== {} && this.state.selectedRowData.tableData !== undefined
-                                                                       && this.state.selectedRowData.tableData.id === rowData.tableData.id) ? '#EEE' : '#FFF'
-                                                                       })
-                                                       }}
-                                                       />
-                                                       <div>
-                                                               <TextModal value={this.state.content} onChange={this.handleYamlContent}/>
-                                                       </div>
-                                               </Modal.Body>
-                                               {this.renderAlert()}
-                                       </Tab>
-                                       <Tab eventKey="remove" title="Remove Operational Policies">
-                                               <Modal.Body>
-                                                       <MaterialTable
-                                                       title={"Tosca Policy Models already added"}
-                                                       data={this.state.selectedPolicyModelsData}
-                                                       columns={this.state.toscaColumns}
-                                                       icons={this.state.tableIcons}
-                                                       onRowClick={(event, rowData) => {this.setState({selectedRowData: rowData})}}
-                                                       options={{
-                                                               headerStyle: rowHeaderStyle,
-                                                               rowStyle: rowData => ({
-                                                                       backgroundColor: (this.state.selectedRowData !== {} && this.state.selectedRowData.tableData !== undefined
-                                                                       && this.state.selectedRowData.tableData.id === rowData.tableData.id) ? '#EEE' : '#FFF'
-                                                               })
-                                                       }}
-                                                       />
-                                               </Modal.Body>
-                                       </Tab>
-                               </Tabs>
-                               <Modal.Footer>
-                                       <Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>
-                                       <Button variant="primary" disabled={(this.state.key === "remove")} type="submit" onClick={this.handleAdd}>Add</Button>
-                                       <Button variant="primary" disabled={(this.state.key === "add")} type="submit" onClick={this.handleRemove}>Remove</Button>
-                               </Modal.Footer>
+  render() {
+    return (
+      <ModalStyled size="xl" show={ this.state.show } onHide={ this.handleClose } backdrop="static" keyboard={ false }>
+        <Modal.Header closeButton>
+          <Modal.Title>Modify Loop Operational Policies</Modal.Title>
+        </Modal.Header>
+        <Tabs id="controlled-tab-example" activeKey={ this.state.key } onSelect={ key => this.setState({ key, selectedRowData: {} }) }>
+          <Tab eventKey="add" title="Add Operational Policies">
+            <Modal.Body>
+              <MaterialTable
+                title={ "View Tosca Policy Models" }
+                data={ this.state.toscaPolicyModelsData }
+                columns={ this.state.toscaColumns }
+                icons={ this.state.tableIcons }
+                onRowClick={ (event, rowData) => {
+                  this.getToscaPolicyModelYaml(rowData.policyModelType, rowData.version);
+                  this.setState({ selectedRowData: rowData })
+                } }
+                options={ {
+                  headerStyle: rowHeaderStyle,
+                  rowStyle: rowData => ({
+                    backgroundColor: (this.state.selectedRowData !== {} && this.state.selectedRowData.tableData !== undefined
+                      && this.state.selectedRowData.tableData.id === rowData.tableData.id) ? '#EEE' : '#FFF'
+                  })
+                } }
+              />
+              <div>
+                <TextModal value={ this.state.content } onChange={ this.handleYamlContent }/>
+              </div>
+            </Modal.Body>
+            { this.renderAlert() }
+          </Tab>
+          <Tab eventKey="remove" title="Remove Operational Policies">
+            <Modal.Body>
+              <MaterialTable
+                title={ "Tosca Policy Models already added" }
+                data={ this.state.selectedPolicyModelsData }
+                columns={ this.state.toscaColumns }
+                icons={ this.state.tableIcons }
+                onRowClick={ (event, rowData) => {
+                  this.setState({ selectedRowData: rowData })
+                } }
+                options={ {
+                  headerStyle: rowHeaderStyle,
+                  rowStyle: rowData => ({
+                    backgroundColor: (this.state.selectedRowData !== {} && this.state.selectedRowData.tableData !== undefined
+                      && this.state.selectedRowData.tableData.id === rowData.tableData.id) ? '#EEE' : '#FFF'
+                  })
+                } }
+              />
+            </Modal.Body>
+          </Tab>
+        </Tabs>
+        <Modal.Footer>
+          <Button variant="secondary" type="null" onClick={ this.handleClose }>Cancel</Button>
+          <Button variant="primary" disabled={ (this.state.key === "remove") } type="submit" onClick={ this.handleAdd }>Add</Button>
+          <Button variant="primary" disabled={ (this.state.key === "add") } type="submit" onClick={ this.handleRemove }>Remove</Button>
+        </Modal.Footer>
 
-                       </ModalStyled>
-               );
-       }
+      </ModalStyled>
+    );
+  }
 }
index 055ad0e..79267af 100644 (file)
@@ -28,82 +28,82 @@ import LoopService from '../../../api/LoopService';
 import PolicyToscaService from '../../../api/PolicyToscaService';
 
 describe('Verify ModifyLoopModal', () => {
-    beforeEach(() => {
-        PolicyToscaService.getToscaPolicyModels = jest.fn().mockImplementation(() => {
-            return Promise.resolve([{
-                "policyModelType":"test",
-                "policyAcronym":"test",
-                "version":"1.0.0",
-                "updatedBy":"",
-                "updatedDate":""
-            }]);
-        });
-        PolicyToscaService.getToscaPolicyModelYaml = jest.fn().mockImplementation(() => {
-            return Promise.resolve("OK");
-        });
-    })
+  beforeEach(() => {
+    PolicyToscaService.getToscaPolicyModels = jest.fn().mockImplementation(() => {
+      return Promise.resolve([{
+        "policyModelType": "test",
+        "policyAcronym": "test",
+        "version": "1.0.0",
+        "updatedBy": "",
+        "updatedDate": ""
+      }]);
+    });
+    PolicyToscaService.getToscaPolicyModelYaml = jest.fn().mockImplementation(() => {
+      return Promise.resolve("OK");
+    });
+  })
 
-    const loopCache = new LoopCache({
-            "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
-            "microServicePolicies": [{
-                "name": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca",
-                "modelType": "onap.policies.monitoring.cdap.tca.hi.lo.app",
-                "properties": {"domain": "measurementsForVfScaling"},
-                "shared": false,
-                "jsonRepresentation": {"schema": {}}
-            }],
-            "globalPropertiesJson": {
-                "dcaeDeployParameters": {
-                    "testMs": {
-                    "location_id": "",
-                    "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
-                }
-            }
+  const loopCache = new LoopCache({
+    "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
+    "microServicePolicies": [{
+      "name": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca",
+      "modelType": "onap.policies.monitoring.cdap.tca.hi.lo.app",
+      "properties": { "domain": "measurementsForVfScaling" },
+      "shared": false,
+      "jsonRepresentation": { "schema": {} }
+    }],
+    "globalPropertiesJson": {
+      "dcaeDeployParameters": {
+        "testMs": {
+          "location_id": "",
+          "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
         }
-    });
-    const historyMock = { push: jest.fn() };
-    const flushPromises = () => new Promise(setImmediate);
+      }
+    }
+  });
+  const historyMock = { push: jest.fn() };
+  const flushPromises = () => new Promise(setImmediate);
 
-    it('Test handleClose', () => {
-        const handleClose = jest.spyOn(ModifyLoopModal.prototype,'handleClose');
-        const component = mount(<ModifyLoopModal history={historyMock} loopCache={loopCache}/>)
+  it('Test handleClose', () => {
+    const handleClose = jest.spyOn(ModifyLoopModal.prototype, 'handleClose');
+    const component = mount(<ModifyLoopModal history={ historyMock } loopCache={ loopCache }/>)
 
-        component.find('[variant="secondary"]').get(0).props.onClick();
+    component.find('[variant="secondary"]').get(0).props.onClick();
 
-        expect(handleClose).toHaveBeenCalledTimes(1);
-        expect(component.state('show')).toEqual(false);
-        expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
-    });
+    expect(handleClose).toHaveBeenCalledTimes(1);
+    expect(component.state('show')).toEqual(false);
+    expect(historyMock.push.mock.calls[0]).toEqual(['/']);
+  });
 
-    it('Test getToscaPolicyModelYaml',  async () => {
-        const flushPromises = () => new Promise(setImmediate);
-        const component = mount(<ModifyLoopModal history={historyMock} loopCache={loopCache}/>)
-        component.setState({ 
-                "selectedRowData": {"tableData":{"id":0}}
-        });
-        const instance = component.instance();
+  it('Test getToscaPolicyModelYaml', async () => {
+    const flushPromises = () => new Promise(setImmediate);
+    const component = mount(<ModifyLoopModal history={ historyMock } loopCache={ loopCache }/>)
+    component.setState({
+      "selectedRowData": { "tableData": { "id": 0 } }
+    });
+    const instance = component.instance();
 
-        instance.getToscaPolicyModelYaml("","1.0.0");
-        expect(component.state('content')).toEqual("Please select Tosca model to view the details");
+    instance.getToscaPolicyModelYaml("", "1.0.0");
+    expect(component.state('content')).toEqual("Please select Tosca model to view the details");
 
-        instance.getToscaPolicyModelYaml("test","1.0.0");
-        await flushPromises();
-        expect(component.state('content')).toEqual("OK");
+    instance.getToscaPolicyModelYaml("test", "1.0.0");
+    await flushPromises();
+    expect(component.state('content')).toEqual("OK");
 
-        PolicyToscaService.getToscaPolicyModelYaml = jest.fn().mockImplementation(() => {
-            return Promise.resolve("");
-        });
-        instance.getToscaPolicyModelYaml("test","1.0.0");
-        await flushPromises();
-        expect(component.state('content')).toEqual("No Tosca model Yaml available");
+    PolicyToscaService.getToscaPolicyModelYaml = jest.fn().mockImplementation(() => {
+      return Promise.resolve("");
     });
+    instance.getToscaPolicyModelYaml("test", "1.0.0");
+    await flushPromises();
+    expect(component.state('content')).toEqual("No Tosca model Yaml available");
+  });
 
-    it('Test handleYamlContent',  async () => {
-        const component = mount(<ModifyLoopModal loopCache={loopCache}/>)
-        const instance = component.instance();
+  it('Test handleYamlContent', async () => {
+    const component = mount(<ModifyLoopModal loopCache={ loopCache }/>)
+    const instance = component.instance();
 
-        const event = {"target":{"value":"testValue"}}
-        instance.handleYamlContent(event);
-        expect(component.state('content')).toEqual("testValue");
-    });
-});
\ No newline at end of file
+    const event = { "target": { "value": "testValue" } }
+    instance.handleYamlContent(event);
+    expect(component.state('content')).toEqual("testValue");
+  });
+});
index b45df65..b6407fb 100644 (file)
@@ -34,104 +34,106 @@ import SvgGenerator from '../../loop_viewer/svg/SvgGenerator';
 import LoopCache from '../../../api/LoopCache';
 
 const ModalStyled = styled(Modal)`
-       background-color: transparent;
+  background-color: transparent;
 `
 const CheckBoxStyled = styled(FormCheck.Input)`
-       margin-left:3rem;
+  margin-left: 3rem;
 `
 
 export default class OpenLoopModal extends React.Component {
-       constructor(props, context) {
-               super(props, context);
+  constructor(props, context) {
+    super(props, context);
 
-               this.getLoopNames = this.getLoopNames.bind(this);
-               this.handleOpen = this.handleOpen.bind(this);
-               this.handleClose = this.handleClose.bind(this);
-               this.handleDropDownListChange = this.handleDropDownListChange.bind(this);
-               this.renderSvg = this.renderSvg.bind(this);
-               this.showReadOnly = props.showReadOnly !== undefined ? props.showReadOnly : true;
-               this.state = {
-                       show: true,
-                       chosenLoopName: '',
-                       loopNames: [],
-                       loopCacheOpened: new LoopCache({})
-               };
-       }
+    this.getLoopNames = this.getLoopNames.bind(this);
+    this.handleOpen = this.handleOpen.bind(this);
+    this.handleClose = this.handleClose.bind(this);
+    this.handleDropDownListChange = this.handleDropDownListChange.bind(this);
+    this.renderSvg = this.renderSvg.bind(this);
+    this.showReadOnly = props.showReadOnly !== undefined ? props.showReadOnly : true;
+    this.state = {
+      show: true,
+      chosenLoopName: '',
+      loopNames: [],
+      loopCacheOpened: new LoopCache({})
+    };
+  }
 
-       componentWillMount() {
-               this.getLoopNames();
-       }
+  componentWillMount() {
+    this.getLoopNames();
+  }
 
-       handleClose() {
-               this.setState({ show: false });
-               this.props.history.push('/');
-       }
+  handleClose() {
+    this.setState({ show: false });
+    this.props.history.push('/');
+  }
 
-       handleDropDownListChange(e) {
-        LoopService.getLoop(e.value).then(loop => {
-            this.setState({
-                chosenLoopName: e.value,
-                loopCacheOpened: new LoopCache(loop)
-             });
-               });
-       }
+  handleDropDownListChange(e) {
+    LoopService.getLoop(e.value).then(loop => {
+      this.setState({
+        chosenLoopName: e.value,
+        loopCacheOpened: new LoopCache(loop)
+      });
+    });
+  }
 
-       getLoopNames() {
-               LoopService.getLoopNames().then(loopNames => {
-                   if (Object.entries(loopNames).length !== 0) {
-                       const loopOptions = loopNames.filter(loopName => loopName!=='undefined').map((loopName) => { return { label: loopName, value: loopName } });
-               this.setState({ loopNames: loopOptions })
-                   }
-               });
-       }
+  getLoopNames() {
+    LoopService.getLoopNames().then(loopNames => {
+      if (Object.entries(loopNames).length !== 0) {
+        const loopOptions = loopNames.filter(loopName => loopName !== 'undefined').map((loopName) => {
+          return { label: loopName, value: loopName }
+        });
+        this.setState({ loopNames: loopOptions })
+      }
+    });
+  }
 
-       handleOpen() {
-               console.info("Loop " + this.state.chosenLoopName + " is chosen");
-        this.handleClose();
-               this.props.loadLoopFunction(this.state.chosenLoopName);
-       }
+  handleOpen() {
+    console.info("Loop " + this.state.chosenLoopName + " is chosen");
+    this.handleClose();
+    this.props.loadLoopFunction(this.state.chosenLoopName);
+  }
 
-       renderSvg() {
-               return(
-                               <SvgGenerator loopCache={this.state.loopCacheOpened} clickable={false} generatedFrom={SvgGenerator.GENERATED_FROM_INSTANCE}/>
-               );
-       }
+  renderSvg() {
+    return (
+      <SvgGenerator loopCache={ this.state.loopCacheOpened } clickable={ false } generatedFrom={ SvgGenerator.GENERATED_FROM_INSTANCE }/>
+    );
+  }
 
-       render() {
-               return (
-                       <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false} >
-                               <Modal.Header closeButton>
-                                       <Modal.Title>Open Model</Modal.Title>
-                               </Modal.Header>
-                               <Modal.Body>
-                                       <Form.Group as={Row} controlId="formPlaintextEmail">
-                                               <Form.Label column sm="2">Model Name:</Form.Label>
-                                               <Col sm="10">
-                                                       <Select onChange={this.handleDropDownListChange}
-                                                       options={this.state.loopNames} />
-                                               </Col>
-                                       </Form.Group>
-                                       <Form.Group as={Row} style={{alignItems: 'center'}} controlId="formSvgPreview">
-                                               <Form.Label column sm="2">Model Preview:</Form.Label>
-                                               <Col sm="10">
-                                                   {this.renderSvg()}
-                                               </Col>
-                                       </Form.Group>
-                                       {this.showReadOnly === true ?
-                                               <Form.Group as={Row} controlId="formBasicCheckbox">
-                                                       <Form.Check>
-                                                               <FormCheck.Label>Read Only Mode:</FormCheck.Label>
-                                                               <CheckBoxStyled style={{marginLeft: '3.5em'}} type="checkbox" />
-                                                       </Form.Check>
-                                               </Form.Group>
-                                       : null}
-                               </Modal.Body>
-                               <Modal.Footer>
-                                       <Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>
-                                       <Button variant="primary" type="submit" onClick={this.handleOpen}>Open</Button>
-                               </Modal.Footer>
-                       </ModalStyled>
+  render() {
+    return (
+      <ModalStyled size="xl" show={ this.state.show } onHide={ this.handleClose } backdrop="static" keyboard={ false }>
+        <Modal.Header closeButton>
+          <Modal.Title>Open Model</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Form.Group as={ Row } controlId="formPlaintextEmail">
+            <Form.Label column sm="2">Model Name:</Form.Label>
+            <Col sm="10">
+              <Select onChange={ this.handleDropDownListChange }
+                      options={ this.state.loopNames }/>
+            </Col>
+          </Form.Group>
+          <Form.Group as={ Row } style={ { alignItems: 'center' } } controlId="formSvgPreview">
+            <Form.Label column sm="2">Model Preview:</Form.Label>
+            <Col sm="10">
+              { this.renderSvg() }
+            </Col>
+          </Form.Group>
+          this.showReadOnly === true ?
+            <Form.Group as={ Row } controlId="formBasicCheckbox">
+              <Form.Check>
+                <FormCheck.Label>Read Only Mode:</FormCheck.Label>
+                <CheckBoxStyled style={ { marginLeft: '3.5em' } } type="checkbox"/>
+              </Form.Check>
+            </Form.Group>
+            : null }
+        </Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" type="null" onClick={ this.handleClose }>Cancel</Button>
+          <Button variant="primary" type="submit" onClick={ this.handleOpen }>Open</Button>
+        </Modal.Footer>
+      </ModalStyled>
 
-               );
-       }
+    );
+  }
 }
index 1865869..6b2dc4a 100644 (file)
@@ -28,15 +28,15 @@ import LoopService from '../../../api/LoopService';
 describe('Verify OpenLoopModal', () => {
 
   beforeEach(() => {
-      fetch.resetMocks();
-      fetch.mockResponse(JSON.stringify([
-        "LOOP_gmtAS_v1_0_ResourceInstanceName1_tca",
-        "LOOP_gmtAS_v1_0_ResourceInstanceName1_tca_3",
-        "LOOP_gmtAS_v1_0_ResourceInstanceName2_tca_2"
-      ]));
+    fetch.resetMocks();
+    fetch.mockResponse(JSON.stringify([
+      "LOOP_gmtAS_v1_0_ResourceInstanceName1_tca",
+      "LOOP_gmtAS_v1_0_ResourceInstanceName1_tca_3",
+      "LOOP_gmtAS_v1_0_ResourceInstanceName2_tca_2"
+    ]));
   });
 
-    it('Test the render method', () => {
+  it('Test the render method', () => {
 
     const component = shallow(<OpenLoopModal/>);
     expect(component).toMatchSnapshot();
@@ -45,13 +45,14 @@ describe('Verify OpenLoopModal', () => {
   it('Onchange event', async () => {
     const flushPromises = () => new Promise(setImmediate);
     LoopService.getLoop = jest.fn().mockImplementation(() => {
-               return Promise.resolve({
-                       ok: true,
-                       status: 200,
-                       json: () => {}
-               });
-       });
-    const event = {value: 'LOOP_gmtAS_v1_0_ResourceInstanceName1_tca_3'};
+      return Promise.resolve({
+        ok: true,
+        status: 200,
+        json: () => {
+        }
+      });
+    });
+    const event = { value: 'LOOP_gmtAS_v1_0_ResourceInstanceName1_tca_3' };
     const component = shallow(<OpenLoopModal/>);
     component.find('StateManager').simulate('change', event);
     await flushPromises();
@@ -61,30 +62,30 @@ describe('Verify OpenLoopModal', () => {
 
 
   it('Test handleClose', () => {
-    const historyMock = { push: jest.fn() }; 
-    const handleClose = jest.spyOn(OpenLoopModal.prototype,'handleClose');
-    const component = shallow(<OpenLoopModal history={historyMock} />)
+    const historyMock = { push: jest.fn() };
+    const handleClose = jest.spyOn(OpenLoopModal.prototype, 'handleClose');
+    const component = shallow(<OpenLoopModal history={ historyMock }/>)
 
     component.find('[variant="secondary"]').prop('onClick')();
 
     expect(handleClose).toHaveBeenCalledTimes(1);
     expect(component.state('show')).toEqual(false);
-    expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
-    
+    expect(historyMock.push.mock.calls[0]).toEqual(['/']);
+
     handleClose.mockClear();
   });
 
-    it('Test handleSubmit', () => {
+  it('Test handleSubmit', () => {
     const historyMock = { push: jest.fn() };
-    const loadLoopFunction = jest.fn();  
-    const handleOpen = jest.spyOn(OpenLoopModal.prototype,'handleOpen');
-    const component = shallow(<OpenLoopModal history={historyMock} loadLoopFunction={loadLoopFunction}/>)
+    const loadLoopFunction = jest.fn();
+    const handleOpen = jest.spyOn(OpenLoopModal.prototype, 'handleOpen');
+    const component = shallow(<OpenLoopModal history={ historyMock } loadLoopFunction={ loadLoopFunction }/>)
 
     component.find('[variant="primary"]').prop('onClick')();
 
     expect(handleOpen).toHaveBeenCalledTimes(1);
     expect(component.state('show')).toEqual(false);
-    expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
+    expect(historyMock.push.mock.calls[0]).toEqual(['/']);
 
     handleOpen.mockClear();
   });
index 90bbc88..d7ba8d1 100644 (file)
@@ -29,7 +29,7 @@ import Col from 'react-bootstrap/Col';
 import styled from 'styled-components';
 import TemplateMenuService from '../../../api/TemplateService';
 import CsvToJson from '../../../utils/CsvToJson';
-import MaterialTable, {MTableToolbar} from "material-table";
+import MaterialTable, { MTableToolbar } from "material-table";
 import IconButton from '@material-ui/core/IconButton';
 import Tooltip from '@material-ui/core/Tooltip';
 import AddBox from '@material-ui/icons/AddBox';
@@ -51,581 +51,587 @@ import ViewColumn from '@material-ui/icons/ViewColumn';
 
 
 const ModalStyled = styled(Modal)`
-       @media (min-width: 1200px) {
-               .modal-xl {
-                       max-width: 96%;
-               }
-       }
-       background-color: transparent;
+  @media (min-width: 1200px) {
+    .modal-xl {
+      max-width: 96%;
+    }
+  }
+  background-color: transparent;
 `
 
 const MTableToolbarStyled = styled(MTableToolbar)`
-       display: flex;
-       flex-direction: row;
-       align-items: center;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 `
 const ColPullLeftStyled = styled(Col)`
-       display: flex;
-       flex-direction: row;
-       align-items: center;
-       margin-left: -40px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-left: -40px;
 `
 
 const cellStyle = { 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 headerStyle = { backgroundColor: '#ddd', border: '2px solid black' };
+const rowHeaderStyle = { backgroundColor: '#ddd', fontSize: '15pt', text: 'bold', border: '1px solid black' };
 
 let dictList = [];
 let subDictFlag = false;
 
 function SelectSubDictType(props) {
-       const {onChange} = props;
-       const selectedValues = (e) => {
-               let options = e.target.options;
-               let SelectedDictTypes = '';
-               for (let dictType = 0, values = options.length; dictType < values; dictType++) {
-                       if (options[dictType].selected) {
-                               SelectedDictTypes = SelectedDictTypes.concat(options[dictType].value);
-                               SelectedDictTypes = SelectedDictTypes.concat('|');
-                       }
-               }
-               SelectedDictTypes = SelectedDictTypes.slice(0,-1);
-               onChange(SelectedDictTypes);
-       }
-       // When the subDictFlag is true, we need to disable selection of element "type"
-       return(
-               <div>
-                       <select disabled={subDictFlag} multiple={true} onChange={selectedValues}>
-                               <option value="string">string</option>
-                               <option value="number">number</option>
-                               <option value="datetime">datetime</option>
-                               <option value="map">map</option>
-                               <option value="json">json</option>
-                       </select>
-               </div>
-       );
+  const { onChange } = props;
+  const selectedValues = (e) => {
+    let options = e.target.options;
+    let SelectedDictTypes = '';
+    for (let dictType = 0, values = options.length; dictType < values; dictType++) {
+      if (options[dictType].selected) {
+        SelectedDictTypes = SelectedDictTypes.concat(options[dictType].value);
+        SelectedDictTypes = SelectedDictTypes.concat('|');
+      }
+    }
+    SelectedDictTypes = SelectedDictTypes.slice(0, -1);
+    onChange(SelectedDictTypes);
+  }
+  // When the subDictFlag is true, we need to disable selection of element "type"
+  return (
+    <div>
+      <select disabled={ subDictFlag } multiple={ true } onChange={ selectedValues }>
+        <option value="string">string</option>
+        <option value="number">number</option>
+        <option value="datetime">datetime</option>
+        <option value="map">map</option>
+        <option value="json">json</option>
+      </select>
+    </div>
+  );
 }
 
 function SubDict(props) {
-       const {onChange} = props;
-       const subDicts = [];
-       subDicts.push('none');
-       if (dictList !== undefined  && dictList.length > 0) {
-               let item;
-               for(item in dictList) {
-                       if(dictList[item].secondLevelDictionary === 1) {
-                               subDicts.push(dictList[item].name);
-                       }
-               }
-       }
-       let optionItems = [];
-       for (let i=0; i<subDicts.length; ++i) {
-               if (i === 0) {
-                       optionItems.push(<option selected key={subDicts[i]}>{subDicts[i]}</option>);
-               } else {
-                       optionItems.push(<option key={subDicts[i]}>{subDicts[i]}</option>);
-               }
-       }
-
-       function selectedValue (e) {
-               onChange(e.target.value);
-       }
-       // When the subDictFlag is true, we need to disable selection of
-       // the sub-dictionary flag
-       return(
-                       <select disabled={subDictFlag} onChange={selectedValue} >
-                               {optionItems}
-                       </select>
-       );
+  const { onChange } = props;
+  const subDicts = [];
+  subDicts.push('none');
+  if (dictList !== undefined && dictList.length > 0) {
+    let item;
+    for (item in dictList) {
+      if (dictList[item].secondLevelDictionary === 1) {
+        subDicts.push(dictList[item].name);
+      }
+    }
+  }
+  let optionItems = [];
+  for (let i = 0; i < subDicts.length; ++i) {
+    if (i === 0) {
+      optionItems.push(<option selected key={ subDicts[i] }>{ subDicts[i] }</option>);
+    } else {
+      optionItems.push(<option key={ subDicts[i] }>{ subDicts[i] }</option>);
+    }
+  }
+
+  function selectedValue(e) {
+    onChange(e.target.value);
+  }
+
+  // When the subDictFlag is true, we need to disable selection of
+  // the sub-dictionary flag
+  return (
+    <select disabled={ subDictFlag } onChange={ selectedValue }>
+      { optionItems }
+    </select>
+  );
 }
 
 export default class ManageDictionaries extends React.Component {
-       constructor(props, context) {
-               super(props, context);
-               this.addDictionaryElementRow = this.addDictionaryElementRow.bind(this);
-               this.addDictionaryRow = this.addDictionaryRow.bind(this);
-               this.addReplaceDictionaryRequest = this.addReplaceDictionaryRequest.bind(this);
-               this.clickHandler = this.clickHandler.bind(this);
-               this.deleteDictionaryElementRow = this.deleteDictionaryElementRow.bind(this);
-               this.deleteDictionaryRequest = this.deleteDictionaryRequest.bind(this);
-               this.deleteDictionaryRow = this.deleteDictionaryRow.bind(this);
-               this.fileSelectedHandler = this.fileSelectedHandler.bind(this);
-               this.getDictionaries = this.getDictionaries.bind(this);
-               this.getDictionaryElements = this.getDictionaryElements.bind(this);
-               this.handleClose = this.handleClose.bind(this);
-               this.handleDictionaryRowClick = this.handleDictionaryRowClick.bind(this);
-               this.importCsvData = this.importCsvData.bind(this);
-               this.updateDictionaryElementRow = this.updateDictionaryElementRow.bind(this);
-               this.updateDictionaryElementsRequest = this.updateDictionaryElementsRequest.bind(this);
-               this.updateDictionaryRow = this.updateDictionaryRow.bind(this);
-               this.readOnly = props.readOnly !== undefined ? props.readOnly : false;
-               this.state = {
-                       show: true,
-                       currentSelectedDictionary: null,
-                       exportFilename: '',
-                       content: null,
-                       dictionaryElements: [],
-                       tableIcons: {
-                               Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
-                               Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
-                               DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
-                               Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
-                               Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
-                               Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
-                               Export: forwardRef((props, ref) => <VerticalAlignBottomIcon {...props} ref={ref} />),
-                               Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
-                               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} />),
-                               ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
-                               ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />)
-                       },
-                       dictColumns: [
-                               {
-                                       title: "Dictionary Name", field: "name",editable: 'onAdd',
-                                       cellStyle: cellStyle,
-                                       headerStyle: headerStyle
-                               },
-                               {
-                                       title: "Sub Dictionary ?", field: "secondLevelDictionary", lookup: {0: 'No', 1: 'Yes'},
-                                       cellStyle: cellStyle,
-                                       headerStyle: headerStyle
-                               },
-                               {
-                                       title: "Dictionary Type", field: "subDictionaryType",lookup: {string: 'string', number: 'number'},
-                                       cellStyle: cellStyle,
-                                       headerStyle: headerStyle
-                               },
-                               {
-                                       title: "Updated By", field: "updatedBy", editable: 'never',
-                                       cellStyle: cellStyle,
-                                       headerStyle: headerStyle
-                               },
-                               {
-                                       title: "Last Updated Date", field: "updatedDate", editable: 'never',
-                                       cellStyle: cellStyle,
-                                       headerStyle: headerStyle
-                               }
-                       ],
-                       dictElementColumns: [
-                               {
-                                       title: "Element Short Name", field: "shortName",editable: 'onAdd',
-                                       cellStyle: cellStyle,
-                                       headerStyle: headerStyle
-                               },
-                               {
-                                       title: "Element Name", field: "name",
-                                       cellStyle: cellStyle,
-                                       headerStyle: headerStyle
-                               },
-                               {
-                                       title: "Element Description", field: "description",
-                                       cellStyle: cellStyle,
-                                       headerStyle: headerStyle
-                               },
-                               {
-                                       title: "Element Type", field: "type",
-                                       editComponent: props => (
-                                               <div>
-                                                       <SelectSubDictType  value={props.value} onChange={props.onChange} />
-                                               </div>
-                                       ),
-                                       cellStyle: cellStyle,
-                                       headerStyle: headerStyle
-                               },
-                               {
-                                       title: "Sub-Dictionary", field: "subDictionary",
-                                       editComponent: props => (
-                                                <div>
-                                                        <SubDict value={props.value} onChange={props.onChange} />
-                                                </div>
-                                     ),
-                                   cellStyle: cellStyle,
-                                   headerStyle: headerStyle
-                               },
-                               {
-                                       title: "Updated By", field: "updatedBy", editable: 'never',
-                                       cellStyle: cellStyle,
-                                       headerStyle: headerStyle
-                               },
-                               {
-                                       title: "Updated Date", field: "updatedDate", editable: 'never',
-                                       cellStyle: cellStyle,
-                                       headerStyle: headerStyle
-                               }
-                       ]
-               }
-       }
-
-       componentDidMount() {
-               this.getDictionaries();
-       }
-
-       getDictionaries() {
-               TemplateMenuService.getDictionary().then(arrayOfdictionaries => {
-                       this.setState({ dictionaries: arrayOfdictionaries, currentSelectedDictionary: null })
-                       // global variable setting used functional components in this file
-                       dictList = arrayOfdictionaries;
-               }).catch(() => {
-                       console.error('Failed to retrieve dictionaries');
-                       this.setState({ dictionaries: [], currentSelectedDictionary: null })
-               });
-       }
-
-       getDictionaryElements(dictionaryName) {
-               TemplateMenuService.getDictionaryElements(dictionaryName).then(dictionaryElements => {
-                       this.setState({ dictionaryElements: dictionaryElements.dictionaryElements} );
-                       this.setState({ currentSelectDictionary: dictionaryName });
-               }).catch(() => console.error('Failed to retrieve dictionary elements'))
-       }
-
-       clickHandler(rowData) {
-               this.getDictionaries();
-       }
-
-       handleClose() {
-               this.setState({ show: false });
-               this.props.history.push('/');
-       }
-
-       addReplaceDictionaryRequest(dictionaryEntry) {
-               TemplateMenuService.insDictionary(dictionaryEntry)
-               .then(resp => {
-                       this.getDictionaries();
-               })
-               .catch(() => console.error('Failed to insert new dictionary elements'));
-       }
-
-       updateDictionaryElementsRequest(dictElements) {
-               let reqData = { "name": this.state.currentSelectedDictionary, 'dictionaryElements': dictElements };
-               TemplateMenuService.insDictionaryElements(reqData)
-               .then(resp => { this.getDictionaryElements(this.state.currentSelectedDictionary) })
-               .catch(() => console.error('Failed to update dictionary elements'));
-       }
-
-       deleteDictionaryRequest(dictionaryName) {
-               TemplateMenuService.deleteDictionary(dictionaryName)
-               .then(resp => {
-                       this.getDictionaries();
-               })
-               .catch(() => console.error('Failed to delete dictionary'));
-       }
-
-       deleteDictionaryElementRequest(dictionaryName, elemenetShortName) {
-               TemplateMenuService.deleteDictionaryElements({ 'name': dictionaryName, 'shortName': elemenetShortName })
-               .then(resp => {
-                       this.getDictionaryElements(dictionaryName);
-               })
-               .catch(() => console.error('Failed to delete dictionary elements'));
-       }
-
-       fileSelectedHandler = (event) => {
-
-               if (event.target.files[0].type === 'text/csv' || event.target.files[0].type === 'application/vnd.ms-excel') {
-                       if (event.target.files && event.target.files[0]) {
-                               const reader = new FileReader();
-                               reader.onload = (e) => {
-                                       let errorMessages = this.importCsvData(reader.result);
-                                       if (errorMessages !== '') {
-                                               alert(errorMessages);
-                                       }
-                               }
-                               reader.readAsText(event.target.files[0]);
-                       }
-               } else {
-                       alert('Please upload .csv extention files only.');
-               }
-       }
-
-       importCsvData(rawCsvData) {
-
-               const jsonKeyNames = [ 'shortName', 'name', 'description', 'type', 'subDictionary' ];
-               const userHeaderNames = [ 'Element Short Name', 'Element Name', 'Element Description', 'Element Type', 'Sub-Dictionary'  ];
-               const validTypes = ['string','number','datetime','json','map'];
-
-               let mandatory;
-
-               if (subDictFlag) {
-                       mandatory = [ true, true, true, false, false ];
-               } else {
-                       mandatory = [ true, true, true, true, false ];
-               }
-
-               let result = CsvToJson(rawCsvData, ',', '||||', userHeaderNames, jsonKeyNames, mandatory);
-
-               let errorMessages = result.errorMessages;
-               let jsonObjArray = result.jsonObjArray;
-
-               let validTypesErrorMesg = '';
-
-               for (let i=0; i < validTypes.length; ++i) {
-                       if (i === 0) {
-                               validTypesErrorMesg = validTypes[i];
-                       } else {
-                               validTypesErrorMesg += ',' + validTypes[i];
-                       }
-               }
-
-               if (errorMessages !== '') {
-                       return errorMessages;
-               }
-
-               // Perform further checks on data that is now in JSON form
-               let subDictionaries = [];
-
-               // NOTE: dictList is a global variable  maintained faithfully
-               //       by the getDictionaries() method outside this import
-               //       functionality.
-               let item;
-               for (item in dictList) {
-                       if (dictList[item].secondLevelDictionary === 1) {
-                               subDictionaries.push(dictList[item].name);
-                       }
-               };
-
-               // Check for valid Sub-Dictionary and Element Type values
-               subDictionaries = subDictionaries.toString();
-               let row = 2;
-               let dictElem;
-               for (dictElem of jsonObjArray) {
-                       let itemKey;
-                       for (itemKey in dictElem){
-                               let value = dictElem[itemKey].trim();
-                               let keyIndex = jsonKeyNames.indexOf(itemKey);
-                               if (itemKey === 'shortName' && /[^a-zA-Z0-9-_.]/.test(value)) {
-                                       errorMessages += '\n' + userHeaderNames[keyIndex] +
-                                               ' at row #' + row +
-                                               ' can only contain alphanumeric characters and periods, hyphens or underscores';
-                               }
-                               if (itemKey === 'type' && validTypes.indexOf(value) < 0) {
-                                       errorMessages += '\nInvalid value of "' + value + '" for "' + userHeaderNames[keyIndex] + '" at row #' + row;
-                                       errorMessages += '\nValid types are: ' + validTypesErrorMesg;
-                               }
-                               if (value !== "" && itemKey === 'subDictionary' && subDictionaries.indexOf(value) < 0) {
-                                       errorMessages += '\nInvalid Sub-Dictionary value of "' + value + '" at row #' + row;
-                               }
-                       }
-                       ++row;
-               }
-               if (errorMessages === '') {
-                       // We made it through all the checks. Send it to back end
-                       this.updateDictionaryElementsRequest(jsonObjArray);
-               }
-
-               return errorMessages;
-       }
-
-       addDictionaryRow(newData) {
-               let validData = true;
-               return new Promise((resolve, reject) => {
-                       setTimeout(() => {
-                                       if (/[^a-zA-Z0-9-_.]/.test(newData.name)) {
-                                               validData = false;
-                                               alert('Please enter alphanumeric input. Only allowed special characters are:(period, hyphen, underscore)');
-                                               reject();
-                                       }
-                                       for (let i = 0; i < this.state.dictionaries.length; i++) {
-                                               if (this.state.dictionaries[i].name === newData.name) {
-                                                       validData = false;
-                                                       alert(newData.name + ' dictionary name already exists')
-                                                       reject();
-                                               }
-                                       }
-                                       if (validData) {
-                                               this.addReplaceDictionaryRequest(newData);
-                                       }
-                                       resolve();
-                       }, 1000);
-               });
-       }
-
-
-       updateDictionaryRow(newData, oldData) {
-               let validData = true;
-               return new Promise((resolve, reject) => {
-                       setTimeout(() => {
-                               if (/[^a-zA-Z0-9-_.]/.test(newData.name)) {
-                                       validData = false;
-                                       alert('Please enter alphanumberic input. Only allowed special characters are:(period, hyphen, underscore)');
-                                       reject();
-                               }
-                               if (validData) {
-                                       this.addReplaceDictionaryRequest(newData);
-                               }
-                               resolve();
-                       }, 1000);
-               });
-       }
-
-       deleteDictionaryRow(oldData) {
-               return new Promise((resolve, reject) => {
-                       setTimeout(() => {
-                               this.deleteDictionaryRequest(oldData.name);
-                               resolve();
-                       }, 1000);
-               });
-       }
-
-       addDictionaryElementRow(newData) {
-               return new Promise((resolve, reject) => {
-                       setTimeout(() => {
-                               let dictionaryElements = this.state.dictionaryElements;
-                               let errorMessages = '';
-                               for (let i = 0; i < this.state.dictionaryElements.length; i++) {
-                                       if (this.state.dictionaryElements[i].shortName === newData.shortName) {
-                                               alert('Short Name "' + newData.shortName + '" already exists');
-                                               reject("");
-                                       }
-                               }
-                               // MaterialTable returns no property at all if the user has not touched a
-                               // new column, so we want to add the property with an emptry string
-                               // for several cases if that is the case to simplify other checks.
-                               if (newData.description === undefined) {
-                                       newData.description = "";
-                               }
-                               if (newData.subDictionary === undefined) {
-                                       newData.subDictionary = null;
-                               }
-                               if (newData.type === undefined) {
-                                       newData.type = "";
-                               }
-                               if (!newData.shortName && /[^a-zA-Z0-9-_.]/.test(newData.shortName)) {
-                                       errorMessages += '\nShort Name is limited to alphanumeric characters and also period, hyphen, and underscore';
-                               }
-                               if (!newData.shortName){
-                                       errorMessages += '\nShort Name must be specified';
-                               }
-                               if (!newData.name){
-                                       errorMessages += '\nElement Name must be specified';
-                               }
-                               if (!newData.type && !subDictFlag){
-                                       errorMessages += '\nElement Type must be specified';
-                               }
-                               if (errorMessages === '') {
-                                       dictionaryElements.push(newData);
-                                       this.updateDictionaryElementsRequest([newData]);
-                                       resolve();
-                               } else {
-                                       alert(errorMessages);
-                                       reject("");
-                               }
-                       }, 1000);
-               });
-       }
-
-       updateDictionaryElementRow(newData, oldData) {
-               return new Promise((resolve, reject) => {
-                       setTimeout(() => {
-                               let dictionaryElements = this.state.dictionaryElements;
-                               let validData =  true;
-                               if (!newData.type) {
-                                       validData = false;
-                                       alert('Element Type cannot be null');
-                                       reject();
-                               }
-                               if (validData) {
-                                       const index = dictionaryElements.indexOf(oldData);
-                                       dictionaryElements[index] = newData;
-                                       this.updateDictionaryElementsRequest([newData]);
-                               }
-                               resolve();
-                       }, 1000);
-               });
-       }
-
-
-       deleteDictionaryElementRow(oldData) {
-               return new Promise((resolve) => {
-                       setTimeout(() => {
-                               this.deleteDictionaryElementRequest(this.state.currentSelectedDictionary, oldData.shortName);
-                               resolve();
-                       }, 1000);
-               });
-       }
-
-       handleDictionaryRowClick(event, rowData) {
-               subDictFlag = rowData.secondLevelDictionary === 1 ? true : false;
-               this.setState({
-                       currentSelectedDictionary : rowData.name,
-                       exportFilename: rowData.name
-               })
-               this.getDictionaryElements(rowData.name);
-       }
-
-       render() {
-               return (
-                       <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false} >
-                               <Modal.Header closeButton>
-                                       <Modal.Title>Manage Dictionaries</Modal.Title>
-                               </Modal.Header>
-                               <Modal.Body>
-                                       {this.state.currentSelectedDictionary === null ?
-                                               <MaterialTable
-                                                       title={"Dictionary List"}
-                                                       data={this.state.dictionaries}
-                                                       columns={this.state.dictColumns}
-                                                       icons={this.state.tableIcons}
-                                                       onRowClick={this.handleDictionaryRowClick}
-                                                       options={{
-                                                               headerStyle: rowHeaderStyle,
-                                                       }}
-                                                       editable={!this.readOnly ?
-                                                               {
-                                                                       onRowAdd: this.addDictionaryRow,
-                                                                       onRowUpdate: this.updateDictionaryRow,
-                                                                       onRowDelete: this.deleteDictionaryRow
-                                                               } : undefined }
-                                               /> : null
-                                       }
-                                       {this.state.currentSelectedDictionary !== null ?
-                                               <MaterialTable
-                                                       title={'Dictionary Elements List for ' + (subDictFlag ? 'Sub-Dictionary "' : '"') + this.state.currentSelectedDictionary + '"'}
-                                                       data={this.state.dictionaryElements}
-                                                       columns={this.state.dictElementColumns}
-                                                       icons={this.state.tableIcons}
-                                                       options={{
-                                                               exportAllData: true,
-                                                               exportButton: true,
-                                                               exportFileName: this.state.exportFilename,
-                                                               headerStyle:{backgroundColor:'white',  fontSize: '15pt', text: 'bold', border: '1px solid black'}
-                                                       }}
-                                                       components={{
-                                                               Toolbar: props => (
-                                                                       <Row>
-                                                                               <Col sm="11">
-                                                                                       <MTableToolbarStyled {...props} />
-                                                                               </Col>
-                                                                               <ColPullLeftStyled sm="1">
-                                                                                       <Tooltip title="Import" placement = "bottom">
-                                                                                               <IconButton aria-label="import" disabled={this.readOnly} onClick={() => this.fileUpload.click()}>
-                                                                                                       <VerticalAlignTopIcon />
-                                                                                               </IconButton>
-                                                                                       </Tooltip>
-                                                                                       <input type="file" ref={(fileUpload) => {this.fileUpload = fileUpload;}}
-                                                                                               style={{ visibility: 'hidden', width: '1px' }} onChange={this.fileSelectedHandler} />
-                                                                               </ColPullLeftStyled>
-                                                                       </Row>
-                                                               )
-                                                       }}
-                                                       editable={!this.readOnly ?
-                                                               {
-                                                                       onRowAdd: this.addDictionaryElementRow,
-                                                                       onRowUpdate: this.updateDictionaryElementRow,
-                                                                       onRowDelete: this.deleteDictionaryElementRow
-                                                               } : undefined
-                                                        }
-                                               /> : null
-                                       }
-                                       {this.state.currentSelectedDictionary !== null ? <button onClick={this.clickHandler} style={{marginTop: '25px'}}>Go Back to Dictionaries List</button>:""}
-                               </Modal.Body>
-                               <Modal.Footer>
-                                       <Button variant="secondary" type="null" onClick={this.handleClose}>Close</Button>
-                               </Modal.Footer>
-                       </ModalStyled>
-               );
-       }
+  constructor(props, context) {
+    super(props, context);
+    this.addDictionaryElementRow = this.addDictionaryElementRow.bind(this);
+    this.addDictionaryRow = this.addDictionaryRow.bind(this);
+    this.addReplaceDictionaryRequest = this.addReplaceDictionaryRequest.bind(this);
+    this.clickHandler = this.clickHandler.bind(this);
+    this.deleteDictionaryElementRow = this.deleteDictionaryElementRow.bind(this);
+    this.deleteDictionaryRequest = this.deleteDictionaryRequest.bind(this);
+    this.deleteDictionaryRow = this.deleteDictionaryRow.bind(this);
+    this.fileSelectedHandler = this.fileSelectedHandler.bind(this);
+    this.getDictionaries = this.getDictionaries.bind(this);
+    this.getDictionaryElements = this.getDictionaryElements.bind(this);
+    this.handleClose = this.handleClose.bind(this);
+    this.handleDictionaryRowClick = this.handleDictionaryRowClick.bind(this);
+    this.importCsvData = this.importCsvData.bind(this);
+    this.updateDictionaryElementRow = this.updateDictionaryElementRow.bind(this);
+    this.updateDictionaryElementsRequest = this.updateDictionaryElementsRequest.bind(this);
+    this.updateDictionaryRow = this.updateDictionaryRow.bind(this);
+    this.readOnly = props.readOnly !== undefined ? props.readOnly : false;
+    this.state = {
+      show: true,
+      currentSelectedDictionary: null,
+      exportFilename: '',
+      content: null,
+      dictionaryElements: [],
+      tableIcons: {
+        Add: forwardRef((props, ref) => <AddBox { ...props } ref={ ref }/>),
+        Delete: forwardRef((props, ref) => <DeleteOutline { ...props } ref={ ref }/>),
+        DetailPanel: forwardRef((props, ref) => <ChevronRight { ...props } ref={ ref }/>),
+        Edit: forwardRef((props, ref) => <Edit { ...props } ref={ ref }/>),
+        Check: forwardRef((props, ref) => <Check { ...props } ref={ ref }/>),
+        Clear: forwardRef((props, ref) => <Clear { ...props } ref={ ref }/>),
+        Export: forwardRef((props, ref) => <VerticalAlignBottomIcon { ...props } ref={ ref }/>),
+        Filter: forwardRef((props, ref) => <FilterList { ...props } ref={ ref }/>),
+        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 }/>),
+        ThirdStateCheck: forwardRef((props, ref) => <Remove { ...props } ref={ ref }/>),
+        ViewColumn: forwardRef((props, ref) => <ViewColumn { ...props } ref={ ref }/>)
+      },
+      dictColumns: [
+        {
+          title: "Dictionary Name", field: "name", editable: 'onAdd',
+          cellStyle: cellStyle,
+          headerStyle: headerStyle
+        },
+        {
+          title: "Sub Dictionary ?", field: "secondLevelDictionary", lookup: { 0: 'No', 1: 'Yes' },
+          cellStyle: cellStyle,
+          headerStyle: headerStyle
+        },
+        {
+          title: "Dictionary Type", field: "subDictionaryType", lookup: { string: 'string', number: 'number' },
+          cellStyle: cellStyle,
+          headerStyle: headerStyle
+        },
+        {
+          title: "Updated By", field: "updatedBy", editable: 'never',
+          cellStyle: cellStyle,
+          headerStyle: headerStyle
+        },
+        {
+          title: "Last Updated Date", field: "updatedDate", editable: 'never',
+          cellStyle: cellStyle,
+          headerStyle: headerStyle
+        }
+      ],
+      dictElementColumns: [
+        {
+          title: "Element Short Name", field: "shortName", editable: 'onAdd',
+          cellStyle: cellStyle,
+          headerStyle: headerStyle
+        },
+        {
+          title: "Element Name", field: "name",
+          cellStyle: cellStyle,
+          headerStyle: headerStyle
+        },
+        {
+          title: "Element Description", field: "description",
+          cellStyle: cellStyle,
+          headerStyle: headerStyle
+        },
+        {
+          title: "Element Type", field: "type",
+          editComponent: props => (
+            <div>
+              <SelectSubDictType value={ props.value } onChange={ props.onChange }/>
+            </div>
+          ),
+          cellStyle: cellStyle,
+          headerStyle: headerStyle
+        },
+        {
+          title: "Sub-Dictionary", field: "subDictionary",
+          editComponent: props => (
+            <div>
+              <SubDict value={ props.value } onChange={ props.onChange }/>
+            </div>
+          ),
+          cellStyle: cellStyle,
+          headerStyle: headerStyle
+        },
+        {
+          title: "Updated By", field: "updatedBy", editable: 'never',
+          cellStyle: cellStyle,
+          headerStyle: headerStyle
+        },
+        {
+          title: "Updated Date", field: "updatedDate", editable: 'never',
+          cellStyle: cellStyle,
+          headerStyle: headerStyle
+        }
+      ]
+    }
+  }
+
+  componentDidMount() {
+    this.getDictionaries();
+  }
+
+  getDictionaries() {
+    TemplateMenuService.getDictionary().then(arrayOfdictionaries => {
+      this.setState({ dictionaries: arrayOfdictionaries, currentSelectedDictionary: null })
+      // global variable setting used functional components in this file
+      dictList = arrayOfdictionaries;
+    }).catch(() => {
+      console.error('Failed to retrieve dictionaries');
+      this.setState({ dictionaries: [], currentSelectedDictionary: null })
+    });
+  }
+
+  getDictionaryElements(dictionaryName) {
+    TemplateMenuService.getDictionaryElements(dictionaryName).then(dictionaryElements => {
+      this.setState({ dictionaryElements: dictionaryElements.dictionaryElements });
+      this.setState({ currentSelectDictionary: dictionaryName });
+    }).catch(() => console.error('Failed to retrieve dictionary elements'))
+  }
+
+  clickHandler(rowData) {
+    this.getDictionaries();
+  }
+
+  handleClose() {
+    this.setState({ show: false });
+    this.props.history.push('/');
+  }
+
+  addReplaceDictionaryRequest(dictionaryEntry) {
+    TemplateMenuService.insDictionary(dictionaryEntry)
+      .then(resp => {
+        this.getDictionaries();
+      })
+      .catch(() => console.error('Failed to insert new dictionary elements'));
+  }
+
+  updateDictionaryElementsRequest(dictElements) {
+    let reqData = { "name": this.state.currentSelectedDictionary, 'dictionaryElements': dictElements };
+    TemplateMenuService.insDictionaryElements(reqData)
+      .then(resp => {
+        this.getDictionaryElements(this.state.currentSelectedDictionary)
+      })
+      .catch(() => console.error('Failed to update dictionary elements'));
+  }
+
+  deleteDictionaryRequest(dictionaryName) {
+    TemplateMenuService.deleteDictionary(dictionaryName)
+      .then(resp => {
+        this.getDictionaries();
+      })
+      .catch(() => console.error('Failed to delete dictionary'));
+  }
+
+  deleteDictionaryElementRequest(dictionaryName, elemenetShortName) {
+    TemplateMenuService.deleteDictionaryElements({ 'name': dictionaryName, 'shortName': elemenetShortName })
+      .then(resp => {
+        this.getDictionaryElements(dictionaryName);
+      })
+      .catch(() => console.error('Failed to delete dictionary elements'));
+  }
+
+  fileSelectedHandler = (event) => {
+
+    if (event.target.files[0].type === 'text/csv' || event.target.files[0].type === 'application/vnd.ms-excel') {
+      if (event.target.files && event.target.files[0]) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          let errorMessages = this.importCsvData(reader.result);
+          if (errorMessages !== '') {
+            alert(errorMessages);
+          }
+        }
+        reader.readAsText(event.target.files[0]);
+      }
+    } else {
+      alert('Please upload .csv extention files only.');
+    }
+  }
+
+  importCsvData(rawCsvData) {
+
+    const jsonKeyNames = ['shortName', 'name', 'description', 'type', 'subDictionary'];
+    const userHeaderNames = ['Element Short Name', 'Element Name', 'Element Description', 'Element Type', 'Sub-Dictionary'];
+    const validTypes = ['string', 'number', 'datetime', 'json', 'map'];
+
+    let mandatory;
+
+    if (subDictFlag) {
+      mandatory = [true, true, true, false, false];
+    } else {
+      mandatory = [true, true, true, true, false];
+    }
+
+    let result = CsvToJson(rawCsvData, ',', '||||', userHeaderNames, jsonKeyNames, mandatory);
+
+    let errorMessages = result.errorMessages;
+    let jsonObjArray = result.jsonObjArray;
+
+    let validTypesErrorMesg = '';
+
+    for (let i = 0; i < validTypes.length; ++i) {
+      if (i === 0) {
+        validTypesErrorMesg = validTypes[i];
+      } else {
+        validTypesErrorMesg += ',' + validTypes[i];
+      }
+    }
+
+    if (errorMessages !== '') {
+      return errorMessages;
+    }
+
+    // Perform further checks on data that is now in JSON form
+    let subDictionaries = [];
+
+    // NOTE: dictList is a global variable  maintained faithfully
+    //       by the getDictionaries() method outside this import
+    //       functionality.
+    let item;
+    for (item in dictList) {
+      if (dictList[item].secondLevelDictionary === 1) {
+        subDictionaries.push(dictList[item].name);
+      }
+    }
+    ;
+
+    // Check for valid Sub-Dictionary and Element Type values
+    subDictionaries = subDictionaries.toString();
+    let row = 2;
+    let dictElem;
+    for (dictElem of jsonObjArray) {
+      let itemKey;
+      for (itemKey in dictElem) {
+        let value = dictElem[itemKey].trim();
+        let keyIndex = jsonKeyNames.indexOf(itemKey);
+        if (itemKey === 'shortName' && /[^a-zA-Z0-9-_.]/.test(value)) {
+          errorMessages += '\n' + userHeaderNames[keyIndex] +
+            ' at row #' + row +
+            ' can only contain alphanumeric characters and periods, hyphens or underscores';
+        }
+        if (itemKey === 'type' && validTypes.indexOf(value) < 0) {
+          errorMessages += '\nInvalid value of "' + value + '" for "' + userHeaderNames[keyIndex] + '" at row #' + row;
+          errorMessages += '\nValid types are: ' + validTypesErrorMesg;
+        }
+        if (value !== "" && itemKey === 'subDictionary' && subDictionaries.indexOf(value) < 0) {
+          errorMessages += '\nInvalid Sub-Dictionary value of "' + value + '" at row #' + row;
+        }
+      }
+      ++row;
+    }
+    if (errorMessages === '') {
+      // We made it through all the checks. Send it to back end
+      this.updateDictionaryElementsRequest(jsonObjArray);
+    }
+
+    return errorMessages;
+  }
+
+  addDictionaryRow(newData) {
+    let validData = true;
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        if (/[^a-zA-Z0-9-_.]/.test(newData.name)) {
+          validData = false;
+          alert('Please enter alphanumeric input. Only allowed special characters are:(period, hyphen, underscore)');
+          reject();
+        }
+        for (let i = 0; i < this.state.dictionaries.length; i++) {
+          if (this.state.dictionaries[i].name === newData.name) {
+            validData = false;
+            alert(newData.name + ' dictionary name already exists')
+            reject();
+          }
+        }
+        if (validData) {
+          this.addReplaceDictionaryRequest(newData);
+        }
+        resolve();
+      }, 1000);
+    });
+  }
+
+
+  updateDictionaryRow(newData, oldData) {
+    let validData = true;
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        if (/[^a-zA-Z0-9-_.]/.test(newData.name)) {
+          validData = false;
+          alert('Please enter alphanumberic input. Only allowed special characters are:(period, hyphen, underscore)');
+          reject();
+        }
+        if (validData) {
+          this.addReplaceDictionaryRequest(newData);
+        }
+        resolve();
+      }, 1000);
+    });
+  }
+
+  deleteDictionaryRow(oldData) {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        this.deleteDictionaryRequest(oldData.name);
+        resolve();
+      }, 1000);
+    });
+  }
+
+  addDictionaryElementRow(newData) {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        let dictionaryElements = this.state.dictionaryElements;
+        let errorMessages = '';
+        for (let i = 0; i < this.state.dictionaryElements.length; i++) {
+          if (this.state.dictionaryElements[i].shortName === newData.shortName) {
+            alert('Short Name "' + newData.shortName + '" already exists');
+            reject("");
+          }
+        }
+        // MaterialTable returns no property at all if the user has not touched a
+        // new column, so we want to add the property with an emptry string
+        // for several cases if that is the case to simplify other checks.
+        if (newData.description === undefined) {
+          newData.description = "";
+        }
+        if (newData.subDictionary === undefined) {
+          newData.subDictionary = null;
+        }
+        if (newData.type === undefined) {
+          newData.type = "";
+        }
+        if (!newData.shortName && /[^a-zA-Z0-9-_.]/.test(newData.shortName)) {
+          errorMessages += '\nShort Name is limited to alphanumeric characters and also period, hyphen, and underscore';
+        }
+        if (!newData.shortName) {
+          errorMessages += '\nShort Name must be specified';
+        }
+        if (!newData.name) {
+          errorMessages += '\nElement Name must be specified';
+        }
+        if (!newData.type && !subDictFlag) {
+          errorMessages += '\nElement Type must be specified';
+        }
+        if (errorMessages === '') {
+          dictionaryElements.push(newData);
+          this.updateDictionaryElementsRequest([newData]);
+          resolve();
+        } else {
+          alert(errorMessages);
+          reject("");
+        }
+      }, 1000);
+    });
+  }
+
+  updateDictionaryElementRow(newData, oldData) {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        let dictionaryElements = this.state.dictionaryElements;
+        let validData = true;
+        if (!newData.type) {
+          validData = false;
+          alert('Element Type cannot be null');
+          reject();
+        }
+        if (validData) {
+          const index = dictionaryElements.indexOf(oldData);
+          dictionaryElements[index] = newData;
+          this.updateDictionaryElementsRequest([newData]);
+        }
+        resolve();
+      }, 1000);
+    });
+  }
+
+
+  deleteDictionaryElementRow(oldData) {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        this.deleteDictionaryElementRequest(this.state.currentSelectedDictionary, oldData.shortName);
+        resolve();
+      }, 1000);
+    });
+  }
+
+  handleDictionaryRowClick(event, rowData) {
+    subDictFlag = rowData.secondLevelDictionary === 1 ? true : false;
+    this.setState({
+      currentSelectedDictionary: rowData.name,
+      exportFilename: rowData.name
+    })
+    this.getDictionaryElements(rowData.name);
+  }
+
+  render() {
+    return (
+      <ModalStyled size="xl" show={ this.state.show } onHide={ this.handleClose } backdrop="static" keyboard={ false }>
+        <Modal.Header closeButton>
+          <Modal.Title>Manage Dictionaries</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          { this.state.currentSelectedDictionary === null ?
+            <MaterialTable
+              title={ "Dictionary List" }
+              data={ this.state.dictionaries }
+              columns={ this.state.dictColumns }
+              icons={ this.state.tableIcons }
+              onRowClick={ this.handleDictionaryRowClick }
+              options={ {
+                headerStyle: rowHeaderStyle,
+              } }
+              editable={ !this.readOnly ?
+                {
+                  onRowAdd: this.addDictionaryRow,
+                  onRowUpdate: this.updateDictionaryRow,
+                  onRowDelete: this.deleteDictionaryRow
+                } : undefined }
+            /> : null
+          }
+          { this.state.currentSelectedDictionary !== null ?
+            <MaterialTable
+              title={ 'Dictionary Elements List for ' + (subDictFlag ? 'Sub-Dictionary "' : '"') + this.state.currentSelectedDictionary + '"' }
+              data={ this.state.dictionaryElements }
+              columns={ this.state.dictElementColumns }
+              icons={ this.state.tableIcons }
+              options={ {
+                exportAllData: true,
+                exportButton: true,
+                exportFileName: this.state.exportFilename,
+                headerStyle: { backgroundColor: 'white', fontSize: '15pt', text: 'bold', border: '1px solid black' }
+              } }
+              components={ {
+                Toolbar: props => (
+                  <Row>
+                    <Col sm="11">
+                      <MTableToolbarStyled { ...props } />
+                    </Col>
+                    <ColPullLeftStyled sm="1">
+                      <Tooltip title="Import" placement="bottom">
+                        <IconButton aria-label="import" disabled={ this.readOnly } onClick={ () => this.fileUpload.click() }>
+                          <VerticalAlignTopIcon/>
+                        </IconButton>
+                      </Tooltip>
+                      <input type="file" ref={ (fileUpload) => {
+                        this.fileUpload = fileUpload;
+                      } }
+                             style={ { visibility: 'hidden', width: '1px' } } onChange={ this.fileSelectedHandler }/>
+                    </ColPullLeftStyled>
+                  </Row>
+                )
+              } }
+              editable={ !this.readOnly ?
+                {
+                  onRowAdd: this.addDictionaryElementRow,
+                  onRowUpdate: this.updateDictionaryElementRow,
+                  onRowDelete: this.deleteDictionaryElementRow
+                } : undefined
+              }
+            /> : null
+          }
+          { this.state.currentSelectedDictionary !== null ? <button onClick={ this.clickHandler } style={ { marginTop: '25px' } }>Go Back to Dictionaries List</button> : "" }
+        </Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" type="null" onClick={ this.handleClose }>Close</Button>
+        </Modal.Footer>
+      </ModalStyled>
+    );
+  }
 }
index a4c1335..2552d7a 100644 (file)
@@ -28,435 +28,438 @@ import ManageDictionaries from './ManageDictionaries';
 import TemplateMenuService from '../../../api/TemplateService'
 
 const TestDictionaryElements = {
-    name: "test",
-    secondLevelDictionary: 0,
-    subDictionaryType: "", 
-    dictionaryElements: [
-      {
-        shortName: "alertType",
-        name: "Alert Type",
-        description: "Type of Alert",
-        type: "string",
-        subDictionary: "", 
-        createdDate: "2020-06-12T13:58:51.443931Z",
-        updatedDate: "2020-06-13T16:27:57.084870Z",
-        updatedBy: "admin",
-        createdBy: "admin"
-      }
-    ]
+  name: "test",
+  secondLevelDictionary: 0,
+  subDictionaryType: "",
+  dictionaryElements: [
+    {
+      shortName: "alertType",
+      name: "Alert Type",
+      description: "Type of Alert",
+      type: "string",
+      subDictionary: "",
+      createdDate: "2020-06-12T13:58:51.443931Z",
+      updatedDate: "2020-06-13T16:27:57.084870Z",
+      updatedBy: "admin",
+      createdBy: "admin"
+    }
+  ]
 };
 
 const TestDictionaries =
-[
-  {
-    name: "test",
-    secondLevelDictionary: 0,
-    subDictionaryType: "string",
-    dictionaryElements: [ TestDictionaryElements ],
-    createdDate: "2020-06-14T21:00:33.231166Z",
-    updatedDate: "2020-06-14T21:00:33.231166Z",
-    updatedBy: "admin",
-    createdBy: "admin"
-  },
-  {
-    name: "testSub1",
-    secondLevelDictionary: 1,
-    subDictionaryType: "string",
-    dictionaryElements: [
-      {
-        shortName: "subElem",
-        name: "Sub Element",
-        description: "Sub Element Description",
-        type: "string",
-        createdDate: "2020-06-14T21:04:44.402287Z",
-        updatedDate: "2020-06-14T21:04:44.402287Z",
-        updatedBy: "admin",
-        createdBy: "admin"
-      }
-    ],
-    createdDate: "2020-06-14T21:01:16.390250Z",
-    updatedDate: "2020-06-14T21:01:16.390250Z",
-    updatedBy: "admin",
-    createdBy: "admin"
-  }
-];
+  [
+    {
+      name: "test",
+      secondLevelDictionary: 0,
+      subDictionaryType: "string",
+      dictionaryElements: [TestDictionaryElements],
+      createdDate: "2020-06-14T21:00:33.231166Z",
+      updatedDate: "2020-06-14T21:00:33.231166Z",
+      updatedBy: "admin",
+      createdBy: "admin"
+    },
+    {
+      name: "testSub1",
+      secondLevelDictionary: 1,
+      subDictionaryType: "string",
+      dictionaryElements: [
+        {
+          shortName: "subElem",
+          name: "Sub Element",
+          description: "Sub Element Description",
+          type: "string",
+          createdDate: "2020-06-14T21:04:44.402287Z",
+          updatedDate: "2020-06-14T21:04:44.402287Z",
+          updatedBy: "admin",
+          createdBy: "admin"
+        }
+      ],
+      createdDate: "2020-06-14T21:01:16.390250Z",
+      updatedDate: "2020-06-14T21:01:16.390250Z",
+      updatedBy: "admin",
+      createdBy: "admin"
+    }
+  ];
 
 
 const historyMock = { push: jest.fn() };
 
 let errorMessage = '';
 
-window.alert = jest.fn().mockImplementation((mesg) => { errorMessage = mesg ; return });
+window.alert = jest.fn().mockImplementation((mesg) => {
+  errorMessage = mesg;
+  return
+});
 
 TemplateMenuService.getDictionary = jest.fn().mockImplementation(() => {
-       return Promise.resolve(TestDictionaries);
+  return Promise.resolve(TestDictionaries);
 });
 
 TemplateMenuService.insDictionary = jest.fn().mockImplementation(() => {
-       return Promise.resolve({ ok: true, status: 200 });
+  return Promise.resolve({ ok: true, status: 200 });
 });
 
 TemplateMenuService.deleteDictionary = jest.fn().mockImplementation(() => {
-       return Promise.resolve("200");
+  return Promise.resolve("200");
 });
 
 TemplateMenuService.getDictionaryElements = jest.fn().mockImplementation(() => {
-       return Promise.resolve(TestDictionaryElements);
+  return Promise.resolve(TestDictionaryElements);
 });
 
 TemplateMenuService.deleteDictionaryElements = jest.fn().mockImplementation(() => {
-       return Promise.resolve("200");
+  return Promise.resolve("200");
 });
 
 TemplateMenuService.insDictionaryElements = jest.fn().mockImplementation(() => {
-       return Promise.resolve("200");
+  return Promise.resolve("200");
 });
 
 
 describe('Verify ManageDictionaries', () => {
 
-       beforeEach(() => {
-               fetch.resetMocks();
-       });
+  beforeEach(() => {
+    fetch.resetMocks();
+  });
+
+  it('Test API Successful', () => {
+    fetch.mockImplementationOnce(() => {
+      return Promise.resolve({
+        ok: true,
+        status: 200,
+        json: () => {
+          return Promise.resolve({
+            "name": "vtest",
+            "secondLevelDictionary": 1,
+            "subDictionaryType": "string",
+            "updatedBy": "test",
+            "updatedDate": "05-07-2019 19:09:42"
+          });
+        }
+      });
+    });
+    const component = shallow(<ManageDictionaries/>);
+    expect(component).toMatchSnapshot();
+  });
+
+  it('Test API Exception', () => {
+    fetch.mockImplementationOnce(() => {
+      return Promise.resolve({
+        ok: false,
+        status: 500,
+        json: () => {
+          return Promise.resolve({
+            "name": "vtest",
+            "secondLevelDictionary": 1,
+            "subDictionaryType": "string",
+            "updatedBy": "test",
+            "updatedDate": "05-07-2019 19:09:42"
+          });
+        }
+      });
+    });
+    const component = shallow(<ManageDictionaries/>);
+  });
+
+  it('Test Table icons', () => {
+
+    const component = mount(<ManageDictionaries/>);
+    expect(component.find('[className="MuiSelect-icon MuiTablePagination-selectIcon"]')).toBeTruthy();
+  });
+
+  test('Test add/replace and delete dictionary requests', async () => {
+
+    const component = shallow(<ManageDictionaries history={ historyMock }/>)
+    const instance = component.instance();
+
+    const flushPromises = () => new Promise(setImmediate);
+
+    instance.addReplaceDictionaryRequest({ name: "newdict", secondLevelDictionary: 0, subDictionaryType: "string" });
+    instance.deleteDictionaryRequest("test");
+
+    await flushPromises();
+
+    expect(component.state('currentSelectedDictionary')).toEqual(null);
+    expect(component.state('dictionaries')).toEqual(TestDictionaries);
+  });
 
-       it('Test API Successful', () => {
-               fetch.mockImplementationOnce(() => {
-                       return Promise.resolve({
-                               ok: true,
-                               status: 200,
-                               json: () => {
-                                       return Promise.resolve({
-                                               "name": "vtest",
-                                               "secondLevelDictionary": 1,
-                                               "subDictionaryType": "string",
-                                               "updatedBy": "test",
-                                               "updatedDate": "05-07-2019 19:09:42"
-                                       });
-                               }
-                       });
-               });
-               const component = shallow(<ManageDictionaries />);
-               expect(component).toMatchSnapshot();
-       });
+  test('Test update dictionary row', async () => {
 
-       it('Test API Exception', () => {
-               fetch.mockImplementationOnce(() => {
-                       return Promise.resolve({
-                               ok: false,
-                               status: 500,
-                               json: () => {
-                                       return Promise.resolve({
-                                               "name": "vtest",
-                                               "secondLevelDictionary": 1,
-                                               "subDictionaryType": "string",
-                                               "updatedBy": "test",
-                                               "updatedDate": "05-07-2019 19:09:42"
-                                       });
-                               }
-                       });
-               });
-               const component = shallow(<ManageDictionaries />);
-       });
+    const component = shallow(<ManageDictionaries history={ historyMock }/>)
+    const instance = component.instance();
+    const rowData = { name: "newdict", secondLevelDictionary: 0, subDictionaryType: "string" };
 
-       it('Test Table icons', () => {
+    await expect(instance.updateDictionaryRow(rowData, rowData)).resolves.toEqual(undefined);
 
-               const component = mount(<ManageDictionaries />);
-               expect(component.find('[className="MuiSelect-icon MuiTablePagination-selectIcon"]')).toBeTruthy();
-       });
+  }, 2000);
 
-       test('Test add/replace and delete dictionary requests', async () => {
+  test('Test add dictionary row', async () => {
 
-               const component = shallow(<ManageDictionaries history={historyMock}/>)
-               const instance = component.instance();
+    const addReplaceRequest = jest.spyOn(ManageDictionaries.prototype, 'addReplaceDictionaryRequest');
+    const component = shallow(<ManageDictionaries/>)
+    const instance = component.instance();
+    const rowData = { name: "newdict", secondLevelDictionary: 0, subDictionaryType: "string" };
 
-               const flushPromises = () => new Promise(setImmediate);
+    await instance.addDictionaryRow(rowData);
+    expect(addReplaceRequest).toHaveBeenCalledWith(rowData);
 
-               instance.addReplaceDictionaryRequest({name: "newdict", secondLevelDictionary: 0, subDictionaryType: "string"});
-               instance.deleteDictionaryRequest("test");
+  }, 2000);
 
-               await flushPromises();
+  test('Test add dictionary row with errors name already exists', async () => {
 
-               expect(component.state('currentSelectedDictionary')).toEqual(null);
-               expect(component.state('dictionaries')).toEqual(TestDictionaries);
-       });
+    const component = shallow(<ManageDictionaries/>)
+    const instance = component.instance();
+    let rowData = { name: "test", secondLevelDictionary: 0, subDictionaryType: "" };
 
-       test('Test update dictionary row', async () => {
+    await expect(instance.addDictionaryRow(rowData)).rejects.toEqual(undefined);
 
-               const component = shallow(<ManageDictionaries history={historyMock}/>)
-               const instance = component.instance();
-               const rowData = { name: "newdict", secondLevelDictionary: 0, subDictionaryType: "string" };
+  }, 2000);
 
-               await expect(instance.updateDictionaryRow(rowData, rowData)).resolves.toEqual(undefined);
+  test('Test add dictionary row with errors illegal chars in name', async () => {
 
-       }, 2000);
+    const component = shallow(<ManageDictionaries/>)
+    const instance = component.instance();
+    let rowData = { name: "test@@", secondLevelDictionary: 0, subDictionaryType: "" };
 
-       test('Test add dictionary row', async () => {
+    await expect(instance.addDictionaryRow(rowData)).rejects.toEqual(undefined);
 
-               const addReplaceRequest = jest.spyOn(ManageDictionaries.prototype,'addReplaceDictionaryRequest');
-               const component = shallow(<ManageDictionaries />)
-               const instance = component.instance();
-               const rowData = { name: "newdict", secondLevelDictionary: 0, subDictionaryType: "string" };
+  }, 2000);
 
-               await instance.addDictionaryRow(rowData);
-                expect(addReplaceRequest).toHaveBeenCalledWith(rowData);
+  test('Test update dictionary row with errors illegal chars in name', async () => {
 
-       }, 2000);
+    const component = shallow(<ManageDictionaries/>)
+    const instance = component.instance();
+    let rowData = { name: "test@@", secondLevelDictionary: 0, subDictionaryType: "" };
 
-       test('Test add dictionary row with errors name already exists', async () => {
+    await expect(instance.updateDictionaryRow(rowData)).rejects.toEqual(undefined);
+  });
 
-               const component = shallow(<ManageDictionaries />)
-               const instance = component.instance();
-               let  rowData = { name: "test", secondLevelDictionary: 0, subDictionaryType: "" };
 
-               await expect(instance.addDictionaryRow(rowData)).rejects.toEqual(undefined);
+  test('Test add dictionary row with errors (illegal chars)', async () => {
 
-       }, 2000);
+    const addReplaceRequest = jest.spyOn(ManageDictionaries.prototype, 'addReplaceDictionaryRequest');
+    const component = shallow(<ManageDictionaries/>)
+    const instance = component.instance();
+    let rowData = { name: "test@@", secondLevelDictionary: 0, subDictionaryType: "" };
 
-       test('Test add dictionary row with errors illegal chars in name', async () => {
+    await expect(instance.addDictionaryRow(rowData)).rejects.toEqual(undefined);
 
-               const component = shallow(<ManageDictionaries />)
-               const instance = component.instance();
-               let  rowData = { name: "test@@", secondLevelDictionary: 0, subDictionaryType: "" };
+  }, 2000);
 
-               await expect(instance.addDictionaryRow(rowData)).rejects.toEqual(undefined);
 
-       }, 2000);
+  test('Test delete dictionary row', async () => {
 
-       test('Test update dictionary row with errors illegal chars in name', async () => {
+    const deleteRequest = jest.spyOn(ManageDictionaries.prototype, 'deleteDictionaryRequest');
+    const component = shallow(<ManageDictionaries/>)
+    const instance = component.instance();
+    const rowData = { name: "newdict", secondLevelDictionary: 0, subDictionaryType: "string" };
 
-               const component = shallow(<ManageDictionaries />)
-               const instance = component.instance();
-               let  rowData = { name: "test@@", secondLevelDictionary: 0, subDictionaryType: "" };
+    await instance.deleteDictionaryRow(rowData);
+    expect(deleteRequest).toHaveBeenCalledWith("newdict");
 
-               await expect(instance.updateDictionaryRow(rowData)).rejects.toEqual(undefined);
-       });
+  }, 2000);
 
+  test('Test handle select dictionary row click', async () => {
 
-       test('Test add dictionary row with errors (illegal chars)', async () => {
+    const component = shallow(<ManageDictionaries/>)
+    const instance = component.instance();
+    const rowData = { name: "newdict", secondLevelDictionary: 0, subDictionaryType: "string" };
 
-               const addReplaceRequest = jest.spyOn(ManageDictionaries.prototype,'addReplaceDictionaryRequest');
-               const component = shallow(<ManageDictionaries />)
-               const instance = component.instance();
-               let  rowData = { name: "test@@", secondLevelDictionary: 0, subDictionaryType: "" };
+    instance.handleDictionaryRowClick("event", rowData);
+    expect(component.state('currentSelectedDictionary')).toEqual("newdict");
+  }, 2000);
 
-               await expect(instance.addDictionaryRow(rowData)).rejects.toEqual(undefined);
+  test('Test dictionary element row add, update, delete', async () => {
 
-       }, 2000);
+    const rowData = {
+      createdBy: "admin",
+      createdDate: "2020-06-15T13:59:20.467381Z",
+      description: "Description",
+      name: "Some Elem",
+      shortName: "someElem",
+      type: "string",
+      updatedBy: "admin",
+      updatedDate: "2020-06-15T13:59:20.467381Z"
+    };
 
+    const component = shallow(<ManageDictionaries/>)
+    const instance = component.instance();
 
-       test('Test delete dictionary row', async () => {
+    const badRowData = {
+      description: "Description",
+      name: "Some Elem",
+      shortName: "someElem",
+      type: "string"
+    };
 
-               const deleteRequest = jest.spyOn(ManageDictionaries.prototype,'deleteDictionaryRequest');
-               const component = shallow(<ManageDictionaries />)
-               const instance = component.instance();
-               const rowData = { name: "newdict", secondLevelDictionary: 0, subDictionaryType: "string" };
+    await instance.clickHandler();
+    await instance.getDictionaryElements("test");
 
-               await instance.deleteDictionaryRow(rowData);
-                expect(deleteRequest).toHaveBeenCalledWith("newdict");
+    await expect(instance.addDictionaryElementRow(rowData)).resolves.toEqual(undefined);
+    await expect(instance.updateDictionaryElementRow(rowData, rowData)).resolves.toEqual(undefined);
+    await expect(instance.deleteDictionaryElementRow(rowData)).resolves.toEqual(undefined);
+  });
 
-       }, 2000);
+  test('Test dictionary element row add with errors', async () => {
 
-       test('Test handle select dictionary row click', async () => {
+    const badRowData = {
+      description: "",
+      name: "",
+      shortName: "some#Elem",
+      type: ""
+    };
 
-               const component = shallow(<ManageDictionaries />)
-               const instance = component.instance();
-               const rowData = { name: "newdict", secondLevelDictionary: 0, subDictionaryType: "string" };
+    const component = shallow(<ManageDictionaries/>)
+    const instance = component.instance();
 
-               instance.handleDictionaryRowClick("event", rowData);
-               expect(component.state('currentSelectedDictionary')).toEqual("newdict");
-       }, 2000);
+    await expect(instance.addDictionaryElementRow(badRowData)).rejects.toEqual("");
+  });
 
-       test('Test dictionary element row add, update, delete', async () => {
+  test('Test dictionary element update with error illegal name', async () => {
 
-               const rowData = {
-                       createdBy: "admin",
-                       createdDate: "2020-06-15T13:59:20.467381Z",
-                       description: "Description",
-                       name: "Some Elem",
-                       shortName: "someElem",
-                       type: "string",
-                       updatedBy: "admin",
-                       updatedDate: "2020-06-15T13:59:20.467381Z"
-               };
+    const badRowData = {
+      description: "",
+      name: "test@@",
+      shortName: "some#Elem",
+      type: ""
+    };
 
-               const component = shallow(<ManageDictionaries/>)
-               const instance = component.instance();
+    const component = shallow(<ManageDictionaries/>)
+    const instance = component.instance();
 
-               const badRowData = {
-                       description: "Description",
-                       name: "Some Elem",
-                       shortName: "someElem",
-                       type: "string"
-               };
+    await expect(instance.updateDictionaryElementRow(badRowData)).rejects.toEqual(undefined);
+  });
 
-                await instance.clickHandler();
-                await instance.getDictionaryElements("test");
+  test('Test dictionary element addition with duplicate name error', async () => {
 
-               await expect(instance.addDictionaryElementRow(rowData)).resolves.toEqual(undefined);
-               await expect(instance.updateDictionaryElementRow(rowData, rowData)).resolves.toEqual(undefined);
-               await expect(instance.deleteDictionaryElementRow(rowData)).resolves.toEqual(undefined);
-       });
+    const badRowData = {
+      description: "description",
+      name: "Alert Type",
+      shortName: "alertType",
+      type: "string"
+    };
 
-       test('Test dictionary element row add with errors', async () => {
+    const component = shallow(<ManageDictionaries/>)
+    const instance = component.instance();
 
-               const badRowData = {
-                       description: "",
-                       name: "",
-                       shortName: "some#Elem",
-                       type: ""
-               };
+    component.setState({ currentSelectedDictionary: 'test' });
 
-               const component = shallow(<ManageDictionaries/>)
-               const instance = component.instance();
+    await instance.getDictionaryElements();
+    await expect(instance.addDictionaryElementRow(badRowData)).rejects.toEqual("");
+  });
 
-               await expect(instance.addDictionaryElementRow(badRowData)).rejects.toEqual("");
-       });
+  test('Test dictionary element addition with empty name error', async () => {
 
-       test('Test dictionary element update with error illegal name', async () => {
+    const badRowData = {
+      description: "description",
+      name: "Alert Type",
+      shortName: "",
+      type: "string"
+    };
 
-               const badRowData = {
-                       description: "",
-                       name: "test@@",
-                       shortName: "some#Elem",
-                       type: ""
-               };
+    const component = shallow(<ManageDictionaries/>)
+    const instance = component.instance();
 
-               const component = shallow(<ManageDictionaries/>)
-               const instance = component.instance();
+    component.setState({ currentSelectedDictionary: 'test' });
 
-               await expect(instance.updateDictionaryElementRow(badRowData)).rejects.toEqual(undefined);
-       });
+    await instance.getDictionaryElements();
+    await expect(instance.addDictionaryElementRow(badRowData)).rejects.toEqual("");
+  });
 
-       test('Test dictionary element addition with duplicate name error', async () => {
 
-               const badRowData = {
-                       description: "description",
-                       name: "Alert Type",
-                       shortName: "alertType",
-                       type: "string"
-               };
+  it('Test Import CSV Sunny Day', async () => {
 
-               const component = shallow(<ManageDictionaries/>)
-               const instance = component.instance();
+    TemplateMenuService.insDictionaryElements = jest.fn().mockImplementation(() => {
+      return Promise.resolve({ ok: true, status: 200 });
+    });
 
-               component.setState({ currentSelectedDictionary: 'test' });
+    let rawCsvData = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
+    rawCsvData += '"alertType","Alert Type","Alert Type Description","string","","admin","2020-06-11T13:56:14.927437Z"';
 
-               await instance.getDictionaryElements();
-               await expect(instance.addDictionaryElementRow(badRowData)).rejects.toEqual("");
-       });
+    let expectedResult = [
+      {
+        description: "Alert Type Description",
+        name: "Alert Type",
+        shortName: "alertType",
+        subDictionary: "",
+        type: "string"
+      }
+    ];
+
+    const updateDictionaryElementsRequest = jest.spyOn(ManageDictionaries.prototype, 'updateDictionaryElementsRequest');
+
+    const component = shallow(<ManageDictionaries/>)
+    const instance = component.instance();
+
+    await expect(instance.importCsvData(rawCsvData)).toEqual('');
+    expect(updateDictionaryElementsRequest).toHaveBeenCalledWith(expectedResult);
+  });
+
+  it('Test Import CSV Mandatory Field Check Errors', () => {
+
+    let rawCsvData = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
+    rawCsvData += '"","","","","","",""';
 
-       test('Test dictionary element addition with empty name error', async () => {
+    // The empty values for all the fields in row 1 of the rawCsvData will trigger a bunch of errors.
+    // Getting Enzyme to properly match them with embedded newlines turned out to be impossible
+    // and maybe not desirable anyway; so our test for "success" here is simply that the
+    // routine returns a non-empty error string.
 
-               const badRowData = {
-                       description: "description",
-                       name: "Alert Type",
-                       shortName: "",
-                       type: "string"
-               };
-
-               const component = shallow(<ManageDictionaries/>)
-               const instance = component.instance();
-
-               component.setState({ currentSelectedDictionary: 'test' });
-
-               await instance.getDictionaryElements();
-               await expect(instance.addDictionaryElementRow(badRowData)).rejects.toEqual("");
-       });
-
-
-       it('Test Import CSV Sunny Day', async () => {
-
-                TemplateMenuService.insDictionaryElements = jest.fn().mockImplementation(() => {
-                        return Promise.resolve({ ok: true, status: 200 });
-                });
-
-                let rawCsvData = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
-                rawCsvData += '"alertType","Alert Type","Alert Type Description","string","","admin","2020-06-11T13:56:14.927437Z"';
-
-                let expectedResult = [
-                                {
-                                        description: "Alert Type Description",
-                                        name: "Alert Type",
-                                        shortName: "alertType",
-                                        subDictionary: "",
-                                        type: "string"
-                                }
-               ];
-
-               const updateDictionaryElementsRequest = jest.spyOn(ManageDictionaries.prototype,'updateDictionaryElementsRequest');
-
-               const component = shallow(<ManageDictionaries />)
-               const instance = component.instance();
-
-               await expect(instance.importCsvData(rawCsvData)).toEqual('');
-                expect(updateDictionaryElementsRequest).toHaveBeenCalledWith(expectedResult);
-       });
-
-       it('Test Import CSV Mandatory Field Check Errors', () => {
-
-                let rawCsvData = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
-                rawCsvData += '"","","","","","",""';
-
-               // The empty values for all the fields in row 1 of the rawCsvData will trigger a bunch of errors.
-               // Getting Enzyme to properly match them with embedded newlines turned out to be impossible
-               // and maybe not desirable anyway; so our test for "success" here is simply that the
-               // routine returns a non-empty error string.
-
-               const component = shallow(<ManageDictionaries />)
-               const instance = component.instance();
-               expect(instance.importCsvData(rawCsvData)).not.toEqual('');
-       });
-
-       it('Test Import CSV Errors in Row Data', async () => {
-
-                TemplateMenuService.insDictionaryElements = jest.fn().mockImplementation(() => {
-                        return Promise.resolve({ ok: true, status: 200 });
-                });
-
-                let rawCsvData = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
-                rawCsvData += '"alert@Type","Alert Type","Alert Type Description","strin","subby","admin","2020-06-11T13:56:14.927437Z"';
-
-                let expectedResult = [
-                                {
-                                        description: "Alert Type Description",
-                                        name: "Alert Type",
-                                        shortName: "alertType",
-                                        subDictionary: "",
-                                        type: "string"
-                                }
-               ];
-
-               const updateDictionaryElementsRequest = jest.spyOn(ManageDictionaries.prototype,'updateDictionaryElementsRequest');
-
-               const component = shallow(<ManageDictionaries />)
-               const instance = component.instance();
-
-               await expect(instance.importCsvData(rawCsvData)).not.toEqual('');
-       });
-
-
-       it('Test handleClose', () => {
-               fetch.mockImplementationOnce(() => {
-                       return Promise.resolve({
-                               ok: true,
-                               status: 200,
-                               json: () => {
-                                       return Promise.resolve({
-                                               "name": "vtest",
-                                               "secondLevelDictionary": 1,
-                                               "subDictionaryType": "string",
-                                               "updatedBy": "test",
-                                               "updatedDate": "05-07-2019 19:09:42"
-                                       });
-                               }
-                       });
-               });
-               const handleClose = jest.spyOn(ManageDictionaries.prototype,'handleClose');
-               const component = shallow(<ManageDictionaries history={historyMock} />)
-               component.find('[variant="secondary"]').prop('onClick')();
-               expect(handleClose).toHaveBeenCalledTimes(1);
-               expect(component.state('show')).toEqual(false);
-               expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
-               handleClose.mockClear();
-       });
+    const component = shallow(<ManageDictionaries/>)
+    const instance = component.instance();
+    expect(instance.importCsvData(rawCsvData)).not.toEqual('');
+  });
+
+  it('Test Import CSV Errors in Row Data', async () => {
+
+    TemplateMenuService.insDictionaryElements = jest.fn().mockImplementation(() => {
+      return Promise.resolve({ ok: true, status: 200 });
+    });
+
+    let rawCsvData = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
+    rawCsvData += '"alert@Type","Alert Type","Alert Type Description","strin","subby","admin","2020-06-11T13:56:14.927437Z"';
+
+    let expectedResult = [
+      {
+        description: "Alert Type Description",
+        name: "Alert Type",
+        shortName: "alertType",
+        subDictionary: "",
+        type: "string"
+      }
+    ];
+
+    const updateDictionaryElementsRequest = jest.spyOn(ManageDictionaries.prototype, 'updateDictionaryElementsRequest');
+
+    const component = shallow(<ManageDictionaries/>)
+    const instance = component.instance();
+
+    await expect(instance.importCsvData(rawCsvData)).not.toEqual('');
+  });
+
+
+  it('Test handleClose', () => {
+    fetch.mockImplementationOnce(() => {
+      return Promise.resolve({
+        ok: true,
+        status: 200,
+        json: () => {
+          return Promise.resolve({
+            "name": "vtest",
+            "secondLevelDictionary": 1,
+            "subDictionaryType": "string",
+            "updatedBy": "test",
+            "updatedDate": "05-07-2019 19:09:42"
+          });
+        }
+      });
+    });
+    const handleClose = jest.spyOn(ManageDictionaries.prototype, 'handleClose');
+    const component = shallow(<ManageDictionaries history={ historyMock }/>)
+    component.find('[variant="secondary"]').prop('onClick')();
+    expect(handleClose).toHaveBeenCalledTimes(1);
+    expect(component.state('show')).toEqual(false);
+    expect(historyMock.push.mock.calls[0]).toEqual(['/']);
+    handleClose.mockClear();
+  });
 });
index f6001e2..ba7c99d 100644 (file)
@@ -25,71 +25,71 @@ import LoopActionService from '../../api/LoopActionService';
 
 
 export default class PerformActions extends React.Component {
-       state = {
-               loopName: this.props.loopCache.getLoopName(),
-               loopAction: this.props.loopAction
-       };
+  state = {
+    loopName: this.props.loopCache.getLoopName(),
+    loopAction: this.props.loopAction
+  };
 
-       constructor(props, context) {
-               super(props, context);
-               this.refreshStatus = this.refreshStatus.bind(this);
-       }
+  constructor(props, context) {
+    super(props, context);
+    this.refreshStatus = this.refreshStatus.bind(this);
+  }
 
-       componentWillReceiveProps(newProps) {
-               this.setState({
-                       loopName: newProps.loopCache.getLoopName(),
-                       loopAction: newProps.loopAction
-               });
-       }
+  componentWillReceiveProps(newProps) {
+    this.setState({
+      loopName: newProps.loopCache.getLoopName(),
+      loopAction: newProps.loopAction
+    });
+  }
 
-       componentDidMount() {
-               const action = this.state.loopAction;
-               const loopName = this.state.loopName;
+  componentDidMount() {
+    const action = this.state.loopAction;
+    const loopName = this.state.loopName;
 
-               if (action === 'delete') {
-                       if (window.confirm('You are about to remove Control Loop Model "' + loopName +
-                                       '". Select OK to continue with deletion or Cancel to keep the model.') === false) {
-                               return;
-                       }
-               }
+    if (action === 'delete') {
+      if (window.confirm('You are about to remove Control Loop Model "' + loopName +
+        '". Select OK to continue with deletion or Cancel to keep the model.') === false) {
+        return;
+      }
+    }
 
-               this.props.setBusyLoading(); // Alert top level to start block user clicks
+    this.props.setBusyLoading(); // Alert top level to start block user clicks
 
-               LoopActionService.performAction(loopName, action)
-               .then(pars => {
-                       this.props.showSucAlert("Action " + action + " successfully performed");
-                       if (action === 'delete') {
-                               this.props.updateLoopFunction(null);
-                               this.props.history.push('/');
-                       } else {
-                               // refresh status and update loop logs
-                               this.refreshStatus(loopName);
-                       }
-               })
-               .catch(error => {
-                       this.props.showFailAlert("Action " + action + " failed");
-                       // refresh status and update loop logs
-                       this.refreshStatus(loopName);
-               })
-               .finally(() => this.props.clearBusyLoading());
-       }
+    LoopActionService.performAction(loopName, action)
+      .then(pars => {
+        this.props.showSucAlert("Action " + action + " successfully performed");
+        if (action === 'delete') {
+          this.props.updateLoopFunction(null);
+          this.props.history.push('/');
+        } else {
+          // refresh status and update loop logs
+          this.refreshStatus(loopName);
+        }
+      })
+      .catch(error => {
+        this.props.showFailAlert("Action " + action + " failed");
+        // refresh status and update loop logs
+        this.refreshStatus(loopName);
+      })
+      .finally(() => this.props.clearBusyLoading());
+  }
 
-       refreshStatus(loopName) {
+  refreshStatus(loopName) {
 
-               this.props.setBusyLoading();
+    this.props.setBusyLoading();
 
-               LoopActionService.refreshStatus(loopName)
-               .then(data => {
-                       this.props.updateLoopFunction(data);
-                       this.props.history.push('/');
-               })
-               .catch(error => {
-                       this.props.history.push('/');
-               })
-               .finally(() => this.props.clearBusyLoading());
-       }
+    LoopActionService.refreshStatus(loopName)
+      .then(data => {
+        this.props.updateLoopFunction(data);
+        this.props.history.push('/');
+      })
+      .catch(error => {
+        this.props.history.push('/');
+      })
+      .finally(() => this.props.clearBusyLoading());
+  }
 
-       render() {
-               return null;
-       }
+  render() {
+    return null;
+  }
 }
index c91c2f6..74c9145 100644 (file)
@@ -28,63 +28,68 @@ import LoopActionService from '../../api/LoopActionService';
 
 describe('Verify PerformActions', () => {
 
-       const loopCache = new LoopCache({
-               "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca"
-       });
+  const loopCache = new LoopCache({
+    "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca"
+  });
 
-       it('Test the render method action failed', async () => {
-               const flushPromises = () => new Promise(setImmediate);
-               const historyMock = { push: jest.fn() };
-               const updateLoopFunction = jest.fn();
-               const showSucAlert = jest.fn();
-               const showFailAlert = jest.fn();
-               const setBusyLoading = jest.fn();
-               const clearBusyLoading = jest.fn();
-               
-               LoopActionService.refreshStatus = jest.fn().mockImplementation(() => {
-                       return Promise.resolve({
-                               ok: true,
-                               status: 200,
-                               json: () => {}
-                       });
-               });
-               const component = shallow(<PerformActions loopCache={loopCache} 
-                                       loopAction="submit" history={historyMock} updateLoopFunction={updateLoopFunction} showSucAlert={showSucAlert} showFailAlert={showFailAlert} setBusyLoading={setBusyLoading} clearBusyLoading={clearBusyLoading}/>)
-               await flushPromises();
-               component.update();
+  it('Test the render method action failed', async () => {
+    const flushPromises = () => new Promise(setImmediate);
+    const historyMock = { push: jest.fn() };
+    const updateLoopFunction = jest.fn();
+    const showSucAlert = jest.fn();
+    const showFailAlert = jest.fn();
+    const setBusyLoading = jest.fn();
+    const clearBusyLoading = jest.fn();
 
-               expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
-       });
+    LoopActionService.refreshStatus = jest.fn().mockImplementation(() => {
+      return Promise.resolve({
+        ok: true,
+        status: 200,
+        json: () => {
+        }
+      });
+    });
+    const component = shallow(<PerformActions loopCache={ loopCache }
+                                              loopAction="submit" history={ historyMock } updateLoopFunction={ updateLoopFunction } showSucAlert={ showSucAlert } showFailAlert={ showFailAlert }
+                                              setBusyLoading={ setBusyLoading } clearBusyLoading={ clearBusyLoading }/>)
+    await flushPromises();
+    component.update();
 
-       it('Test the render method action successful', async () => {
-               const flushPromises = () => new Promise(setImmediate);
-               const historyMock = { push: jest.fn() };
-               const updateLoopFunction = jest.fn();
-               const showSucAlert = jest.fn();
-               const showFailAlert = jest.fn();
-               const setBusyLoading = jest.fn();
-               const clearBusyLoading = jest.fn();
+    expect(historyMock.push.mock.calls[0]).toEqual(['/']);
+  });
 
-               LoopActionService.performAction = jest.fn().mockImplementation(() => {
-                       return Promise.resolve({
-                               ok: true,
-                               status: 200,
-                               json: () => {}
-                       });
-               });             
-               LoopActionService.refreshStatus = jest.fn().mockImplementation(() => {
-                       return Promise.resolve({
-                               ok: true,
-                               status: 200,
-                               json: () => {}
-                       });
-               });
-               const component = shallow(<PerformActions loopCache={loopCache} 
-                                               loopAction="submit" history={historyMock} updateLoopFunction={updateLoopFunction} showSucAlert={showSucAlert} showFailAlert={showFailAlert} setBusyLoading={setBusyLoading} clearBusyLoading={clearBusyLoading}/>)
-               await flushPromises();
-               component.update();
+  it('Test the render method action successful', async () => {
+    const flushPromises = () => new Promise(setImmediate);
+    const historyMock = { push: jest.fn() };
+    const updateLoopFunction = jest.fn();
+    const showSucAlert = jest.fn();
+    const showFailAlert = jest.fn();
+    const setBusyLoading = jest.fn();
+    const clearBusyLoading = jest.fn();
 
-               expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
-       });
+    LoopActionService.performAction = jest.fn().mockImplementation(() => {
+      return Promise.resolve({
+        ok: true,
+        status: 200,
+        json: () => {
+        }
+      });
+    });
+    LoopActionService.refreshStatus = jest.fn().mockImplementation(() => {
+      return Promise.resolve({
+        ok: true,
+        status: 200,
+        json: () => {
+        }
+      });
+    });
+    const component = shallow(<PerformActions loopCache={ loopCache }
+                                              loopAction="submit" history={ historyMock } updateLoopFunction={ updateLoopFunction } showSucAlert={ showSucAlert } showFailAlert={ showFailAlert }
+                                              setBusyLoading={ setBusyLoading } clearBusyLoading={ clearBusyLoading }/>)
+    await flushPromises();
+    component.update();
+
+    expect(historyMock.push.mock.calls[0]).toEqual(['/']);
+  });
 
 });
index 9c2f102..5bca4e6 100644 (file)
@@ -31,79 +31,79 @@ import DescriptionIcon from '@material-ui/icons/Description';
 
 export default class PoliciesTreeViewer extends React.Component {
 
-    separator = ".";
+  separator = ".";
 
-    nodesList = new Map();
+  nodesList = new Map();
 
-    constructor(props, context) {
-        super(props, context);
-        this.createPoliciesTree = this.createPoliciesTree.bind(this);
-        this.handleTreeItemClick = this.handleTreeItemClick.bind(this);
-        this.buildNameWithParent = this.buildNameWithParent.bind(this);
+  constructor(props, context) {
+    super(props, context);
+    this.createPoliciesTree = this.createPoliciesTree.bind(this);
+    this.handleTreeItemClick = this.handleTreeItemClick.bind(this);
+    this.buildNameWithParent = this.buildNameWithParent.bind(this);
 
-    }
+  }
 
-    state = {
-            policiesTreeData: this.createPoliciesTree(this.props.policiesData),
-    }
+  state = {
+    policiesTreeData: this.createPoliciesTree(this.props.policiesData),
+  }
 
-    componentDidUpdate(prevProps) {
-      if (prevProps.policiesData !== this.props.policiesData) {
-        this.setState({policiesTreeData: this.createPoliciesTree(this.props.policiesData)})
-      }
+  componentDidUpdate(prevProps) {
+    if (prevProps.policiesData !== this.props.policiesData) {
+      this.setState({ policiesTreeData: this.createPoliciesTree(this.props.policiesData) })
     }
+  }
 
-    createPoliciesTree(policiesArray) {
-        // put my policies array in a Json
-        let nodeId = 1;
-        let root = {id:nodeId, policyCount:0, name:"ROOT", children:[], parent: undefined};
-        this.nodesList.set(nodeId++, root);
-
-        policiesArray.forEach(policy => {
-            let currentTreeNode = root;
-            policy[this.props.valueForTreeCreation].split(this.separator).forEach((policyNamePart, index, policyNamePartsArray) => {
-                let node = currentTreeNode["children"].find(element => element.name === policyNamePart);
-                if (typeof(node) === "undefined") {
-                    node = {id:nodeId, policyCount:0, children:[], name:policyNamePart, parent:currentTreeNode};
-                    this.nodesList.set(nodeId++, node);
-                    currentTreeNode["children"].push(node);
-                }
-                if ((index+1) === policyNamePartsArray.length) {
-                    ++currentTreeNode["policyCount"];
-                }
-                currentTreeNode = node;
-            })
-        })
-        return root;
-    }
+  createPoliciesTree(policiesArray) {
+    // put my policies array in a Json
+    let nodeId = 1;
+    let root = { id: nodeId, policyCount: 0, name: "ROOT", children: [], parent: undefined };
+    this.nodesList.set(nodeId++, root);
 
-    buildNameWithParent(node) {
-        let nameToBuild = node.name;
-        if (node.parent  !== undefined) {
-            nameToBuild = this.buildNameWithParent(node.parent) + this.separator + node.name;
+    policiesArray.forEach(policy => {
+      let currentTreeNode = root;
+      policy[this.props.valueForTreeCreation].split(this.separator).forEach((policyNamePart, index, policyNamePartsArray) => {
+        let node = currentTreeNode["children"].find(element => element.name === policyNamePart);
+        if (typeof (node) === "undefined") {
+          node = { id: nodeId, policyCount: 0, children: [], name: policyNamePart, parent: currentTreeNode };
+          this.nodesList.set(nodeId++, node);
+          currentTreeNode["children"].push(node);
         }
-        return nameToBuild;
-    }
+        if ((index + 1) === policyNamePartsArray.length) {
+          ++currentTreeNode["policyCount"];
+        }
+        currentTreeNode = node;
+      })
+    })
+    return root;
+  }
 
-    handleTreeItemClick(event, value) {
-        let fullName = this.buildNameWithParent(this.nodesList.get(value[0])).substring(5);
-        this.props.policiesFilterFunction(fullName);
+  buildNameWithParent(node) {
+    let nameToBuild = node.name;
+    if (node.parent !== undefined) {
+      nameToBuild = this.buildNameWithParent(node.parent) + this.separator + node.name;
     }
+    return nameToBuild;
+  }
 
-    renderTreeItems(nodes) {
-        return (<TreeItem key={nodes.id} nodeId={nodes.id} label={nodes.name + "("+ nodes.policyCount + ")"} onNodeSelect={this.handleTreeItemClick}>
-          {
-            Array.isArray(nodes.children) ? nodes.children.map((node) => this.renderTreeItems(node)) : null
-          }
-        </TreeItem>);
-    };
+  handleTreeItemClick(event, value) {
+    let fullName = this.buildNameWithParent(this.nodesList.get(value[0])).substring(5);
+    this.props.policiesFilterFunction(fullName);
+  }
 
-    render() {
-         return (
-                <TreeView defaultExpanded={['root']} defaultCollapseIcon={<FolderOpenIcon />}
-                defaultExpandIcon={<FolderIcon />} defaultEndIcon={<DescriptionIcon />} onNodeSelect={this.handleTreeItemClick} multiSelect>
-                  {this.renderTreeItems(this.state.policiesTreeData)}
-                </TreeView>
-          );
-    }
-}
\ No newline at end of file
+  renderTreeItems(nodes) {
+    return (<TreeItem key={ nodes.id } nodeId={ nodes.id } label={ nodes.name + "(" + nodes.policyCount + ")" } onNodeSelect={ this.handleTreeItemClick }>
+      {
+        Array.isArray(nodes.children) ? nodes.children.map((node) => this.renderTreeItems(node)) : null
+      }
+    </TreeItem>);
+  };
+
+  render() {
+    return (
+      <TreeView defaultExpanded={ ['root'] } defaultCollapseIcon={ <FolderOpenIcon/> }
+                defaultExpandIcon={ <FolderIcon/> } defaultEndIcon={ <DescriptionIcon/> } onNodeSelect={ this.handleTreeItemClick } multiSelect>
+        { this.renderTreeItems(this.state.policiesTreeData) }
+      </TreeView>
+    );
+  }
+}
index 0b73443..111f2c6 100644 (file)
@@ -26,46 +26,47 @@ import { shallow, mount } from 'enzyme';
 import PolicyToscaService from '../../../api/PolicyToscaService';
 
 describe('Verify PolicyEditor', () => {
-    const fs = require('fs');
+  const fs = require('fs');
 
-    let toscaJson = fs.readFileSync('src/components/dialogs/Policy/toscaData.test.json', {encoding:'utf8', flag:'r'})
+  let toscaJson = fs.readFileSync('src/components/dialogs/Policy/toscaData.test.json', { encoding: 'utf8', flag: 'r' })
 
-    const policyProperties = {
-      "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"
-          }
-        ]
-      }
-    };
+  const policyProperties = {
+    "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"
+        }
+      ]
+    }
+  };
 
 
-    it('Test the render method',async () => {
-         PolicyToscaService.getToscaPolicyModel = jest.fn().mockImplementation(() => {
-            return Promise.resolve(toscaJson);
-         });
-
-        const component = mount(<PolicyEditor policyModelType="onap.policies.monitoring.tcagen2" policyModelTypeVersion="1.0.0"
-            policyName="org.onap.new" policyVersion="1.0.0" policyProperties={policyProperties}
-            policiesTableUpdateFunction={() => {}} />);
-        await PolicyToscaService.getToscaPolicyModel();
-        expect(component).toMatchSnapshot();
+  it('Test the render method', async () => {
+    PolicyToscaService.getToscaPolicyModel = jest.fn().mockImplementation(() => {
+      return Promise.resolve(toscaJson);
     });
-});
\ No newline at end of file
+
+    const component = mount(<PolicyEditor policyModelType="onap.policies.monitoring.tcagen2" policyModelTypeVersion="1.0.0"
+                                          policyName="org.onap.new" policyVersion="1.0.0" policyProperties={ policyProperties }
+                                          policiesTableUpdateFunction={ () => {
+                                          } }/>);
+    await PolicyToscaService.getToscaPolicyModel();
+    expect(component).toMatchSnapshot();
+  });
+});
index 9cd3d41..8093b7e 100644 (file)
@@ -27,102 +27,107 @@ import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import styled from 'styled-components';
 import Alert from 'react-bootstrap/Alert';
-import { Input, InputLabel, Button , SvgIcon} from "@material-ui/core";
+import { Input, InputLabel, Button, SvgIcon } from "@material-ui/core";
 import PublishIcon from '@material-ui/icons/Publish';
 import PolicyService from '../../../api/PolicyService';
 
 const ModalStyled = styled(Modal)`
-    background-color: transparent;
+  background-color: transparent;
 `
 
 const StyledMessagesDiv = styled.div`
-    overflow: auto;
-    max-height: 300px;
+  overflow: auto;
+  max-height: 300px;
 `
 
 
 export default class PolicyToscaFileSelector extends React.Component {
 
-    state = {
-        show: this.props.show,
-        alertMessages: [],
-    }
-    constructor(props, context) {
-        super(props, context);
-        this.handleClose = this.handleClose.bind(this);
-        this.onFileChange = this.onFileChange.bind(this);
-    }
+  state = {
+    show: this.props.show,
+    alertMessages: [],
+  }
 
-    componentDidUpdate(prevProps) {
-        if (this.props.show !== this.state.show) {
-            this.setState({show: this.props.show});
-        }
-    }
+  constructor(props, context) {
+    super(props, context);
+    this.handleClose = this.handleClose.bind(this);
+    this.onFileChange = this.onFileChange.bind(this);
+  }
 
-    handleClose() {
-        this.props.disableFunction();
-        this.setState({alertMessages:[]});
+  componentDidUpdate(prevProps) {
+    if (this.props.show !== this.state.show) {
+      this.setState({ show: this.props.show });
     }
+  }
 
-    onFileChange(target) {
-        this.setState({alertMessages:[]});
-        target.currentTarget.files.forEach(file => {
-            const fileReader = new FileReader();
-            fileReader.readAsDataURL(file);
-            fileReader.onload = (content) => {
-                PolicyService.sendNewPolicyModel(atob(content.target.result.split(",")[1])).then(respModelCreate => {
-                      if (typeof(respModelCreate) === "undefined") {
-                        //it indicates a failure
-                        this.setState(state => {
-                            return {
-                                alertMessages: [...state.alertMessages,(<Alert variant="danger"><Alert.Heading>{file.name}</Alert.Heading><p>Policy Tosca Model Creation Failure</p><hr/><p>Type: {file.type}</p><p>Size: {file.size}</p></Alert>)]
-                            };
-                        });
-                      } else {
-                        this.props.toscaTableUpdateFunction();
-                        this.setState(state => {
-                            return {
-                                alertMessages: [...state.alertMessages,(<Alert variant="success"><Alert.Heading>{file.name}</Alert.Heading><p>Policy Tosca Model Created Successfully</p><hr/><p>Type: {file.type}</p><p>Size: {file.size}</p></Alert>)]
-                            };
-                        });
-                      }
-                });
-            };
+  handleClose() {
+    this.props.disableFunction();
+    this.setState({ alertMessages: [] });
+  }
+
+  onFileChange(target) {
+    this.setState({ alertMessages: [] });
+    target.currentTarget.files.forEach(file => {
+      const fileReader = new FileReader();
+      fileReader.readAsDataURL(file);
+      fileReader.onload = (content) => {
+        PolicyService.sendNewPolicyModel(atob(content.target.result.split(",")[1])).then(respModelCreate => {
+          if (typeof (respModelCreate) === "undefined") {
+            //it indicates a failure
+            this.setState(state => {
+              return {
+                alertMessages: [...state.alertMessages, (<Alert variant="danger"><Alert.Heading>{ file.name }</Alert.Heading><p>Policy Tosca Model Creation Failure</p>
+                  <hr/>
+                  <p>Type: { file.type }</p><p>Size: { file.size }</p></Alert>)]
+              };
+            });
+          } else {
+            this.props.toscaTableUpdateFunction();
+            this.setState(state => {
+              return {
+                alertMessages: [...state.alertMessages, (<Alert variant="success"><Alert.Heading>{ file.name }</Alert.Heading><p>Policy Tosca Model Created Successfully</p>
+                  <hr/>
+                  <p>Type: { file.type }</p><p>Size: { file.size }</p></Alert>)]
+              };
+            });
+          }
         });
+      };
+    });
 
-    }
+  }
 
-    render() {
-        return (
-            <ModalStyled size="lg" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false} >
-                <Modal.Header closeButton>
-                    <Modal.Title>Create New Policy Tosca Model</Modal.Title>
-                </Modal.Header>
-                <Modal.Body>
-                    <Form.Group as={Row} controlId="formPlaintextEmail">
-                        <Col sm="10">
-                           <input type="file" multiple accept=".yaml,.yml" id="fileUploadButton" style={{ display: 'none' }} onChange={this.onFileChange} />
-                           <label htmlFor={'fileUploadButton'}>
-                             <Button color="primary"  variant="contained" component="span"
-                               startIcon={
-                                 <SvgIcon fontSize="small">
-                                   <PublishIcon />
-                                 </SvgIcon>
-                               }>
-                               Upload Files
-                             </Button>
-                             <p>(Only YAML files are supported)</p>
-                           </label>
-                           <StyledMessagesDiv>
-                                {this.state.alertMessages}
-                           </StyledMessagesDiv>
-                        </Col>
-                    </Form.Group>
-                </Modal.Body>
-                <Modal.Footer>
-                    <Button variant="secondary" onClick={this.handleClose}>Close</Button>
-                </Modal.Footer>
-            </ModalStyled>
-        );
-    }
-}
\ No newline at end of file
+  render() {
+    return (
+      <ModalStyled size="lg" show={ this.state.show } onHide={ this.handleClose } backdrop="static" keyboard={ false }>
+        <Modal.Header closeButton>
+          <Modal.Title>Create New Policy Tosca Model</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Form.Group as={ Row } controlId="formPlaintextEmail">
+            <Col sm="10">
+              <input type="file" multiple accept=".yaml,.yml" id="fileUploadButton" style={ { display: 'none' } } onChange={ this.onFileChange }/>
+              <label htmlFor={ 'fileUploadButton' }>
+                <Button color="primary" variant="contained" component="span"
+                        startIcon={
+                          <SvgIcon fontSize="small">
+                            <PublishIcon/>
+                          </SvgIcon>
+                        }>
+                  Upload Files
+                </Button>
+                <p>(Only YAML files are supported)</p>
+              </label>
+              <StyledMessagesDiv>
+                { this.state.alertMessages }
+              </StyledMessagesDiv>
+            </Col>
+          </Form.Group>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" onClick={ this.handleClose }>Close</Button>
+        </Modal.Footer>
+      </ModalStyled>
+    );
+  }
+}
index fa83aa2..fc69a63 100644 (file)
@@ -27,40 +27,40 @@ import styled from 'styled-components';
 import Button from 'react-bootstrap/Button';
 
 const ToscaDiv = styled.div`
-    background-color: ${props => props.theme.toscaTextareaBackgroundColor};
-    text-align: justify;
-    font-size: ${props => props.theme.toscaTextareaFontSize};
-    width: 100%;
-    height: 30%;
+  background-color: ${ props => props.theme.toscaTextareaBackgroundColor };
+  text-align: justify;
+  font-size: ${ props => props.theme.toscaTextareaFontSize };
+  width: 100%;
+  height: 30%;
 `
 
 export default class ToscaViewer extends React.Component {
 
-   state = {
-        toscaData: this.props.toscaData,
-        yamlPolicyTosca: this.getToscaModelYamlFor(this.props.toscaData),
-   }
+  state = {
+    toscaData: this.props.toscaData,
+    yamlPolicyTosca: this.getToscaModelYamlFor(this.props.toscaData),
+  }
 
-   constructor(props, context) {
-        super(props, context);
-        this.getToscaModelYamlFor = this.getToscaModelYamlFor.bind(this);
-   }
+  constructor(props, context) {
+    super(props, context);
+    this.getToscaModelYamlFor = this.getToscaModelYamlFor.bind(this);
+  }
 
-   getToscaModelYamlFor(toscaData) {
-        PolicyToscaService.getToscaPolicyModelYaml(toscaData["policyModelType"], toscaData["version"]).then(respYamlPolicyTosca => {
-            this.setState({
-                yamlPolicyTosca: respYamlPolicyTosca,
-            })
-        });
-   }
+  getToscaModelYamlFor(toscaData) {
+    PolicyToscaService.getToscaPolicyModelYaml(toscaData["policyModelType"], toscaData["version"]).then(respYamlPolicyTosca => {
+      this.setState({
+        yamlPolicyTosca: respYamlPolicyTosca,
+      })
+    });
+  }
 
-   render() {
-       return (
-           <ToscaDiv>
-               <pre>{this.state.yamlPolicyTosca}</pre>
-               <Button variant="secondary" title="Create a new policy version from the defined parameters"
-                   onClick={this.handleCreateNewVersion}>Create New Version</Button>
-           </ToscaDiv>
-       );
-   }
+  render() {
+    return (
+      <ToscaDiv>
+        <pre>{ this.state.yamlPolicyTosca }</pre>
+        <Button variant="secondary" title="Create a new policy version from the defined parameters"
+                onClick={ this.handleCreateNewVersion }>Create New Version</Button>
+      </ToscaDiv>
+    );
+  }
 }
index cc8c59a..5b59760 100644 (file)
@@ -26,29 +26,29 @@ import { shallow, mount } from 'enzyme';
 import PolicyToscaService from '../../../api/PolicyToscaService';
 
 describe('Verify ToscaViewer', () => {
-    const fs = require('fs');
+  const fs = require('fs');
 
-    let toscaYaml = fs.readFileSync('src/components/dialogs/Policy/toscaData.test.yaml', {encoding:'utf8', flag:'r'})
+  let toscaYaml = fs.readFileSync('src/components/dialogs/Policy/toscaData.test.yaml', { encoding: 'utf8', flag: 'r' })
 
-    const toscaData = {
-      "policyModelType": "onap.policies.controlloop.Guard",
-      "version": "1.0.0",
-      "policyAcronym": "Guard",
-      "createdDate": "2021-04-09T02:29:31.407356Z",
-      "updatedDate": "2021-04-09T02:29:31.407356Z",
-      "updatedBy": "Not found",
-      "createdBy": "Not found",
-      "tableData": {
-        "id": 0
-      }
-    };
+  const toscaData = {
+    "policyModelType": "onap.policies.controlloop.Guard",
+    "version": "1.0.0",
+    "policyAcronym": "Guard",
+    "createdDate": "2021-04-09T02:29:31.407356Z",
+    "updatedDate": "2021-04-09T02:29:31.407356Z",
+    "updatedBy": "Not found",
+    "createdBy": "Not found",
+    "tableData": {
+      "id": 0
+    }
+  };
 
-       it('Test the render method',async () => {
-            PolicyToscaService.getToscaPolicyModelYaml = jest.fn().mockImplementation(() => {
-               return Promise.resolve(toscaYaml);
-         });
-               const component = shallow(<ToscaViewer toscaData={toscaData}/>);
-               await PolicyToscaService.getToscaPolicyModelYaml();
-       expect(component).toMatchSnapshot();
-       });
+  it('Test the render method', async () => {
+    PolicyToscaService.getToscaPolicyModelYaml = jest.fn().mockImplementation(() => {
+      return Promise.resolve(toscaYaml);
+    });
+    const component = shallow(<ToscaViewer toscaData={ toscaData }/>);
+    await PolicyToscaService.getToscaPolicyModelYaml();
+    expect(component).toMatchSnapshot();
+  });
 });
index 0496535..f571bc1 100644 (file)
@@ -59,415 +59,417 @@ import PoliciesTreeViewer from './PoliciesTreeViewer';
 import PolicyToscaFileSelector from './PolicyToscaFileSelector';
 
 const DivWhiteSpaceStyled = styled.div`
-    white-space: pre;
+  white-space: pre;
 `
 
 const ModalStyled = styled(Modal)`
-    @media (min-width: 800px) {
-        .modal-xl {
-            max-width: 96%;
-        }
+  @media (min-width: 800px) {
+    .modal-xl {
+      max-width: 96%;
     }
-    background-color: transparent;
+  }
+  background-color: transparent;
 `
 const DetailedRow = styled.div`
-    margin: 0 auto;
-    background-color: ${props => props.theme.policyEditorBackgroundColor};
-    font-size: ${props => props.theme.policyEditorFontSize};
-    width: 97%;
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 20px;
+  margin: 0 auto;
+  background-color: ${ props => props.theme.policyEditorBackgroundColor };
+  font-size: ${ props => props.theme.policyEditorFontSize };
+  width: 97%;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 20px;
 `
 
 const PoliciesTreeViewerDiv = styled.div`
-    width: 20%;
-    float: left;
-    left: 0;
-    overflow: auto;
+  width: 20%;
+  float: left;
+  left: 0;
+  overflow: auto;
 `
 
 const MaterialTableDiv = styled.div`
-    float: right;
-    width: 80%;
-    left: 20%;
+  float: right;
+  width: 80%;
+  left: 20%;
 `
 
 const standardCellStyle = { 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 rowHeaderStyle = { backgroundColor: '#ddd', fontSize: '15pt', text: 'bold', border: '1px solid black' };
 
 export default class ViewAllPolicies extends React.Component {
   state = {
-        show: true,
-        policiesListData: [],
-        policiesListDataFiltered: [],
-        toscaModelsListData: [],
-        toscaModelsListDataFiltered: [],
-        jsonEditorForPolicy: new Map(),
-        showSuccessAlert: false,
-        showFailAlert: false,
-        showFileSelector: false,
-        policyColumnsDefinition: [
-            {
-                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: "Deployable in PDP Group", field: "supportedPdpGroupsString",
-                cellStyle: standardCellStyle,
-                headerStyle: headerStyle
-            },
-            {
-                title: "Deployed in PDP Group", field: "pdpGroupInfoString",
-                cellStyle: standardCellStyle,
-                headerStyle: headerStyle
-            }
-        ],
-        toscaColumnsDefinition: [
-            {
-                title: "Policy Model Type", field: "policyModelType",
-                cellStyle: standardCellStyle,
-                headerStyle: headerStyle
-            },
-            {
-                title: "Policy Acronym", field: "policyAcronym",
-                cellStyle: standardCellStyle,
-                headerStyle: headerStyle
-            },
-            {
-                title: "Version", field: "version",
-                cellStyle: standardCellStyle,
-                headerStyle: headerStyle
-            },
-            {
-                title: "Uploaded By", field: "updatedBy",
-                cellStyle: standardCellStyle,
-                headerStyle: headerStyle
-            },
-            {
-                title: "Uploaded Date", field: "updatedDate", editable: 'never',
-                cellStyle: standardCellStyle,
-                headerStyle: headerStyle
-            }
-        ],
-        tableIcons: {
-            Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
-            Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
-            Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
-            Delete: forwardRef((props, ref) => <DeleteRoundedIcon {...props} ref={ref} />),
-            DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
-            Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
-            Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
-            Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
-            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) => <ArrowDownward {...props} ref={ref} />),
-            ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
-            ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />)
-        }
-    };
-
-    constructor(props, context) {
-        super(props, context);
-        this.handleClose = this.handleClose.bind(this);
-        this.handleDeletePolicy = this.handleDeletePolicy.bind(this);
-        this.disableAlert = this.disableAlert.bind(this);
-        this.getAllPolicies = this.getAllPolicies.bind(this);
-        this.getAllToscaModels = this.getAllToscaModels.bind(this);
-        this.generateAdditionalPolicyColumns = this.generateAdditionalPolicyColumns.bind(this);
-        this.filterPolicies = this.filterPolicies.bind(this);
-        this.filterTosca = this.filterTosca.bind(this);
-        this.showFileSelector = this.showFileSelector.bind(this);
-        this.disableFileSelector = this.disableFileSelector.bind(this);
-        this.getAllPolicies();
-        this.getAllToscaModels();
+    show: true,
+    policiesListData: [],
+    policiesListDataFiltered: [],
+    toscaModelsListData: [],
+    toscaModelsListDataFiltered: [],
+    jsonEditorForPolicy: new Map(),
+    showSuccessAlert: false,
+    showFailAlert: false,
+    showFileSelector: false,
+    policyColumnsDefinition: [
+      {
+        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: "Deployable in PDP Group", field: "supportedPdpGroupsString",
+        cellStyle: standardCellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Deployed in PDP Group", field: "pdpGroupInfoString",
+        cellStyle: standardCellStyle,
+        headerStyle: headerStyle
+      }
+    ],
+    toscaColumnsDefinition: [
+      {
+        title: "Policy Model Type", field: "policyModelType",
+        cellStyle: standardCellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Policy Acronym", field: "policyAcronym",
+        cellStyle: standardCellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Version", field: "version",
+        cellStyle: standardCellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Uploaded By", field: "updatedBy",
+        cellStyle: standardCellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Uploaded Date", field: "updatedDate", editable: 'never',
+        cellStyle: standardCellStyle,
+        headerStyle: headerStyle
+      }
+    ],
+    tableIcons: {
+      Add: forwardRef((props, ref) => <AddBox { ...props } ref={ ref }/>),
+      Check: forwardRef((props, ref) => <Check { ...props } ref={ ref }/>),
+      Clear: forwardRef((props, ref) => <Clear { ...props } ref={ ref }/>),
+      Delete: forwardRef((props, ref) => <DeleteRoundedIcon { ...props } ref={ ref }/>),
+      DetailPanel: forwardRef((props, ref) => <ChevronRight { ...props } ref={ ref }/>),
+      Edit: forwardRef((props, ref) => <Edit { ...props } ref={ ref }/>),
+      Export: forwardRef((props, ref) => <SaveAlt { ...props } ref={ ref }/>),
+      Filter: forwardRef((props, ref) => <FilterList { ...props } ref={ ref }/>),
+      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) => <ArrowDownward { ...props } ref={ ref }/>),
+      ThirdStateCheck: forwardRef((props, ref) => <Remove { ...props } ref={ ref }/>),
+      ViewColumn: forwardRef((props, ref) => <ViewColumn { ...props } ref={ ref }/>)
     }
+  };
 
-    generateAdditionalPolicyColumns(policiesData) {
-        policiesData.forEach(policy => {
-            let supportedPdpGroupsString = "";
-            if (typeof policy.supportedPdpGroups !== "undefined") {
-                for (const pdpGroup of policy["supportedPdpGroups"]) {
-                    for (const pdpSubGroup of Object.values(pdpGroup)[0]) {
-                        supportedPdpGroupsString += (Object.keys(pdpGroup)[0] + "/" + pdpSubGroup + "\r\n");
-                    }
-                }
-                policy["supportedPdpGroupsString"] = supportedPdpGroupsString;
-            }
+  constructor(props, context) {
+    super(props, context);
+    this.handleClose = this.handleClose.bind(this);
+    this.handleDeletePolicy = this.handleDeletePolicy.bind(this);
+    this.disableAlert = this.disableAlert.bind(this);
+    this.getAllPolicies = this.getAllPolicies.bind(this);
+    this.getAllToscaModels = this.getAllToscaModels.bind(this);
+    this.generateAdditionalPolicyColumns = this.generateAdditionalPolicyColumns.bind(this);
+    this.filterPolicies = this.filterPolicies.bind(this);
+    this.filterTosca = this.filterTosca.bind(this);
+    this.showFileSelector = this.showFileSelector.bind(this);
+    this.disableFileSelector = this.disableFileSelector.bind(this);
+    this.getAllPolicies();
+    this.getAllToscaModels();
+  }
 
-            let infoPdpGroup = "";
-            if (typeof policy.pdpGroupInfo !== "undefined") {
-                policy["pdpGroupInfo"].forEach(pdpGroupElem => {
-                    let groupName = Object.keys(pdpGroupElem)[0];
-                    pdpGroupElem[groupName]["pdpSubgroups"].forEach(pdpSubGroupElem => {
-                        infoPdpGroup +=  (groupName + "/" + pdpSubGroupElem["pdpType"] + " ("
-                            + pdpGroupElem[groupName]["pdpGroupState"] + ")" + "\r\n");
-                    });
-                    policy["pdpGroupInfoString"] = infoPdpGroup;
-                });
-            }
-        });
-    }
+  generateAdditionalPolicyColumns(policiesData) {
+    policiesData.forEach(policy => {
+      let supportedPdpGroupsString = "";
+      if (typeof policy.supportedPdpGroups !== "undefined") {
+        for (const pdpGroup of policy["supportedPdpGroups"]) {
+          for (const pdpSubGroup of Object.values(pdpGroup)[0]) {
+            supportedPdpGroupsString += (Object.keys(pdpGroup)[0] + "/" + pdpSubGroup + "\r\n");
+          }
+        }
+        policy["supportedPdpGroupsString"] = supportedPdpGroupsString;
+      }
 
-    getAllToscaModels() {
-        PolicyToscaService.getToscaPolicyModels().then(toscaModelsList => {
-            this.setState({ toscaModelsListData: toscaModelsList,
-                            toscaModelsListDataFiltered: toscaModelsList
-             });
+      let infoPdpGroup = "";
+      if (typeof policy.pdpGroupInfo !== "undefined") {
+        policy["pdpGroupInfo"].forEach(pdpGroupElem => {
+          let groupName = Object.keys(pdpGroupElem)[0];
+          pdpGroupElem[groupName]["pdpSubgroups"].forEach(pdpSubGroupElem => {
+            infoPdpGroup += (groupName + "/" + pdpSubGroupElem["pdpType"] + " ("
+              + pdpGroupElem[groupName]["pdpGroupState"] + ")" + "\r\n");
+          });
+          policy["pdpGroupInfoString"] = infoPdpGroup;
         });
-    }
+      }
+    });
+  }
 
-    getAllPolicies() {
-        PolicyService.getPoliciesList().then(allPolicies => {
-            this.generateAdditionalPolicyColumns(allPolicies["policies"])
-            this.setState({ policiesListData: allPolicies["policies"],
-                            policiesListDataFiltered: allPolicies["policies"],
-            })
-        });
+  getAllToscaModels() {
+    PolicyToscaService.getToscaPolicyModels().then(toscaModelsList => {
+      this.setState({
+        toscaModelsListData: toscaModelsList,
+        toscaModelsListDataFiltered: toscaModelsList
+      });
+    });
+  }
 
-    }
+  getAllPolicies() {
+    PolicyService.getPoliciesList().then(allPolicies => {
+      this.generateAdditionalPolicyColumns(allPolicies["policies"])
+      this.setState({
+        policiesListData: allPolicies["policies"],
+        policiesListDataFiltered: allPolicies["policies"],
+      })
+    });
 
-    handleClose() {
-        this.setState({ show: false });
-        this.props.history.push('/')
-    }
+  }
 
-    handleDeletePolicy(event, rowData) {
-        PolicyService.deletePolicy(rowData["type"], rowData["type_version"], rowData["name"],rowData["version"]).then(
-            respPolicyDeletion => {
-                if (typeof(respPolicyDeletion) === "undefined") {
-                    //it indicates a failure
-                    this.setState({
-                        showFailAlert: true,
-                        showMessage: 'Policy Deletion Failure'
-                    });
-                } else {
-                    this.setState({
-                        showSuccessAlert: true,
-                        showMessage: 'Policy successfully Deleted'
-                    });
-                    this.getAllPolicies();
-                }
-            }
-        )
-    }
+  handleClose() {
+    this.setState({ show: false });
+    this.props.history.push('/')
+  }
 
-    disableAlert() {
-        this.setState ({ showSuccessAlert: false, showFailAlert: false });
-    }
+  handleDeletePolicy(event, rowData) {
+    PolicyService.deletePolicy(rowData["type"], rowData["type_version"], rowData["name"], rowData["version"]).then(
+      respPolicyDeletion => {
+        if (typeof (respPolicyDeletion) === "undefined") {
+          //it indicates a failure
+          this.setState({
+            showFailAlert: true,
+            showMessage: 'Policy Deletion Failure'
+          });
+        } else {
+          this.setState({
+            showSuccessAlert: true,
+            showMessage: 'Policy successfully Deleted'
+          });
+          this.getAllPolicies();
+        }
+      }
+    )
+  }
 
-    filterPolicies(prefixForFiltering) {
-        this.setState({policiesListDataFiltered: this.state.policiesListData.filter(element => element.name.startsWith(prefixForFiltering))});
-    }
+  disableAlert() {
+    this.setState({ showSuccessAlert: false, showFailAlert: false });
+  }
 
-    filterTosca(prefixForFiltering) {
-        this.setState({toscaModelsListDataFiltered: this.state.toscaModelsListData.filter(element => element.policyModelType.startsWith(prefixForFiltering))});
-    }
+  filterPolicies(prefixForFiltering) {
+    this.setState({ policiesListDataFiltered: this.state.policiesListData.filter(element => element.name.startsWith(prefixForFiltering)) });
+  }
 
-    showFileSelector() {
-        this.setState({showFileSelector:true});
-    }
+  filterTosca(prefixForFiltering) {
+    this.setState({ toscaModelsListDataFiltered: this.state.toscaModelsListData.filter(element => element.policyModelType.startsWith(prefixForFiltering)) });
+  }
 
-    disableFileSelector() {
-        this.setState({showFileSelector:false});
-    }
+  showFileSelector() {
+    this.setState({ showFileSelector: true });
+  }
 
-    renderPoliciesTab() {
-        return (
-                <Tab eventKey="policies" title="Policies in Policy Framework">
-                        <Modal.Body>
-                        <div>
-                          <PoliciesTreeViewerDiv>
-                              <PoliciesTreeViewer policiesData={this.state.policiesListData} valueForTreeCreation="name" policiesFilterFunction={this.filterPolicies} />
-                          </PoliciesTreeViewerDiv>
-                          <MaterialTableDiv>
-                              <MaterialTable
-                                  title={"Policies"}
-                                  data={this.state.policiesListDataFiltered}
-                                  columns={this.state.policyColumnsDefinition}
-                                  icons={this.state.tableIcons}
-                                  onRowClick={(event, rowData, togglePanel) => togglePanel()}
-                                  options={{
-                                      grouping: true,
-                                      exportButton: true,
-                                      headerStyle:rowHeaderStyle,
-                                      actionsColumnIndex: -1
-                                  }}
-                                  detailPanel={[
-                                    {
-                                      icon: ArrowForwardIosIcon,
-                                      tooltip: 'Show Configuration',
-                                      render: rowData => {
-                                        return (
-                                            <DetailedRow>
-                                                <PolicyEditor policyModelType={rowData["type"]} policyModelTypeVersion={rowData["type_version"]}
-                                                    policyName={rowData["name"]} policyVersion={rowData["version"]} policyProperties={rowData["properties"]}
-                                                    policiesTableUpdateFunction={this.getAllPolicies} />
-                                            </DetailedRow>
-                                        )
-                                      },
-                                    },
-                                    {
-                                      icon: DehazeIcon,
-                                      openIcon: DehazeIcon,
-                                      tooltip: 'Show Raw Data',
-                                      render: rowData => {
-                                        return (
-                                            <DetailedRow>
-                                                <pre>{JSON.stringify(rowData, null, 2)}</pre>
-                                            </DetailedRow>
-                                        )
-                                      },
-                                    },
-                                    {
-                                      icon: PublishIcon,
-                                      openIcon: PublishIcon,
-                                      tooltip: 'PDP Group Deployment',
-                                      render: rowData => {
-                                        return (
-                                            <DetailedRow>
-                                                <PolicyDeploymentEditor policyData={rowData} policiesTableUpdateFunction={this.getAllPolicies} />
-                                            </DetailedRow>
-                                        )
-                                      },
-                                    }
-                                  ]}
-                                  actions={[
-                                      {
-                                        icon: DeleteRoundedIcon,
-                                        tooltip: 'Delete Policy',
-                                        onClick: (event, rowData) => this.handleDeletePolicy(event, rowData)
-                                      }
-                                  ]}
-                              />
-                          </MaterialTableDiv>
-                          </div>
-                        </Modal.Body>
-                    </Tab>
-        );
-    }
+  disableFileSelector() {
+    this.setState({ showFileSelector: false });
+  }
 
-    renderToscaTab() {
-        return (
-                    <Tab eventKey="tosca models" title="Tosca Models in Policy Framework">
-                        <Modal.Body>
-                          <div>
-                              <PoliciesTreeViewerDiv>
-                                  <PoliciesTreeViewer policiesData={this.state.toscaModelsListData} valueForTreeCreation="policyModelType" policiesFilterFunction={this.filterTosca} />
-                              </PoliciesTreeViewerDiv>
-                              <MaterialTableDiv>
-                               <MaterialTable
-                                  title={"Tosca Models"}
-                                  data={this.state.toscaModelsListDataFiltered}
-                                  columns={this.state.toscaColumnsDefinition}
-                                  icons={this.state.tableIcons}
-                                  onRowClick={(event, rowData, togglePanel) => togglePanel()}
-                                  options={{
-                                      grouping: true,
-                                      exportButton: true,
-                                      headerStyle:rowHeaderStyle,
-                                      actionsColumnIndex: -1
-                                  }}
-                                  actions={[
-                                      {
-                                          icon: AddIcon,
-                                          tooltip: 'Add New Tosca Model',
-                                          isFreeAction: true,
-                                          onClick: () => this.showFileSelector()
-                                      }
-                                  ]}
-                                  detailPanel={[
-                                    {
-                                      icon: ArrowForwardIosIcon,
-                                      tooltip: 'Show Tosca',
-                                      render: rowData => {
-                                        return (
-                                            <DetailedRow>
-                                                <ToscaViewer toscaData={rowData} />
-                                            </DetailedRow>
-                                        )
-                                      },
-                                    },
-                                    {
-                                      icon: DehazeIcon,
-                                      openIcon: DehazeIcon,
-                                      tooltip: 'Show Raw Data',
-                                      render: rowData => {
-                                        return (
-                                            <DetailedRow>
-                                                <pre>{JSON.stringify(rowData, null, 2)}</pre>
-                                            </DetailedRow>
-                                        )
-                                      },
-                                    },
-                                    {
-                                      icon: AddIcon,
-                                      openIcon: AddIcon,
-                                      tooltip: 'Create a policy from this model',
-                                      render: rowData => {
-                                        return (
-                                            <DetailedRow>
-                                                <PolicyEditor policyModelType={rowData["policyModelType"]} policyModelTypeVersion={rowData["version"]} policyProperties={{}} policiesTableUpdateFunction={this.getAllPolicies} />
-                                            </DetailedRow>
-                                        )
-                                      },
-                                    },
-                                  ]}
-                               />
-                              </MaterialTableDiv>
-                         </div>
-                        </Modal.Body>
-                    </Tab>
-        );
-    }
+  renderPoliciesTab() {
+    return (
+      <Tab eventKey="policies" title="Policies in Policy Framework">
+        <Modal.Body>
+          <div>
+            <PoliciesTreeViewerDiv>
+              <PoliciesTreeViewer policiesData={ this.state.policiesListData } valueForTreeCreation="name" policiesFilterFunction={ this.filterPolicies }/>
+            </PoliciesTreeViewerDiv>
+            <MaterialTableDiv>
+              <MaterialTable
+                title={ "Policies" }
+                data={ this.state.policiesListDataFiltered }
+                columns={ this.state.policyColumnsDefinition }
+                icons={ this.state.tableIcons }
+                onRowClick={ (event, rowData, togglePanel) => togglePanel() }
+                options={ {
+                  grouping: true,
+                  exportButton: true,
+                  headerStyle: rowHeaderStyle,
+                  actionsColumnIndex: -1
+                } }
+                detailPanel={ [
+                  {
+                    icon: ArrowForwardIosIcon,
+                    tooltip: 'Show Configuration',
+                    render: rowData => {
+                      return (
+                        <DetailedRow>
+                          <PolicyEditor policyModelType={ rowData["type"] } policyModelTypeVersion={ rowData["type_version"] }
+                                        policyName={ rowData["name"] } policyVersion={ rowData["version"] } policyProperties={ rowData["properties"] }
+                                        policiesTableUpdateFunction={ this.getAllPolicies }/>
+                        </DetailedRow>
+                      )
+                    },
+                  },
+                  {
+                    icon: DehazeIcon,
+                    openIcon: DehazeIcon,
+                    tooltip: 'Show Raw Data',
+                    render: rowData => {
+                      return (
+                        <DetailedRow>
+                          <pre>{ JSON.stringify(rowData, null, 2) }</pre>
+                        </DetailedRow>
+                      )
+                    },
+                  },
+                  {
+                    icon: PublishIcon,
+                    openIcon: PublishIcon,
+                    tooltip: 'PDP Group Deployment',
+                    render: rowData => {
+                      return (
+                        <DetailedRow>
+                          <PolicyDeploymentEditor policyData={ rowData } policiesTableUpdateFunction={ this.getAllPolicies }/>
+                        </DetailedRow>
+                      )
+                    },
+                  }
+                ] }
+                actions={ [
+                  {
+                    icon: DeleteRoundedIcon,
+                    tooltip: 'Delete Policy',
+                    onClick: (event, rowData) => this.handleDeletePolicy(event, rowData)
+                  }
+                ] }
+              />
+            </MaterialTableDiv>
+          </div>
+        </Modal.Body>
+      </Tab>
+    );
+  }
 
-    render() {
-        return (
-        <React.Fragment>
-            <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false}>
-                <Modal.Header closeButton>
-                </Modal.Header>
-                <Tabs id="controlled-tab-example" activeKey={this.state.key} onSelect={key => this.setState({ key, selectedRowData: {} })}>
-                    {this.renderPoliciesTab()}
-                    {this.renderToscaTab()}
-                </Tabs>
-                <Alert variant="success" show={this.state.showSuccessAlert} onClose={this.disableAlert} dismissible>
-                    <DivWhiteSpaceStyled>
-                        {this.state.showMessage}
-                    </DivWhiteSpaceStyled>
-                </Alert>
-                <Alert variant="danger" show={this.state.showFailAlert} onClose={this.disableAlert} dismissible>
-                    <DivWhiteSpaceStyled>
-                        {this.state.showMessage}
-                    </DivWhiteSpaceStyled>
-                </Alert>
-                <Modal.Footer>
-                    <Button variant="secondary" onClick={this.handleClose}>Close</Button>
-               </Modal.Footer>
-            </ModalStyled>
-            <PolicyToscaFileSelector show={this.state.showFileSelector} disableFunction={this.disableFileSelector} toscaTableUpdateFunction={this.getAllToscaModels}/>
-            </React.Fragment>
-      );
-    }
-  }
\ No newline at end of file
+  renderToscaTab() {
+    return (
+      <Tab eventKey="tosca models" title="Tosca Models in Policy Framework">
+        <Modal.Body>
+          <div>
+            <PoliciesTreeViewerDiv>
+              <PoliciesTreeViewer policiesData={ this.state.toscaModelsListData } valueForTreeCreation="policyModelType" policiesFilterFunction={ this.filterTosca }/>
+            </PoliciesTreeViewerDiv>
+            <MaterialTableDiv>
+              <MaterialTable
+                title={ "Tosca Models" }
+                data={ this.state.toscaModelsListDataFiltered }
+                columns={ this.state.toscaColumnsDefinition }
+                icons={ this.state.tableIcons }
+                onRowClick={ (event, rowData, togglePanel) => togglePanel() }
+                options={ {
+                  grouping: true,
+                  exportButton: true,
+                  headerStyle: rowHeaderStyle,
+                  actionsColumnIndex: -1
+                } }
+                actions={ [
+                  {
+                    icon: AddIcon,
+                    tooltip: 'Add New Tosca Model',
+                    isFreeAction: true,
+                    onClick: () => this.showFileSelector()
+                  }
+                ] }
+                detailPanel={ [
+                  {
+                    icon: ArrowForwardIosIcon,
+                    tooltip: 'Show Tosca',
+                    render: rowData => {
+                      return (
+                        <DetailedRow>
+                          <ToscaViewer toscaData={ rowData }/>
+                        </DetailedRow>
+                      )
+                    },
+                  },
+                  {
+                    icon: DehazeIcon,
+                    openIcon: DehazeIcon,
+                    tooltip: 'Show Raw Data',
+                    render: rowData => {
+                      return (
+                        <DetailedRow>
+                          <pre>{ JSON.stringify(rowData, null, 2) }</pre>
+                        </DetailedRow>
+                      )
+                    },
+                  },
+                  {
+                    icon: AddIcon,
+                    openIcon: AddIcon,
+                    tooltip: 'Create a policy from this model',
+                    render: rowData => {
+                      return (
+                        <DetailedRow>
+                          <PolicyEditor policyModelType={ rowData["policyModelType"] } policyModelTypeVersion={ rowData["version"] } policyProperties={ {} } policiesTableUpdateFunction={ this.getAllPolicies }/>
+                        </DetailedRow>
+                      )
+                    },
+                  },
+                ] }
+              />
+            </MaterialTableDiv>
+          </div>
+        </Modal.Body>
+      </Tab>
+    );
+  }
+
+  render() {
+    return (
+      <React.Fragment>
+        <ModalStyled size="xl" show={ this.state.show } onHide={ this.handleClose } backdrop="static" keyboard={ false }>
+          <Modal.Header closeButton>
+          </Modal.Header>
+          <Tabs id="controlled-tab-example" activeKey={ this.state.key } onSelect={ key => this.setState({ key, selectedRowData: {} }) }>
+            { this.renderPoliciesTab() }
+            { this.renderToscaTab() }
+          </Tabs>
+          <Alert variant="success" show={ this.state.showSuccessAlert } onClose={ this.disableAlert } dismissible>
+            <DivWhiteSpaceStyled>
+              { this.state.showMessage }
+            </DivWhiteSpaceStyled>
+          </Alert>
+          <Alert variant="danger" show={ this.state.showFailAlert } onClose={ this.disableAlert } dismissible>
+            <DivWhiteSpaceStyled>
+              { this.state.showMessage }
+            </DivWhiteSpaceStyled>
+          </Alert>
+          <Modal.Footer>
+            <Button variant="secondary" onClick={ this.handleClose }>Close</Button>
+          </Modal.Footer>
+        </ModalStyled>
+        <PolicyToscaFileSelector show={ this.state.showFileSelector } disableFunction={ this.disableFileSelector } toscaTableUpdateFunction={ this.getAllToscaModels }/>
+      </React.Fragment>
+    );
+  }
+}
index bb09391..e23ab3f 100644 (file)
@@ -26,40 +26,40 @@ import Spinner from 'react-bootstrap/Spinner';
 import styled from 'styled-components';
 
 const StyledSpinnerDiv = styled.div`
-       justify-content: center !important;
-       display: flex !important;
+  justify-content: center !important;
+  display: flex !important;
 `;
 
 export default class RefreshStatus extends React.Component {
-       state = {
-               loopName: this.props.loopCache.getLoopName()
-       };
+  state = {
+    loopName: this.props.loopCache.getLoopName()
+  };
 
-       componentWillReceiveProps(newProps) {
-               this.setState({
-                       loopName: newProps.loopCache.getLoopName()
-               });
-       }
+  componentWillReceiveProps(newProps) {
+    this.setState({
+      loopName: newProps.loopCache.getLoopName()
+    });
+  }
 
-       componentDidMount() {
-               // refresh status and update loop logs
-               LoopActionService.refreshStatus(this.state.loopName).then(data => {
-                       this.props.showSucAlert("Status successfully refreshed");
-                       this.props.updateLoopFunction(data);
-                       this.props.history.push('/');
-               })
-               .catch(error => {
-                       this.props.showFailAlert("Status refreshing failed");
-                       this.props.history.push('/');
-               });
-       }
+  componentDidMount() {
+    // refresh status and update loop logs
+    LoopActionService.refreshStatus(this.state.loopName).then(data => {
+      this.props.showSucAlert("Status successfully refreshed");
+      this.props.updateLoopFunction(data);
+      this.props.history.push('/');
+    })
+      .catch(error => {
+        this.props.showFailAlert("Status refreshing failed");
+        this.props.history.push('/');
+      });
+  }
 
-       render() {
-               return (
-                       <StyledSpinnerDiv>
-                               <Spinner animation="border" role="status">
-                               </Spinner>
-                       </StyledSpinnerDiv>
-               );
-       }
+  render() {
+    return (
+      <StyledSpinnerDiv>
+        <Spinner animation="border" role="status">
+        </Spinner>
+      </StyledSpinnerDiv>
+    );
+  }
 }
index e08c50d..7736ffd 100644 (file)
@@ -28,44 +28,45 @@ import LoopActionService from '../../api/LoopActionService';
 
 describe('Verify RefreshStatus', () => {
 
-       const loopCache = new LoopCache({
-               "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca"
-       });
+  const loopCache = new LoopCache({
+    "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca"
+  });
 
-       it('Test refresh status failed', async () => {
-               const flushPromises = () => new Promise(setImmediate);
-               const historyMock = { push: jest.fn() };
-               const showSucAlert = jest.fn();
-               const showFailAlert = jest.fn();
+  it('Test refresh status failed', async () => {
+    const flushPromises = () => new Promise(setImmediate);
+    const historyMock = { push: jest.fn() };
+    const showSucAlert = jest.fn();
+    const showFailAlert = jest.fn();
 
-               const component = shallow(<RefreshStatus loopCache={loopCache} history={historyMock} showSucAlert={showSucAlert} showFailAlert={showFailAlert} />)
-               await flushPromises();
-               component.update();
+    const component = shallow(<RefreshStatus loopCache={ loopCache } history={ historyMock } showSucAlert={ showSucAlert } showFailAlert={ showFailAlert }/>)
+    await flushPromises();
+    component.update();
 
-               expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
-       });
+    expect(historyMock.push.mock.calls[0]).toEqual(['/']);
+  });
 
-       it('Test refresh status successful', async () => {
-               const flushPromises = () => new Promise(setImmediate);
-               const historyMock = { push: jest.fn() };
-               const updateLoopFunction = jest.fn();
-               const showSucAlert = jest.fn();
-               const showFailAlert = jest.fn();
+  it('Test refresh status successful', async () => {
+    const flushPromises = () => new Promise(setImmediate);
+    const historyMock = { push: jest.fn() };
+    const updateLoopFunction = jest.fn();
+    const showSucAlert = jest.fn();
+    const showFailAlert = jest.fn();
 
-               LoopActionService.refreshStatus = jest.fn().mockImplementation(() => {
-                       return Promise.resolve({
-                               ok: true,
-                               status: 200,
-                               json: () => {}
-                       });
-               });
+    LoopActionService.refreshStatus = jest.fn().mockImplementation(() => {
+      return Promise.resolve({
+        ok: true,
+        status: 200,
+        json: () => {
+        }
+      });
+    });
 
-               const component = shallow(<RefreshStatus loopCache={loopCache} 
-                                               loopAction="submit" history={historyMock} updateLoopFunction={updateLoopFunction} showSucAlert={showSucAlert} showFailAlert={showFailAlert} />)
-               await flushPromises();
-               component.update();
+    const component = shallow(<RefreshStatus loopCache={ loopCache }
+                                             loopAction="submit" history={ historyMock } updateLoopFunction={ updateLoopFunction } showSucAlert={ showSucAlert } showFailAlert={ showFailAlert }/>)
+    await flushPromises();
+    component.update();
 
-               expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
-       });
+    expect(historyMock.push.mock.calls[0]).toEqual(['/']);
+  });
 
 });
index 4796b8d..e7be984 100644 (file)
@@ -38,126 +38,136 @@ import LoopCache from '../../../api/LoopCache';
 import SvgGenerator from '../../loop_viewer/svg/SvgGenerator';
 
 const ModalStyled = styled(Modal)`
-       background-color: transparent;
+  background-color: transparent;
 `
 
 const cellStyle = { 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 headerStyle = { backgroundColor: '#ddd', border: '2px solid black' };
+const rowHeaderStyle = { backgroundColor: '#ddd', fontSize: '15pt', text: 'bold', border: '1px solid black' };
 
 export default class ViewLoopTemplatesModal extends React.Component {
   state = {
-        show: true,
-               content: 'Please select a loop template to display it',
-               selectedRow: -1,
-               loopTemplatesData: [],
-               fakeLoopCacheWithTemplate: new LoopCache({}),
-               loopTemplateColumnsDefinition: [
-                       { title: "#", field: "index", render: rowData => rowData.tableData.id + 1,
-                               cellStyle: cellStyle,
-                               headerStyle: headerStyle
-                       },
-                       { title: "Template Name", field: "name",
-                               cellStyle: cellStyle,
-                               headerStyle: headerStyle
-                       },
-                       { title: "Service Model Name", field: "modelService.serviceDetails.name",
-                               cellStyle: cellStyle,
-                               headerStyle: headerStyle
-                       },
-                       { title: "Loop Type Allowed", field: "allowedLoopType",
-                               cellStyle: cellStyle,
-                               headerStyle: headerStyle
-                       },
-                       { title: "# Instances Allowed", field: "maximumInstancesAllowed",
-                               cellStyle: cellStyle,
-                               headerStyle: headerStyle
-                       },
-                       { title: "Modified Date", field: "updatedDate", editable: 'never',
-                               cellStyle: cellStyle,
-                               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.renderSvg = this.renderSvg.bind(this);
-               this.getLoopTemplate = this.getLoopTemplate.bind(this);
-               this.getAllLoopTemplates();
-       }
+    show: true,
+    content: 'Please select a loop template to display it',
+    selectedRow: -1,
+    loopTemplatesData: [],
+    fakeLoopCacheWithTemplate: new LoopCache({}),
+    loopTemplateColumnsDefinition: [
+      {
+        title: "#", field: "index", render: rowData => rowData.tableData.id + 1,
+        cellStyle: cellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Template Name", field: "name",
+        cellStyle: cellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Service Model Name", field: "modelService.serviceDetails.name",
+        cellStyle: cellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Loop Type Allowed", field: "allowedLoopType",
+        cellStyle: cellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "# Instances Allowed", field: "maximumInstancesAllowed",
+        cellStyle: cellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Modified Date", field: "updatedDate", editable: 'never',
+        cellStyle: cellStyle,
+        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 }/>)
+    }
+  };
 
-       getAllLoopTemplates() {
-               TemplateService.getAllLoopTemplates().then(templatesData => {
-                       // replace -1 in maximumInstancesAllowed with more meaningful 'No Limit'
-                       for (let item in templatesData) {
-                               if (templatesData[item].maximumInstancesAllowed === -1) {
-                                       templatesData[item].maximumInstancesAllowed = 'No Limit';
-                               }
-                       } 
-                       this.setState({ loopTemplatesData: templatesData })
-               });
-       }
+  constructor(props, context) {
+    super(props, context);
+    this.handleClose = this.handleClose.bind(this);
+    this.renderSvg = this.renderSvg.bind(this);
+    this.getLoopTemplate = this.getLoopTemplate.bind(this);
+    this.getAllLoopTemplates();
+  }
 
-       getLoopTemplate(templateIdInDataArray) {
-           if (typeof templateIdInDataArray !== "undefined") {
-               this.setState({ fakeLoopCacheWithTemplate:
-                new LoopCache({
-                    "loopTemplate":this.state.loopTemplatesData[templateIdInDataArray],
-                    "name": "fakeLoop"
-                })
-               })
-               } else {
-               this.setState({ fakeLoopCacheWithTemplate: new LoopCache({}) })
+  getAllLoopTemplates() {
+    TemplateService.getAllLoopTemplates().then(templatesData => {
+      // replace -1 in maximumInstancesAllowed with more meaningful 'No Limit'
+      for (let item in templatesData) {
+        if (templatesData[item].maximumInstancesAllowed === -1) {
+          templatesData[item].maximumInstancesAllowed = 'No Limit';
         }
+      }
+      this.setState({ loopTemplatesData: templatesData })
+    });
+  }
+
+  getLoopTemplate(templateIdInDataArray) {
+    if (typeof templateIdInDataArray !== "undefined") {
+      this.setState({
+        fakeLoopCacheWithTemplate:
+          new LoopCache({
+            "loopTemplate": this.state.loopTemplatesData[templateIdInDataArray],
+            "name": "fakeLoop"
+          })
+      })
+    } else {
+      this.setState({ fakeLoopCacheWithTemplate: new LoopCache({}) })
     }
+  }
 
-       handleClose() {
-               this.setState({ show: false });
-               this.props.history.push('/')
-       }
+  handleClose() {
+    this.setState({ show: false });
+    this.props.history.push('/')
+  }
 
-       renderSvg() {
-               return(
-                       <SvgGenerator loopCache={this.state.fakeLoopCacheWithTemplate} clickable={false} generatedFrom={SvgGenerator.GENERATED_FROM_TEMPLATE}/>
-               )
-       }
+  renderSvg() {
+    return (
+      <SvgGenerator loopCache={ this.state.fakeLoopCacheWithTemplate } clickable={ false } generatedFrom={ SvgGenerator.GENERATED_FROM_TEMPLATE }/>
+    )
+  }
 
-       render() {
+  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 Blueprint MicroService Templates"}
-                                 data={this.state.loopTemplatesData}
-                                         columns={this.state.loopTemplateColumnsDefinition}
-                                         icons={this.state.tableIcons}
-                             onRowClick={(event, rowData) => {this.getLoopTemplate(rowData.tableData.id);this.setState({selectedRow: rowData.tableData.id})}}
-                                         options={{
-                                             headerStyle:rowHeaderStyle,
-                                             rowStyle: rowData => ({
-                                             backgroundColor: (this.state.selectedRow !== -1 && this.state.selectedRow === rowData.tableData.id) ? '#EEE' : '#FFF'
-                          })
-                      }}
-                />
-                   {this.renderSvg()}
-                </Modal.Body>
-                <Modal.Footer>
-                       <Button variant="secondary" onClick={this.handleClose}>Close</Button>
-               </Modal.Footer>
+      <ModalStyled size="xl" show={ this.state.show } onHide={ this.handleClose } backdrop="static" keyboard={ false }>
+        <Modal.Header closeButton>
+        </Modal.Header>
+        <Modal.Body>
+          <MaterialTable
+            title={ "View Blueprint MicroService Templates" }
+            data={ this.state.loopTemplatesData }
+            columns={ this.state.loopTemplateColumnsDefinition }
+            icons={ this.state.tableIcons }
+            onRowClick={ (event, rowData) => {
+              this.getLoopTemplate(rowData.tableData.id);
+              this.setState({ selectedRow: rowData.tableData.id })
+            } }
+            options={ {
+              headerStyle: rowHeaderStyle,
+              rowStyle: rowData => ({
+                backgroundColor: (this.state.selectedRow !== -1 && this.state.selectedRow === rowData.tableData.id) ? '#EEE' : '#FFF'
+              })
+            } }
+          />
+          { this.renderSvg() }
+        </Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" onClick={ this.handleClose }>Close</Button>
+        </Modal.Footer>
       </ModalStyled>
-      );
-    }
+    );
   }
+}
index 7680ec4..d93f0b0 100644 (file)
@@ -27,136 +27,137 @@ import { mount } from 'enzyme';
 import { BrowserRouter as Router } from 'react-router-dom';
 
 describe('Verify ViewLoopTemplatesModal', () => {
-       beforeEach(() => {
-               fetch.resetMocks();
-       });
+  beforeEach(() => {
+    fetch.resetMocks();
+  });
 
-       it('Test API Successful', () => {
-               fetch.mockImplementationOnce(() => {
-                       return Promise.resolve({
-                               ok: true,
-                               status: 200,
-                               json: () => {
-                                       return Promise.resolve({
-                                               "index": "1",
-                                               "name": "MTCA version 1",
-                                               "modelService.serviceDetails.name": "MTCA",
-                                               "allowedLoopType" : "CLOSED",
-                                               "maximumInstancesAllowed":1,
-                                               "updatedDate":"2019-09-06 19:09:42"
-                                       });
-                               }
-                       });
-               });
-               const component = shallow(<ViewLoopTemplatesModal/>);
-       });
-       
-       it('Test API Exception', () => {
-               fetch.mockImplementationOnce(() => {
-                       return Promise.resolve({
-                               ok: false,
-                               status: 500,
-                               json: () => {
-                                       return Promise.resolve({
-                                               "index": "1",
-                                               "name": "MTCA version 1",
-                                               "modelService.serviceDetails.name": "MTCA",
-                                               "allowedLoopType" : "CLOSED",
-                                               "maximumInstancesAllowed":1,
-                                               "updatedDate":"2019-09-06 19:09:42"
-                                       });
-                               }
-                       });
-               });
-               const component = shallow(<ViewLoopTemplatesModal/>);
-       });
+  it('Test API Successful', () => {
+    fetch.mockImplementationOnce(() => {
+      return Promise.resolve({
+        ok: true,
+        status: 200,
+        json: () => {
+          return Promise.resolve({
+            "index": "1",
+            "name": "MTCA version 1",
+            "modelService.serviceDetails.name": "MTCA",
+            "allowedLoopType": "CLOSED",
+            "maximumInstancesAllowed": 1,
+            "updatedDate": "2019-09-06 19:09:42"
+          });
+        }
+      });
+    });
+    const component = shallow(<ViewLoopTemplatesModal/>);
+  });
 
-       it('Test API Rejection', () => {
-               const myMockFunc  = fetch.mockImplementationOnce(() => Promise.reject('error'));
-               setTimeout( () => myMockFunc().catch(e => {
-                       console.info(e);
-               }),
-               100
-               );
-               const component = shallow(<ViewLoopTemplatesModal/>);
-               expect(myMockFunc.mock.calls.length).toBe(1);
-       });
+  it('Test API Exception', () => {
+    fetch.mockImplementationOnce(() => {
+      return Promise.resolve({
+        ok: false,
+        status: 500,
+        json: () => {
+          return Promise.resolve({
+            "index": "1",
+            "name": "MTCA version 1",
+            "modelService.serviceDetails.name": "MTCA",
+            "allowedLoopType": "CLOSED",
+            "maximumInstancesAllowed": 1,
+            "updatedDate": "2019-09-06 19:09:42"
+          });
+        }
+      });
+    });
+    const component = shallow(<ViewLoopTemplatesModal/>);
+  });
 
-       it('Test the tosca model view render method', () => {
-               fetch.mockImplementationOnce(() => {
-                       return Promise.resolve({
-                               ok: true,
-                               status: 200,
-                               json: () => {
-                                       return Promise.resolve({
-                                               "index": "1",
-                                               "name": "MTCA version 1",
-                                               "modelService.serviceDetails.name": "MTCA",
-                                               "allowedLoopType" : "CLOSED",
-                                               "maximumInstancesAllowed":1,
-                                               "updatedDate":"2019-09-06 19:09:42"
-                                       });
-                               }
-                       });
-               });
-               const component = shallow(<ViewLoopTemplatesModal/>);
-               component.setState({ loopTemplateData: {
-                                               "index": "1",
-                                               "name": "MTCA version 1",
-                                               "modelService.serviceDetails.name": "MTCA",
-                                               "allowedLoopType" : "CLOSED",
-                                               "maximumInstancesAllowed":1,
-                                               "updatedDate":"2019-09-06 19:09:42"
-                 }
-               });
-               expect(component).toMatchSnapshot();
-       });
+  it('Test API Rejection', () => {
+    const myMockFunc = fetch.mockImplementationOnce(() => Promise.reject('error'));
+    setTimeout(() => myMockFunc().catch(e => {
+        console.info(e);
+      }),
+      100
+    );
+    const component = shallow(<ViewLoopTemplatesModal/>);
+    expect(myMockFunc.mock.calls.length).toBe(1);
+  });
 
-       it('Test Table icons', () => {
-                       fetch.mockImplementationOnce(() => {
-                               return Promise.resolve({
-                                       ok: true,
-                                       status: 200,
-                                       json: () => {
-                                               return Promise.resolve({
-                                               "index": "1",
-                                               "name": "MTCA version 1",
-                                               "modelService.serviceDetails.name": "MTCA",
-                                               "allowedLoopType" : "CLOSED",
-                                               "maximumInstancesAllowed":1,
-                                               "updatedDate":"2019-09-06 19:09:42"
-                                               });
-                                       }
-                               });
-                       });
-                       const component = mount(<Router><ViewLoopTemplatesModal/></Router>);
-                       expect(component.find('[className="MuiSelect-icon MuiTablePagination-selectIcon"]')).toBeTruthy();
-               });
-               
-               it('Test handleClose', () => {
-                       fetch.mockImplementationOnce(() => {
-                               return Promise.resolve({
-                                       ok: true,
-                                       status: 200,
-                                       json: () => {
-                                               return Promise.resolve({
-                                               "index": "1",
-                                               "name": "MTCA version 1",
-                                               "modelService.serviceDetails.name": "MTCA",
-                                               "allowedLoopType" : "CLOSED",
-                                               "maximumInstancesAllowed":1,
-                                               "updatedDate":"2019-09-06 19:09:42"
-                                               });
-                                       }
-                               });
-                       });
-                       const historyMock = { push: jest.fn() };
-                       const handleClose = jest.spyOn(ViewLoopTemplatesModal.prototype,'handleClose');
-                       const component = shallow(<ViewLoopTemplatesModal history={historyMock} />)
-                       component.find('[variant="secondary"]').prop('onClick')();
-                       expect(handleClose).toHaveBeenCalledTimes(1);
-                       expect(component.state('show')).toEqual(false);
-                       expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
-                       handleClose.mockClear();
-               });
-       });
+  it('Test the tosca model view render method', () => {
+    fetch.mockImplementationOnce(() => {
+      return Promise.resolve({
+        ok: true,
+        status: 200,
+        json: () => {
+          return Promise.resolve({
+            "index": "1",
+            "name": "MTCA version 1",
+            "modelService.serviceDetails.name": "MTCA",
+            "allowedLoopType": "CLOSED",
+            "maximumInstancesAllowed": 1,
+            "updatedDate": "2019-09-06 19:09:42"
+          });
+        }
+      });
+    });
+    const component = shallow(<ViewLoopTemplatesModal/>);
+    component.setState({
+      loopTemplateData: {
+        "index": "1",
+        "name": "MTCA version 1",
+        "modelService.serviceDetails.name": "MTCA",
+        "allowedLoopType": "CLOSED",
+        "maximumInstancesAllowed": 1,
+        "updatedDate": "2019-09-06 19:09:42"
+      }
+    });
+    expect(component).toMatchSnapshot();
+  });
+
+  it('Test Table icons', () => {
+    fetch.mockImplementationOnce(() => {
+      return Promise.resolve({
+        ok: true,
+        status: 200,
+        json: () => {
+          return Promise.resolve({
+            "index": "1",
+            "name": "MTCA version 1",
+            "modelService.serviceDetails.name": "MTCA",
+            "allowedLoopType": "CLOSED",
+            "maximumInstancesAllowed": 1,
+            "updatedDate": "2019-09-06 19:09:42"
+          });
+        }
+      });
+    });
+    const component = mount(<Router><ViewLoopTemplatesModal/></Router>);
+    expect(component.find('[className="MuiSelect-icon MuiTablePagination-selectIcon"]')).toBeTruthy();
+  });
+
+  it('Test handleClose', () => {
+    fetch.mockImplementationOnce(() => {
+      return Promise.resolve({
+        ok: true,
+        status: 200,
+        json: () => {
+          return Promise.resolve({
+            "index": "1",
+            "name": "MTCA version 1",
+            "modelService.serviceDetails.name": "MTCA",
+            "allowedLoopType": "CLOSED",
+            "maximumInstancesAllowed": 1,
+            "updatedDate": "2019-09-06 19:09:42"
+          });
+        }
+      });
+    });
+    const historyMock = { push: jest.fn() };
+    const handleClose = jest.spyOn(ViewLoopTemplatesModal.prototype, 'handleClose');
+    const component = shallow(<ViewLoopTemplatesModal history={ historyMock }/>)
+    component.find('[variant="secondary"]').prop('onClick')();
+    expect(handleClose).toHaveBeenCalledTimes(1);
+    expect(component.state('show')).toEqual(false);
+    expect(historyMock.push.mock.calls[0]).toEqual(['/']);
+    handleClose.mockClear();
+  });
+});
index 96eabb4..d452f6d 100644 (file)
@@ -30,81 +30,86 @@ import styled from 'styled-components';
 import UserService from '../../api/UserService';
 
 const ModalStyled = styled(Modal)`
-       background-color: transparent;
+  background-color: transparent;
 `
 
 export default class UserInfoModal extends React.Component {
 
-       constructor(props, context) {
-               super(props, context);
+  constructor(props, context) {
+    super(props, context);
 
-               this.handleClose = this.handleClose.bind(this);
-           this.renderPermissions = this.renderPermissions.bind(this);
-               this.renderUserName = this.renderUserName.bind(this);
-               this.state = {
-                       show: true,
-                       userInfo: {}
-               };
-       }
-       componentWillMount() {
-               UserService.getUserInfo().then(userInfo => {
-                       this.setState({ userInfo: userInfo })
-               });
-       }
+    this.handleClose = this.handleClose.bind(this);
+    this.renderPermissions = this.renderPermissions.bind(this);
+    this.renderUserName = this.renderUserName.bind(this);
+    this.state = {
+      show: true,
+      userInfo: {}
+    };
+  }
 
-       handleClose() {
-                       this.props.history.push('/');
-       }
-       renderPermissions() {
-          if (this.state.userInfo["allPermissions"]) {
-               var listOfPermissions = this.state.userInfo["allPermissions"].map(function(perm) {
-                   return <Form.Control key={perm} plaintext readOnly defaultValue={perm} />;
-               })
-                   return listOfPermissions;
-                 } else {
-                   return;
-                 }
-       }
-       renderUserName() {
-               if (this.state.userInfo["userName"]) {
-                       return <Form.Control plaintext readOnly defaultValue={this.state.userInfo["userName"]} />
-               } else  {
-                       return;
-               }
-       }
-       renderVersion() {
-               if (this.state.userInfo["cldsVersion"]) {
-                       return <Form.Control plaintext readOnly defaultValue={this.state.userInfo["cldsVersion"]} />
-               } else  {
-                       return;
-               }
-       }
-       render() {
-               return (
-                       <ModalStyled size="lg"  show={this.state.show} onHide={this.handleClose}>
-                               <Modal.Header closeButton>
-                                       <Modal.Title>User Info</Modal.Title>
-                               </Modal.Header>
-                               <Modal.Body>
-                                       <Form.Group as={Row} controlId="userName">
-                                               <Form.Label column sm="3">Current User:</Form.Label>
-                                               <Col>{this.renderUserName()}</Col>
-                                       </Form.Group>
-                                       <Form.Group as={Row} controlId="cldsVersion">
-                                               <Form.Label column sm="3">CLDS Version:</Form.Label>
-                                               <Col>{this.renderVersion()}</Col>
-                                       </Form.Group>
-                                       <Form.Group as={Row} controlId="userPermissions">
-                                               <Form.Label column sm="3">User Permissions:</Form.Label>
-                                               <Col>
-                                                       {this.renderPermissions()}
-                                               </Col>
-                                       </Form.Group>
-                               </Modal.Body>
-                               <Modal.Footer>
-                                       <Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>
-                               </Modal.Footer>
-                       </ModalStyled>
-               );
-       }
+  componentWillMount() {
+    UserService.getUserInfo().then(userInfo => {
+      this.setState({ userInfo: userInfo })
+    });
+  }
+
+  handleClose() {
+    this.props.history.push('/');
+  }
+
+  renderPermissions() {
+    if (this.state.userInfo["allPermissions"]) {
+      var listOfPermissions = this.state.userInfo["allPermissions"].map(function (perm) {
+        return <Form.Control key={ perm } plaintext readOnly defaultValue={ perm }/>;
+      })
+      return listOfPermissions;
+    } else {
+      return;
+    }
+  }
+
+  renderUserName() {
+    if (this.state.userInfo["userName"]) {
+      return <Form.Control plaintext readOnly defaultValue={ this.state.userInfo["userName"] }/>
+    } else {
+      return;
+    }
+  }
+
+  renderVersion() {
+    if (this.state.userInfo["cldsVersion"]) {
+      return <Form.Control plaintext readOnly defaultValue={ this.state.userInfo["cldsVersion"] }/>
+    } else {
+      return;
+    }
+  }
+
+  render() {
+    return (
+      <ModalStyled size="lg" show={ this.state.show } onHide={ this.handleClose }>
+        <Modal.Header closeButton>
+          <Modal.Title>User Info</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Form.Group as={ Row } controlId="userName">
+            <Form.Label column sm="3">Current User:</Form.Label>
+            <Col>{ this.renderUserName() }</Col>
+          </Form.Group>
+          <Form.Group as={ Row } controlId="cldsVersion">
+            <Form.Label column sm="3">CLDS Version:</Form.Label>
+            <Col>{ this.renderVersion() }</Col>
+          </Form.Group>
+          <Form.Group as={ Row } controlId="userPermissions">
+            <Form.Label column sm="3">User Permissions:</Form.Label>
+            <Col>
+              { this.renderPermissions() }
+            </Col>
+          </Form.Group>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" type="null" onClick={ this.handleClose }>Cancel</Button>
+        </Modal.Footer>
+      </ModalStyled>
+    );
+  }
 }
index f5ed0ae..7168792 100644 (file)
@@ -26,53 +26,59 @@ import UserInfoModal from './UserInfoModal';
 
 describe('Verify UserInfoModal', () => {
 
-       beforeEach(() => {
-               fetch.resetMocks();
-               fetch.mockImplementation(() => {
-                       return Promise.resolve({
-                               ok: true,
-                               status: 200,
-                               json: () => {
-                                       return Promise.resolve({
-                                               "userName": "test",
-                                               "cldsVersion": "1.0.0"
-                                       });
-                       }});
-               });
-       })
+  beforeEach(() => {
+    fetch.resetMocks();
+    fetch.mockImplementation(() => {
+      return Promise.resolve({
+        ok: true,
+        status: 200,
+        json: () => {
+          return Promise.resolve({
+            "userName": "test",
+            "cldsVersion": "1.0.0"
+          });
+        }
+      });
+    });
+  })
 
-       it('Test the render method full permission', () => {
-               const component = shallow(<UserInfoModal />)
-               component.setState({ userInfo: {
-                       "userName": "test",
-                       "cldsVersion": "1.0.0",
-                       "allPermissions": ["permission1","permission2"]
-               }});
-               expect(component).toMatchSnapshot();
-       });
+  it('Test the render method full permission', () => {
+    const component = shallow(<UserInfoModal/>)
+    component.setState({
+      userInfo: {
+        "userName": "test",
+        "cldsVersion": "1.0.0",
+        "allPermissions": ["permission1", "permission2"]
+      }
+    });
+    expect(component).toMatchSnapshot();
+  });
 
-       it('Test the render method no permission', () => {
-               const component = shallow(<UserInfoModal />)
-               component.setState({ userInfo: {}
-               });
+  it('Test the render method no permission', () => {
+    const component = shallow(<UserInfoModal/>)
+    component.setState({
+      userInfo: {}
+    });
 
-               expect(component.find('FormControl').length).toEqual(0);
-       });
+    expect(component.find('FormControl').length).toEqual(0);
+  });
 
-       it('Test the render method read permission', () => {
-               const component = shallow(<UserInfoModal />)
-               component.setState({ userInfo: {
-                       "userName": "test",
-                       "cldsVersion": "1.0.0",
-                       "allPermissions": ["permission1","permission2"]
-               }});
+  it('Test the render method read permission', () => {
+    const component = shallow(<UserInfoModal/>)
+    component.setState({
+      userInfo: {
+        "userName": "test",
+        "cldsVersion": "1.0.0",
+        "allPermissions": ["permission1", "permission2"]
+      }
+    });
 
-               expect(component.find('FormControl').length).toEqual(4);
+    expect(component.find('FormControl').length).toEqual(4);
 
-               const forms = component.find('FormControl');
-               expect(forms.get(0).props.defaultValue).toEqual("test");
-               expect(forms.get(1).props.defaultValue).toEqual("1.0.0");
-               expect(forms.get(2).props.defaultValue).toEqual("permission1");
-               expect(forms.get(3).props.defaultValue).toEqual("permission2");
-       });
+    const forms = component.find('FormControl');
+    expect(forms.get(0).props.defaultValue).toEqual("test");
+    expect(forms.get(1).props.defaultValue).toEqual("1.0.0");
+    expect(forms.get(2).props.defaultValue).toEqual("permission1");
+    expect(forms.get(3).props.defaultValue).toEqual("permission2");
+  });
 });
index e3d9f60..3435ba3 100644 (file)
@@ -26,71 +26,72 @@ import LoopCache from '../../../api/LoopCache';
 import styled from 'styled-components';
 
 const LoopLogsHeaderDivStyled = styled.div`
-       background-color: ${props => props.theme.loopLogsHeaderBackgroundColor};
-       padding: 10px 10px;
-       color: ${props => props.theme.loopLogsHeaderFontColor};
+  background-color: ${ props => props.theme.loopLogsHeaderBackgroundColor };
+  padding: 10px 10px;
+  color: ${ props => props.theme.loopLogsHeaderFontColor };
 `
 const TableStyled = styled(Table)`
-    
-    overflow: auto;
+
+  overflow: auto;
 `
 const TableRow = ({ logRow }) => (
-       <tr>
-               <td>{logRow.logInstant}</td>
-               <td>{logRow.logType}</td>
-               <td>{logRow.logComponent}</td>
-               <td>{logRow.message}</td>
-       </tr>
+  <tr>
+    <td>{ logRow.logInstant }</td>
+    <td>{ logRow.logType }</td>
+    <td>{ logRow.logComponent }</td>
+    <td>{ logRow.message }</td>
+  </tr>
 
 )
 
 export default class LoopLogs extends React.Component {
 
-       state = {
-               loopCache: new LoopCache({})
-       }
-       constructor(props) {
-               super(props);
-               this.renderLogs = this.renderLogs.bind(this);
-               this.state.loopCache = props.loopCache;
-       }
+  state = {
+    loopCache: new LoopCache({})
+  }
+
+  constructor(props) {
+    super(props);
+    this.renderLogs = this.renderLogs.bind(this);
+    this.state.loopCache = props.loopCache;
+  }
 
-       shouldComponentUpdate(nextProps, nextState) {
-               return this.state.loopCache !== nextState.loopCache;
-       }
+  shouldComponentUpdate(nextProps, nextState) {
+    return this.state.loopCache !== nextState.loopCache;
+  }
 
-       componentWillReceiveProps(newProps) {
-               this.setState({
-                       loopCache: newProps.loopCache
-               });
-       }
+  componentWillReceiveProps(newProps) {
+    this.setState({
+      loopCache: newProps.loopCache
+    });
+  }
 
-       renderLogs() {
-           let logsArray = this.state.loopCache.getLoopLogsArray();
-               if (logsArray != null) {
-                       return (logsArray.map(row => <TableRow key={row.id} logRow={row} />));
-               }
-       }
+  renderLogs() {
+    let logsArray = this.state.loopCache.getLoopLogsArray();
+    if (logsArray != null) {
+      return (logsArray.map(row => <TableRow key={ row.id } logRow={ row }/>));
+    }
+  }
 
-       render() {
-               return (
-                       <LoopLogsHeaderDivStyled>
-                               <label>Loop Logs</label>
-                               <TableStyled striped hover variant responsive>
-                                       <thead>
-                                               <tr>
-                                                       <th><span align="left">Date</span></th>
-                                                       <th><span align="left">Type</span></th>
-                                                       <th><span align="left">Component</span></th>
-                                                       <th><span align="right">Log</span></th>
-                                               </tr>
-                                       </thead>
-                                       <tbody>
-                                               {this.renderLogs()}
-                                       </tbody>
-                               </TableStyled>
-                       </LoopLogsHeaderDivStyled>
+  render() {
+    return (
+      <LoopLogsHeaderDivStyled>
+        <label>Loop Logs</label>
+        <TableStyled striped hover variant responsive>
+          <thead>
+          <tr>
+            <th><span align="left">Date</span></th>
+            <th><span align="left">Type</span></th>
+            <th><span align="left">Component</span></th>
+            <th><span align="right">Log</span></th>
+          </tr>
+          </thead>
+          <tbody>
+          { this.renderLogs() }
+          </tbody>
+        </TableStyled>
+      </LoopLogsHeaderDivStyled>
 
-               );
-       }
+    );
+  }
 }
index 3b7fd41..d3a21d8 100644 (file)
@@ -27,44 +27,44 @@ import LoopCache from '../../../api/LoopCache';
 
 describe('Verify LoopLogs', () => {
 
-       const loopCache = new LoopCache({
-               "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
-                       "loopLogs": [
-                       {
-                               "id": 1,
-                               "logType": "INFO",
-                               "logComponent": "CLAMP",
-                               "message": "Operational policies UPDATED",
-                               "logInstant": "2019-07-08T09:44:37Z"
-                       }
-               ]
-       });
+  const loopCache = new LoopCache({
+    "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
+    "loopLogs": [
+      {
+        "id": 1,
+        "logType": "INFO",
+        "logComponent": "CLAMP",
+        "message": "Operational policies UPDATED",
+        "logInstant": "2019-07-08T09:44:37Z"
+      }
+    ]
+  });
 
-       it('Test the render method', () => {
-               const component = shallow(<LoopLogs loopCache={loopCache}/>)
-               expect(component).toMatchSnapshot();
+  it('Test the render method', () => {
+    const component = shallow(<LoopLogs loopCache={ loopCache }/>)
+    expect(component).toMatchSnapshot();
 
-               const loopCacheUpdated = new LoopCache({
-               "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
-                       "loopLogs": [
-                       {
-                               "id": 1,
-                               "logType": "INFO",
-                               "logComponent": "CLAMP",
-                               "message": "Operational policies UPDATED",
-                               "logInstant": "2019-07-08T09:44:37Z"
-                       },
-                       {
-                               "id": 2,
-                               "logType": "INFO",
-                               "logComponent": "CLAMP",
-                               "message": "Operational policies UPDATED",
-                               "logInstant": "2019-07-08T09:44:50Z"
-                       }
-                       ]
-               });
+    const loopCacheUpdated = new LoopCache({
+      "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
+      "loopLogs": [
+        {
+          "id": 1,
+          "logType": "INFO",
+          "logComponent": "CLAMP",
+          "message": "Operational policies UPDATED",
+          "logInstant": "2019-07-08T09:44:37Z"
+        },
+        {
+          "id": 2,
+          "logType": "INFO",
+          "logComponent": "CLAMP",
+          "message": "Operational policies UPDATED",
+          "logInstant": "2019-07-08T09:44:50Z"
+        }
+      ]
+    });
 
-               component.setProps({ loopCache: loopCacheUpdated });
-               expect(component.find('TableRow').length).toEqual(2);
-       });
-});
\ No newline at end of file
+    component.setProps({ loopCache: loopCacheUpdated });
+    expect(component.find('TableRow').length).toEqual(2);
+  });
+});
index 4b35b48..f539ad4 100644 (file)
@@ -26,81 +26,85 @@ import styled from 'styled-components';
 import LoopCache from '../../../api/LoopCache';
 
 const LoopStatusViewDivStyled = 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 TableStyled = styled(Table)`
-    overflow: auto;
+  overflow: auto;
 `
 
 const TableRow = ({ statusRow }) => (
-       <tr>
-               <td>{statusRow.componentName}</td>
-               <td>{statusRow.stateName}</td>
-               <td>{statusRow.description}</td>
-       </tr>
+  <tr>
+    <td>{ statusRow.componentName }</td>
+    <td>{ statusRow.stateName }</td>
+    <td>{ statusRow.description }</td>
+  </tr>
 
 )
 
 export default class LoopStatus extends React.Component {
-       state = {
-               loopCache: new LoopCache({})
-       }
+  state = {
+    loopCache: new LoopCache({})
+  }
 
-       constructor(props) {
-               super(props);
-               this.renderStatus = this.renderStatus.bind(this);
-               this.state.loopCache = props.loopCache;
-       }
+  constructor(props) {
+    super(props);
+    this.renderStatus = this.renderStatus.bind(this);
+    this.state.loopCache = props.loopCache;
+  }
 
 
-       renderStatus() {
-           let componentStates = this.state.loopCache.getComponentStates();
-               if (componentStates != null) {
-                       return Object.keys(componentStates).map((key) => {
-                               console.debug("Adding status for: ",key);
-                               var res={}
-                               res[key]=this.state.loopCache.getComponentStates()[key];
-                               return (<TableRow key={key} statusRow={{'componentName':key,'stateName':this.state.loopCache.getComponentStates()[key].componentState.stateName,'description':this.state.loopCache.getComponentStates()[key].componentState.description}} />)
-                       })
+  renderStatus() {
+    let componentStates = this.state.loopCache.getComponentStates();
+    if (componentStates != null) {
+      return Object.keys(componentStates).map((key) => {
+        console.debug("Adding status for: ", key);
+        var res = {}
+        res[key] = this.state.loopCache.getComponentStates()[key];
+        return (<TableRow key={ key } statusRow={ {
+          'componentName': key,
+          'stateName': this.state.loopCache.getComponentStates()[key].componentState.stateName,
+          'description': this.state.loopCache.getComponentStates()[key].componentState.description
+        } }/>)
+      })
 
-               }
-       }
+    }
+  }
 
-       shouldComponentUpdate(nextProps, nextState) {
-               return this.state.loopCache !== nextState.loopCache;
-       }
+  shouldComponentUpdate(nextProps, nextState) {
+    return this.state.loopCache !== nextState.loopCache;
+  }
 
-       componentWillReceiveProps(newProps) {
-               this.setState({
-                       loopCache: newProps.loopCache
-               });
-       }
+  componentWillReceiveProps(newProps) {
+    this.setState({
+      loopCache: newProps.loopCache
+    });
+  }
 
-       render() {
-               return (
-                       <LoopStatusViewDivStyled>
-                               <label>Loop Status: {this.state.loopCache.getComputedState()}
-                               </label>
+  render() {
+    return (
+      <LoopStatusViewDivStyled>
+        <label>Loop Status: { this.state.loopCache.getComputedState() }
+        </label>
 
-                               <div >
-                                       <TableStyled striped hover variant responsive>
-                                               <thead>
-                                                       <tr>
-                                                               <th><span align="left">Component Name</span></th>
-                                                               <th><span align="left">Component State</span></th>
-                                                               <th><span align="right">Description</span></th>
-                                                       </tr>
-                                               </thead>
-                                               <tbody>
-                                                       {this.renderStatus()}
-                                               </tbody>
-                                       </TableStyled>
-                               </div>
-                       </LoopStatusViewDivStyled>
-               );
-       }
+        <div>
+          <TableStyled striped hover variant responsive>
+            <thead>
+            <tr>
+              <th><span align="left">Component Name</span></th>
+              <th><span align="left">Component State</span></th>
+              <th><span align="right">Description</span></th>
+            </tr>
+            </thead>
+            <tbody>
+            { this.renderStatus() }
+            </tbody>
+          </TableStyled>
+        </div>
+      </LoopStatusViewDivStyled>
+    );
+  }
 }
 
index 8d04487..b84067e 100644 (file)
@@ -27,52 +27,52 @@ import LoopCache from '../../../api/LoopCache';
 
 describe('Verify LoopStatus', () => {
 
-       const loopCache = new LoopCache({
-               "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
-               "lastComputedState": "DESIGN",
-               "components": {
-                       "POLICY": {
-                               "componentState": {
-                                       "stateName": "NOT_SENT",
-                                       "description": "The policies defined have NOT yet been created on the policy engine"
-                               }
-                       },
-                       "DCAE": {
-                               "componentState": {
-                                       "stateName": "BLUEPRINT_DEPLOYED",
-                                       "description": "The DCAE blueprint has been found in the DCAE inventory but not yet instancianted for this loop"
-                               }
-                       }
-               }
-       });
+  const loopCache = new LoopCache({
+    "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
+    "lastComputedState": "DESIGN",
+    "components": {
+      "POLICY": {
+        "componentState": {
+          "stateName": "NOT_SENT",
+          "description": "The policies defined have NOT yet been created on the policy engine"
+        }
+      },
+      "DCAE": {
+        "componentState": {
+          "stateName": "BLUEPRINT_DEPLOYED",
+          "description": "The DCAE blueprint has been found in the DCAE inventory but not yet instancianted for this loop"
+        }
+      }
+    }
+  });
 
-       it('Test the render method', () => {
-               const component = shallow(<LoopStatus loopCache={loopCache}/>)
+  it('Test the render method', () => {
+    const component = shallow(<LoopStatus loopCache={ loopCache }/>)
 
-               expect(component).toMatchSnapshot();
-               
-               const loopCacheUpdated = new LoopCache({
-                       "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
-                       "lastComputedState": "SUBMIT",
-                       "components": {
-                               "POLICY": {
-                                       "componentState": {
-                                               "stateName": "SENT",
-                                               "description": "The policies defined have NOT yet been created on the policy engine"
-                                       }
-                               },
-                               "DCAE": {
-                                       "componentState": {
-                                               "stateName": "BLUEPRINT_DEPLOYED",
-                                               "description": "The DCAE blueprint has been found in the DCAE inventory but not yet instancianted for this loop"
-                                       }
-                               }
-                       }
-               });
-               component.setProps({ loopCache: loopCacheUpdated });
+    expect(component).toMatchSnapshot();
 
-               const forms = component.find('TableRow');
-               expect(forms.get(0).props.statusRow.stateName).toEqual("SENT");
-               expect(component.find('label').text()).toContain('SUBMIT');
-       });
-});
\ No newline at end of file
+    const loopCacheUpdated = new LoopCache({
+      "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
+      "lastComputedState": "SUBMIT",
+      "components": {
+        "POLICY": {
+          "componentState": {
+            "stateName": "SENT",
+            "description": "The policies defined have NOT yet been created on the policy engine"
+          }
+        },
+        "DCAE": {
+          "componentState": {
+            "stateName": "BLUEPRINT_DEPLOYED",
+            "description": "The DCAE blueprint has been found in the DCAE inventory but not yet instancianted for this loop"
+          }
+        }
+      }
+    });
+    component.setProps({ loopCache: loopCacheUpdated });
+
+    const forms = component.find('TableRow');
+    expect(forms.get(0).props.statusRow.stateName).toEqual("SENT");
+    expect(component.find('label').text()).toContain('SUBMIT');
+  });
+});
index 3e96dbf..81117bb 100644 (file)
@@ -26,21 +26,21 @@ import MenuBar from './MenuBar';
 
 describe('Verify MenuBar', () => {
 
-       it('Test the render method', () => {
-               const component = shallow(<MenuBar />)
+  it('Test the render method', () => {
+    const component = shallow(<MenuBar/>)
 
-               expect(component).toMatchSnapshot();
-       });
+    expect(component).toMatchSnapshot();
+  });
 
-       it('Update loopName', () => {
-               const component = shallow(<MenuBar />)
-               component.setProps({ loopName: "newLoop" });
-               expect(component.state('disabled')).toBe(false);
-       });
+  it('Update loopName', () => {
+    const component = shallow(<MenuBar/>)
+    component.setProps({ loopName: "newLoop" });
+    expect(component.state('disabled')).toBe(false);
+  });
 
-       it('Default loopName', () => {
-               const component = shallow(<MenuBar />)
-               component.setProps({ loopName: "Empty (NO loop loaded yet)" });
-               expect(component.state('disabled')).toBe(true);
-       });
+  it('Default loopName', () => {
+    const component = shallow(<MenuBar/>)
+    component.setProps({ loopName: "Empty (NO loop loaded yet)" });
+    expect(component.state('disabled')).toBe(true);
+  });
 });
index dd83096..9baeaee 100644 (file)
@@ -27,12 +27,12 @@ import { Route, MemoryRouter } from 'react-router-dom'
 
 
 const routing = (
-       <MemoryRouter forceRefresh={false}>
-               <Route path="/" component={OnapClamp}/>
-       </MemoryRouter>
+  <MemoryRouter forceRefresh={ false }>
+    <Route path="/" component={ OnapClamp }/>
+  </MemoryRouter>
 );
 
 export var mainClamp = ReactDOM.render(
-       routing,
-       document.getElementById('root')
+  routing,
+  document.getElementById('root')
 )
index 1e316d2..5245aae 100644 (file)
 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;
-       }
+  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;
-       }
+  span {
+    font-family: ${ props => props.theme.fontFamily };
+    font-size: ${ props => props.theme.fontSize };
+    font-weight: bold;
+  }
 
-       a {
-               font-family: ${props => props.theme.fontFamily};
-               font-size: ${props => props.theme.fontSize};
-               font-weight: bold;
-       }
+  a {
+    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;
-               margin-top: 1px;
-       }
+  div {
+    font-family: ${ props => props.theme.fontFamily };
+    font-size: ${ props => props.theme.fontSize };
+    border-radius: 4px;
+    margin-top: 1px;
+  }
 
-       label {
-               font-family: ${props => props.theme.fontFamily};
-               font-size: ${props => props.theme.fontSize};
-               font-weight: bold;
-       }
+  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;
-       }
+  button {
+    font-family: ${ props => props.theme.fontFamily };
+    font-size: ${ props => props.theme.fontSize };
+    font-weight: bold;
+  }
 
 `
 
 export const DefaultClampTheme = {
-       fontDanger: '#eb238e',
-       fontWarning: '#eb238e',
-       fontLight: '#ffffff',
-       fontDark: '#888888',
-       fontHighlight: '#ffff00',
-       fontNormal: 'black',
+  fontDanger: '#eb238e',
+  fontWarning: '#eb238e',
+  fontLight: '#ffffff',
+  fontDark: '#888888',
+  fontHighlight: '#ffff00',
+  fontNormal: 'black',
 
-       backgroundColor: '#eeeeee',
-       fontFamily: 'Arial, Sans-serif',
-       fontSize: '16px',
+  backgroundColor: '#eeeeee',
+  fontFamily: 'Arial, Sans-serif',
+  fontSize: '16px',
 
-       loopViewerBackgroundColor: 'white',
-       loopViewerFontColor: 'yellow',
-       loopViewerHeaderBackgroundColor: '#337ab7',
-       loopViewerHeaderFontColor: 'white',
+  loopViewerBackgroundColor: 'white',
+  loopViewerFontColor: 'yellow',
+  loopViewerHeaderBackgroundColor: '#337ab7',
+  loopViewerHeaderFontColor: 'white',
 
-    loopLogsHeaderBackgroundColor:  'white',
-    loopLogsHeaderFontColor: 'black',
+  loopLogsHeaderBackgroundColor: 'white',
+  loopLogsHeaderFontColor: 'black',
 
-       menuBackgroundColor: 'white',
-       menuFontColor: 'black',
-       menuHighlightedBackgroundColor: '#337ab7',
-       menuHighlightedFontColor: 'white',
+  menuBackgroundColor: 'white',
+  menuFontColor: 'black',
+  menuHighlightedBackgroundColor: '#337ab7',
+  menuHighlightedFontColor: 'white',
 
-       toscaTextareaBackgroundColor: 'white',
-       toscaTextareaFontSize: '13px',
+  toscaTextareaBackgroundColor: 'white',
+  toscaTextareaFontSize: '13px',
 
-       policyEditorBackgroundColor: 'white',
-       policyEditorFontSize: '13px'
+  policyEditorBackgroundColor: 'white',
+  policyEditorFontSize: '13px'
 };
index 5ec19c9..6d95b31 100644 (file)
 
 export default function CsvToJson(rawCsvData, delimiter, internalDelimiter, csvHeaderNames, jsonKeyNames, mandatory) {
 
-       let printDictKeys = '';
-       let result = { jsonObjArray: [], errorMessages: '' };
-
-       // Validate that all parallel arrays passed in have same number of elements;
-       // this would be a developer error.
-
-       let checkLength = csvHeaderNames.length;
-
-       if (checkLength !== jsonKeyNames.length || checkLength !== mandatory.length) {
-               result.errorMessages = 'interanl error: csvHeaderNames, jsonKeyNames, and mandatory arrays parameters are not the same length';
-               return result;
-       }
-
-       if (checkLength < 1) {
-               result.errorMessages = 'interanl error: csvHeaderNames, jsonKeyNames, and mandatory arrays have no entries';
-               return result;
-       }
-
-       // Make a nice string to print in the error case to tell user what is the
-       //  required heaer row format
-
-       for (let i=0; i < csvHeaderNames.length; ++i) {
-               if (i === 0) {
-                       printDictKeys = csvHeaderNames[i];
-               } else {
-                       printDictKeys += ',' +  csvHeaderNames[i];
-               }
-       }
-
-       let dictElems = rawCsvData.split('\n');
-       let numColumns = 0;
-       let filteredDictElems = [];
-
-       // The task of the following loop is to convert raw CSV rows into easily parseable
-       // and streamlined versions of the rows with an internalDelimiter replacing the standard
-       // comma; it is presumed (and checked) that the internalDelimiter cannot exist as a valid
-       // sequence of characters in the user's data.
-
-       // This conversion process also strips leading and trailing whitespace from each row,
-       // discards empty rows, correctly interprets and removes all double quotes that programs like
-       // Excel use to support user columns that contain special characters, most notably, the comma
-       // delimiter. A double-quote that is contained within a double-quoted column value 
-       // must appear in this raw data as a sequence of two double quotes. Furthermore, any column
-       // value in the raw CSV data that does not contain a delimiter may or may not be enclosed in
-       // double quotes. It is the Excel convention to not use double qoutes unless necessary, and
-       // there is no reasonable way to tell Excel to surround every column value with double quotes. 
-       // Any files that were directly "exported" by CLAMP itself from the Managing Dictionaries
-       // capability, surround all columns with double quotes.
-
-       for (let i = 0; i < dictElems.length; i++) {
-
-               let oneRow = dictElems[i].trim();
-               let j = 0;
-               let inQuote = false
-               let nextChar = undefined;
-               let prevChar = null;
-
-               
-               if (oneRow === '') {
-                       continue; // Skip blank rows
-               } else if (oneRow.indexOf(internalDelimiter) !== -1) {
-                       result.errorMessages += '\nRow #' + i + ' contains illegal sequence of characters (' + internalDelimiter + ')';
-                       break;
-               } else {
-                       nextChar = oneRow[1];
-               }
-
-               let newStr = '';
-               numColumns = 1;
-
-               // This "while loop" performs the very meticulous task of removing double quotes that
-               // are used by Excel to encase special characters as user string value data,
-               // and manages to correctly identify columns that are defined with or without
-               // double quotes and to process the comma delimiter correctly when encountered
-               // as a user value within a column. Such a column would have to be encased in
-               // double quotes; a comma found outside double quotes IS a delimiter.
-
-               while (j < oneRow.length) {
-                       if (oneRow[j] === '"') {
-                               if (inQuote === false) {
-                                       if (prevChar !== delimiter && prevChar !== null) {
-                                               result.errorMessages += '\nMismatched double quotes or illegal whitespace around delimiter at row #' + (i + 1) + ' near column #' + numColumns;
-                                               break;
-                                       } else {
-                                               inQuote = true;
-                                       }
-                               } else {
-                                       if (nextChar === '"') {
-                                               newStr += '"';
-                                               ++j;
-                                       } else if ((nextChar !== delimiter) && (nextChar !== undefined)) {
-                                               result.errorMessages += '\nRow #' + (i + 1) + ' is badly formatted at column #' + numColumns + '. Perhaps an unescaped double quote.';
-                                               break;
-                                       } else if (nextChar === delimiter) {
-                                               ++numColumns;
-                                               inQuote = false;
-                                               newStr += internalDelimiter;
-                                               prevChar = delimiter;
-                                               j += 2;
-                                               nextChar = oneRow[j+1];
-                                               continue;
-                                       } else {
-                                               ++numColumns;
-                                               inQuote = false;
-                                               break;
-                                       }
-                               }
-                       } else {
-                               if (oneRow[j] === delimiter && inQuote === false) {
-                                       newStr += internalDelimiter;
-                                       ++numColumns;
-                               } else {
-                                       newStr += oneRow[j];
-                               }
-                       }
-                       prevChar = oneRow[j];
-                       ++j;
-                       nextChar = oneRow[j+1]; // can result in undefined at the end
-               }
-
-               if (result.errorMessages === '' && inQuote !== false) {
-                       result.errorMessages += '\nMismatched double quotes at row #' + (i + 1);
-                       break;
-               } else if (result.errorMessages === '' && numColumns < jsonKeyNames.length) {
-                       result.errorMessages += '\nNot enough columns (' + jsonKeyNames.length + ') at row #' + (i + 1);
-                       break;
-               }
-
-               filteredDictElems.push(newStr);
-       }
-
-       if (result.errorMessages !== '') {
-               return result;
-       }
-
-       // Perform further checks on data that is now in JSON form
-       if (filteredDictElems.length < 2) {
-               result.errorMessages += '\nNot enough row data found in import file. Need at least a header row and one row of data';
-               return result;
-       }
-
-       // Now that we have something reliably parsed into sanitized columns lets run some checks
-       // and convert it all into an array of JSON objects to push to the back end if all the
-       // checks pass.
-
-       let headers = filteredDictElems[0].split(internalDelimiter);
-
-       // check that headers are included in proper order
-       for (let i=0; i < jsonKeyNames.length; ++i) {
-               if (csvHeaderNames[i] !== headers[i]) {
-                       result.errorMessages += 'Row 1 header key at column #' + (i + 1) + ' is a mismatch. Expected row header must contain at least:\n' + printDictKeys; 
-                       return result;
-               }
-       }
-
-       // Convert the ASCII rows of data into an array of JSON obects that omit the header
-       // row which is not sent to the back end.
-
-       for (let i = 1; i < filteredDictElems.length; i++) {
-               let data = filteredDictElems[i].split(internalDelimiter);
-               let obj = {};
-               for (let j = 0; j < data.length && j < jsonKeyNames.length; j++) {
-                       let value = data[j].trim();
-                       if (mandatory[j] === true && value === '') {
-                               result.errorMessages += '\n' + csvHeaderNames[j] + ' at row #' + (i+1) + ' is empty but requires a value.';
-                       }
-                       obj[jsonKeyNames[j]] = value;
-               }
-               result.jsonObjArray.push(obj);
-       }
-
-       if (result.errorMessages !== '') {
-               // If we have errors, return empty parse result even though some things
-               // may have parsed properly. We do not want to encourage the caller
-               // to think the data is good for use.
-               result.jsonObjArray = [];
-       }
-
-       return result;
+  let printDictKeys = '';
+  let result = { jsonObjArray: [], errorMessages: '' };
+
+  // Validate that all parallel arrays passed in have same number of elements;
+  // this would be a developer error.
+
+  let checkLength = csvHeaderNames.length;
+
+  if (checkLength !== jsonKeyNames.length || checkLength !== mandatory.length) {
+    result.errorMessages = 'interanl error: csvHeaderNames, jsonKeyNames, and mandatory arrays parameters are not the same length';
+    return result;
+  }
+
+  if (checkLength < 1) {
+    result.errorMessages = 'interanl error: csvHeaderNames, jsonKeyNames, and mandatory arrays have no entries';
+    return result;
+  }
+
+  // Make a nice string to print in the error case to tell user what is the
+  //  required heaer row format
+
+  for (let i = 0; i < csvHeaderNames.length; ++i) {
+    if (i === 0) {
+      printDictKeys = csvHeaderNames[i];
+    } else {
+      printDictKeys += ',' + csvHeaderNames[i];
+    }
+  }
+
+  let dictElems = rawCsvData.split('\n');
+  let numColumns = 0;
+  let filteredDictElems = [];
+
+  // The task of the following loop is to convert raw CSV rows into easily parseable
+  // and streamlined versions of the rows with an internalDelimiter replacing the standard
+  // comma; it is presumed (and checked) that the internalDelimiter cannot exist as a valid
+  // sequence of characters in the user's data.
+
+  // This conversion process also strips leading and trailing whitespace from each row,
+  // discards empty rows, correctly interprets and removes all double quotes that programs like
+  // Excel use to support user columns that contain special characters, most notably, the comma
+  // delimiter. A double-quote that is contained within a double-quoted column value
+  // must appear in this raw data as a sequence of two double quotes. Furthermore, any column
+  // value in the raw CSV data that does not contain a delimiter may or may not be enclosed in
+  // double quotes. It is the Excel convention to not use double qoutes unless necessary, and
+  // there is no reasonable way to tell Excel to surround every column value with double quotes.
+  // Any files that were directly "exported" by CLAMP itself from the Managing Dictionaries
+  // capability, surround all columns with double quotes.
+
+  for (let i = 0; i < dictElems.length; i++) {
+
+    let oneRow = dictElems[i].trim();
+    let j = 0;
+    let inQuote = false
+    let nextChar = undefined;
+    let prevChar = null;
+
+
+    if (oneRow === '') {
+      continue; // Skip blank rows
+    } else if (oneRow.indexOf(internalDelimiter) !== -1) {
+      result.errorMessages += '\nRow #' + i + ' contains illegal sequence of characters (' + internalDelimiter + ')';
+      break;
+    } else {
+      nextChar = oneRow[1];
+    }
+
+    let newStr = '';
+    numColumns = 1;
+
+    // This "while loop" performs the very meticulous task of removing double quotes that
+    // are used by Excel to encase special characters as user string value data,
+    // and manages to correctly identify columns that are defined with or without
+    // double quotes and to process the comma delimiter correctly when encountered
+    // as a user value within a column. Such a column would have to be encased in
+    // double quotes; a comma found outside double quotes IS a delimiter.
+
+    while (j < oneRow.length) {
+      if (oneRow[j] === '"') {
+        if (inQuote === false) {
+          if (prevChar !== delimiter && prevChar !== null) {
+            result.errorMessages += '\nMismatched double quotes or illegal whitespace around delimiter at row #' + (i + 1) + ' near column #' + numColumns;
+            break;
+          } else {
+            inQuote = true;
+          }
+        } else {
+          if (nextChar === '"') {
+            newStr += '"';
+            ++j;
+          } else if ((nextChar !== delimiter) && (nextChar !== undefined)) {
+            result.errorMessages += '\nRow #' + (i + 1) + ' is badly formatted at column #' + numColumns + '. Perhaps an unescaped double quote.';
+            break;
+          } else if (nextChar === delimiter) {
+            ++numColumns;
+            inQuote = false;
+            newStr += internalDelimiter;
+            prevChar = delimiter;
+            j += 2;
+            nextChar = oneRow[j + 1];
+            continue;
+          } else {
+            ++numColumns;
+            inQuote = false;
+            break;
+          }
+        }
+      } else {
+        if (oneRow[j] === delimiter && inQuote === false) {
+          newStr += internalDelimiter;
+          ++numColumns;
+        } else {
+          newStr += oneRow[j];
+        }
+      }
+      prevChar = oneRow[j];
+      ++j;
+      nextChar = oneRow[j + 1]; // can result in undefined at the end
+    }
+
+    if (result.errorMessages === '' && inQuote !== false) {
+      result.errorMessages += '\nMismatched double quotes at row #' + (i + 1);
+      break;
+    } else if (result.errorMessages === '' && numColumns < jsonKeyNames.length) {
+      result.errorMessages += '\nNot enough columns (' + jsonKeyNames.length + ') at row #' + (i + 1);
+      break;
+    }
+
+    filteredDictElems.push(newStr);
+  }
+
+  if (result.errorMessages !== '') {
+    return result;
+  }
+
+  // Perform further checks on data that is now in JSON form
+  if (filteredDictElems.length < 2) {
+    result.errorMessages += '\nNot enough row data found in import file. Need at least a header row and one row of data';
+    return result;
+  }
+
+  // Now that we have something reliably parsed into sanitized columns lets run some checks
+  // and convert it all into an array of JSON objects to push to the back end if all the
+  // checks pass.
+
+  let headers = filteredDictElems[0].split(internalDelimiter);
+
+  // check that headers are included in proper order
+  for (let i = 0; i < jsonKeyNames.length; ++i) {
+    if (csvHeaderNames[i] !== headers[i]) {
+      result.errorMessages += 'Row 1 header key at column #' + (i + 1) + ' is a mismatch. Expected row header must contain at least:\n' + printDictKeys;
+      return result;
+    }
+  }
+
+  // Convert the ASCII rows of data into an array of JSON obects that omit the header
+  // row which is not sent to the back end.
+
+  for (let i = 1; i < filteredDictElems.length; i++) {
+    let data = filteredDictElems[i].split(internalDelimiter);
+    let obj = {};
+    for (let j = 0; j < data.length && j < jsonKeyNames.length; j++) {
+      let value = data[j].trim();
+      if (mandatory[j] === true && value === '') {
+        result.errorMessages += '\n' + csvHeaderNames[j] + ' at row #' + (i + 1) + ' is empty but requires a value.';
+      }
+      obj[jsonKeyNames[j]] = value;
+    }
+    result.jsonObjArray.push(obj);
+  }
+
+  if (result.errorMessages !== '') {
+    // If we have errors, return empty parse result even though some things
+    // may have parsed properly. We do not want to encourage the caller
+    // to think the data is good for use.
+    result.jsonObjArray = [];
+  }
+
+  return result;
 }
index 88fa7a4..e36e855 100644 (file)
@@ -25,244 +25,244 @@ import CsvToJson from './CsvToJson'
 
 describe('Verify CsvToJson', () => {
 
-       const hdrNames= [ 
-               "Element Short Name",
-               "Element Name",
-               "Element Description",
-               "Element Type",
-               "Sub-Dictionary"
-       ];
-
-       const jsonKeyNames = [
-               "shortName",
-               "name",
-               "description",
-               "type",
-               "subDictionary"
-       ];
-
-       const mandatory = [ true, true, true, true, false ];
-
-       it('Test CsvToJson No Error Case, Quoted Columns', () => {
-
-               let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
-               rawCsv += '"alertType","Alert Type","Type of Alert","string","","admin","2020-06-11T13:56:14.927437Z"';
-                               
-               let expectedResult = {
-                        errorMessages: '',
-                        jsonObjArray: [
-                               {
-                                       description: "Type of Alert",
-                                       name: "Alert Type",
-                                       shortName: "alertType",
-                                       subDictionary: "",
-                                       type: "string"
-                               }
-                       ]
-               };
-
-               expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult);
-       });
-
-       it('Test CsvToJson No Error Case, Unquoted Columns', () => {
-
-               let rawCsv = 'Element Short Name,Element Name,Element Description,Element Type,Sub-Dictionary\n';
-               rawCsv += 'alertType,Alert Type,Type of Alert,string,,admin,2020-06-11T13:56:14.927437Z';
-                               
-               let expectedResult = {
-                        errorMessages: '',
-                        jsonObjArray: [
-                               {
-                                       description: "Type of Alert",
-                                       name: "Alert Type",
-                                       shortName: "alertType",
-                                       subDictionary: "",
-                                       type: "string"
-                               }
-                       ]
-               };
-
-               expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult);
-       });
-
-       it('Test CsvToJson Properly Escaped Double Quote and Delimiter', () => {
-
-               let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
-               rawCsv += '"alertType","Alert ""Type""","Type of Alert, Varies","string","","admin","2020-06-11T13:56:14.927437Z"';
-               
-               let errorMessage = '';
-                               
-               let expectedResult = {
-                       errorMessages: errorMessage,
-                       jsonObjArray: [
-                               {
-                                       description: "Type of Alert, Varies",
-                                       name: 'Alert "Type"',
-                                       shortName: 'alertType',
-                                       subDictionary: "",
-                                       type: "string",
-                               }
-
-                       ]
-               };
-
-               expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult);
-       });
-
-
-       it('Test CsvToJson Error Header Mismatch Error Case', () => {
-
-               let rawCsv = '"Element Short Names","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
-               rawCsv += '"alertType","Alert Type","Type of Alert","string","","admin","2020-06-11T13:56:14.927437Z"';
-               
-               let errorMessage = 'Row 1 header key at column #1 is a mismatch. Expected row header must contain at least:\n';
-               errorMessage += 'Element Short Name,Element Name,Element Description,Element Type,Sub-Dictionary';
-                               
-               let expectedResult = {
-                        errorMessages: errorMessage,
-                        jsonObjArray: []
-               };
-
-               expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult);
-       });
-
-       it('Test CsvToJson Error Mismatched Double Quotes in Column', () => {
-
-               let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
-               rawCsv += '"alert"Type","Alert Type","Type of Alert","string","","admin","2020-06-11T13:56:14.927437Z"';
-               
-               let errorMessage = '\nRow #2 is badly formatted at column #1. Perhaps an unescaped double quote.'
-                               
-               let expectedResult = {
-                        errorMessages: errorMessage,
-                        jsonObjArray: []
-               };
-
-               expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult);
-       });
-
-       it('Test CsvToJson Error Illegal Whitespace', () => {
-
-               let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
-               rawCsv += 'alertType ,  "Alert Type","Type of Alert","string","","admin","2020-06-11T13:56:14.927437Z"';
-               
-               let errorMessage = '\nMismatched double quotes or illegal whitespace around delimiter at row #2 near column #2';
-                               
-               let expectedResult = {
-                        errorMessages: errorMessage,
-                        jsonObjArray: []
-               };
-
-               expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult);
-       });
-
-       it('Test CsvToJson Error Too Few Data Columns', () => {
-
-               let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
-               rawCsv += '"alertType","Alert Type","Type of Alert"';
-               
-               let errorMessage = '\nNot enough columns (5) at row #2';
-                               
-               let expectedResult = {
-                       errorMessages: errorMessage,
-                       jsonObjArray: []
-               };
-
-               expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult);
-       });
-
-       it('Test CsvToJson Error Wrong Header Column Order', () => {
-
-               let rawCsv = '"Element Name","Element Short Name","Element Description","Element Type","Sub-Dictionary"\n';
-               rawCsv += '"alertType","Alert Type","Type of Alert","string","","admin","2020-06-11T13:56:14.927437Z"';
-               
-               let errorMessage = 'Row 1 header key at column #1 is a mismatch. Expected row header must contain at least:\n';
-               errorMessage += 'Element Short Name,Element Name,Element Description,Element Type,Sub-Dictionary';
-                               
-               let expectedResult = {
-                       errorMessages: errorMessage,
-                       jsonObjArray: []
-               };
-
-               expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult);
-       });
-
-       it('Test CsvToJson Error Not Enough Rows', () => {
-
-               let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
-               
-               let errorMessage = '\nNot enough row data found in import file. Need at least a header row and one row of data';
-                               
-               let expectedResult = {
-                       errorMessages: errorMessage,
-                       jsonObjArray: []
-               };
-
-               expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult);
-       });
-
-       it('Test CsvToJson Error Mandatory Field Is Empty', () => {
-
-               let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
-               rawCsv += '"","Alert Type","Type of Alert","string","","admin","2020-06-11T13:56:14.927437Z"';
-                               
-               let expectedResult = {
-                        errorMessages: '\nElement Short Name at row #2 is empty but requires a value.',
-                        jsonObjArray: []
-               };
-
-               expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult);
-       });
-
-       it('Test CsvToJson Error Mismatched Double Quotes At End', () => {
-
-               let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
-               rawCsv += '"alertType","Alert Type","Alert Type Description","string","admin","2020-06-11T13:56:14.927437Z';
-                               
-               let expectedResult = {
-                        errorMessages: '\nMismatched double quotes at row #2',
-                        jsonObjArray: []
-               };
-
-               expect(CsvToJson(rawCsv, ',', '||', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult);
-       });
-
-       it('Test CsvToJson Error Mismatched Mandatory Array Parameters', () => {
-
-               let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
-               rawCsv += '"alertType","Alert Type","Alert Type Description","string","admin","2020-06-11T13:56:14.927437Z';
-                               
-               let expectedResult = {
-                        errorMessages: 'interanl error: csvHeaderNames, jsonKeyNames, and mandatory arrays parameters are not the same length',
-                        jsonObjArray: []
-               };
-
-               expect(CsvToJson(rawCsv, ',', '||', hdrNames, jsonKeyNames, [ true ])).toEqual(expectedResult);
-       });
-
-       it('Test CsvToJson Error Empty Mandatory Array Parameters', () => {
-
-               let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
-               rawCsv += '"alertType","Alert Type","Alert Type Description","string","admin","2020-06-11T13:56:14.927437Z';
-                               
-               let expectedResult = {
-                        errorMessages: 'interanl error: csvHeaderNames, jsonKeyNames, and mandatory arrays have no entries',
-                        jsonObjArray: []
-               };
-
-               expect(CsvToJson(rawCsv, ',', '||', [], [], [])).toEqual(expectedResult);
-       });
-
-       it('Test CsvToJson Error Illegal Data Contains Internal Delimiter', () => {
-
-               let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
-               rawCsv += '"alertType","Alert Type","Alert Type||Description","string","admin","2020-06-11T13:56:14.927437Z';
-
-               let expectedResult = {
-                        errorMessages: '\nRow #1 contains illegal sequence of characters (||)',
-                        jsonObjArray: []
-               };
-
-               expect(CsvToJson(rawCsv, ',', '||', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult);
-       });
+  const hdrNames = [
+    "Element Short Name",
+    "Element Name",
+    "Element Description",
+    "Element Type",
+    "Sub-Dictionary"
+  ];
+
+  const jsonKeyNames = [
+    "shortName",
+    "name",
+    "description",
+    "type",
+    "subDictionary"
+  ];
+
+  const mandatory = [true, true, true, true, false];
+
+  it('Test CsvToJson No Error Case, Quoted Columns', () => {
+
+    let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
+    rawCsv += '"alertType","Alert Type","Type of Alert","string","","admin","2020-06-11T13:56:14.927437Z"';
+
+    let expectedResult = {
+      errorMessages: '',
+      jsonObjArray: [
+        {
+          description: "Type of Alert",
+          name: "Alert Type",
+          shortName: "alertType",
+          subDictionary: "",
+          type: "string"
+        }
+      ]
+    };
+
+    expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult);
+  });
+
+  it('Test CsvToJson No Error Case, Unquoted Columns', () => {
+
+    let rawCsv = 'Element Short Name,Element Name,Element Description,Element Type,Sub-Dictionary\n';
+    rawCsv += 'alertType,Alert Type,Type of Alert,string,,admin,2020-06-11T13:56:14.927437Z';
+
+    let expectedResult = {
+      errorMessages: '',
+      jsonObjArray: [
+        {
+          description: "Type of Alert",
+          name: "Alert Type",
+          shortName: "alertType",
+          subDictionary: "",
+          type: "string"
+        }
+      ]
+    };
+
+    expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult);
+  });
+
+  it('Test CsvToJson Properly Escaped Double Quote and Delimiter', () => {
+
+    let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
+    rawCsv += '"alertType","Alert ""Type""","Type of Alert, Varies","string","","admin","2020-06-11T13:56:14.927437Z"';
+
+    let errorMessage = '';
+
+    let expectedResult = {
+      errorMessages: errorMessage,
+      jsonObjArray: [
+        {
+          description: "Type of Alert, Varies",
+          name: 'Alert "Type"',
+          shortName: 'alertType',
+          subDictionary: "",
+          type: "string",
+        }
+
+      ]
+    };
+
+    expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult);
+  });
+
+
+  it('Test CsvToJson Error Header Mismatch Error Case', () => {
+
+    let rawCsv = '"Element Short Names","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
+    rawCsv += '"alertType","Alert Type","Type of Alert","string","","admin","2020-06-11T13:56:14.927437Z"';
+
+    let errorMessage = 'Row 1 header key at column #1 is a mismatch. Expected row header must contain at least:\n';
+    errorMessage += 'Element Short Name,Element Name,Element Description,Element Type,Sub-Dictionary';
+
+    let expectedResult = {
+      errorMessages: errorMessage,
+      jsonObjArray: []
+    };
+
+    expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult);
+  });
+
+  it('Test CsvToJson Error Mismatched Double Quotes in Column', () => {
+
+    let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
+    rawCsv += '"alert"Type","Alert Type","Type of Alert","string","","admin","2020-06-11T13:56:14.927437Z"';
+
+    let errorMessage = '\nRow #2 is badly formatted at column #1. Perhaps an unescaped double quote.'
+
+    let expectedResult = {
+      errorMessages: errorMessage,
+      jsonObjArray: []
+    };
+
+    expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult);
+  });
+
+  it('Test CsvToJson Error Illegal Whitespace', () => {
+
+    let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
+    rawCsv += 'alertType ,  "Alert Type","Type of Alert","string","","admin","2020-06-11T13:56:14.927437Z"';
+
+    let errorMessage = '\nMismatched double quotes or illegal whitespace around delimiter at row #2 near column #2';
+
+    let expectedResult = {
+      errorMessages: errorMessage,
+      jsonObjArray: []
+    };
+
+    expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult);
+  });
+
+  it('Test CsvToJson Error Too Few Data Columns', () => {
+
+    let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
+    rawCsv += '"alertType","Alert Type","Type of Alert"';
+
+    let errorMessage = '\nNot enough columns (5) at row #2';
+
+    let expectedResult = {
+      errorMessages: errorMessage,
+      jsonObjArray: []
+    };
+
+    expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult);
+  });
+
+  it('Test CsvToJson Error Wrong Header Column Order', () => {
+
+    let rawCsv = '"Element Name","Element Short Name","Element Description","Element Type","Sub-Dictionary"\n';
+    rawCsv += '"alertType","Alert Type","Type of Alert","string","","admin","2020-06-11T13:56:14.927437Z"';
+
+    let errorMessage = 'Row 1 header key at column #1 is a mismatch. Expected row header must contain at least:\n';
+    errorMessage += 'Element Short Name,Element Name,Element Description,Element Type,Sub-Dictionary';
+
+    let expectedResult = {
+      errorMessages: errorMessage,
+      jsonObjArray: []
+    };
+
+    expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult);
+  });
+
+  it('Test CsvToJson Error Not Enough Rows', () => {
+
+    let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
+
+    let errorMessage = '\nNot enough row data found in import file. Need at least a header row and one row of data';
+
+    let expectedResult = {
+      errorMessages: errorMessage,
+      jsonObjArray: []
+    };
+
+    expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult);
+  });
+
+  it('Test CsvToJson Error Mandatory Field Is Empty', () => {
+
+    let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
+    rawCsv += '"","Alert Type","Type of Alert","string","","admin","2020-06-11T13:56:14.927437Z"';
+
+    let expectedResult = {
+      errorMessages: '\nElement Short Name at row #2 is empty but requires a value.',
+      jsonObjArray: []
+    };
+
+    expect(CsvToJson(rawCsv, ',', '|', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult);
+  });
+
+  it('Test CsvToJson Error Mismatched Double Quotes At End', () => {
+
+    let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
+    rawCsv += '"alertType","Alert Type","Alert Type Description","string","admin","2020-06-11T13:56:14.927437Z';
+
+    let expectedResult = {
+      errorMessages: '\nMismatched double quotes at row #2',
+      jsonObjArray: []
+    };
+
+    expect(CsvToJson(rawCsv, ',', '||', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult);
+  });
+
+  it('Test CsvToJson Error Mismatched Mandatory Array Parameters', () => {
+
+    let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
+    rawCsv += '"alertType","Alert Type","Alert Type Description","string","admin","2020-06-11T13:56:14.927437Z';
+
+    let expectedResult = {
+      errorMessages: 'interanl error: csvHeaderNames, jsonKeyNames, and mandatory arrays parameters are not the same length',
+      jsonObjArray: []
+    };
+
+    expect(CsvToJson(rawCsv, ',', '||', hdrNames, jsonKeyNames, [true])).toEqual(expectedResult);
+  });
+
+  it('Test CsvToJson Error Empty Mandatory Array Parameters', () => {
+
+    let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
+    rawCsv += '"alertType","Alert Type","Alert Type Description","string","admin","2020-06-11T13:56:14.927437Z';
+
+    let expectedResult = {
+      errorMessages: 'interanl error: csvHeaderNames, jsonKeyNames, and mandatory arrays have no entries',
+      jsonObjArray: []
+    };
+
+    expect(CsvToJson(rawCsv, ',', '||', [], [], [])).toEqual(expectedResult);
+  });
+
+  it('Test CsvToJson Error Illegal Data Contains Internal Delimiter', () => {
+
+    let rawCsv = '"Element Short Name","Element Name","Element Description","Element Type","Sub-Dictionary"\n';
+    rawCsv += '"alertType","Alert Type","Alert Type||Description","string","admin","2020-06-11T13:56:14.927437Z';
+
+    let expectedResult = {
+      errorMessages: '\nRow #1 contains illegal sequence of characters (||)',
+      jsonObjArray: []
+    };
+
+    expect(CsvToJson(rawCsv, ',', '||', hdrNames, jsonKeyNames, mandatory)).toEqual(expectedResult);
+  });
 })
index 8460340..c5b96d4 100644 (file)
@@ -24,9 +24,9 @@
 // Maintain a list of ONAP CLAMP UI "constants" that can be used by any componenet within CLAMP
 
 const OnapConstants = {
-       defaultLoopName: "Empty (NO loop loaded yet)",
-       microServiceType: "MICRO-SERVICE-POLICY",
-       operationalPolicyType: "OPERATIONAL_POLICY_TYPE"
+  defaultLoopName: "Empty (NO loop loaded yet)",
+  microServiceType: "MICRO-SERVICE-POLICY",
+  operationalPolicyType: "OPERATIONAL_POLICY_TYPE"
 };
 
 export default OnapConstants;
index 316a0d6..9ba9382 100644 (file)
 
 export default class OnapUtils {
 
-       constructor() {
-               this.clickBlocked = false;
-       }
+  constructor() {
+    this.clickBlocked = false;
+  }
 
-       static jsonEditorErrorFormatter(errors) {
+  static jsonEditorErrorFormatter(errors) {
 
-               let messages = [];
-               let messagesOutputString = null;
+    let messages = [];
+    let messagesOutputString = null;
 
-               // errors is an array of JSON Editor "error" objects, where each
-               // object looks like this:
+    // errors is an array of JSON Editor "error" objects, where each
+    // object looks like this:
 
-               //      {
-               //              message: "Please populate the required property "Threshold""
-               //              path: "root.signatures.0"
-               //              property: "required"
-               //      }
+    // {
+    //   message: "Please populate the required property "Threshold""
+    //   path: "root.signatures.0"
+    //   property: "required"
+    // }
 
-               // In this function we concatenate all the messages, removing any duplicates,
-               // and adding a newline between each message. The result returned is a single
-               // string that can be displayed to the user in an alert message
+    // In this function we concatenate all the messages, removing any duplicates,
+    // and adding a newline between each message. The result returned is a single
+    // string that can be displayed to the user in an alert message
 
-               if (!Array.isArray(errors)) {
-                       console.error('jsoneEditorErrorFormatter was passed a non-array argument');
-               } else {
-                       for (let ii=0; ii < errors.length; ++ii) {
-                               if (!messages.includes(errors[ii].message)) {
-                                       messages.push(errors[ii].message);
-                                       if (messagesOutputString) {
-                                               messagesOutputString += '\n' + errors[ii].message;
-                                       } else {
-                                               messagesOutputString = errors[ii].message;
-                                       }
-                               }
-                       }
-               }
+    if (!Array.isArray(errors)) {
+      console.error('jsoneEditorErrorFormatter was passed a non-array argument');
+    } else {
+      for (let ii = 0; ii < errors.length; ++ii) {
+        if (!messages.includes(errors[ii].message)) {
+          messages.push(errors[ii].message);
+          if (messagesOutputString) {
+            messagesOutputString += '\n' + errors[ii].message;
+          } else {
+            messagesOutputString = errors[ii].message;
+          }
+        }
+      }
+    }
 
-               return messagesOutputString;
-       }
+    return messagesOutputString;
+  }
 }