Merge "Remove Clamp GUI from Clamp Repo"

79 files changed, 0 insertions, 12889 deletions

diff --git a/runtime/ui-react/src/LoopUI.js b/runtime/ui-react/src/LoopUI.js
deleted file mode 100644
index 8dc3bdb03..000000000
--- a/runtime/ui-react/src/LoopUI.js
+++ /dev/null
@@ -1,419 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019, 2021 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-
-import React from 'react';
-import styled from 'styled-components';
-import MenuBar from './components/menu/MenuBar';
-import Navbar from 'react-bootstrap/Navbar';
-import logo from './logo.png';
-import { GlobalClampStyle } from './theme/globalStyle.js';
-import OnapConstants from './utils/OnapConstants';
-
-import SvgGenerator from './components/loop_viewer/svg/SvgGenerator';
-import LoopLogs from './components/loop_viewer/logs/LoopLogs';
-import LoopStatus from './components/loop_viewer/status/LoopStatus';
-import UserService from './api/UserService';
-import LoopCache from './api/LoopCache';
-import LoopActionService from './api/LoopActionService';
-
-import { Route } from 'react-router-dom'
-import CreateLoopModal from './components/dialogs/Loop/CreateLoopModal';
-import OpenLoopModal from './components/dialogs/Loop/OpenLoopModal';
-import ModifyLoopModal from './components/dialogs/Loop/ModifyLoopModal';
-import PolicyModal from './components/dialogs/Policy/PolicyModal';
-import ViewAllPolicies from './components/dialogs/Policy/ViewAllPolicies';
-import LoopPropertiesModal from './components/dialogs/Loop/LoopPropertiesModal';
-import UserInfoModal from './components/dialogs/UserInfoModal';
-import LoopService from './api/LoopService';
-import ViewLoopTemplatesModal from './components/dialogs/Tosca/ViewLoopTemplatesModal';
-import ManageDictionaries from './components/dialogs/ManageDictionaries/ManageDictionaries';
-import PerformAction from './components/dialogs/PerformActions';
-import RefreshStatus from './components/dialogs/RefreshStatus';
-import DeployLoopModal from './components/dialogs/Loop/DeployLoopModal';
-import Alert from 'react-bootstrap/Alert';
-import Spinner from 'react-bootstrap/Spinner';
-
-import { Link } from 'react-router-dom';
-
-const StyledMainDiv = styled.div`
-    background-color: ${props => props.theme.backgroundColor};
-`
-
-const StyledSpinnerDiv = styled.div`
-    justify-content: center !important;
-    display: flex !important;
-`;
-
-const ProjectNameStyled = styled.a`
-    vertical-align: middle;
-    padding-left: 30px;
-    font-size: 36px;
-    font-weight: bold;
-`
-
-const StyledRouterLink = styled(Link)`
-    color: ${props => props.theme.menuFontColor};
-    background-color: ${props => props.theme.backgroundColor};
-`
-
-const StyledLoginInfo = styled.a`
-    color: ${props => props.theme.menuFontColor};
-    background-color: ${props => props.theme.backgroundColor};
-`
-
-const LoopViewDivStyled = styled.div`
-    height: 100%;
-    overflow: hidden;
-    margin-left: 10px;
-    margin-right: 10px;
-    margin-bottom: 10px;
-    color: ${props => props.theme.loopViewerFontColor};
-    background-color: ${props => props.theme.loopViewerBackgroundColor};
-    border: 1px solid transparent;
-    border-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
-`
-
-const LoopViewHeaderDivStyled = styled.div`
-    background-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
-    padding: 10px 10px;
-    color: ${props => props.theme.loopViewerHeaderFontColor};
-`
-
-const LoopViewBodyDivStyled = styled.div`
-    background-color: ${props => (props.theme.loopViewerBackgroundColor)};
-    padding: 10px 10px;
-    color: ${props => (props.theme.loopViewerHeaderFontColor)};
-    height: 95%;
-`
-
-export default class LoopUI extends React.Component {
-
-    state = {
-        userName: null,
-        loopName: OnapConstants.defaultLoopName,
-        loopCache: new LoopCache({}),
-        showSucAlert: false,
-        showFailAlert: false,
-        busyLoadingCount: 0
-    };
-
-    constructor() {
-        super();
-        this.getUser = this.getUser.bind(this);
-        this.updateLoopCache = this.updateLoopCache.bind(this);
-        this.loadLoop = this.loadLoop.bind(this);
-        this.closeLoop = this.closeLoop.bind(this);
-        this.showSucAlert =  this.showSucAlert.bind(this);
-        this.showFailAlert =  this.showFailAlert.bind(this);
-        this.disableAlert =  this.disableAlert.bind(this);
-        this.setBusyLoading = this.setBusyLoading.bind(this);
-        this.clearBusyLoading = this.clearBusyLoading.bind(this);
-        this.isBusyLoading = this.isBusyLoading.bind(this);
-        this.renderGlobalStyle = this.renderGlobalStyle.bind(this);
-        this.renderSvg = this.renderSvg.bind(this);
-    }
-
-    componentWillMount() {
-        this.getUser();
-    }
-
-    getUser() {
-        UserService.login().then(user => {
-            this.setState({ userName: user })
-        });
-    }
-
-    renderMenuNavBar() {
-        return (
-            <MenuBar loopName={this.state.loopName}/>
-        );
-    }
-
-    renderUserLoggedNavBar() {
-        return (
-            <Navbar.Text>
-            <StyledLoginInfo>Signed in as: </StyledLoginInfo>
-                <StyledRouterLink to="/userInfo">{this.state.userName}</StyledRouterLink>
-            </Navbar.Text>
-        );
-    }
-
-    renderLogoNavBar() {
-        return (
-            <Navbar.Brand>
-                <img height="50px" width="234px" src={logo} alt="" />
-                <ProjectNameStyled>CLAMP</ProjectNameStyled>
-            </Navbar.Brand>
-        );
-    }
-
-    renderAlertBar() {
-        return (
-            <div>
-                <Alert variant="success" show={this.state.showSucAlert} onClose={this.disableAlert} dismissible>
-                    {this.state.showMessage}
-                </Alert>
-                <Alert variant="danger" show={this.state.showFailAlert} onClose={this.disableAlert} dismissible>
-                    {this.state.showMessage}
-                </Alert>
-            </div>
-        );
-    }
-
-    renderNavBar() {
-        return (
-            <Navbar >
-                {this.renderLogoNavBar()}
-                <Navbar.Toggle aria-controls="responsive-navbar-nav" />
-                {this.renderMenuNavBar()}
-                {this.renderUserLoggedNavBar()}
-            </Navbar>
-        );
-    }
-
-    renderLoopViewHeader() {
-        return (
-            <LoopViewHeaderDivStyled>
-                Loop Viewer - {this.state.loopName} - ({this.state.loopCache.getTemplateName()})
-            </LoopViewHeaderDivStyled>
-        );
-    }
-
-    renderSvg() {
-        return (
-            <SvgGenerator loopCache={this.state.loopCache} clickable={true} generatedFrom={SvgGenerator.GENERATED_FROM_INSTANCE} isBusyLoading={this.isBusyLoading}/>
-        )
-    }
-    renderLoopViewBody() {
-        return (
-            <LoopViewBodyDivStyled>
-                {this.renderSvg()}
-                <LoopStatus loopCache={this.state.loopCache}/>
-                <LoopLogs loopCache={this.state.loopCache} />
-            </LoopViewBodyDivStyled>
-        );
-    }
-
-    getLoopCache() {
-        return this.state.loopCache;
-
-    }
-
-    renderLoopViewer() {
-        return (
-            <LoopViewDivStyled>
-                {this.renderLoopViewHeader()}
-                {this.renderLoopViewBody()}
-            </LoopViewDivStyled>
-        );
-    }
-
-    updateLoopCache(loopJson) {
-
-        // If call with an empty object for loopJson, this is a reset to empty
-        // from someplace like PerformActions for the case where we are "deleting"
-        // a Control Loop model. Set the loopName to the default.
-
-        if (loopJson === null) {
-            this.setState({ loopName: OnapConstants.defaultLoopName });
-            this.setState({ loopCache: new LoopCache({}) });
-        } else {
-            this.setState({ loopCache: new LoopCache(loopJson) });
-            this.setState({ loopName: this.state.loopCache.getLoopName() });
-        }
-        console.info(this.state.loopName+" loop loaded successfully");
-        }
-
-    showSucAlert(message) {
-        this.setState ({ showSucAlert: true, showMessage:message });
-    }
-
-    showFailAlert(message) {
-        this.setState ({ showFailAlert: true, showMessage:message });
-    }
-
-    disableAlert() {
-        this.setState ({ showSucAlert: false, showFailAlert: false });
-    }
-
-    loadLoop(loopName) {
-        this.setBusyLoading();
-        LoopService.getLoop(loopName).then(loop => {
-            console.debug("Updating loopCache");
-            LoopActionService.refreshStatus(loopName).then(data => {
-                this.updateLoopCache(data);
-                this.clearBusyLoading();
-                this.props.history.push('/');
-            })
-            .catch(error => {
-                this.updateLoopCache(loop);
-                this.clearBusyLoading();
-                this.props.history.push('/');
-            });
-        });
-    }
-
-    setBusyLoading() {
-        this.setState((state,props) => ({ busyLoadingCount: ++state.busyLoadingCount }));
-    }
-
-    clearBusyLoading() {
-        this.setState((state,props) => ({ busyLoadingCount: --state.busyLoadingCount }));
-    }
-
-    isBusyLoading() {
-        if (this.state.busyLoadingCount === 0) {
-            return false;
-        } else {
-            return true;
-        }
-    }
-
-    closeLoop() {
-        this.setState({ loopCache: new LoopCache({}), loopName: OnapConstants.defaultLoopName });
-        this.props.history.push('/');
-    }
-
-    renderRoutes() {
-        return(
-            <React.Fragment>
-                <Route path="/viewLoopTemplatesModal" render={(routeProps) => (<ViewLoopTemplatesModal {...routeProps} />)} />
-                <Route path="/manageDictionaries" render={(routeProps) => (<ManageDictionaries {...routeProps} />)} />
-                <Route path="/viewAllPolicies" render={(routeProps) => (<ViewAllPolicies {...routeProps} />)} />
-                <Route path="/policyModal/:policyInstanceType/:policyName" render={(routeProps) => (<PolicyModal {...routeProps}
-                    loopCache={this.getLoopCache()}
-                    loadLoopFunction={this.loadLoop}/>)}
-                />
-                <Route path="/createLoop" render={(routeProps) => (<CreateLoopModal {...routeProps}
-                    loadLoopFunction={this.loadLoop} />)}
-                />
-                <Route path="/openLoop" render={(routeProps) => (<OpenLoopModal {...routeProps}
-                    loadLoopFunction={this.loadLoop} />)}
-                />
-                <Route path="/loopProperties" render={(routeProps) => (<LoopPropertiesModal {...routeProps}
-                    loopCache={this.getLoopCache()}
-                    loadLoopFunction={this.loadLoop}/>)}
-                />
-                <Route path="/modifyLoop" render={(routeProps) => (<ModifyLoopModal {...routeProps}
-                    loopCache={this.getLoopCache()}
-                    loadLoopFunction={this.loadLoop}/>)}
-                />
-
-                <Route path="/userInfo" render={(routeProps) => (<UserInfoModal {...routeProps} />)} />
-                <Route path="/closeLoop" render={this.closeLoop} />
-
-                <Route path="/submit" render={(routeProps) => (<PerformAction {...routeProps}
-                    loopAction="submit"
-                    loopCache={this.getLoopCache()}
-                    updateLoopFunction={this.updateLoopCache}
-                    showSucAlert={this.showSucAlert}
-                    showFailAlert={this.showFailAlert}
-                    setBusyLoading={this.setBusyLoading}
-                    clearBusyLoading={this.clearBusyLoading}/>)}
-                />
-                <Route path="/stop" render={(routeProps) => (<PerformAction {...routeProps}
-                    loopAction="stop"
-                    loopCache={this.getLoopCache()}
-                    updateLoopFunction={this.updateLoopCache}
-                    showSucAlert={this.showSucAlert}
-                    showFailAlert={this.showFailAlert}
-                    setBusyLoading={this.setBusyLoading}
-                    clearBusyLoading={this.clearBusyLoading}/>)}
-                />
-                <Route path="/restart" render={(routeProps) => (<PerformAction {...routeProps}
-                    loopAction="restart"
-                    loopCache={this.getLoopCache()}
-                    updateLoopFunction={this.updateLoopCache}
-                    showSucAlert={this.showSucAlert}
-                    showFailAlert={this.showFailAlert}
-                    setBusyLoading={this.setBusyLoading}
-                    clearBusyLoading={this.clearBusyLoading}/>)}
-                />
-                <Route path="/delete" render={(routeProps) => (<PerformAction {...routeProps}
-                    loopAction="delete"
-                    loopCache={this.getLoopCache()}
-                    updateLoopFunction={this.updateLoopCache}
-                    showSucAlert={this.showSucAlert}
-                    showFailAlert={this.showFailAlert}
-                    setBusyLoading={this.setBusyLoading}
-                    clearBusyLoading={this.clearBusyLoading}/>)}
-                />
-                <Route path="/undeploy" render={(routeProps) => (<PerformAction {...routeProps}
-                    loopAction="undeploy"
-                    loopCache={this.getLoopCache()}
-                    updateLoopFunction={this.updateLoopCache}
-                    showSucAlert={this.showSucAlert}
-                    showFailAlert={this.showFailAlert}
-                    setBusyLoading={this.setBusyLoading}
-                    clearBusyLoading={this.clearBusyLoading}/>)}
-                />
-                <Route path="/deploy" render={(routeProps) => (<DeployLoopModal {...routeProps}
-                    loopCache={this.getLoopCache()}
-                    updateLoopFunction={this.updateLoopCache}
-                    showSucAlert={this.showSucAlert}
-                    showFailAlert={this.showFailAlert}/>)}
-                />
-                <Route path="/refreshStatus" render={(routeProps) => (<RefreshStatus {...routeProps}
-                    loopCache={this.getLoopCache()}
-                    updateLoopFunction={this.updateLoopCache}
-                    showSucAlert={this.showSucAlert}
-                    showFailAlert={this.showFailAlert}/>)}
-                />
-            </React.Fragment>
-        );
-    }
-
-        renderGlobalStyle() {
-                return (
-                        <GlobalClampStyle />
-                );
-        };
-
-
-    renderSpinner() {
-        if (this.isBusyLoading()) {
-            return (
-                <StyledSpinnerDiv>
-                    <Spinner animation="border" role="status">
-                        <span className="sr-only">Loading...</span>
-                    </Spinner>
-                </StyledSpinnerDiv>
-            );
-        } else {
-            return (<div></div>);
-        }
-    }
-
-    render() {
-        return (
-                <StyledMainDiv id="main_div">
-                    {this.renderGlobalStyle()}
-                    {this.renderRoutes()}
-                    {this.renderSpinner()}
-                    {this.renderAlertBar()}
-                    {this.renderNavBar()}
-                    {this.renderLoopViewer()}
-                </StyledMainDiv>
-        );
-    }
-}
diff --git a/runtime/ui-react/src/LoopUI.test.js b/runtime/ui-react/src/LoopUI.test.js
deleted file mode 100644
index 47ade444f..000000000
--- a/runtime/ui-react/src/LoopUI.test.js
+++ /dev/null
@@ -1,173 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-import React from 'react';
-import { shallow } from 'enzyme';
-import LoopUI from './LoopUI';
-import OnapConstants from './utils/OnapConstants';
-
-import LoopCache from './api/LoopCache';
-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");
-  })
-});
diff --git a/runtime/ui-react/src/NotFound.js b/runtime/ui-react/src/NotFound.js
deleted file mode 100644
index fb6d10a8b..000000000
--- a/runtime/ui-react/src/NotFound.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-import React from 'react'
-
-
-export default class NotFound extends React.Component {
-  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>
-
-    );
-  }
-}
diff --git a/runtime/ui-react/src/NotFound.test.js b/runtime/ui-react/src/NotFound.test.js
deleted file mode 100644
index 3b4dcb00d..000000000
--- a/runtime/ui-react/src/NotFound.test.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-import React from 'react';
-import { shallow } from 'enzyme';
-import NotFound from './NotFound';
-
-describe('Verify OnapClamp', () => {
-
-  it('Test the render method', () => {
-
-    const component = shallow(<NotFound/>)
-
-    expect(component).toMatchSnapshot();
-  });
-
-});
diff --git a/runtime/ui-react/src/OnapClamp.js b/runtime/ui-react/src/OnapClamp.js
deleted file mode 100644
index b8615ac17..000000000
--- a/runtime/ui-react/src/OnapClamp.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-
-import React from 'react';
-import LoopUI from './LoopUI'
-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>);
-  }
-}
-
diff --git a/runtime/ui-react/src/OnapClamp.test.js b/runtime/ui-react/src/OnapClamp.test.js
deleted file mode 100644
index c711a9537..000000000
--- a/runtime/ui-react/src/OnapClamp.test.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-import React from 'react';
-import { shallow } from 'enzyme';
-import OnapClamp from './OnapClamp';
-
-describe('Verify OnapClamp', () => {
-
-  it('Test the render method', () => {
-
-    const component = shallow(<OnapClamp/>)
-
-    expect(component).toMatchSnapshot();
-  });
-
-});
diff --git a/runtime/ui-react/src/__snapshots__/LoopUI.test.js.snap b/runtime/ui-react/src/__snapshots__/LoopUI.test.js.snap
deleted file mode 100644
index 322c93155..000000000
--- a/runtime/ui-react/src/__snapshots__/LoopUI.test.js.snap
+++ /dev/null
@@ -1,188 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Verify LoopUI Test the render method 1`] = `
-<styled.div
-  id="main_div"
->
-  <Memo(l) />
-  <Route
-    path="/viewLoopTemplatesModal"
-    render={[Function]}
-  />
-  <Route
-    path="/manageDictionaries"
-    render={[Function]}
-  />
-  <Route
-    path="/viewAllPolicies"
-    render={[Function]}
-  />
-  <Route
-    path="/policyModal/:policyInstanceType/:policyName"
-    render={[Function]}
-  />
-  <Route
-    path="/createLoop"
-    render={[Function]}
-  />
-  <Route
-    path="/openLoop"
-    render={[Function]}
-  />
-  <Route
-    path="/loopProperties"
-    render={[Function]}
-  />
-  <Route
-    path="/modifyLoop"
-    render={[Function]}
-  />
-  <Route
-    path="/userInfo"
-    render={[Function]}
-  />
-  <Route
-    path="/closeLoop"
-    render={[Function]}
-  />
-  <Route
-    path="/submit"
-    render={[Function]}
-  />
-  <Route
-    path="/stop"
-    render={[Function]}
-  />
-  <Route
-    path="/restart"
-    render={[Function]}
-  />
-  <Route
-    path="/delete"
-    render={[Function]}
-  />
-  <Route
-    path="/undeploy"
-    render={[Function]}
-  />
-  <Route
-    path="/deploy"
-    render={[Function]}
-  />
-  <Route
-    path="/refreshStatus"
-    render={[Function]}
-  />
-  <div />
-  <div>
-    <Alert
-      closeLabel="Close alert"
-      dismissible={true}
-      onClose={[Function]}
-      show={false}
-      transition={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "defaultProps": Object {
-            "appear": false,
-            "in": false,
-            "mountOnEnter": false,
-            "timeout": 300,
-            "unmountOnExit": false,
-          },
-          "render": [Function],
-        }
-      }
-      variant="success"
-    />
-    <Alert
-      closeLabel="Close alert"
-      dismissible={true}
-      onClose={[Function]}
-      show={false}
-      transition={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "defaultProps": Object {
-            "appear": false,
-            "in": false,
-            "mountOnEnter": false,
-            "timeout": 300,
-            "unmountOnExit": false,
-          },
-          "render": [Function],
-        }
-      }
-      variant="danger"
-    />
-  </div>
-  <Navbar
-    collapseOnSelect={false}
-    expand={true}
-    variant="light"
-  >
-    <NavbarBrand>
-      <img
-        alt=""
-        height="50px"
-        src={null}
-        width="234px"
-      />
-      <styled.a>
-        CLAMP
-      </styled.a>
-    </NavbarBrand>
-    <NavbarToggle
-      aria-controls="responsive-navbar-nav"
-      label="Toggle navigation"
-    />
-    <MenuBar
-      loopName="testLoopName"
-    />
-    <NavbarText>
-      <styled.a>
-        Signed in as: 
-      </styled.a>
-      <Styled(Link)
-        to="/userInfo"
-      >
-        testUser
-      </Styled(Link)>
-    </NavbarText>
-  </Navbar>
-  <styled.div>
-    <styled.div>
-      Loop Viewer - 
-      testLoopName
-       - (
-      )
-    </styled.div>
-    <styled.div>
-      <withRouter(SvgGenerator)
-        clickable={true}
-        generatedFrom="INSTANCE"
-        isBusyLoading={[Function]}
-        loopCache={
-          LoopCache {
-            "loopJsonCache": Object {},
-          }
-        }
-      />
-      <LoopStatus
-        loopCache={
-          LoopCache {
-            "loopJsonCache": Object {},
-          }
-        }
-      />
-      <LoopLogs
-        loopCache={
-          LoopCache {
-            "loopJsonCache": Object {},
-          }
-        }
-      />
-    </styled.div>
-  </styled.div>
-</styled.div>
-`;
diff --git a/runtime/ui-react/src/__snapshots__/NotFound.test.js.snap b/runtime/ui-react/src/__snapshots__/NotFound.test.js.snap
deleted file mode 100644
index 86bcfd1c4..000000000
--- a/runtime/ui-react/src/__snapshots__/NotFound.test.js.snap
+++ /dev/null
@@ -1,26 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Verify OnapClamp Test the render method 1`] = `
-<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>
-`;
diff --git a/runtime/ui-react/src/__snapshots__/OnapClamp.test.js.snap b/runtime/ui-react/src/__snapshots__/OnapClamp.test.js.snap
deleted file mode 100644
index 353bc1173..000000000
--- a/runtime/ui-react/src/__snapshots__/OnapClamp.test.js.snap
+++ /dev/null
@@ -1,216 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Verify OnapClamp Test the render method 1`] = `
-<Component
-  theme={
-    Object {
-      "backgroundColor": "#eeeeee",
-      "fontDanger": "#eb238e",
-      "fontDark": "#888888",
-      "fontFamily": "Arial, Sans-serif",
-      "fontHighlight": "#ffff00",
-      "fontLight": "#ffffff",
-      "fontNormal": "black",
-      "fontSize": "16px",
-      "fontWarning": "#eb238e",
-      "loopLogsHeaderBackgroundColor": "white",
-      "loopLogsHeaderFontColor": "black",
-      "loopViewerBackgroundColor": "white",
-      "loopViewerFontColor": "yellow",
-      "loopViewerHeaderBackgroundColor": "#337ab7",
-      "loopViewerHeaderFontColor": "white",
-      "menuBackgroundColor": "white",
-      "menuFontColor": "black",
-      "menuHighlightedBackgroundColor": "#337ab7",
-      "menuHighlightedFontColor": "white",
-      "policyEditorBackgroundColor": "white",
-      "policyEditorFontSize": "13px",
-      "toscaTextareaBackgroundColor": "white",
-      "toscaTextareaFontSize": "13px",
-    }
-  }
->
-  <styled.div
-    id="main_div"
-  >
-    <Memo(l) />
-    <Route
-      path="/viewLoopTemplatesModal"
-      render={[Function]}
-    />
-    <Route
-      path="/manageDictionaries"
-      render={[Function]}
-    />
-    <Route
-      path="/viewAllPolicies"
-      render={[Function]}
-    />
-    <Route
-      path="/policyModal/:policyInstanceType/:policyName"
-      render={[Function]}
-    />
-    <Route
-      path="/createLoop"
-      render={[Function]}
-    />
-    <Route
-      path="/openLoop"
-      render={[Function]}
-    />
-    <Route
-      path="/loopProperties"
-      render={[Function]}
-    />
-    <Route
-      path="/modifyLoop"
-      render={[Function]}
-    />
-    <Route
-      path="/userInfo"
-      render={[Function]}
-    />
-    <Route
-      path="/closeLoop"
-      render={[Function]}
-    />
-    <Route
-      path="/submit"
-      render={[Function]}
-    />
-    <Route
-      path="/stop"
-      render={[Function]}
-    />
-    <Route
-      path="/restart"
-      render={[Function]}
-    />
-    <Route
-      path="/delete"
-      render={[Function]}
-    />
-    <Route
-      path="/undeploy"
-      render={[Function]}
-    />
-    <Route
-      path="/deploy"
-      render={[Function]}
-    />
-    <Route
-      path="/refreshStatus"
-      render={[Function]}
-    />
-    <div />
-    <div>
-      <Alert
-        closeLabel="Close alert"
-        dismissible={true}
-        onClose={[Function]}
-        show={false}
-        transition={
-          Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "defaultProps": Object {
-              "appear": false,
-              "in": false,
-              "mountOnEnter": false,
-              "timeout": 300,
-              "unmountOnExit": false,
-            },
-            "render": [Function],
-          }
-        }
-        variant="success"
-      />
-      <Alert
-        closeLabel="Close alert"
-        dismissible={true}
-        onClose={[Function]}
-        show={false}
-        transition={
-          Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "defaultProps": Object {
-              "appear": false,
-              "in": false,
-              "mountOnEnter": false,
-              "timeout": 300,
-              "unmountOnExit": false,
-            },
-            "render": [Function],
-          }
-        }
-        variant="danger"
-      />
-    </div>
-    <Navbar
-      collapseOnSelect={false}
-      expand={true}
-      variant="light"
-    >
-      <NavbarBrand>
-        <img
-          alt=""
-          height="50px"
-          src={null}
-          width="234px"
-        />
-        <styled.a>
-          CLAMP
-        </styled.a>
-      </NavbarBrand>
-      <NavbarToggle
-        aria-controls="responsive-navbar-nav"
-        label="Toggle navigation"
-      />
-      <MenuBar
-        loopName="Empty (NO loop loaded yet)"
-      />
-      <NavbarText>
-        <styled.a>
-          Signed in as: 
-        </styled.a>
-        <Styled(Link)
-          to="/userInfo"
-        />
-      </NavbarText>
-    </Navbar>
-    <styled.div>
-      <styled.div>
-        Loop Viewer - 
-        Empty (NO loop loaded yet)
-         - (
-        )
-      </styled.div>
-      <styled.div>
-        <withRouter(SvgGenerator)
-          clickable={true}
-          generatedFrom="INSTANCE"
-          isBusyLoading={[Function]}
-          loopCache={
-            LoopCache {
-              "loopJsonCache": Object {},
-            }
-          }
-        />
-        <LoopStatus
-          loopCache={
-            LoopCache {
-              "loopJsonCache": Object {},
-            }
-          }
-        />
-        <LoopLogs
-          loopCache={
-            LoopCache {
-              "loopJsonCache": Object {},
-            }
-          }
-        />
-      </styled.div>
-    </styled.div>
-  </styled.div>
-</Component>
-`;
diff --git a/runtime/ui-react/src/api/LoopActionService.js b/runtime/ui-react/src/api/LoopActionService.js
deleted file mode 100644
index 6f3b22fa2..000000000
--- a/runtime/ui-react/src/api/LoopActionService.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-
-export default class 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 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);
-      });
-  }
-}
diff --git a/runtime/ui-react/src/api/LoopCache.js b/runtime/ui-react/src/api/LoopCache.js
deleted file mode 100644
index ac2da07f2..000000000
--- a/runtime/ui-react/src/api/LoopCache.js
+++ /dev/null
@@ -1,252 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-
-export default class 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;
-  }
-}
diff --git a/runtime/ui-react/src/api/LoopCache.test.js b/runtime/ui-react/src/api/LoopCache.test.js
deleted file mode 100644
index 76f819c69..000000000
--- a/runtime/ui-react/src/api/LoopCache.test.js
+++ /dev/null
@@ -1,305 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-import LoopCache from '../api/LoopCache';
-
-const json = require('./LoopCacheMockFile.json');
-
-describe('Verify LoopCache functions', () => {
-    const loopCache = new LoopCache(json);
-		it('getLoopName', () => {
-      expect(loopCache.getLoopName()).toBe("LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca");
-		});
-
-    it('getOperationalPolicies', () => {
-      const opPolicy = [{
-        "name": "OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca",
-        "configurationsJson": {
-          "operational_policy": {
-            "controlLoop": {},
-            "policies": []
-          }
-        },
-        "pdpGroup": "pdpGroupTest",
-        "pdpSubgroup": "pdpSubgroupTest",
-        "jsonRepresentation": {
-        "schema": {}
-      }
-      }];
-      expect(loopCache.getOperationalPolicies()).toStrictEqual(opPolicy);
-    });
-
-    it('getOperationalPoliciesNoJsonSchema', () => {
-      const opPolicy = [{
-        "name": "OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca",
-        "configurationsJson": {
-          "operational_policy": {
-            "controlLoop": {},
-            "policies": []
-          }
-        },
-        "pdpGroup": "pdpGroupTest",
-        "pdpSubgroup": "pdpSubgroupTest",
-      }];
-      expect(loopCache.getOperationalPoliciesNoJsonSchema()).toStrictEqual(opPolicy);
-    });
-
-    it('getOperationalPolicyJsonSchema', () => {
-      const jsonSchema = {
-          "schema": {}
-      };
-
-      expect(loopCache.getOperationalPolicyJsonSchema()).toStrictEqual(jsonSchema);
-    });
-    it('getGlobalProperties', () => {
-      const globelProp = {
-        "dcaeDeployParameters": {
-          "location_id": "",
-          "service_id": "",
-          "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
-        }
-      };
-      expect(loopCache.getGlobalProperties()).toStrictEqual(globelProp);
-    });
-
-    it('getDcaeDeploymentProperties', () => {
-      const deploymentProp = {
-          "location_id": "",
-          "service_id": "",
-          "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
-      };
-      expect(loopCache.getDcaeDeploymentProperties()).toStrictEqual(deploymentProp);
-    });
-
-    it('getMicroServiceForName', () => {
-      const msJson = {
-          "name": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca",
-          "modelType": "onap.policies.monitoring.cdap.tca.hi.lo.app",
-          "configurationsJson": {"domain": "measurementsForVfScaling"},
-          "shared": false,
-          "pdpGroup": "pdpGroupTest",
-          "pdpSubgroup": "pdpSubgroupTest",
-          "policyModel": {"policyPdpGroup": {"supportedPdpGroups": "supportedPdpGroupsTest"}},
-          "jsonRepresentation": {"schema": {}}
-      };
-      expect(loopCache.getMicroServiceForName("TCA_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual(msJson);
-      expect(loopCache.getMicroServiceForName("TCA_h2NMX_v1_0_ResourceInstanceName1_tca_2")).toBeNull();
-    });
-
-    it('getMicroServicePropertiesForName', () => {
-      const msProp = {"domain": "measurementsForVfScaling"};
-      expect(loopCache.getMicroServicePropertiesForName("TCA_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual(msProp);
-      expect(loopCache.getMicroServicePropertiesForName("TCA_h2NMX_v1_0_ResourceInstanceName1_tca_2")).toBeNull();
-    });
-
-    it('getMicroServiceJsonRepresentationForName', () => {
-      const msJsonRepresentation = {"schema": {}};
-      expect(loopCache.getMicroServiceJsonRepresentationForName("TCA_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual(msJsonRepresentation);
-    });
-
-    it('getResourceDetailsVfProperty', () => {
-      const resourceVF = {
-        "vLoadBalancerMS 0": {
-          "resourceVendor": "Test",
-          "resourceVendorModelNumber": "",
-          "name": "vLoadBalancerMS",
-          "description": "vLBMS",
-          "invariantUUID": "1a31b9f2-e50d-43b7-89b3-a040250cf506",
-          "subcategory": "Load Balancer",
-          "category": "Application L4+",
-          "type": "VF",
-          "UUID": "b4c4f3d7-929e-4b6d-a1cd-57e952ddc3e6",
-          "version": "1.0",
-          "resourceVendorRelease": "1.0",
-          "customizationUUID": "465246dc-7748-45f4-a013-308d92922552"
-        }
-      };
-      expect(loopCache.getResourceDetailsVfProperty()).toStrictEqual(resourceVF);
-    });
-
-    it('getResourceDetailsVfModuleProperty', () => {
-      const vfModule = {
-        "Vloadbalancerms..vpkg..module-1": {
-          "vfModuleModelInvariantUUID": "ca052563-eb92-4b5b-ad41-9111768ce043",
-          "vfModuleModelVersion": "1",
-          "vfModuleModelName": "Vloadbalancerms..vpkg..module-1",
-          "vfModuleModelUUID": "1e725ccc-b823-4f67-82b9-4f4367070dbc",
-          "vfModuleModelCustomizationUUID": "1bffdc31-a37d-4dee-b65c-dde623a76e52",
-          "min_vf_module_instances": 0,
-          "vf_module_label": "vpkg",
-          "max_vf_module_instances": 1,
-          "vf_module_type": "Expansion",
-          "isBase": false,
-          "initial_count": 0,
-          "volume_group": false
-        }
-      };
-      expect(loopCache.getResourceDetailsVfModuleProperty()).toStrictEqual(vfModule);
-    });
-
-    it('getLoopLogsArray', () => {
-      const logs = [
-        {
-          "id": 1,
-          "logType": "INFO",
-          "logComponent": "CLAMP",
-          "message": "Operational policies UPDATED",
-          "logInstant": "2019-07-08T09:44:37Z"
-        }
-      ];
-      expect(loopCache.getLoopLogsArray()).toStrictEqual(logs);
-    });
-
-    it('getComponentStates', () => {
-      const component = {
-        "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"
-          }
-        }
-      };
-      expect(loopCache.getComponentStates()).toStrictEqual(component);
-    });
-
-    it('getOperationalPolicyForName', () => {
-      const opPolicy = {
-      "name": "OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca",
-      "configurationsJson": {
-        "operational_policy": {
-          "controlLoop": {},
-          "policies": []
-        }
-      },
-      "pdpGroup": "pdpGroupTest",
-      "pdpSubgroup": "pdpSubgroupTest",
-      "jsonRepresentation": {
-        "schema": {}
-      }
-    };
-      expect(loopCache.getOperationalPolicyForName("OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual(opPolicy);
-      expect(loopCache.getOperationalPolicyForName("Not_Exist")).toBeNull();
-    });
-
-    it('getOperationalPolicyPropertiesForName', () => {
-      const opPolicyJson = {
-        "operational_policy": {
-          "controlLoop": {},
-          "policies": []
-        }};
-      expect(loopCache.getOperationalPolicyPropertiesForName("OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual(opPolicyJson);
-      expect(loopCache.getOperationalPolicyPropertiesForName("Not_Exist")).toBeNull();
-    });
-
-    it('getOperationalPolicyJsonRepresentationForName', () => {
-      const opPolicySchema = {
-        "schema": {}
-      };
-      expect(loopCache.getOperationalPolicyJsonRepresentationForName("OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual(opPolicySchema);
-      expect(loopCache.getOperationalPolicyJsonRepresentationForName("Not_Exist")).toBeNull();
-    });
-
-    it('getOperationalPolicySupportedPdpGroup', () => {
-      expect(loopCache.getOperationalPolicySupportedPdpGroup("Not_Exist")).toStrictEqual([]);
-    });
-
-    it('getOperationalPolicyPdpGroup', () => {
-      expect(loopCache.getOperationalPolicyPdpGroup("OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual("pdpGroupTest");
-      expect(loopCache.getOperationalPolicyPdpGroup("Not_Exist")).toBeNull();
-    });
-
-    it('getOperationalPolicyPdpSubgroup', () => {
-      expect(loopCache.getOperationalPolicyPdpSubgroup("OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual("pdpSubgroupTest");
-      expect(loopCache.getOperationalPolicyPdpSubgroup("Not_Exist")).toBeNull();
-    });
-
-    it('getMicroServiceSupportedPdpGroup', () => {
-      expect(loopCache.getMicroServiceSupportedPdpGroup("TCA_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual("supportedPdpGroupsTest");
-      expect(loopCache.getMicroServiceSupportedPdpGroup("Not_Exist")).toStrictEqual([]);
-    });
-
-    it('getMicroServicePdpGroup', () => {
-      expect(loopCache.getMicroServicePdpGroup("TCA_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual("pdpGroupTest");
-      expect(loopCache.getMicroServicePdpGroup("Not_Exist")).toBeNull();
-    });
-
-    it('getMicroServicePdpSubgroup', () => {
-      expect(loopCache.getMicroServicePdpSubgroup("TCA_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual("pdpSubgroupTest");
-      expect(loopCache.getMicroServicePdpSubgroup("Not_Exist")).toBeNull();
-    });
-
-    it('getMicroServiceJsonRepresentationForName', () => {
-      const msPolicySchema = {
-        "schema": {}
-      };
-      expect(loopCache.getMicroServiceJsonRepresentationForName("TCA_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual(msPolicySchema);
-      expect(loopCache.getMicroServiceJsonRepresentationForName("Not_Exist")).toBeNull();
-    });
-
-    it('getTemplateName', () => {
-      expect(loopCache.getTemplateName()).toStrictEqual("loopTemplateTest");
-    });
-
-    it('updateGlobalProperties', () => {
-      const newGlobalProps = {
-        "dcaeDeployParameters": {
-          "location_id": "newLocation",
-          "service_id": "newServiceId",
-          "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca_2"
-        }
-      };
-      loopCache.updateGlobalProperties(newGlobalProps);
-      expect(loopCache.getGlobalProperties()).toStrictEqual(newGlobalProps);
-    });
-
-    it('updateOperationalPolicyProperties', () => {
-      const newOpPolicy = {
-          "operational_policy": {
-            "controlLoop": {},
-            "policies": []
-          }
-        };
-      loopCache.updateOperationalPolicyProperties("OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca",newOpPolicy);
-      expect(loopCache.getOperationalPolicyPropertiesForName("OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual(newOpPolicy);
-    });
-
-    it('updateMicroServiceProperties', () => {
-      const newMsPolicyProperties = {"domain": "measurementsForVfScalingNew"};
-      loopCache.updateMicroServiceProperties("TCA_h2NMX_v1_0_ResourceInstanceName1_tca", newMsPolicyProperties);
-      expect(loopCache.getMicroServicePropertiesForName("TCA_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual(newMsPolicyProperties);
-    });
-
-    it('updateMicroServicePdpGroup', () => {
-      const newMsPolicyProperties = {"domain": "measurementsForVfScalingNew"};
-      loopCache.updateMicroServicePdpGroup("TCA_h2NMX_v1_0_ResourceInstanceName1_tca", "pdpGroupTest1", "pdpSubgroupTest1");
-      expect(loopCache.getMicroServicePdpGroup("TCA_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual("pdpGroupTest1");
-      expect(loopCache.getMicroServicePdpGroup("Not_Exist")).toBeNull();
-      expect(loopCache.getMicroServicePdpSubgroup("TCA_h2NMX_v1_0_ResourceInstanceName1_tca")).toStrictEqual("pdpSubgroupTest1");
-      expect(loopCache.getMicroServicePdpSubgroup("Not_Exist")).toBeNull();
-    });
- });
diff --git a/runtime/ui-react/src/api/LoopCacheMockFile.json b/runtime/ui-react/src/api/LoopCacheMockFile.json
deleted file mode 100644
index e5a670218..000000000
--- a/runtime/ui-react/src/api/LoopCacheMockFile.json
+++ /dev/null
@@ -1,135 +0,0 @@
-{
-  "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
-  "dcaeBlueprintId": "typeId-3a942643-a8f7-4e54-b2c1-eea8daba2b17",
-  "globalPropertiesJson": {
-    "dcaeDeployParameters": {
-      "location_id": "",
-      "service_id": "",
-      "policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
-    }
-  },
-  "loopTemplate": {
-    "name": "loopTemplateTest"
-  },
-  "modelService": {
-    "serviceDetails": {
-      "serviceType": "",
-      "namingPolicy": "",
-      "environmentContext": "General_Revenue-Bearing",
-      "serviceEcompNaming": "true",
-      "serviceRole": "",
-      "name": "vLoadBalancerMS",
-      "description": "vLBMS",
-      "invariantUUID": "30ec5b59-4799-48d8-ac5f-1058a6b0e48f",
-      "ecompGeneratedNaming": "true",
-      "category": "Network L4+",
-      "type": "Service",
-      "UUID": "63cac700-ab9a-4115-a74f-7eac85e3fce0",
-      "instantiationType": "A-la-carte"
-    },
-    "resourceDetails": {
-      "CP": {},
-      "VL": {},
-      "VF": {
-        "vLoadBalancerMS 0": {
-          "resourceVendor": "Test",
-          "resourceVendorModelNumber": "",
-          "name": "vLoadBalancerMS",
-          "description": "vLBMS",
-          "invariantUUID": "1a31b9f2-e50d-43b7-89b3-a040250cf506",
-          "subcategory": "Load Balancer",
-          "category": "Application L4+",
-          "type": "VF",
-          "UUID": "b4c4f3d7-929e-4b6d-a1cd-57e952ddc3e6",
-          "version": "1.0",
-          "resourceVendorRelease": "1.0",
-          "customizationUUID": "465246dc-7748-45f4-a013-308d92922552"
-        }
-      },
-      "CR": {},
-      "VFC": {},
-      "PNF": {},
-      "Service": {},
-      "CVFC": {},
-      "Service Proxy": {},
-      "Configuration": {},
-      "AllottedResource": {},
-      "VFModule": {
-        "Vloadbalancerms..vpkg..module-1": {
-          "vfModuleModelInvariantUUID": "ca052563-eb92-4b5b-ad41-9111768ce043",
-          "vfModuleModelVersion": "1",
-          "vfModuleModelName": "Vloadbalancerms..vpkg..module-1",
-          "vfModuleModelUUID": "1e725ccc-b823-4f67-82b9-4f4367070dbc",
-          "vfModuleModelCustomizationUUID": "1bffdc31-a37d-4dee-b65c-dde623a76e52",
-          "min_vf_module_instances": 0,
-          "vf_module_label": "vpkg",
-          "max_vf_module_instances": 1,
-          "vf_module_type": "Expansion",
-          "isBase": false,
-          "initial_count": 0,
-          "volume_group": false
-        }
-      }
-    }
-  },
-  "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"
-      }
-    }
-  },
-  "operationalPolicies": [
-    {
-      "name": "OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca",
-      "configurationsJson": {
-        "operational_policy": {
-          "controlLoop": {},
-          "policies": []
-        }
-      },
-      "pdpGroup": "pdpGroupTest",
-      "pdpSubgroup": "pdpSubgroupTest",
-      "jsonRepresentation": {
-        "schema": {}
-      }
-    }
-  ],
-  "microServicePolicies": [
-    {
-      "name": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca",
-      "modelType": "onap.policies.monitoring.cdap.tca.hi.lo.app",
-      "configurationsJson": {
-        "domain": "measurementsForVfScaling"
-      },
-      "shared": false,
-      "pdpGroup": "pdpGroupTest",
-      "pdpSubgroup": "pdpSubgroupTest",
-      "policyModel": {
-        "policyPdpGroup": {
-          "supportedPdpGroups": "supportedPdpGroupsTest"
-        }
-      },
-      "jsonRepresentation": {
-        "schema": {}
-      }
-    }
-  ],
-  "loopLogs": [
-    {
-      "id": 1,
-      "logType": "INFO",
-      "logComponent": "CLAMP",
-      "message": "Operational policies UPDATED",
-      "logInstant": "2019-07-08T09:44:37Z"
-    }
-  ]
-}
diff --git a/runtime/ui-react/src/api/LoopService.js b/runtime/ui-react/src/api/LoopService.js
deleted file mode 100644
index 16f1bec9e..000000000
--- a/runtime/ui-react/src/api/LoopService.js
+++ /dev/null
@@ -1,244 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-
-export default class 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 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 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 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 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 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 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 {};
-      });
-  }
-}
diff --git a/runtime/ui-react/src/api/PoliciesListCacheMockFile.json b/runtime/ui-react/src/api/PoliciesListCacheMockFile.json
deleted file mode 100644
index 14d5cc653..000000000
--- a/runtime/ui-react/src/api/PoliciesListCacheMockFile.json
+++ /dev/null
@@ -1,215 +0,0 @@
-{
-  "policies": [
-    {
-      "MICROSERVICE_vLoadBalancerMS_v1_0_tcagen2_1_0_0_AV0": {
-        "type": "onap.policies.monitoring.tcagen2",
-        "type_version": "1.0.0",
-        "properties": {
-          "tca.policy": {
-            "domain": "measurementsForVfScaling",
-            "metricsPerEventName": [
-              {
-                "policyScope": "DCAE",
-                "thresholds": [
-                  {
-                    "version": "1.0.2",
-                    "severity": "MAJOR",
-                    "thresholdValue": 200,
-                    "closedLoopEventStatus": "ONSET",
-                    "closedLoopControlName": "LOOP_test",
-                    "direction": "LESS_OR_EQUAL",
-                    "fieldPath": "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedTotalPacketsDelta"
-                  }
-                ],
-                "eventName": "vLoadBalancer",
-                "policyVersion": "v0.0.1",
-                "controlLoopSchemaType": "VM",
-                "policyName": "DCAE.Config_tca-hi-lo"
-              }
-            ]
-          }
-        },
-        "name": "MICROSERVICE_vLoadBalancerMS_v1_0_tcagen2_1_0_0_AV0",
-        "version": "1.0.0",
-        "metadata": {
-          "policy-id": "MICROSERVICE_vLoadBalancerMS_v1_0_tcagen2_1_0_0_AV0",
-          "policy-version": "1.0.0"
-        },
-        "pdpGroupInfo": {
-          "pdpGroup": "pdpGroup2",
-          "pdpSubGroup": "subGroup2"
-        },
-        "supportedPdpGroups": [
-          {
-            "pdpGroup2": [
-              "subGroup2",
-              "subGroup3"
-            ]
-          }
-        ]
-      }
-    },
-    {
-      "OPERATIONAL_vLoadBalancerMS_v1_0_Drools_1_0_0_7xd": {
-        "type": "onap.policies.controlloop.operational.common.Drools",
-        "type_version": "1.0.0",
-        "properties": {
-          "abatement": false,
-          "operations": [
-            {
-              "failure_retries": "final_failure_retries",
-              "id": "test1",
-              "failure_timeout": "final_failure_timeout",
-              "failure": "final_failure",
-              "operation": {
-                "payload": {
-                  "artifact_name": "baseconfiguration",
-                  "artifact_version": "1.0.0",
-                  "mode": "async",
-                  "data": "{\"resource-assignment-properties\":{\"request-id\":\"\",\"service-instance-id\":\"\",\"hostname\":\"\",\"request-info\":{\"prop1\":\"\",\"prop2\":\"\"}}}"
-                },
-                "target": {
-                  "entityIds": {
-                    "resourceID": "Vloadbalancerms..vdns..module-3",
-                    "modelInvariantId": "4c10ba9b-f88f-415e-9de3-5d33336047fa",
-                    "modelVersionId": "4fa73b49-8a6c-493e-816b-eb401567b720",
-                    "modelName": "Vloadbalancerms..vdns..module-3",
-                    "modelVersion": "1",
-                    "modelCustomizationId": "bafcdab0-801d-4d81-9ead-f464640a38b1"
-                  },
-                  "targetType": "VNF"
-                },
-                "actor": "SDNR",
-                "operation": "BandwidthOnDemand"
-              },
-              "failure_guard": "final_failure_guard",
-              "retries": 0,
-              "timeout": 0,
-              "failure_exception": "final_failure_exception",
-              "description": "test",
-              "success": "final_success"
-            }
-          ],
-          "trigger": "test1",
-          "timeout": 0,
-          "id": "LOOP_test"
-        },
-        "name": "OPERATIONAL_vLoadBalancerMS_v1_0_Drools_1_0_0_7xd",
-        "version": "1.0.0",
-        "metadata": {
-          "policy-id": "OPERATIONAL_vLoadBalancerMS_v1_0_Drools_1_0_0_7xd",
-          "policy-version": "1.0.0"
-        },
-        "pdpGroupInfo": {
-          "pdpGroup": "pdpGroup2",
-          "pdpSubGroup": "subGroup3"
-        },
-        "supportedPdpGroups": [
-          {
-            "pdpGroup2": [
-              "subGroup2",
-              "subGroup3"
-            ]
-          }
-        ]
-      }
-    },
-    {
-      "SDNC_Policy.ONAP_NF_NAMING_TIMESTAMP": {
-        "type": "onap.policies.Naming",
-        "type_version": "1.0.0",
-        "properties": {
-          "naming-models": [
-            {
-              "naming-type": "VNF",
-              "naming-recipe": "AIC_CLOUD_REGION|DELIMITER|CONSTANT|DELIMITER|TIMESTAMP",
-              "name-operation": "to_lower_case()",
-              "naming-properties": [
-                {
-                  "property-name": "AIC_CLOUD_REGION"
-                },
-                {
-                  "property-name": "CONSTANT",
-                  "property-value": "onap-nf"
-                },
-                {
-                  "property-name": "TIMESTAMP"
-                },
-                {
-                  "property-value": "-",
-                  "property-name": "DELIMITER"
-                }
-              ]
-            },
-            {
-              "naming-type": "VNFC",
-              "naming-recipe": "VNF_NAME|DELIMITER|NFC_NAMING_CODE|DELIMITER|SEQUENCE",
-              "name-operation": "to_lower_case()",
-              "naming-properties": [
-                {
-                  "property-name": "VNF_NAME"
-                },
-                {
-                  "property-name": "SEQUENCE",
-                  "increment-sequence": {
-                    "max": "zzz",
-                    "scope": "ENTIRETY",
-                    "start-value": "1",
-                    "length": "3",
-                    "increment": "1",
-                    "sequence-type": "alpha-numeric"
-                  }
-                },
-                {
-                  "property-name": "NFC_NAMING_CODE"
-                },
-                {
-                  "property-value": "-",
-                  "property-name": "DELIMITER"
-                }
-              ]
-            },
-            {
-              "naming-type": "VF-MODULE",
-              "naming-recipe": "VNF_NAME|DELIMITER|VF_MODULE_LABEL|DELIMITER|VF_MODULE_TYPE|DELIMITER|SEQUENCE",
-              "name-operation": "to_lower_case()",
-              "naming-properties": [
-                {
-                  "property-name": "VNF_NAME"
-                },
-                {
-                  "property-value": "-",
-                  "property-name": "DELIMITER"
-                },
-                {
-                  "property-name": "VF_MODULE_LABEL"
-                },
-                {
-                  "property-name": "VF_MODULE_TYPE"
-                },
-                {
-                  "property-name": "SEQUENCE",
-                  "increment-sequence": {
-                    "max": "zzz",
-                    "scope": "PRECEEDING",
-                    "start-value": "1",
-                    "length": "3",
-                    "increment": "1",
-                    "sequence-type": "alpha-numeric"
-                  }
-                }
-              ]
-            }
-          ],
-          "policy-instance-name": "ONAP_NF_NAMING_TIMESTAMP"
-        },
-        "name": "SDNC_Policy.ONAP_NF_NAMING_TIMESTAMP",
-        "version": "1.0.0",
-        "metadata": {
-          "policy-id": "SDNC_Policy.ONAP_NF_NAMING_TIMESTAMP",
-          "policy-version": "1.0.0"
-        }
-      }
-    }
-  ]
-}
diff --git a/runtime/ui-react/src/api/PolicyService.js b/runtime/ui-react/src/api/PolicyService.js
deleted file mode 100644
index cf4f0fdba..000000000
--- a/runtime/ui-react/src/api/PolicyService.js
+++ /dev/null
@@ -1,152 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP POLICY-CLAMP
- * ================================================================================
- * Copyright (C) 2021 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-
-export default class PolicyService {
-  static getPoliciesList() {
-    return fetch(window.location.pathname + 'restservices/clds/v2/policies', {
-      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;
-      });
-  }
-
-  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;
-      });
-  }
-
-  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;
-      });
-  }
-
-  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
-    })
-      .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;
-      });
-  }
-}
diff --git a/runtime/ui-react/src/api/PolicyToscaService.js b/runtime/ui-react/src/api/PolicyToscaService.js
deleted file mode 100644
index 6c74149d9..000000000
--- a/runtime/ui-react/src/api/PolicyToscaService.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019, 2021 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-
-export default class PolicyToscaService {
-  static getToscaPolicyModels() {
-    return fetch(window.location.pathname + 'restservices/clds/v2/policyToscaModels', { method: 'GET', credentials: 'same-origin' })
-      .then(function (response) {
-        console.debug("getToscaPolicyModels response received: ", response.status);
-        if (response.ok) {
-          return response.json();
-        } else {
-          console.error("getToscaPolicyModels query failed");
-          return {};
-        }
-      })
-      .catch(function (error) {
-        console.error("getToscaPolicyModels error received", error);
-        return {};
-      });
-  }
-
-  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 "";
-      });
-  }
-
-  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 {};
-      });
-  }
-}
diff --git a/runtime/ui-react/src/api/TemplateService.js b/runtime/ui-react/src/api/TemplateService.js
deleted file mode 100644
index a6e386eac..000000000
--- a/runtime/ui-react/src/api/TemplateService.js
+++ /dev/null
@@ -1,197 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-
-export default class 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 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 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 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 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 {};
-      });
-  }
-}
diff --git a/runtime/ui-react/src/api/UserService.js b/runtime/ui-react/src/api/UserService.js
deleted file mode 100644
index bcf46ea64..000000000
--- a/runtime/ui-react/src/api/UserService.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-
-export default class 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 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 {};
-      });
-  }
-}
diff --git a/runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.js b/runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.js
deleted file mode 100644
index 690dcbbdf..000000000
--- a/runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.js
+++ /dev/null
@@ -1,193 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2020 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-
-import React from 'react'
-import Select from 'react-select';
-import Button from 'react-bootstrap/Button';
-import Modal from 'react-bootstrap/Modal';
-import Form from 'react-bootstrap/Form';
-import Row from 'react-bootstrap/Row';
-import Col from 'react-bootstrap/Col';
-import styled from 'styled-components';
-import LoopService from '../../../api/LoopService';
-import TemplateService from '../../../api/TemplateService';
-import LoopCache from '../../../api/LoopCache';
-import SvgGenerator from '../../loop_viewer/svg/SvgGenerator';
-
-const ModalStyled = styled(Modal)`
-  background-color: transparent;
-`
-
-const ErrMsgStyled = styled.div`
-  color: red;
-`
-
-export default class CreateLoopModal extends React.Component {
-  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({})
-    };
-  }
-
-  async componentDidMount() {
-    await this.getAllLoopTemplates();
-    await this.getModelNames();
-  }
-
-  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({}) })
-    }
-  }
-
-  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 });
-    });
-  }
-
-  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
-      });
-    }
-  }
-
-  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>
-    );
-  }
-}
diff --git a/runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js b/runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js
deleted file mode 100644
index 3d9483334..000000000
--- a/runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js
+++ /dev/null
@@ -1,151 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2020 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-import React from 'react';
-import { shallow } from 'enzyme';
-import CreateLoopModal from './CreateLoopModal';
-import LoopService from '../../../api/LoopService';
-import TemplateService from '../../../api/TemplateService';
-
-let errorMessage = '';
-window.alert = jest.fn().mockImplementation((mesg) => {
-  errorMessage = mesg;
-  return
-});
-
-
-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" }]);
-    });
-    TemplateService.getLoopNames = jest.fn().mockImplementation(() => {
-      return Promise.resolve([]);
-    });
-
-    const component = shallow(<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" }
-    }]);
-  });
-
-  it('handleDropdownListChange event', async () => {
-    const flushPromises = () => new Promise(setImmediate);
-
-    const component = shallow(<CreateLoopModal/>);
-    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" } });
-    await flushPromises();
-    component.update();
-    expect(component.state('chosenTemplateName')).toEqual("template2");
-    expect(component.state('fakeLoopCacheWithTemplate').getLoopTemplate()['name']).toEqual("template2");
-    expect(component.state('fakeLoopCacheWithTemplate').getLoopName()).toEqual("fakeLoop");
-  });
-
-  it('handleModelName event', async () => {
-    const flushPromises = () => new Promise(setImmediate);
-    TemplateService.getAllLoopTemplates = jest.fn().mockImplementation(() => {
-      return Promise.resolve([{ "name": "template1" }, { "name": "template2" }]);
-    });
-    TemplateService.getLoopNames = jest.fn().mockImplementation(() => {
-      return Promise.resolve([]);
-    });
-    const event = { target: { value: "model1" } };
-    const component = shallow(<CreateLoopModal/>);
-    await flushPromises();
-    component.find('input').simulate('change', event);
-    component.update();
-    expect(component.state('modelName')).toEqual("model1");
-  });
-
-  it('Test handleClose', () => {
-    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(['/']);
-
-    handleClose.mockClear();
-  });
-
-  it('Test handleCreate Fail', () => {
-    const handleCreate = jest.spyOn(CreateLoopModal.prototype, 'handleCreate');
-    const component = shallow(<CreateLoopModal/>)
-
-    component.find('[variant="primary"]').prop('onClick')();
-
-    expect(handleCreate).toHaveBeenCalledTimes(1);
-    expect(component.state('show')).toEqual(true);
-
-    handleCreate.mockClear();
-  });
-
-  it('Test handleCreate Suc', async () => {
-    const flushPromises = () => new Promise(setImmediate);
-    const historyMock = { push: 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 }/>)
-    component.setState({
-      modelName: "modelNameTest",
-      chosenTemplateName: "template1"
-    });
-
-    component.find('[variant="primary"]').prop('onClick')();
-    await flushPromises();
-    component.update();
-
-    expect(handleCreate).toHaveBeenCalledTimes(1);
-    expect(component.state('show')).toEqual(false);
-    expect(historyMock.push.mock.calls[0]).toEqual(['/']);
-
-    handleCreate.mockClear();
-  });
-
-});
diff --git a/runtime/ui-react/src/components/dialogs/Loop/DeployLoopModal.js b/runtime/ui-react/src/components/dialogs/Loop/DeployLoopModal.js
deleted file mode 100644
index 5fff58631..000000000
--- a/runtime/ui-react/src/components/dialogs/Loop/DeployLoopModal.js
+++ /dev/null
@@ -1,178 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP POLICY-CLAMP
- * ================================================================================
- * Copyright (C) 2019, 2021 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-import React from 'react';
-import LoopActionService from '../../../api/LoopActionService';
-import LoopService from '../../../api/LoopService';
-import Button from 'react-bootstrap/Button';
-import Modal from 'react-bootstrap/Modal';
-import Form from 'react-bootstrap/Form';
-import Tabs from 'react-bootstrap/Tabs';
-import Tab from 'react-bootstrap/Tab';
-import styled from 'styled-components';
-import Spinner from 'react-bootstrap/Spinner'
-
-const StyledSpinnerDiv = styled.div`
-  justify-content: center !important;
-  display: flex !important;
-`;
-
-const ModalStyled = styled(Modal)`
-  background-color: transparent;
-`
-const FormStyled = styled(Form.Group)`
-  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>
-    );
-  }
-}
diff --git a/runtime/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js b/runtime/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js
deleted file mode 100644
index 0c68f237c..000000000
--- a/runtime/ui-react/src/components/dialogs/Loop/DeployLoopModal.test.js
+++ /dev/null
@@ -1,114 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-import React from 'react';
-import { shallow } from 'enzyme';
-import DeployLoopModal from './DeployLoopModal';
-import LoopCache from '../../../api/LoopCache';
-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"
-        }
-      }
-    }
-  });
-
-  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 }/>)
-
-    component.find('[variant="secondary"]').prop('onClick')();
-
-    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 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: () => {
-        }
-      });
-    });
-
-    const component = shallow(<DeployLoopModal history={ historyMock }
-                                               loopCache={ loopCache } updateLoopFunction={ updateLoopFunction } showSucAlert={ showSucAlert } showFailAlert={ showFailAlert }/>)
-
-    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(['/']);
-    handleSave.mockClear();
-  });
-
-  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");
-  });
-});
diff --git a/runtime/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js b/runtime/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js
deleted file mode 100644
index 69177134b..000000000
--- a/runtime/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js
+++ /dev/null
@@ -1,118 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-
-import React from 'react'
-import Button from 'react-bootstrap/Button';
-import Modal from 'react-bootstrap/Modal';
-import Form from 'react-bootstrap/Form';
-import styled from 'styled-components';
-import LoopService from '../../../api/LoopService';
-
-const ModalStyled = styled(Modal)`
-  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()))
-  };
-
-  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.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()))
-    });
-  }
-
-  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());
-    });
-  }
-
-  handleChange(event) {
-    this.setState({ temporaryPropertiesJson: { [event.target.name]: JSON.parse(event.target.value) } });
-  }
-
-  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 "";
-    }
-
-  }
-
-  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>
-    );
-  }
-}
diff --git a/runtime/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.test.js b/runtime/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.test.js
deleted file mode 100644
index a9c5903a4..000000000
--- a/runtime/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.test.js
+++ /dev/null
@@ -1,110 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-import React from 'react';
-import { shallow } from 'enzyme';
-import LoopPropertiesModal from './LoopPropertiesModal';
-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"
-      }
-    }
-  });
-
-  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).toMatchSnapshot();
-  });
-
-  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')();
-
-    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"
-      });
-    });
-
-    const component = shallow(<LoopPropertiesModal history={ historyMock }
-                                                   loopCache={ loopCache } loadLoopFunction={ loadLoopFunction }/>)
-
-    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(['/']);
-  });
-
-  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();
-
-    expect(component.state('temporaryPropertiesJson').dcaeDeployParameters.location_id).toEqual("testLocation");
-  });
-});
diff --git a/runtime/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js b/runtime/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js
deleted file mode 100644
index 0d203418b..000000000
--- a/runtime/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js
+++ /dev/null
@@ -1,262 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2020 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-
-import React, { forwardRef } from 'react'
-import MaterialTable from "material-table";
-import Button from 'react-bootstrap/Button';
-import Modal from 'react-bootstrap/Modal';
-import styled from 'styled-components';
-import PolicyToscaService from '../../../api/PolicyToscaService';
-import ArrowUpward from '@material-ui/icons/ArrowUpward';
-import ChevronLeft from '@material-ui/icons/ChevronLeft';
-import ChevronRight from '@material-ui/icons/ChevronRight';
-import Clear from '@material-ui/icons/Clear';
-import FirstPage from '@material-ui/icons/FirstPage';
-import LastPage from '@material-ui/icons/LastPage';
-import Search from '@material-ui/icons/Search';
-import LoopService from '../../../api/LoopService';
-import Tabs from 'react-bootstrap/Tabs';
-import Tab from 'react-bootstrap/Tab';
-import Alert from 'react-bootstrap/Alert';
-
-const ModalStyled = styled(Modal)`
-  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;
-`
-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' };
-
-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 }/>)
-    }
-  };
-
-  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);
-    }
-
-    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' })
-    }
-  }
-
-  handleYamlContent(event) {
-    this.setState({ content: event.target.value });
-  }
-
-  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>
-    );
-  }
-
-  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();
-  }
-
-  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>
-    );
-  }
-}
diff --git a/runtime/ui-react/src/components/dialogs/Loop/ModifyLoopModal.test.js b/runtime/ui-react/src/components/dialogs/Loop/ModifyLoopModal.test.js
deleted file mode 100644
index 79267af4f..000000000
--- a/runtime/ui-react/src/components/dialogs/Loop/ModifyLoopModal.test.js
+++ /dev/null
@@ -1,109 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2020 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-import React from 'react';
-import { mount } from 'enzyme';
-import ModifyLoopModal from './ModifyLoopModal';
-import LoopCache from '../../../api/LoopCache';
-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");
-    });
-  })
-
-  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);
-
-  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();
-
-    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();
-
-    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");
-
-    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();
-
-    const event = { "target": { "value": "testValue" } }
-    instance.handleYamlContent(event);
-    expect(component.state('content')).toEqual("testValue");
-  });
-});
diff --git a/runtime/ui-react/src/components/dialogs/Loop/OpenLoopModal.js b/runtime/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
deleted file mode 100644
index b6407fbbb..000000000
--- a/runtime/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
+++ /dev/null
@@ -1,139 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-
-import React from 'react'
-import Select from 'react-select';
-import Button from 'react-bootstrap/Button';
-import Modal from 'react-bootstrap/Modal';
-import Form from 'react-bootstrap/Form';
-import Row from 'react-bootstrap/Row';
-import Col from 'react-bootstrap/Col';
-import FormCheck from 'react-bootstrap/FormCheck'
-import styled from 'styled-components';
-import LoopService from '../../../api/LoopService';
-import SvgGenerator from '../../loop_viewer/svg/SvgGenerator';
-import LoopCache from '../../../api/LoopCache';
-
-const ModalStyled = styled(Modal)`
-  background-color: transparent;
-`
-const CheckBoxStyled = styled(FormCheck.Input)`
-  margin-left: 3rem;
-`
-
-export default class OpenLoopModal extends React.Component {
-  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({})
-    };
-  }
-
-  componentWillMount() {
-    this.getLoopNames();
-  }
-
-  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)
-      });
-    });
-  }
-
-  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);
-  }
-
-  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>
-
-    );
-  }
-}
diff --git a/runtime/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js b/runtime/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js
deleted file mode 100644
index 6b2dc4afb..000000000
--- a/runtime/ui-react/src/components/dialogs/Loop/OpenLoopModal.test.js
+++ /dev/null
@@ -1,93 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-import React from 'react';
-import { shallow } from 'enzyme';
-import OpenLoopModal from './OpenLoopModal';
-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"
-    ]));
-  });
-
-  it('Test the render method', () => {
-
-    const component = shallow(<OpenLoopModal/>);
-    expect(component).toMatchSnapshot();
-  });
-
-  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' };
-    const component = shallow(<OpenLoopModal/>);
-    component.find('StateManager').simulate('change', event);
-    await flushPromises();
-    component.update();
-    expect(component.state('chosenLoopName')).toEqual("LOOP_gmtAS_v1_0_ResourceInstanceName1_tca_3");
-  });
-
-
-  it('Test handleClose', () => {
-    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(['/']);
-
-    handleClose.mockClear();
-  });
-
-  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 }/>)
-
-    component.find('[variant="primary"]').prop('onClick')();
-
-    expect(handleOpen).toHaveBeenCalledTimes(1);
-    expect(component.state('show')).toEqual(false);
-    expect(historyMock.push.mock.calls[0]).toEqual(['/']);
-
-    handleOpen.mockClear();
-  });
-
-});
diff --git a/runtime/ui-react/src/components/dialogs/Loop/__snapshots__/CreateLoopModal.test.js.snap b/runtime/ui-react/src/components/dialogs/Loop/__snapshots__/CreateLoopModal.test.js.snap
deleted file mode 100644
index 1ba9dbaf1..000000000
--- a/runtime/ui-react/src/components/dialogs/Loop/__snapshots__/CreateLoopModal.test.js.snap
+++ /dev/null
@@ -1,167 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Verify CreateLoopModal Test the render method 1`] = `
-<Styled(Modal)
-  backdrop="static"
-  keyboard={false}
-  onHide={[Function]}
-  show={true}
-  size="xl"
->
-  <ModalHeader
-    closeButton={true}
-    closeLabel="Close"
-  >
-    <ModalTitle>
-      Create Model
-    </ModalTitle>
-  </ModalHeader>
-  <ModalBody>
-    <FormGroup
-      as={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "defaultProps": Object {
-            "noGutters": false,
-          },
-          "render": [Function],
-        }
-      }
-      controlId="formPlaintextEmail"
-    >
-      <FormLabel
-        column={true}
-        sm="2"
-        srOnly={false}
-      >
-        Template Name:
-      </FormLabel>
-      <Col
-        sm="10"
-      >
-        <StateManager
-          defaultInputValue=""
-          defaultMenuIsOpen={false}
-          defaultValue={null}
-          onChange={[Function]}
-          options={Array []}
-        />
-      </Col>
-    </FormGroup>
-    <FormGroup
-      as={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "defaultProps": Object {
-            "noGutters": false,
-          },
-          "render": [Function],
-        }
-      }
-      controlId="formSvgPreview"
-      style={
-        Object {
-          "alignItems": "center",
-        }
-      }
-    >
-      <FormLabel
-        column={true}
-        sm="2"
-        srOnly={false}
-      >
-        Model Preview:
-      </FormLabel>
-      <Col
-        sm="10"
-      >
-        <withRouter(SvgGenerator)
-          clickable={false}
-          generatedFrom="TEMPLATE"
-          loopCache={
-            LoopCache {
-              "loopJsonCache": Object {},
-            }
-          }
-        />
-      </Col>
-    </FormGroup>
-    <FormGroup
-      as={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "defaultProps": Object {
-            "noGutters": false,
-          },
-          "render": [Function],
-        }
-      }
-      controlId="formPlaintextEmail"
-    >
-      <FormLabel
-        column={true}
-        sm="2"
-        srOnly={false}
-      >
-        Model Name:
-      </FormLabel>
-      <input
-        onChange={[Function]}
-        sm="5"
-        style={
-          Object {
-            "marginLeft": "1em",
-            "width": "50%",
-          }
-        }
-        type="text"
-        value=""
-      />
-      <span
-        sm="5"
-      />
-    </FormGroup>
-    <FormGroup
-      as={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "defaultProps": Object {
-            "noGutters": false,
-          },
-          "render": [Function],
-        }
-      }
-      controlId="formPlaintextEmail"
-    >
-      <FormLabel
-        column={true}
-        sm="2"
-        srOnly={false}
-      >
-         
-      </FormLabel>
-      <styled.div />
-    </FormGroup>
-  </ModalBody>
-  <ModalFooter>
-    <Button
-      active={false}
-      disabled={false}
-      onClick={[Function]}
-      type="null"
-      variant="secondary"
-    >
-      Cancel
-    </Button>
-    <Button
-      active={false}
-      disabled={false}
-      onClick={[Function]}
-      type="submit"
-      variant="primary"
-    >
-      Create
-    </Button>
-  </ModalFooter>
-</Styled(Modal)>
-`;
diff --git a/runtime/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap b/runtime/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap
deleted file mode 100644
index 33f8faa77..000000000
--- a/runtime/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap
+++ /dev/null
@@ -1,88 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Verify DeployLoopModal Test the render method 1`] = `
-<Styled(Modal)
-  backdrop="static"
-  keyboard={false}
-  onHide={[Function]}
-  show={true}
-  size="lg"
->
-  <ModalHeader
-    closeButton={true}
-    closeLabel="Close"
-  >
-    <ModalTitle>
-      Deployment parameters
-    </ModalTitle>
-  </ModalHeader>
-  <Tabs
-    activeKey="testMs"
-    id="controlled-tab-example"
-    mountOnEnter={false}
-    onSelect={[Function]}
-    unmountOnExit={false}
-    variant="tabs"
-  >
-    <Tab
-      eventKey="testMs"
-      key="testMs"
-      title="testMs"
-    >
-      <Styled(FormGroup)
-        key="location_id"
-      >
-        <FormLabel
-          column={false}
-          srOnly={false}
-        >
-          location_id
-        </FormLabel>
-        <FormControl
-          defaultValue=""
-          name="location_id"
-          onChange={[Function]}
-          type="text"
-        />
-      </Styled(FormGroup)>
-      <Styled(FormGroup)
-        key="policy_id"
-      >
-        <FormLabel
-          column={false}
-          srOnly={false}
-        >
-          policy_id
-        </FormLabel>
-        <FormControl
-          defaultValue="TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
-          name="policy_id"
-          onChange={[Function]}
-          type="text"
-        />
-      </Styled(FormGroup)>
-    </Tab>
-  </Tabs>
-  <div />
-  <ModalFooter>
-    <Button
-      active={false}
-      disabled={false}
-      onClick={[Function]}
-      type="null"
-      variant="secondary"
-    >
-      Cancel
-    </Button>
-    <Button
-      active={false}
-      disabled={false}
-      onClick={[Function]}
-      type="submit"
-      variant="primary"
-    >
-      Deploy
-    </Button>
-  </ModalFooter>
-</Styled(Modal)>
-`;
diff --git a/runtime/ui-react/src/components/dialogs/Loop/__snapshots__/LoopPropertiesModal.test.js.snap b/runtime/ui-react/src/components/dialogs/Loop/__snapshots__/LoopPropertiesModal.test.js.snap
deleted file mode 100644
index 3baaa5798..000000000
--- a/runtime/ui-react/src/components/dialogs/Loop/__snapshots__/LoopPropertiesModal.test.js.snap
+++ /dev/null
@@ -1,61 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Verify LoopPropertiesModal Test the render method 1`] = `
-<Styled(Modal)
-  backdrop="static"
-  keyboard={false}
-  onHide={[Function]}
-  show={true}
-  size="lg"
->
-  <ModalHeader
-    closeButton={true}
-    closeLabel="Close"
-  >
-    <ModalTitle>
-      Model Properties
-    </ModalTitle>
-  </ModalHeader>
-  <ModalBody>
-    <Form
-      inline={false}
-    >
-      <FormGroup>
-        <FormLabel
-          column={false}
-          srOnly={false}
-        >
-          Deploy Parameters
-        </FormLabel>
-        <FormControl
-          as="textarea"
-          defaultValue="{\\"location_id\\":\\"\\",\\"policy_id\\":\\"TCA_h2NMX_v1_0_ResourceInstanceName1_tca\\"}"
-          name="dcaeDeployParameters"
-          onChange={[Function]}
-          rows="3"
-        />
-      </FormGroup>
-    </Form>
-  </ModalBody>
-  <ModalFooter>
-    <Button
-      active={false}
-      disabled={false}
-      onClick={[Function]}
-      type="null"
-      variant="secondary"
-    >
-      Cancel
-    </Button>
-    <Button
-      active={false}
-      disabled={false}
-      onClick={[Function]}
-      type="submit"
-      variant="primary"
-    >
-      Save Changes
-    </Button>
-  </ModalFooter>
-</Styled(Modal)>
-`;
diff --git a/runtime/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap b/runtime/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap
deleted file mode 100644
index 581fd0ec0..000000000
--- a/runtime/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap
+++ /dev/null
@@ -1,137 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Verify OpenLoopModal Test the render method 1`] = `
-<Styled(Modal)
-  backdrop="static"
-  keyboard={false}
-  onHide={[Function]}
-  show={true}
-  size="xl"
->
-  <ModalHeader
-    closeButton={true}
-    closeLabel="Close"
-  >
-    <ModalTitle>
-      Open Model
-    </ModalTitle>
-  </ModalHeader>
-  <ModalBody>
-    <FormGroup
-      as={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "defaultProps": Object {
-            "noGutters": false,
-          },
-          "render": [Function],
-        }
-      }
-      controlId="formPlaintextEmail"
-    >
-      <FormLabel
-        column={true}
-        sm="2"
-        srOnly={false}
-      >
-        Model Name:
-      </FormLabel>
-      <Col
-        sm="10"
-      >
-        <StateManager
-          defaultInputValue=""
-          defaultMenuIsOpen={false}
-          defaultValue={null}
-          onChange={[Function]}
-          options={Array []}
-        />
-      </Col>
-    </FormGroup>
-    <FormGroup
-      as={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "defaultProps": Object {
-            "noGutters": false,
-          },
-          "render": [Function],
-        }
-      }
-      controlId="formSvgPreview"
-      style={
-        Object {
-          "alignItems": "center",
-        }
-      }
-    >
-      <FormLabel
-        column={true}
-        sm="2"
-        srOnly={false}
-      >
-        Model Preview:
-      </FormLabel>
-      <Col
-        sm="10"
-      >
-        <withRouter(SvgGenerator)
-          clickable={false}
-          generatedFrom="INSTANCE"
-          loopCache={
-            LoopCache {
-              "loopJsonCache": Object {},
-            }
-          }
-        />
-      </Col>
-    </FormGroup>
-    <FormGroup
-      as={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "defaultProps": Object {
-            "noGutters": false,
-          },
-          "render": [Function],
-        }
-      }
-      controlId="formBasicCheckbox"
-    >
-      <FormCheck>
-        <FormCheckLabel>
-          Read Only Mode:
-        </FormCheckLabel>
-        <Styled(FormCheckInput)
-          style={
-            Object {
-              "marginLeft": "3.5em",
-            }
-          }
-          type="checkbox"
-        />
-      </FormCheck>
-    </FormGroup>
-  </ModalBody>
-  <ModalFooter>
-    <Button
-      active={false}
-      disabled={false}
-      onClick={[Function]}
-      type="null"
-      variant="secondary"
-    >
-      Cancel
-    </Button>
-    <Button
-      active={false}
-      disabled={false}
-      onClick={[Function]}
-      type="submit"
-      variant="primary"
-    >
-      Open
-    </Button>
-  </ModalFooter>
-</Styled(Modal)>
-`;
diff --git a/runtime/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.js b/runtime/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.js
deleted file mode 100644
index d7ba8d1c6..000000000
--- a/runtime/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.js
+++ /dev/null
@@ -1,637 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-
-
-import React, { forwardRef } from 'react';
-import Button from 'react-bootstrap/Button';
-import Modal from 'react-bootstrap/Modal';
-import Row from 'react-bootstrap/Row';
-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 IconButton from '@material-ui/core/IconButton';
-import Tooltip from '@material-ui/core/Tooltip';
-import AddBox from '@material-ui/icons/AddBox';
-import ArrowUpward from '@material-ui/icons/ArrowUpward';
-import Check from '@material-ui/icons/Check';
-import ChevronLeft from '@material-ui/icons/ChevronLeft';
-import VerticalAlignTopIcon from '@material-ui/icons/VerticalAlignTop';
-import VerticalAlignBottomIcon from '@material-ui/icons/VerticalAlignBottom';
-import ChevronRight from '@material-ui/icons/ChevronRight';
-import Clear from '@material-ui/icons/Clear';
-import DeleteOutline from '@material-ui/icons/DeleteOutline';
-import Edit from '@material-ui/icons/Edit';
-import FilterList from '@material-ui/icons/FilterList';
-import FirstPage from '@material-ui/icons/FirstPage';
-import LastPage from '@material-ui/icons/LastPage';
-import Remove from '@material-ui/icons/Remove';
-import Search from '@material-ui/icons/Search';
-import ViewColumn from '@material-ui/icons/ViewColumn';
-
-
-const ModalStyled = styled(Modal)`
-  @media (min-width: 1200px) {
-    .modal-xl {
-      max-width: 96%;
-    }
-  }
-  background-color: transparent;
-`
-
-const MTableToolbarStyled = styled(MTableToolbar)`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-`
-const ColPullLeftStyled = styled(Col)`
-  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' };
-
-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>
-  );
-}
-
-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>
-  );
-}
-
-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>
-    );
-  }
-}
diff --git a/runtime/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.test.js b/runtime/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.test.js
deleted file mode 100644
index 2552d7a3d..000000000
--- a/runtime/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.test.js
+++ /dev/null
@@ -1,465 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-import React from 'react';
-import { shallow } from 'enzyme';
-import { mount } from 'enzyme';
-import { render } from 'enzyme';
-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"
-    }
-  ]
-};
-
-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"
-    }
-  ];
-
-
-const historyMock = { push: jest.fn() };
-
-let errorMessage = '';
-
-window.alert = jest.fn().mockImplementation((mesg) => {
-  errorMessage = mesg;
-  return
-});
-
-TemplateMenuService.getDictionary = jest.fn().mockImplementation(() => {
-  return Promise.resolve(TestDictionaries);
-});
-
-TemplateMenuService.insDictionary = jest.fn().mockImplementation(() => {
-  return Promise.resolve({ ok: true, status: 200 });
-});
-
-TemplateMenuService.deleteDictionary = jest.fn().mockImplementation(() => {
-  return Promise.resolve("200");
-});
-
-TemplateMenuService.getDictionaryElements = jest.fn().mockImplementation(() => {
-  return Promise.resolve(TestDictionaryElements);
-});
-
-TemplateMenuService.deleteDictionaryElements = jest.fn().mockImplementation(() => {
-  return Promise.resolve("200");
-});
-
-TemplateMenuService.insDictionaryElements = jest.fn().mockImplementation(() => {
-  return Promise.resolve("200");
-});
-
-
-describe('Verify ManageDictionaries', () => {
-
-  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);
-  });
-
-  test('Test update dictionary row', async () => {
-
-    const component = shallow(<ManageDictionaries history={ historyMock }/>)
-    const instance = component.instance();
-    const rowData = { name: "newdict", secondLevelDictionary: 0, subDictionaryType: "string" };
-
-    await expect(instance.updateDictionaryRow(rowData, rowData)).resolves.toEqual(undefined);
-
-  }, 2000);
-
-  test('Test add dictionary row', async () => {
-
-    const addReplaceRequest = jest.spyOn(ManageDictionaries.prototype, 'addReplaceDictionaryRequest');
-    const component = shallow(<ManageDictionaries/>)
-    const instance = component.instance();
-    const rowData = { name: "newdict", secondLevelDictionary: 0, subDictionaryType: "string" };
-
-    await instance.addDictionaryRow(rowData);
-    expect(addReplaceRequest).toHaveBeenCalledWith(rowData);
-
-  }, 2000);
-
-  test('Test add dictionary row with errors name already exists', async () => {
-
-    const component = shallow(<ManageDictionaries/>)
-    const instance = component.instance();
-    let rowData = { name: "test", secondLevelDictionary: 0, subDictionaryType: "" };
-
-    await expect(instance.addDictionaryRow(rowData)).rejects.toEqual(undefined);
-
-  }, 2000);
-
-  test('Test add dictionary row with errors illegal chars in name', async () => {
-
-    const component = shallow(<ManageDictionaries/>)
-    const instance = component.instance();
-    let rowData = { name: "test@@", secondLevelDictionary: 0, subDictionaryType: "" };
-
-    await expect(instance.addDictionaryRow(rowData)).rejects.toEqual(undefined);
-
-  }, 2000);
-
-  test('Test update dictionary row with errors illegal chars in name', async () => {
-
-    const component = shallow(<ManageDictionaries/>)
-    const instance = component.instance();
-    let rowData = { name: "test@@", secondLevelDictionary: 0, subDictionaryType: "" };
-
-    await expect(instance.updateDictionaryRow(rowData)).rejects.toEqual(undefined);
-  });
-
-
-  test('Test add dictionary row with errors (illegal chars)', async () => {
-
-    const addReplaceRequest = jest.spyOn(ManageDictionaries.prototype, 'addReplaceDictionaryRequest');
-    const component = shallow(<ManageDictionaries/>)
-    const instance = component.instance();
-    let rowData = { name: "test@@", secondLevelDictionary: 0, subDictionaryType: "" };
-
-    await expect(instance.addDictionaryRow(rowData)).rejects.toEqual(undefined);
-
-  }, 2000);
-
-
-  test('Test delete dictionary row', async () => {
-
-    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.deleteDictionaryRow(rowData);
-    expect(deleteRequest).toHaveBeenCalledWith("newdict");
-
-  }, 2000);
-
-  test('Test handle select dictionary row click', async () => {
-
-    const component = shallow(<ManageDictionaries/>)
-    const instance = component.instance();
-    const rowData = { name: "newdict", secondLevelDictionary: 0, subDictionaryType: "string" };
-
-    instance.handleDictionaryRowClick("event", rowData);
-    expect(component.state('currentSelectedDictionary')).toEqual("newdict");
-  }, 2000);
-
-  test('Test dictionary element row add, update, delete', 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 component = shallow(<ManageDictionaries/>)
-    const instance = component.instance();
-
-    const badRowData = {
-      description: "Description",
-      name: "Some Elem",
-      shortName: "someElem",
-      type: "string"
-    };
-
-    await instance.clickHandler();
-    await instance.getDictionaryElements("test");
-
-    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);
-  });
-
-  test('Test dictionary element row add with errors', async () => {
-
-    const badRowData = {
-      description: "",
-      name: "",
-      shortName: "some#Elem",
-      type: ""
-    };
-
-    const component = shallow(<ManageDictionaries/>)
-    const instance = component.instance();
-
-    await expect(instance.addDictionaryElementRow(badRowData)).rejects.toEqual("");
-  });
-
-  test('Test dictionary element update with error illegal name', async () => {
-
-    const badRowData = {
-      description: "",
-      name: "test@@",
-      shortName: "some#Elem",
-      type: ""
-    };
-
-    const component = shallow(<ManageDictionaries/>)
-    const instance = component.instance();
-
-    await expect(instance.updateDictionaryElementRow(badRowData)).rejects.toEqual(undefined);
-  });
-
-  test('Test dictionary element addition with duplicate name error', async () => {
-
-    const badRowData = {
-      description: "description",
-      name: "Alert Type",
-      shortName: "alertType",
-      type: "string"
-    };
-
-    const component = shallow(<ManageDictionaries/>)
-    const instance = component.instance();
-
-    component.setState({ currentSelectedDictionary: 'test' });
-
-    await instance.getDictionaryElements();
-    await expect(instance.addDictionaryElementRow(badRowData)).rejects.toEqual("");
-  });
-
-  test('Test dictionary element addition with empty name error', async () => {
-
-    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();
-  });
-});
diff --git a/runtime/ui-react/src/components/dialogs/ManageDictionaries/__snapshots__/ManageDictionaries.test.js.snap b/runtime/ui-react/src/components/dialogs/ManageDictionaries/__snapshots__/ManageDictionaries.test.js.snap
deleted file mode 100644
index 6b583632f..000000000
--- a/runtime/ui-react/src/components/dialogs/ManageDictionaries/__snapshots__/ManageDictionaries.test.js.snap
+++ /dev/null
@@ -1,196 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Verify ManageDictionaries Test API Successful 1`] = `
-<Styled(Modal)
-  backdrop="static"
-  keyboard={false}
-  onHide={[Function]}
-  show={true}
-  size="xl"
->
-  <ModalHeader
-    closeButton={true}
-    closeLabel="Close"
-  >
-    <ModalTitle>
-      Manage Dictionaries
-    </ModalTitle>
-  </ModalHeader>
-  <ModalBody>
-    <WithStyles(Component)
-      columns={
-        Array [
-          Object {
-            "cellStyle": Object {
-              "border": "1px solid black",
-            },
-            "editable": "onAdd",
-            "field": "name",
-            "headerStyle": Object {
-              "backgroundColor": "#ddd",
-              "border": "2px solid black",
-            },
-            "title": "Dictionary Name",
-          },
-          Object {
-            "cellStyle": Object {
-              "border": "1px solid black",
-            },
-            "field": "secondLevelDictionary",
-            "headerStyle": Object {
-              "backgroundColor": "#ddd",
-              "border": "2px solid black",
-            },
-            "lookup": Object {
-              "0": "No",
-              "1": "Yes",
-            },
-            "title": "Sub Dictionary ?",
-          },
-          Object {
-            "cellStyle": Object {
-              "border": "1px solid black",
-            },
-            "field": "subDictionaryType",
-            "headerStyle": Object {
-              "backgroundColor": "#ddd",
-              "border": "2px solid black",
-            },
-            "lookup": Object {
-              "number": "number",
-              "string": "string",
-            },
-            "title": "Dictionary Type",
-          },
-          Object {
-            "cellStyle": Object {
-              "border": "1px solid black",
-            },
-            "editable": "never",
-            "field": "updatedBy",
-            "headerStyle": Object {
-              "backgroundColor": "#ddd",
-              "border": "2px solid black",
-            },
-            "title": "Updated By",
-          },
-          Object {
-            "cellStyle": Object {
-              "border": "1px solid black",
-            },
-            "editable": "never",
-            "field": "updatedDate",
-            "headerStyle": Object {
-              "backgroundColor": "#ddd",
-              "border": "2px solid black",
-            },
-            "title": "Last Updated Date",
-          },
-        ]
-      }
-      editable={
-        Object {
-          "onRowAdd": [Function],
-          "onRowDelete": [Function],
-          "onRowUpdate": [Function],
-        }
-      }
-      icons={
-        Object {
-          "Add": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "render": [Function],
-          },
-          "Check": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "render": [Function],
-          },
-          "Clear": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "render": [Function],
-          },
-          "Delete": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "render": [Function],
-          },
-          "DetailPanel": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "render": [Function],
-          },
-          "Edit": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "render": [Function],
-          },
-          "Export": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "render": [Function],
-          },
-          "Filter": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "render": [Function],
-          },
-          "FirstPage": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "render": [Function],
-          },
-          "LastPage": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "render": [Function],
-          },
-          "NextPage": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "render": [Function],
-          },
-          "PreviousPage": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "render": [Function],
-          },
-          "ResetSearch": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "render": [Function],
-          },
-          "Search": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "render": [Function],
-          },
-          "SortArrow": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "render": [Function],
-          },
-          "ThirdStateCheck": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "render": [Function],
-          },
-          "ViewColumn": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "render": [Function],
-          },
-        }
-      }
-      onRowClick={[Function]}
-      options={
-        Object {
-          "headerStyle": Object {
-            "backgroundColor": "#ddd",
-            "border": "1px solid black",
-            "fontSize": "15pt",
-            "text": "bold",
-          },
-        }
-      }
-      title="Dictionary List"
-    />
-  </ModalBody>
-  <ModalFooter>
-    <Button
-      active={false}
-      disabled={false}
-      onClick={[Function]}
-      type="null"
-      variant="secondary"
-    >
-      Close
-    </Button>
-  </ModalFooter>
-</Styled(Modal)>
-`;
diff --git a/runtime/ui-react/src/components/dialogs/PerformActions.js b/runtime/ui-react/src/components/dialogs/PerformActions.js
deleted file mode 100644
index ba7c99d7f..000000000
--- a/runtime/ui-react/src/components/dialogs/PerformActions.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-import React from 'react';
-import LoopActionService from '../../api/LoopActionService';
-
-
-export default class PerformActions extends React.Component {
-  state = {
-    loopName: this.props.loopCache.getLoopName(),
-    loopAction: this.props.loopAction
-  };
-
-  constructor(props, context) {
-    super(props, context);
-    this.refreshStatus = this.refreshStatus.bind(this);
-  }
-
-  componentWillReceiveProps(newProps) {
-    this.setState({
-      loopName: newProps.loopCache.getLoopName(),
-      loopAction: newProps.loopAction
-    });
-  }
-
-  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;
-      }
-    }
-
-    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());
-  }
-
-  refreshStatus(loopName) {
-
-    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());
-  }
-
-  render() {
-    return null;
-  }
-}
diff --git a/runtime/ui-react/src/components/dialogs/PerformActions.test.js b/runtime/ui-react/src/components/dialogs/PerformActions.test.js
deleted file mode 100644
index 74c914584..000000000
--- a/runtime/ui-react/src/components/dialogs/PerformActions.test.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-import React from 'react';
-import { shallow } from 'enzyme';
-import PerformActions from './PerformActions';
-import LoopCache from '../../api/LoopCache';
-import LoopActionService from '../../api/LoopActionService';
-
-describe('Verify PerformActions', () => {
-
-  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();
-
-    expect(historyMock.push.mock.calls[0]).toEqual(['/']);
-  });
-
-  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();
-
-    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(['/']);
-  });
-
-});
diff --git a/runtime/ui-react/src/components/dialogs/Policy/PoliciesTreeViewer.js b/runtime/ui-react/src/components/dialogs/Policy/PoliciesTreeViewer.js
deleted file mode 100644
index 5bca4e6e1..000000000
--- a/runtime/ui-react/src/components/dialogs/Policy/PoliciesTreeViewer.js
+++ /dev/null
@@ -1,109 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP POLICY-CLAMP
- * ================================================================================
- * Copyright (C) 2021 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-
-import React, { forwardRef } from 'react'
-import TreeView from '@material-ui/lab/TreeView';
-import TreeItem from '@material-ui/lab/TreeItem';
-import FolderIcon from '@material-ui/icons/Folder';
-import FolderOpenIcon from '@material-ui/icons/FolderOpen';
-import DescriptionIcon from '@material-ui/icons/Description';
-
-
-export default class PoliciesTreeViewer extends React.Component {
-
-  separator = ".";
-
-  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);
-
-  }
-
-  state = {
-    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;
-  }
-
-  buildNameWithParent(node) {
-    let nameToBuild = node.name;
-    if (node.parent !== undefined) {
-      nameToBuild = this.buildNameWithParent(node.parent) + this.separator + node.name;
-    }
-    return nameToBuild;
-  }
-
-  handleTreeItemClick(event, value) {
-    let fullName = this.buildNameWithParent(this.nodesList.get(value[0])).substring(5);
-    this.props.policiesFilterFunction(fullName);
-  }
-
-  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>
-    );
-  }
-}
diff --git a/runtime/ui-react/src/components/dialogs/Policy/PolicyDeploymentEditor.js b/runtime/ui-react/src/components/dialogs/Policy/PolicyDeploymentEditor.js
deleted file mode 100644
index de29947fe..000000000
--- a/runtime/ui-react/src/components/dialogs/Policy/PolicyDeploymentEditor.js
+++ /dev/null
@@ -1,178 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP POLICY-CLAMP
- * ================================================================================
- * Copyright (C) 2021 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-
-import React, { forwardRef } from 'react';
-import Modal from 'react-bootstrap/Modal';
-import styled from 'styled-components';
-import Button from 'react-bootstrap/Button';
-import Alert from 'react-bootstrap/Alert';
-import PolicyService from '../../../api/PolicyService';
-import FormGroup from '@material-ui/core/FormGroup';
-import Checkbox from '@material-ui/core/Checkbox';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-
-const DivWhiteSpaceStyled = styled.div`
-  white-space: pre;
-`
-
-const PanelDiv = styled.div`
-  text-align: justify;
-  font-size: ${ props => props.theme.policyEditorFontSize };
-  background-color: ${ props => props.theme.loopViewerBackgroundColor };
-`
-
-export default class PolicyDeploymentEditor extends React.Component {
-
-  state = {
-    policyData: this.props.policyData,
-    showSuccessAlert: false,
-    showFailAlert: false,
-    checkboxesState: this.createPdpStructure(this.props.policyData),
-    checkboxesInitialState: this.createPdpStructure(this.props.policyData),
-  };
-
-  constructor(props, context) {
-    super(props, context);
-    this.handleClose = this.handleClose.bind(this);
-    this.handleUpdatePdpDeployment = this.handleUpdatePdpDeployment.bind(this);
-    this.disableAlert = this.disableAlert.bind(this);
-    this.renderPdpDeploymentCheckboxes = this.renderPdpDeploymentCheckboxes.bind(this);
-    this.createPdpStructure = this.createPdpStructure.bind(this);
-    this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
-    this.createPdpGroupOperations = this.createPdpGroupOperations.bind(this);
-  }
-
-  handleClose() {
-    this.setState({ show: false });
-
-  }
-
-  disableAlert() {
-    this.setState({ showSuccessAlert: false, showFailAlert: false });
-  }
-
-  createPdpGroupOperations(initialStates, newStates) {
-    let commandsArray = [];
-    initialStates.forEach(initElem => {
-      let newStateFound = newStates.find(newElement => newElement.name === initElem.name);
-      if (initElem.value !== newStateFound.value) {
-        let newPdpGroupsArray = newStateFound.name.split("/");
-        let operation = "POST/";
-        if (initElem.value) {
-          operation = "DELETE/";
-        }
-        commandsArray.push(operation + newPdpGroupsArray[0] + "/" + newPdpGroupsArray[1] + "/"
-          + this.state.policyData.name + "/" + this.state.policyData.version);
-      }
-    });
-    return commandsArray.length > 0 ? { "PdpActions": commandsArray } : undefined;
-  }
-
-  handleUpdatePdpDeployment() {
-    let operationsList = this.createPdpGroupOperations(this.state.checkboxesInitialState,
-      this.state.checkboxesState);
-    if (typeof (operationsList) !== "undefined") {
-      PolicyService.updatePdpDeployment(operationsList).then(respPdpDeploymentUpdate => {
-        if (typeof (respPdpDeploymentUpdate) === "undefined") {
-          //it indicates a failure
-          this.setState({
-            showFailAlert: true,
-            showMessage: 'Pdp Deployment update Failure'
-          });
-        } else {
-          this.setState({
-            showSuccessAlert: true,
-            showMessage: 'Pdp Deployment Update successful'
-          });
-          this.props.policiesTableUpdateFunction();
-        }
-      })
-    } else {
-      this.setState({
-        showSuccessAlert: true,
-        showMessage: 'Pdp Deployment: Nothing to change'
-      });
-    }
-  }
-
-  createPdpStructure(policyData) {
-    // Create map with data for all group/subgroup where the policy is deployed
-    let infoPdpMap = new Map();
-    if (typeof policyData.pdpGroupInfo !== "undefined") {
-      policyData["pdpGroupInfo"].forEach(pdpGroupElem => {
-        let pdpGroupName = Object.keys(pdpGroupElem)[0];
-        pdpGroupElem[pdpGroupName]["pdpSubgroups"].forEach(pdpSubGroupElem => {
-          infoPdpMap.set(pdpGroupName + "/" + pdpSubGroupElem["pdpType"], true);
-        });
-      });
-    }
-    // Create the possible values for pdpgroup/subgroup and tick the ones where policy is deployed
-    let pdpStates = [];
-    if (typeof policyData.supportedPdpGroups !== "undefined") {
-      for (const pdpGroup of policyData["supportedPdpGroups"]) {
-        let pdpGroupName = Object.keys(pdpGroup)[0];
-        for (const pdpSubGroup of Object.values(pdpGroup)[0]) {
-          let fullName = pdpGroupName + "/" + pdpSubGroup;
-          pdpStates.push({
-            name: fullName,
-            value: infoPdpMap.get(fullName) !== undefined
-          });
-        }
-      }
-    }
-    return pdpStates;
-  }
-
-  handleCheckboxChange(event) {
-    const checkboxesArray = this.state.checkboxesState;
-    checkboxesArray.find(element => element.name === event.target.name).value = event.target.checked;
-    this.setState({ checkboxesState: checkboxesArray });
-  }
-
-  renderPdpDeploymentCheckboxes() {
-    return this.state.checkboxesState.map(item => {
-      return <FormControlLabel control={ <Checkbox checked={ item.value } onChange={ this.handleCheckboxChange }
-                                                   name={ item.name }/> } label={ item.name }/>;
-    });
-  }
-
-  render() {
-    return (
-      <PanelDiv>
-        <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>
-        <Button variant="secondary" title="Update the policy to the specified PDP Groups/Subgroups"
-                onClick={ this.handleUpdatePdpDeployment }>Update PDP</Button>
-        <FormGroup>{ this.renderPdpDeploymentCheckboxes() }</FormGroup>
-      </PanelDiv>
-    );
-  }
-}
diff --git a/runtime/ui-react/src/components/dialogs/Policy/PolicyEditor.js b/runtime/ui-react/src/components/dialogs/Policy/PolicyEditor.js
deleted file mode 100644
index 1e2754151..000000000
--- a/runtime/ui-react/src/components/dialogs/Policy/PolicyEditor.js
+++ /dev/null
@@ -1,192 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP POLICY-CLAMP
- * ================================================================================
- * Copyright (C) 2021 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-
-import React from 'react'
-import PolicyToscaService from '../../../api/PolicyToscaService';
-import { JSONEditor } from '@json-editor/json-editor/dist/nonmin/jsoneditor.js';
-import "@fortawesome/fontawesome-free/css/all.css"
-import styled from 'styled-components';
-import Button from 'react-bootstrap/Button';
-import TextField from '@material-ui/core/TextField';
-import Alert from 'react-bootstrap/Alert';
-import PolicyService from '../../../api/PolicyService';
-import OnapUtils from '../../../utils/OnapUtils';
-
-const DivWhiteSpaceStyled = styled.div`
-  white-space: pre;
-`
-
-const JsonEditorDiv = styled.div`
-  margin-top: 20px;
-  background-color: ${ props => props.theme.loopViewerBackgroundColor };
-  text-align: justify;
-  font-size: ${ props => props.theme.policyEditorFontSize };
-  border: 1px solid #C0C0C0;
-`
-const PanelDiv = styled.div`
-  text-align: justify;
-  font-size: ${ props => props.theme.policyEditorFontSize };
-  background-color: ${ props => props.theme.loopViewerBackgroundColor };
-`
-
-export default class PolicyEditor extends React.Component {
-
-  state = {
-    policyModelType: this.props.policyModelType,
-    policyModelTypeVersion: this.props.policyModelTypeVersion,
-    policyName: (typeof this.props.policyName !== "undefined") ? this.props.policyName : "org.onap.policy.new",
-    policyVersion: (typeof this.props.policyVersion !== "undefined") ? this.props.policyVersion : "0.0.1",
-    policyProperties: this.props.policyProperties,
-    showSuccessAlert: false,
-    showFailAlert: false,
-    jsonEditor: null,
-    jsonEditorDivId: this.props.policyModelType + "_" + this.props.policyModelTypeVersion + "_" + this.props.policyName + "_" + this.props.policyVersion,
-  }
-
-  constructor(props, context) {
-    super(props, context);
-    this.createJsonEditor = this.createJsonEditor.bind(this);
-    this.getToscaModelForPolicy = this.getToscaModelForPolicy.bind(this);
-    this.disableAlert = this.disableAlert.bind(this);
-    this.handleCreateNewVersion = this.handleCreateNewVersion.bind(this);
-    this.handleChangePolicyName = this.handleChangePolicyName.bind(this);
-    this.handleChangePolicyVersion = this.handleChangePolicyVersion.bind(this);
-  }
-
-  disableAlert() {
-    this.setState({ showSuccessAlert: false, showFailAlert: false });
-  }
-
-  customValidation(editorData) {
-    // method for sub-classes to override with customized validation
-    return [];
-  }
-
-  handleCreateNewVersion() {
-    var editorData = this.state.jsonEditor.getValue();
-    var errors = this.state.jsonEditor.validate();
-    errors = errors.concat(this.customValidation(editorData));
-
-    if (errors.length !== 0) {
-      console.error("Errors detected during policy data validation ", errors);
-      this.setState({
-        showFailAlert: true,
-        showMessage: 'Errors detected during policy data validation:\n' + OnapUtils.jsonEditorErrorFormatter(errors)
-      });
-      return;
-    } else {
-      console.info("NO validation errors found in policy data");
-      PolicyService.createNewPolicy(this.state.policyModelType, this.state.policyModelTypeVersion,
-        this.state.policyName, this.state.policyVersion, editorData).then(respPolicyCreation => {
-        if (typeof (respPolicyCreation) === "undefined") {
-          //it indicates a failure
-          this.setState({
-            showFailAlert: true,
-            showMessage: 'Policy Creation Failure'
-          });
-        } else {
-          this.setState({
-            showSuccessAlert: true,
-            showMessage: 'Policy ' + this.state.policyName + '/' + this.state.policyVersion + ' created successfully'
-          });
-          this.props.policiesTableUpdateFunction();
-        }
-      })
-    }
-  }
-
-  getToscaModelForPolicy() {
-    PolicyToscaService.getToscaPolicyModel(this.state.policyModelType, this.state.policyModelTypeVersion).then(respJsonPolicyTosca => {
-      if (respJsonPolicyTosca !== {}) {
-        this.setState({
-          jsonSchemaPolicyTosca: respJsonPolicyTosca,
-          jsonEditor: this.createJsonEditor(respJsonPolicyTosca, this.state.policyProperties),
-        })
-      }
-    });
-  }
-
-  componentDidMount() {
-    this.getToscaModelForPolicy();
-  }
-
-  createJsonEditor(toscaModel, editorData) {
-    return new JSONEditor(document.getElementById(this.state.jsonEditorDivId),
-      {
-        schema: toscaModel,
-        startval: editorData,
-        theme: 'bootstrap4',
-        iconlib: 'fontawesome5',
-        object_layout: 'grid',
-        disable_properties: false,
-        disable_edit_json: false,
-        disable_array_reorder: true,
-        disable_array_delete_last_row: true,
-        disable_array_delete_all_rows: false,
-        array_controls_top: true,
-        keep_oneof_values: false,
-        collapsed: true,
-        show_errors: 'always',
-        display_required_only: false,
-        show_opt_in: false,
-        prompt_before_delete: true,
-        required_by_default: false
-      })
-  }
-
-  handleChangePolicyName(event) {
-    this.setState({
-      policyName: event.target.value,
-    });
-  }
-
-  handleChangePolicyVersion(event) {
-    this.setState({
-      policyVersion: event.target.value,
-    });
-  }
-
-  render() {
-    return (
-      <PanelDiv>
-        <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>
-        <TextField required id="policyName" label="Required" defaultValue={ this.state.policyName }
-                   onChange={ this.handleChangePolicyName } variant="outlined" size="small"/>
-        <TextField required id="policyVersion" label="Required" defaultValue={ this.state.policyVersion }
-                   onChange={ this.handleChangePolicyVersion } size="small" variant="outlined"/>
-        <Button variant="secondary" title="Create a new policy version from the defined parameters"
-                onClick={ this.handleCreateNewVersion }>Create New Version</Button>
-        <JsonEditorDiv id={ this.state.jsonEditorDivId } title="Policy Properties"/>
-      </PanelDiv>
-    );
-  }
-}
diff --git a/runtime/ui-react/src/components/dialogs/Policy/PolicyEditor.test.js b/runtime/ui-react/src/components/dialogs/Policy/PolicyEditor.test.js
deleted file mode 100644
index 111f2c6bf..000000000
--- a/runtime/ui-react/src/components/dialogs/Policy/PolicyEditor.test.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP POLICY-CLAMP
- * ================================================================================
- * Copyright (C) 2021 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-import React from 'react';
-import PolicyEditor from './PolicyEditor';
-import { shallow, mount } from 'enzyme';
-import PolicyToscaService from '../../../api/PolicyToscaService';
-
-describe('Verify PolicyEditor', () => {
-  const fs = require('fs');
-
-  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"
-        }
-      ]
-    }
-  };
-
-
-  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();
-  });
-});
diff --git a/runtime/ui-react/src/components/dialogs/Policy/PolicyModal.js b/runtime/ui-react/src/components/dialogs/Policy/PolicyModal.js
deleted file mode 100644
index 0c7637c44..000000000
--- a/runtime/ui-react/src/components/dialogs/Policy/PolicyModal.js
+++ /dev/null
@@ -1,349 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP POLICY-CLAMP
- * ================================================================================
- * Copyright (C) 2020-2021 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-
-import React from 'react'
-import Button from 'react-bootstrap/Button';
-import Form from 'react-bootstrap/Form';
-import Col from 'react-bootstrap/Col';
-import Row from 'react-bootstrap/Row';
-import Select from 'react-select';
-import Modal from 'react-bootstrap/Modal';
-import styled from 'styled-components';
-import LoopService from '../../../api/LoopService';
-import LoopCache from '../../../api/LoopCache';
-import { JSONEditor } from '@json-editor/json-editor/dist/jsoneditor.js';
-import "@fortawesome/fontawesome-free/css/all.css"
-import Alert from 'react-bootstrap/Alert';
-import OnapConstant from '../../../utils/OnapConstants';
-import OnapUtils from '../../../utils/OnapUtils';
-
-const ModalStyled = styled(Modal)`
-  background-color: transparent;
-`
-
-const DivWhiteSpaceStyled = styled.div`
-  white-space: pre;
-`
-
-export default class PolicyModal extends React.Component {
-
-  state = {
-    show: true,
-    loopCache: this.props.loopCache,
-    jsonEditor: null,
-    policyName: this.props.match.params.policyName,
-    // This is to indicate whether it's an operational or config policy (in terms of loop instance)
-    policyInstanceType: this.props.match.params.policyInstanceType,
-    pdpGroup: null,
-    pdpGroupList: [],
-    pdpSubgroupList: [],
-    chosenPdpGroup: '',
-    chosenPdpSubgroup: '',
-    showSucAlert: false,
-    showFailAlert: false
-  };
-
-  constructor(props, context) {
-    super(props, context);
-    this.handleClose = this.handleClose.bind(this);
-    this.handleSave = this.handleSave.bind(this);
-    this.renderJsonEditor = this.renderJsonEditor.bind(this);
-    this.handlePdpGroupChange = this.handlePdpGroupChange.bind(this);
-    this.handlePdpSubgroupChange = this.handlePdpSubgroupChange.bind(this);
-    this.createJsonEditor = this.createJsonEditor.bind(this);
-    this.handleRefresh = this.handleRefresh.bind(this);
-    this.disableAlert = this.disableAlert.bind(this);
-    this.renderPdpGroupDropDown = this.renderPdpGroupDropDown.bind(this);
-    this.renderOpenLoopMessage = this.renderOpenLoopMessage.bind(this);
-    this.renderModalTitle = this.renderModalTitle.bind(this);
-    this.readOnly = props.readOnly !== undefined ? props.readOnly : false;
-  }
-
-  handleSave() {
-    var editorData = this.state.jsonEditor.getValue();
-    var errors = this.state.jsonEditor.validate();
-    errors = errors.concat(this.customValidation(editorData, this.state.loopCache.getTemplateName()));
-
-    if (errors.length !== 0) {
-      console.error("Errors detected during policy data validation ", errors);
-      this.setState({
-        showFailAlert: true,
-        showMessage: 'Errors detected during policy data validation:\n' + OnapUtils.jsonEditorErrorFormatter(errors)
-      });
-      return;
-    } else {
-      console.info("NO validation errors found in policy data");
-      if (this.state.policyInstanceType === OnapConstant.microServiceType) {
-        this.state.loopCache.updateMicroServiceProperties(this.state.policyName, editorData);
-        this.state.loopCache.updateMicroServicePdpGroup(this.state.policyName, this.state.chosenPdpGroup, this.state.chosenPdpSubgroup);
-        LoopService.setMicroServiceProperties(this.state.loopCache.getLoopName(), this.state.loopCache.getMicroServiceForName(this.state.policyName)).then(resp => {
-          this.setState({ show: false });
-          this.props.history.push('/');
-          this.props.loadLoopFunction(this.state.loopCache.getLoopName());
-        });
-      } else if (this.state.policyInstanceType === OnapConstant.operationalPolicyType) {
-        this.state.loopCache.updateOperationalPolicyProperties(this.state.policyName, editorData);
-        this.state.loopCache.updateOperationalPolicyPdpGroup(this.state.policyName, this.state.chosenPdpGroup, this.state.chosenPdpSubgroup);
-        LoopService.setOperationalPolicyProperties(this.state.loopCache.getLoopName(), this.state.loopCache.getOperationalPolicies()).then(resp => {
-          this.setState({ show: false });
-          this.props.history.push('/');
-          this.props.loadLoopFunction(this.state.loopCache.getLoopName());
-        });
-      }
-    }
-  }
-
-  customValidation(editorData, templateName) {
-    // method for sub-classes to override with customized validation
-    return [];
-  }
-
-  handleClose() {
-    this.setState({ show: false });
-    this.props.history.push('/');
-  }
-
-  componentDidMount() {
-    this.renderJsonEditor();
-  }
-
-  componentDidUpdate() {
-    if (this.state.showSucAlert === true || this.state.showFailAlert === true) {
-      let modalElement = document.getElementById("policyModal")
-      if (modalElement) {
-        modalElement.scrollTo(0, 0);
-      }
-    }
-  }
-
-  createJsonEditor(toscaModel, editorData) {
-    return new JSONEditor(document.getElementById("editor"),
-      {
-        schema: toscaModel,
-        startval: editorData,
-        theme: 'bootstrap4',
-        iconlib: 'fontawesome5',
-        object_layout: 'grid',
-        disable_properties: false,
-        disable_edit_json: false,
-        disable_array_reorder: true,
-        disable_array_delete_last_row: true,
-        disable_array_delete_all_rows: false,
-        array_controls_top: true,
-        keep_oneof_values: false,
-        collapsed: true,
-        show_errors: 'always',
-        display_required_only: false,
-        show_opt_in: false,
-        prompt_before_delete: true,
-        required_by_default: false
-      })
-  }
-
-  renderJsonEditor() {
-    console.debug("Rendering PolicyModal ", this.state.policyName);
-    var toscaModel = {};
-    var editorData = {};
-    var pdpGroupValues = {};
-    var chosenPdpGroupValue, chosenPdpSubgroupValue;
-    if (this.state.policyInstanceType === OnapConstant.microServiceType) {
-      toscaModel = this.state.loopCache.getMicroServiceJsonRepresentationForName(this.state.policyName);
-      editorData = this.state.loopCache.getMicroServicePropertiesForName(this.state.policyName);
-      pdpGroupValues = this.state.loopCache.getMicroServiceSupportedPdpGroup(this.state.policyName);
-      chosenPdpGroupValue = this.state.loopCache.getMicroServicePdpGroup(this.state.policyName);
-      chosenPdpSubgroupValue = this.state.loopCache.getMicroServicePdpSubgroup(this.state.policyName);
-    } else if (this.state.policyInstanceType === OnapConstant.operationalPolicyType) {
-      toscaModel = this.state.loopCache.getOperationalPolicyJsonRepresentationForName(this.state.policyName);
-      editorData = this.state.loopCache.getOperationalPolicyPropertiesForName(this.state.policyName);
-      pdpGroupValues = this.state.loopCache.getOperationalPolicySupportedPdpGroup(this.state.policyName);
-      chosenPdpGroupValue = this.state.loopCache.getOperationalPolicyPdpGroup(this.state.policyName);
-      chosenPdpSubgroupValue = this.state.loopCache.getOperationalPolicyPdpSubgroup(this.state.policyName);
-    }
-
-    if (toscaModel == null) {
-      return;
-    }
-
-    var pdpSubgroupValues = [];
-    if (typeof (chosenPdpGroupValue) !== "undefined") {
-      var selectedPdpGroup = pdpGroupValues.filter(entry => (Object.keys(entry)[0] === chosenPdpGroupValue));
-      pdpSubgroupValues = selectedPdpGroup[0][chosenPdpGroupValue].map((pdpSubgroup) => {
-        return { label: pdpSubgroup, value: pdpSubgroup }
-      });
-    }
-    this.setState({
-      jsonEditor: this.createJsonEditor(toscaModel, editorData),
-      pdpGroup: pdpGroupValues,
-      pdpGroupList: pdpGroupValues.map(entry => {
-        return { label: Object.keys(entry)[0], value: Object.keys(entry)[0] };
-      }),
-      pdpSubgroupList: pdpSubgroupValues,
-      chosenPdpGroup: chosenPdpGroupValue,
-      chosenPdpSubgroup: chosenPdpSubgroupValue
-    })
-  }
-
-  handlePdpGroupChange(e) {
-    var selectedPdpGroup = this.state.pdpGroup.filter(entry => (Object.keys(entry)[0] === e.value));
-    const pdpSubgroupValues = selectedPdpGroup[0][e.value].map((pdpSubgroup) => {
-      return { label: pdpSubgroup, value: pdpSubgroup }
-    });
-    if (this.state.chosenPdpGroup !== e.value) {
-      this.setState({
-        chosenPdpGroup: e.value,
-        chosenPdpSubgroup: '',
-        pdpSubgroupList: pdpSubgroupValues
-      });
-    }
-  }
-
-  handlePdpSubgroupChange(e) {
-    this.setState({ chosenPdpSubgroup: e.value });
-  }
-
-  handleRefresh() {
-    var newLoopCache, toscaModel, editorData;
-    if (this.state.policyInstanceType === OnapConstant.microServiceType) {
-      LoopService.refreshMicroServicePolicyJson(this.state.loopCache.getLoopName(), this.state.policyName).then(data => {
-        newLoopCache = new LoopCache(data);
-        toscaModel = newLoopCache.getMicroServiceJsonRepresentationForName(this.state.policyName);
-        editorData = newLoopCache.getMicroServicePropertiesForName(this.state.policyName);
-        document.getElementById("editor").innerHTML = "";
-        this.setState({
-          loopCache: newLoopCache,
-          jsonEditor: this.createJsonEditor(toscaModel, editorData),
-          showSucAlert: true,
-          showMessage: "Successfully refreshed"
-        });
-      })
-        .catch(error => {
-          console.error("Error while refreshing the Operational Policy Json Representation");
-          this.setState({
-            showFailAlert: true,
-            showMessage: "Refreshing of UI failed"
-          });
-        });
-    } else if (this.state.policyInstanceType === OnapConstant.operationalPolicyType) {
-      LoopService.refreshOperationalPolicyJson(this.state.loopCache.getLoopName(), this.state.policyName).then(data => {
-        var newLoopCache = new LoopCache(data);
-        toscaModel = newLoopCache.getOperationalPolicyJsonRepresentationForName(this.state.policyName);
-        editorData = newLoopCache.getOperationalPolicyPropertiesForName(this.state.policyName);
-        document.getElementById("editor").innerHTML = "";
-        this.setState({
-          loopCache: newLoopCache,
-          jsonEditor: this.createJsonEditor(toscaModel, editorData),
-          showSucAlert: true,
-          showMessage: "Successfully refreshed"
-        });
-      })
-        .catch(error => {
-          console.error("Error while refreshing the Operational Policy Json Representation");
-          this.setState({
-            showFailAlert: true,
-            showMessage: "Refreshing of UI failed"
-          });
-        });
-    }
-  }
-
-  disableAlert() {
-    this.setState({ showSucAlert: false, showFailAlert: false });
-  }
-
-  renderPdpGroupDropDown() {
-    if (this.state.policyInstanceType !== OnapConstant.operationalPolicyType || !this.state.loopCache.isOpenLoopTemplate()) {
-      return (
-        <Form.Group as={ Row } controlId="formPlaintextEmail">
-          <Form.Label column sm="2">Pdp Group Info</Form.Label>
-          <Col sm="3">
-            <Select value={ { label: this.state.chosenPdpGroup, value: this.state.chosenPdpGroup } } onChange={ this.handlePdpGroupChange } options={ this.state.pdpGroupList }/>
-          </Col>
-          <Col sm="3">
-            <Select value={ { label: this.state.chosenPdpSubgroup, value: this.state.chosenPdpSubgroup } } onChange={ this.handlePdpSubgroupChange } options={ this.state.pdpSubgroupList }/>
-          </Col>
-        </Form.Group>
-      );
-    }
-  }
-
-  renderOpenLoopMessage() {
-    if (this.state.policyInstanceType === OnapConstant.operationalPolicyType && this.state.loopCache.isOpenLoopTemplate()) {
-      return (
-        "Operational Policy cannot be configured as only Open Loop is supported for this Template!"
-      );
-    }
-  }
-
-  renderModalTitle() {
-    return (
-      <Modal.Title>Edit the policy</Modal.Title>
-    );
-  }
-
-  renderButton() {
-    var allElement = [(<Button key="close" variant="secondary" onClick={ this.handleClose }>
-      Close
-    </Button>)];
-    if (this.state.policyInstanceType !== OnapConstant.operationalPolicyType || !this.state.loopCache.isOpenLoopTemplate()) {
-      allElement.push((
-        <Button key="save" variant="primary" disabled={ this.readOnly } onClick={ this.handleSave }>
-          Save Changes
-        </Button>
-      ));
-      allElement.push((
-        <Button key="refresh" variant="primary" disabled={ this.readOnly } onClick={ this.handleRefresh }>
-          Refresh
-        </Button>
-      ));
-    }
-    return allElement;
-  }
-
-  render() {
-    return (
-      <ModalStyled size="xl" backdrop="static" keyboard={ false } show={ this.state.show } onHide={ this.handleClose }>
-        <Modal.Header closeButton>
-          { this.renderModalTitle() }
-        </Modal.Header>
-        <Alert variant="success" show={ this.state.showSucAlert } 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.Body>
-          { this.renderOpenLoopMessage() }
-          <div id="editor"/>
-          { this.renderPdpGroupDropDown() }
-        </Modal.Body>
-        <Modal.Footer>
-          { this.renderButton() }
-        </Modal.Footer>
-      </ModalStyled>
-    );
-  }
-}
diff --git a/runtime/ui-react/src/components/dialogs/Policy/PolicyModal.test.js b/runtime/ui-react/src/components/dialogs/Policy/PolicyModal.test.js
deleted file mode 100644
index 658b19e26..000000000
--- a/runtime/ui-react/src/components/dialogs/Policy/PolicyModal.test.js
+++ /dev/null
@@ -1,135 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP POLICY-CLAMP
- * ================================================================================
- * Copyright (C) 2020-2021 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-import React from 'react';
-import { mount } from 'enzyme';
-import PolicyModal from './PolicyModal';
-import LoopCache from '../../../api/LoopCache';
-import LoopService from '../../../api/LoopService';
-import OnapConstant from '../../../utils/OnapConstants';
-import { shallow } from 'enzyme';
-
-describe('Verify PolicyModal', () => {
-  beforeEach(() => {
-    fetch.resetMocks();
-    fetch.mockImplementation(() => {
-      return Promise.resolve({
-        ok: true,
-        status: 200,
-        text: () => "OK"
-      });
-    });
-  })
-  const loopCacheStr = {
-    "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
-    "operationalPolicies": [{
-      "name": "OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca",
-      "configurationsJson": {
-        "operational_policy": {
-          "controlLoop": {},
-          "policies": []
-        }
-      },
-      "policyModel": { "policyPdpGroup": { "supportedPdpGroups": [{ "monitoring": ["xacml"] }] } },
-      "jsonRepresentation": { "schema": {} }
-    }]
-  };
-
-  const loopCache = new LoopCache(loopCacheStr);
-  const historyMock = { push: jest.fn() };
-  const flushPromises = () => new Promise(setImmediate);
-  const match = { params: { policyName: "OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca", policyInstanceType: OnapConstant.operationalPolicyType } }
-
-  it('Test handleClose', () => {
-    const handleClose = jest.spyOn(PolicyModal.prototype, 'handleClose');
-    const component = mount(<PolicyModal history={ historyMock } match={ match } loopCache={ loopCache }/>)
-
-    component.find('[variant="secondary"]').prop('onClick')();
-
-    expect(handleClose).toHaveBeenCalledTimes(1);
-    expect(component.state('show')).toEqual(false);
-    expect(historyMock.push.mock.calls[0]).toEqual(['/']);
-  });
-
-  it('Test handleSave', async () => {
-    const loadLoopFunction = jest.fn();
-    const handleSave = jest.spyOn(PolicyModal.prototype, 'handleSave');
-    const component = mount(<PolicyModal history={ historyMock }
-                                         loopCache={ loopCache } match={ match } loadLoopFunction={ loadLoopFunction }/>)
-
-    component.find('[variant="primary"]').get(0).props.onClick();
-    await flushPromises();
-    component.update();
-
-    expect(handleSave).toHaveBeenCalledTimes(1);
-    expect(component.state('show')).toEqual(false);
-    expect(historyMock.push.mock.calls[0]).toEqual(['/']);
-  });
-
-  it('Test handleRefresh', async () => {
-    LoopService.refreshOperationalPolicyJson = jest.fn().mockImplementation(() => {
-      return Promise.resolve(loopCacheStr);
-    });
-    const updateLoopFunction = jest.fn();
-    const handleRefresh = jest.spyOn(PolicyModal.prototype, 'handleRefresh');
-    const component = mount(<PolicyModal loopCache={ loopCache } match={ match } updateLoopFunction={ updateLoopFunction }/>)
-
-    component.find('[variant="primary"]').get(1).props.onClick();
-    await flushPromises();
-    component.update();
-
-    expect(handleRefresh).toHaveBeenCalledTimes(1);
-    expect(component.state('show')).toEqual(true);
-    expect(component.state('showSucAlert')).toEqual(true);
-    expect(component.state('showMessage')).toEqual("Successfully refreshed");
-  });
-
-  it('Test handlePdpGroupChange', () => {
-    const component = mount(<PolicyModal loopCache={ loopCache } match={ match }/>)
-    component.setState({
-      "pdpGroup": [{ "option1": ["subPdp1", "subPdp2"] }],
-      "chosenPdpGroup": "option2"
-    });
-    expect(component.state('chosenPdpGroup')).toEqual("option2");
-
-    const instance = component.instance();
-    const event = { label: "option1", value: "option1" }
-    instance.handlePdpGroupChange(event);
-    expect(component.state('chosenPdpGroup')).toEqual("option1");
-    expect(component.state('chosenPdpSubgroup')).toEqual("");
-    expect(component.state('pdpSubgroupList')).toEqual([{ label: "subPdp1", value: "subPdp1" }, { label: "subPdp2", value: "subPdp2" }]);
-  });
-
-  it('Test handlePdpSubgroupChange', () => {
-    const component = mount(<PolicyModal loopCache={ loopCache } match={ match }/>)
-
-    const instance = component.instance();
-    const event = { label: "option1", value: "option1" }
-    instance.handlePdpSubgroupChange(event);
-    expect(component.state('chosenPdpSubgroup')).toEqual("option1");
-  });
-
-  it('Test the render method', () => {
-    const component = shallow(<PolicyModal loopCache={ loopCache } match={ match }/>)
-    expect(component).toMatchSnapshot();
-  });
-});
diff --git a/runtime/ui-react/src/components/dialogs/Policy/PolicyToscaFileSelector.js b/runtime/ui-react/src/components/dialogs/Policy/PolicyToscaFileSelector.js
deleted file mode 100644
index 8093b7e4e..000000000
--- a/runtime/ui-react/src/components/dialogs/Policy/PolicyToscaFileSelector.js
+++ /dev/null
@@ -1,133 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP POLICY-CLAMP
- * ================================================================================
- * Copyright (C) 2021 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-
-import React from 'react'
-import Modal from 'react-bootstrap/Modal';
-import Form from 'react-bootstrap/Form';
-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 PublishIcon from '@material-ui/icons/Publish';
-import PolicyService from '../../../api/PolicyService';
-
-const ModalStyled = styled(Modal)`
-  background-color: transparent;
-`
-
-const StyledMessagesDiv = styled.div`
-  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);
-  }
-
-  componentDidUpdate(prevProps) {
-    if (this.props.show !== this.state.show) {
-      this.setState({ show: this.props.show });
-    }
-  }
-
-  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>
-    );
-  }
-}
diff --git a/runtime/ui-react/src/components/dialogs/Policy/ToscaViewer.js b/runtime/ui-react/src/components/dialogs/Policy/ToscaViewer.js
deleted file mode 100644
index fc69a637a..000000000
--- a/runtime/ui-react/src/components/dialogs/Policy/ToscaViewer.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP POLICY-CLAMP
- * ================================================================================
- * Copyright (C) 2021 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-
-import React from 'react'
-import PolicyToscaService from '../../../api/PolicyToscaService';
-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%;
-`
-
-export default class ToscaViewer extends React.Component {
-
-  state = {
-    toscaData: this.props.toscaData,
-    yamlPolicyTosca: this.getToscaModelYamlFor(this.props.toscaData),
-  }
-
-  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,
-      })
-    });
-  }
-
-  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>
-    );
-  }
-}
diff --git a/runtime/ui-react/src/components/dialogs/Policy/ToscaViewer.test.js b/runtime/ui-react/src/components/dialogs/Policy/ToscaViewer.test.js
deleted file mode 100644
index 5b5976046..000000000
--- a/runtime/ui-react/src/components/dialogs/Policy/ToscaViewer.test.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP POLICY-CLAMP
- * ================================================================================
- * Copyright (C) 2021 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-import React from 'react';
-import ToscaViewer from './ToscaViewer';
-import { shallow, mount } from 'enzyme';
-import PolicyToscaService from '../../../api/PolicyToscaService';
-
-describe('Verify ToscaViewer', () => {
-  const fs = require('fs');
-
-  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
-    }
-  };
-
-  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();
-  });
-});
diff --git a/runtime/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js b/runtime/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js
deleted file mode 100644
index f571bc16d..000000000
--- a/runtime/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js
+++ /dev/null
@@ -1,475 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP POLICY-CLAMP
- * ================================================================================
- * Copyright (C) 2021 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-
-import React, { forwardRef } from 'react'
-import Button from 'react-bootstrap/Button';
-import Modal from 'react-bootstrap/Modal';
-import styled from 'styled-components';
-import AddBox from '@material-ui/icons/AddBox';
-import ArrowDownward from '@material-ui/icons/ArrowDownward';
-import Check from '@material-ui/icons/Check';
-import ChevronLeft from '@material-ui/icons/ChevronLeft';
-import ChevronRight from '@material-ui/icons/ChevronRight';
-import Clear from '@material-ui/icons/Clear';
-import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
-import Edit from '@material-ui/icons/Edit';
-import FilterList from '@material-ui/icons/FilterList';
-import FirstPage from '@material-ui/icons/FirstPage';
-import LastPage from '@material-ui/icons/LastPage';
-import Remove from '@material-ui/icons/Remove';
-import SaveAlt from '@material-ui/icons/SaveAlt';
-import Search from '@material-ui/icons/Search';
-import ViewColumn from '@material-ui/icons/ViewColumn';
-import DehazeIcon from '@material-ui/icons/Dehaze';
-import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
-import AddIcon from '@material-ui/icons/Add';
-import PublishIcon from '@material-ui/icons/Publish';
-import Switch from '@material-ui/core/Switch';
-import MaterialTable from "material-table";
-import PolicyService from '../../../api/PolicyService';
-import PolicyToscaService from '../../../api/PolicyToscaService';
-import Select from '@material-ui/core/Select';
-import Alert from 'react-bootstrap/Alert';
-import Tabs from 'react-bootstrap/Tabs';
-import Tab from 'react-bootstrap/Tab';
-import PolicyEditor from './PolicyEditor';
-import ToscaViewer from './ToscaViewer';
-import PolicyDeploymentEditor from './PolicyDeploymentEditor';
-import PoliciesTreeViewer from './PoliciesTreeViewer';
-import PolicyToscaFileSelector from './PolicyToscaFileSelector';
-
-const DivWhiteSpaceStyled = styled.div`
-  white-space: pre;
-`
-
-const ModalStyled = styled(Modal)`
-  @media (min-width: 800px) {
-    .modal-xl {
-      max-width: 96%;
-    }
-  }
-  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;
-`
-
-const PoliciesTreeViewerDiv = styled.div`
-  width: 20%;
-  float: left;
-  left: 0;
-  overflow: auto;
-`
-
-const MaterialTableDiv = styled.div`
-  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' };
-
-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();
-  }
-
-  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;
-      }
-
-      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;
-        });
-      }
-    });
-  }
-
-  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();
-        }
-      }
-    )
-  }
-
-  disableAlert() {
-    this.setState({ showSuccessAlert: false, showFailAlert: false });
-  }
-
-  filterPolicies(prefixForFiltering) {
-    this.setState({ policiesListDataFiltered: this.state.policiesListData.filter(element => element.name.startsWith(prefixForFiltering)) });
-  }
-
-  filterTosca(prefixForFiltering) {
-    this.setState({ toscaModelsListDataFiltered: this.state.toscaModelsListData.filter(element => element.policyModelType.startsWith(prefixForFiltering)) });
-  }
-
-  showFileSelector() {
-    this.setState({ showFileSelector: true });
-  }
-
-  disableFileSelector() {
-    this.setState({ showFileSelector: false });
-  }
-
-  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>
-    );
-  }
-
-  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>
-    );
-  }
-}
diff --git a/runtime/ui-react/src/components/dialogs/Policy/__snapshots__/PolicyEditor.test.js.snap b/runtime/ui-react/src/components/dialogs/Policy/__snapshots__/PolicyEditor.test.js.snap
deleted file mode 100644
index bf84e91d1..000000000
--- a/runtime/ui-react/src/components/dialogs/Policy/__snapshots__/PolicyEditor.test.js.snap
+++ /dev/null
@@ -1,788 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Verify PolicyEditor Test the render method 1`] = `
-<PolicyEditor
-  policiesTableUpdateFunction={[Function]}
-  policyModelType="onap.policies.monitoring.tcagen2"
-  policyModelTypeVersion="1.0.0"
-  policyName="org.onap.new"
-  policyProperties={
-    Object {
-      "tca.policy": Object {
-        "domain": "measurementsForVfScaling",
-        "metricsPerEventName": Array [
-          Object {
-            "controlLoopSchemaType": "VM",
-            "eventName": "vLoadBalancer",
-            "policyName": "DCAE.Config_tca-hi-lo",
-            "policyScope": "DCAE",
-            "policyVersion": "v0.0.1",
-            "thresholds": Array [
-              Object {
-                "closedLoopControlName": "LOOP_test",
-                "closedLoopEventStatus": "ONSET",
-                "direction": "LESS_OR_EQUAL",
-                "fieldPath": "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedTotalPacketsDelta",
-                "severity": "MAJOR",
-                "thresholdValue": 200,
-                "version": "1.0.2",
-              },
-            ],
-          },
-        ],
-      },
-    }
-  }
-  policyVersion="1.0.0"
->
-  <styled.div>
-    <div
-      className="sc-dlfnbm eVKaeY"
-    >
-      <Alert
-        closeLabel="Close alert"
-        dismissible={true}
-        onClose={[Function]}
-        show={false}
-        transition={
-          Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "defaultProps": Object {
-              "appear": false,
-              "in": false,
-              "mountOnEnter": false,
-              "timeout": 300,
-              "unmountOnExit": false,
-            },
-            "render": [Function],
-          }
-        }
-        variant="success"
-      >
-        <Fade
-          appear={false}
-          in={false}
-          mountOnEnter={false}
-          timeout={300}
-          unmountOnExit={true}
-        >
-          <Transition
-            addEndListener={[Function]}
-            appear={false}
-            enter={true}
-            exit={true}
-            in={false}
-            mountOnEnter={false}
-            onEnter={[Function]}
-            onEntered={[Function]}
-            onEntering={[Function]}
-            onExit={[Function]}
-            onExited={[Function]}
-            onExiting={[Function]}
-            timeout={300}
-            unmountOnExit={true}
-          />
-        </Fade>
-      </Alert>
-      <Alert
-        closeLabel="Close alert"
-        dismissible={true}
-        onClose={[Function]}
-        show={false}
-        transition={
-          Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "defaultProps": Object {
-              "appear": false,
-              "in": false,
-              "mountOnEnter": false,
-              "timeout": 300,
-              "unmountOnExit": false,
-            },
-            "render": [Function],
-          }
-        }
-        variant="danger"
-      >
-        <Fade
-          appear={false}
-          in={false}
-          mountOnEnter={false}
-          timeout={300}
-          unmountOnExit={true}
-        >
-          <Transition
-            addEndListener={[Function]}
-            appear={false}
-            enter={true}
-            exit={true}
-            in={false}
-            mountOnEnter={false}
-            onEnter={[Function]}
-            onEntered={[Function]}
-            onEntering={[Function]}
-            onExit={[Function]}
-            onExited={[Function]}
-            onExiting={[Function]}
-            timeout={300}
-            unmountOnExit={true}
-          />
-        </Fade>
-      </Alert>
-      <WithStyles(ForwardRef(TextField))
-        defaultValue="org.onap.new"
-        id="policyName"
-        label="Required"
-        onChange={[Function]}
-        required={true}
-        size="small"
-        variant="outlined"
-      >
-        <ForwardRef(TextField)
-          classes={
-            Object {
-              "root": "MuiTextField-root",
-            }
-          }
-          defaultValue="org.onap.new"
-          id="policyName"
-          label="Required"
-          onChange={[Function]}
-          required={true}
-          size="small"
-          variant="outlined"
-        >
-          <WithStyles(ForwardRef(FormControl))
-            className="MuiTextField-root"
-            color="primary"
-            disabled={false}
-            error={false}
-            fullWidth={false}
-            required={true}
-            size="small"
-            variant="outlined"
-          >
-            <ForwardRef(FormControl)
-              className="MuiTextField-root"
-              classes={
-                Object {
-                  "fullWidth": "MuiFormControl-fullWidth",
-                  "marginDense": "MuiFormControl-marginDense",
-                  "marginNormal": "MuiFormControl-marginNormal",
-                  "root": "MuiFormControl-root",
-                }
-              }
-              color="primary"
-              disabled={false}
-              error={false}
-              fullWidth={false}
-              required={true}
-              size="small"
-              variant="outlined"
-            >
-              <div
-                className="MuiFormControl-root MuiTextField-root"
-              >
-                <WithStyles(ForwardRef(InputLabel))
-                  htmlFor="policyName"
-                  id="policyName-label"
-                >
-                  <ForwardRef(InputLabel)
-                    classes={
-                      Object {
-                        "animated": "MuiInputLabel-animated",
-                        "asterisk": "MuiInputLabel-asterisk",
-                        "disabled": "Mui-disabled",
-                        "error": "Mui-error",
-                        "filled": "MuiInputLabel-filled",
-                        "focused": "Mui-focused",
-                        "formControl": "MuiInputLabel-formControl",
-                        "marginDense": "MuiInputLabel-marginDense",
-                        "outlined": "MuiInputLabel-outlined",
-                        "required": "Mui-required",
-                        "root": "MuiInputLabel-root",
-                        "shrink": "MuiInputLabel-shrink",
-                      }
-                    }
-                    htmlFor="policyName"
-                    id="policyName-label"
-                  >
-                    <WithStyles(ForwardRef(FormLabel))
-                      className="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-marginDense MuiInputLabel-outlined"
-                      classes={
-                        Object {
-                          "asterisk": "MuiInputLabel-asterisk",
-                          "disabled": "Mui-disabled",
-                          "error": "Mui-error",
-                          "focused": "Mui-focused",
-                          "required": "Mui-required",
-                        }
-                      }
-                      data-shrink={true}
-                      htmlFor="policyName"
-                      id="policyName-label"
-                    >
-                      <ForwardRef(FormLabel)
-                        className="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-marginDense MuiInputLabel-outlined"
-                        classes={
-                          Object {
-                            "asterisk": "MuiFormLabel-asterisk MuiInputLabel-asterisk",
-                            "colorSecondary": "MuiFormLabel-colorSecondary",
-                            "disabled": "Mui-disabled Mui-disabled",
-                            "error": "Mui-error Mui-error",
-                            "filled": "MuiFormLabel-filled",
-                            "focused": "Mui-focused Mui-focused",
-                            "required": "Mui-required Mui-required",
-                            "root": "MuiFormLabel-root",
-                          }
-                        }
-                        data-shrink={true}
-                        htmlFor="policyName"
-                        id="policyName-label"
-                      >
-                        <label
-                          className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-marginDense MuiInputLabel-outlined MuiFormLabel-filled Mui-required Mui-required"
-                          data-shrink={true}
-                          htmlFor="policyName"
-                          id="policyName-label"
-                        >
-                          Required
-                          <span
-                            aria-hidden={true}
-                            className="MuiFormLabel-asterisk MuiInputLabel-asterisk"
-                          >
-                             
-                            *
-                          </span>
-                        </label>
-                      </ForwardRef(FormLabel)>
-                    </WithStyles(ForwardRef(FormLabel))>
-                  </ForwardRef(InputLabel)>
-                </WithStyles(ForwardRef(InputLabel))>
-                <WithStyles(ForwardRef(OutlinedInput))
-                  autoFocus={false}
-                  defaultValue="org.onap.new"
-                  fullWidth={false}
-                  id="policyName"
-                  label={
-                    <React.Fragment>
-                      Required
-                       *
-                    </React.Fragment>
-                  }
-                  multiline={false}
-                  onChange={[Function]}
-                >
-                  <ForwardRef(OutlinedInput)
-                    autoFocus={false}
-                    classes={
-                      Object {
-                        "adornedEnd": "MuiOutlinedInput-adornedEnd",
-                        "adornedStart": "MuiOutlinedInput-adornedStart",
-                        "colorSecondary": "MuiOutlinedInput-colorSecondary",
-                        "disabled": "Mui-disabled",
-                        "error": "Mui-error",
-                        "focused": "Mui-focused",
-                        "input": "MuiOutlinedInput-input",
-                        "inputAdornedEnd": "MuiOutlinedInput-inputAdornedEnd",
-                        "inputAdornedStart": "MuiOutlinedInput-inputAdornedStart",
-                        "inputMarginDense": "MuiOutlinedInput-inputMarginDense",
-                        "inputMultiline": "MuiOutlinedInput-inputMultiline",
-                        "marginDense": "MuiOutlinedInput-marginDense",
-                        "multiline": "MuiOutlinedInput-multiline",
-                        "notchedOutline": "MuiOutlinedInput-notchedOutline",
-                        "root": "MuiOutlinedInput-root",
-                      }
-                    }
-                    defaultValue="org.onap.new"
-                    fullWidth={false}
-                    id="policyName"
-                    label={
-                      <React.Fragment>
-                        Required
-                         *
-                      </React.Fragment>
-                    }
-                    multiline={false}
-                    onChange={[Function]}
-                  >
-                    <WithStyles(ForwardRef(InputBase))
-                      autoFocus={false}
-                      classes={
-                        Object {
-                          "adornedEnd": "MuiOutlinedInput-adornedEnd",
-                          "adornedStart": "MuiOutlinedInput-adornedStart",
-                          "colorSecondary": "MuiOutlinedInput-colorSecondary",
-                          "disabled": "Mui-disabled",
-                          "error": "Mui-error",
-                          "focused": "Mui-focused",
-                          "input": "MuiOutlinedInput-input",
-                          "inputAdornedEnd": "MuiOutlinedInput-inputAdornedEnd",
-                          "inputAdornedStart": "MuiOutlinedInput-inputAdornedStart",
-                          "inputMarginDense": "MuiOutlinedInput-inputMarginDense",
-                          "inputMultiline": "MuiOutlinedInput-inputMultiline",
-                          "marginDense": "MuiOutlinedInput-marginDense",
-                          "multiline": "MuiOutlinedInput-multiline",
-                          "notchedOutline": null,
-                          "root": "MuiOutlinedInput-root",
-                        }
-                      }
-                      defaultValue="org.onap.new"
-                      fullWidth={false}
-                      id="policyName"
-                      inputComponent="input"
-                      multiline={false}
-                      onChange={[Function]}
-                      renderSuffix={[Function]}
-                      type="text"
-                    >
-                      <ForwardRef(InputBase)
-                        autoFocus={false}
-                        classes={
-                          Object {
-                            "adornedEnd": "MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd",
-                            "adornedStart": "MuiInputBase-adornedStart MuiOutlinedInput-adornedStart",
-                            "colorSecondary": "MuiInputBase-colorSecondary MuiOutlinedInput-colorSecondary",
-                            "disabled": "Mui-disabled Mui-disabled",
-                            "error": "Mui-error Mui-error",
-                            "focused": "Mui-focused Mui-focused",
-                            "formControl": "MuiInputBase-formControl",
-                            "fullWidth": "MuiInputBase-fullWidth",
-                            "input": "MuiInputBase-input MuiOutlinedInput-input",
-                            "inputAdornedEnd": "MuiInputBase-inputAdornedEnd MuiOutlinedInput-inputAdornedEnd",
-                            "inputAdornedStart": "MuiInputBase-inputAdornedStart MuiOutlinedInput-inputAdornedStart",
-                            "inputHiddenLabel": "MuiInputBase-inputHiddenLabel",
-                            "inputMarginDense": "MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense",
-                            "inputMultiline": "MuiInputBase-inputMultiline MuiOutlinedInput-inputMultiline",
-                            "inputTypeSearch": "MuiInputBase-inputTypeSearch",
-                            "marginDense": "MuiInputBase-marginDense MuiOutlinedInput-marginDense",
-                            "multiline": "MuiInputBase-multiline MuiOutlinedInput-multiline",
-                            "root": "MuiInputBase-root MuiOutlinedInput-root",
-                          }
-                        }
-                        defaultValue="org.onap.new"
-                        fullWidth={false}
-                        id="policyName"
-                        inputComponent="input"
-                        multiline={false}
-                        onChange={[Function]}
-                        renderSuffix={[Function]}
-                        type="text"
-                      >
-                        <div
-                          className="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl MuiInputBase-marginDense MuiOutlinedInput-marginDense"
-                          onClick={[Function]}
-                        >
-                          <input
-                            aria-invalid={false}
-                            autoFocus={false}
-                            className="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense"
-                            defaultValue="org.onap.new"
-                            disabled={false}
-                            id="policyName"
-                            onAnimationStart={[Function]}
-                            onBlur={[Function]}
-                            onChange={[Function]}
-                            onFocus={[Function]}
-                            required={true}
-                            type="text"
-                          />
-                          <WithStyles(ForwardRef(NotchedOutline))
-                            className="MuiOutlinedInput-notchedOutline"
-                            label={
-                              <React.Fragment>
-                                Required
-                                 *
-                              </React.Fragment>
-                            }
-                            labelWidth={0}
-                            notched={true}
-                          >
-                            <ForwardRef(NotchedOutline)
-                              className="MuiOutlinedInput-notchedOutline"
-                              classes={
-                                Object {
-                                  "legend": "PrivateNotchedOutline-legend-2",
-                                  "legendLabelled": "PrivateNotchedOutline-legendLabelled-3",
-                                  "legendNotched": "PrivateNotchedOutline-legendNotched-4",
-                                  "root": "PrivateNotchedOutline-root-1",
-                                }
-                              }
-                              label={
-                                <React.Fragment>
-                                  Required
-                                   *
-                                </React.Fragment>
-                              }
-                              labelWidth={0}
-                              notched={true}
-                            >
-                              <fieldset
-                                aria-hidden={true}
-                                className="PrivateNotchedOutline-root-1 MuiOutlinedInput-notchedOutline"
-                              >
-                                <legend
-                                  className="PrivateNotchedOutline-legendLabelled-3 PrivateNotchedOutline-legendNotched-4"
-                                >
-                                  <span>
-                                    Required
-                                     *
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </ForwardRef(NotchedOutline)>
-                          </WithStyles(ForwardRef(NotchedOutline))>
-                        </div>
-                      </ForwardRef(InputBase)>
-                    </WithStyles(ForwardRef(InputBase))>
-                  </ForwardRef(OutlinedInput)>
-                </WithStyles(ForwardRef(OutlinedInput))>
-              </div>
-            </ForwardRef(FormControl)>
-          </WithStyles(ForwardRef(FormControl))>
-        </ForwardRef(TextField)>
-      </WithStyles(ForwardRef(TextField))>
-      <WithStyles(ForwardRef(TextField))
-        defaultValue="1.0.0"
-        id="policyVersion"
-        label="Required"
-        onChange={[Function]}
-        required={true}
-        size="small"
-        variant="outlined"
-      >
-        <ForwardRef(TextField)
-          classes={
-            Object {
-              "root": "MuiTextField-root",
-            }
-          }
-          defaultValue="1.0.0"
-          id="policyVersion"
-          label="Required"
-          onChange={[Function]}
-          required={true}
-          size="small"
-          variant="outlined"
-        >
-          <WithStyles(ForwardRef(FormControl))
-            className="MuiTextField-root"
-            color="primary"
-            disabled={false}
-            error={false}
-            fullWidth={false}
-            required={true}
-            size="small"
-            variant="outlined"
-          >
-            <ForwardRef(FormControl)
-              className="MuiTextField-root"
-              classes={
-                Object {
-                  "fullWidth": "MuiFormControl-fullWidth",
-                  "marginDense": "MuiFormControl-marginDense",
-                  "marginNormal": "MuiFormControl-marginNormal",
-                  "root": "MuiFormControl-root",
-                }
-              }
-              color="primary"
-              disabled={false}
-              error={false}
-              fullWidth={false}
-              required={true}
-              size="small"
-              variant="outlined"
-            >
-              <div
-                className="MuiFormControl-root MuiTextField-root"
-              >
-                <WithStyles(ForwardRef(InputLabel))
-                  htmlFor="policyVersion"
-                  id="policyVersion-label"
-                >
-                  <ForwardRef(InputLabel)
-                    classes={
-                      Object {
-                        "animated": "MuiInputLabel-animated",
-                        "asterisk": "MuiInputLabel-asterisk",
-                        "disabled": "Mui-disabled",
-                        "error": "Mui-error",
-                        "filled": "MuiInputLabel-filled",
-                        "focused": "Mui-focused",
-                        "formControl": "MuiInputLabel-formControl",
-                        "marginDense": "MuiInputLabel-marginDense",
-                        "outlined": "MuiInputLabel-outlined",
-                        "required": "Mui-required",
-                        "root": "MuiInputLabel-root",
-                        "shrink": "MuiInputLabel-shrink",
-                      }
-                    }
-                    htmlFor="policyVersion"
-                    id="policyVersion-label"
-                  >
-                    <WithStyles(ForwardRef(FormLabel))
-                      className="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-marginDense MuiInputLabel-outlined"
-                      classes={
-                        Object {
-                          "asterisk": "MuiInputLabel-asterisk",
-                          "disabled": "Mui-disabled",
-                          "error": "Mui-error",
-                          "focused": "Mui-focused",
-                          "required": "Mui-required",
-                        }
-                      }
-                      data-shrink={true}
-                      htmlFor="policyVersion"
-                      id="policyVersion-label"
-                    >
-                      <ForwardRef(FormLabel)
-                        className="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-marginDense MuiInputLabel-outlined"
-                        classes={
-                          Object {
-                            "asterisk": "MuiFormLabel-asterisk MuiInputLabel-asterisk",
-                            "colorSecondary": "MuiFormLabel-colorSecondary",
-                            "disabled": "Mui-disabled Mui-disabled",
-                            "error": "Mui-error Mui-error",
-                            "filled": "MuiFormLabel-filled",
-                            "focused": "Mui-focused Mui-focused",
-                            "required": "Mui-required Mui-required",
-                            "root": "MuiFormLabel-root",
-                          }
-                        }
-                        data-shrink={true}
-                        htmlFor="policyVersion"
-                        id="policyVersion-label"
-                      >
-                        <label
-                          className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-marginDense MuiInputLabel-outlined MuiFormLabel-filled Mui-required Mui-required"
-                          data-shrink={true}
-                          htmlFor="policyVersion"
-                          id="policyVersion-label"
-                        >
-                          Required
-                          <span
-                            aria-hidden={true}
-                            className="MuiFormLabel-asterisk MuiInputLabel-asterisk"
-                          >
-                             
-                            *
-                          </span>
-                        </label>
-                      </ForwardRef(FormLabel)>
-                    </WithStyles(ForwardRef(FormLabel))>
-                  </ForwardRef(InputLabel)>
-                </WithStyles(ForwardRef(InputLabel))>
-                <WithStyles(ForwardRef(OutlinedInput))
-                  autoFocus={false}
-                  defaultValue="1.0.0"
-                  fullWidth={false}
-                  id="policyVersion"
-                  label={
-                    <React.Fragment>
-                      Required
-                       *
-                    </React.Fragment>
-                  }
-                  multiline={false}
-                  onChange={[Function]}
-                >
-                  <ForwardRef(OutlinedInput)
-                    autoFocus={false}
-                    classes={
-                      Object {
-                        "adornedEnd": "MuiOutlinedInput-adornedEnd",
-                        "adornedStart": "MuiOutlinedInput-adornedStart",
-                        "colorSecondary": "MuiOutlinedInput-colorSecondary",
-                        "disabled": "Mui-disabled",
-                        "error": "Mui-error",
-                        "focused": "Mui-focused",
-                        "input": "MuiOutlinedInput-input",
-                        "inputAdornedEnd": "MuiOutlinedInput-inputAdornedEnd",
-                        "inputAdornedStart": "MuiOutlinedInput-inputAdornedStart",
-                        "inputMarginDense": "MuiOutlinedInput-inputMarginDense",
-                        "inputMultiline": "MuiOutlinedInput-inputMultiline",
-                        "marginDense": "MuiOutlinedInput-marginDense",
-                        "multiline": "MuiOutlinedInput-multiline",
-                        "notchedOutline": "MuiOutlinedInput-notchedOutline",
-                        "root": "MuiOutlinedInput-root",
-                      }
-                    }
-                    defaultValue="1.0.0"
-                    fullWidth={false}
-                    id="policyVersion"
-                    label={
-                      <React.Fragment>
-                        Required
-                         *
-                      </React.Fragment>
-                    }
-                    multiline={false}
-                    onChange={[Function]}
-                  >
-                    <WithStyles(ForwardRef(InputBase))
-                      autoFocus={false}
-                      classes={
-                        Object {
-                          "adornedEnd": "MuiOutlinedInput-adornedEnd",
-                          "adornedStart": "MuiOutlinedInput-adornedStart",
-                          "colorSecondary": "MuiOutlinedInput-colorSecondary",
-                          "disabled": "Mui-disabled",
-                          "error": "Mui-error",
-                          "focused": "Mui-focused",
-                          "input": "MuiOutlinedInput-input",
-                          "inputAdornedEnd": "MuiOutlinedInput-inputAdornedEnd",
-                          "inputAdornedStart": "MuiOutlinedInput-inputAdornedStart",
-                          "inputMarginDense": "MuiOutlinedInput-inputMarginDense",
-                          "inputMultiline": "MuiOutlinedInput-inputMultiline",
-                          "marginDense": "MuiOutlinedInput-marginDense",
-                          "multiline": "MuiOutlinedInput-multiline",
-                          "notchedOutline": null,
-                          "root": "MuiOutlinedInput-root",
-                        }
-                      }
-                      defaultValue="1.0.0"
-                      fullWidth={false}
-                      id="policyVersion"
-                      inputComponent="input"
-                      multiline={false}
-                      onChange={[Function]}
-                      renderSuffix={[Function]}
-                      type="text"
-                    >
-                      <ForwardRef(InputBase)
-                        autoFocus={false}
-                        classes={
-                          Object {
-                            "adornedEnd": "MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd",
-                            "adornedStart": "MuiInputBase-adornedStart MuiOutlinedInput-adornedStart",
-                            "colorSecondary": "MuiInputBase-colorSecondary MuiOutlinedInput-colorSecondary",
-                            "disabled": "Mui-disabled Mui-disabled",
-                            "error": "Mui-error Mui-error",
-                            "focused": "Mui-focused Mui-focused",
-                            "formControl": "MuiInputBase-formControl",
-                            "fullWidth": "MuiInputBase-fullWidth",
-                            "input": "MuiInputBase-input MuiOutlinedInput-input",
-                            "inputAdornedEnd": "MuiInputBase-inputAdornedEnd MuiOutlinedInput-inputAdornedEnd",
-                            "inputAdornedStart": "MuiInputBase-inputAdornedStart MuiOutlinedInput-inputAdornedStart",
-                            "inputHiddenLabel": "MuiInputBase-inputHiddenLabel",
-                            "inputMarginDense": "MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense",
-                            "inputMultiline": "MuiInputBase-inputMultiline MuiOutlinedInput-inputMultiline",
-                            "inputTypeSearch": "MuiInputBase-inputTypeSearch",
-                            "marginDense": "MuiInputBase-marginDense MuiOutlinedInput-marginDense",
-                            "multiline": "MuiInputBase-multiline MuiOutlinedInput-multiline",
-                            "root": "MuiInputBase-root MuiOutlinedInput-root",
-                          }
-                        }
-                        defaultValue="1.0.0"
-                        fullWidth={false}
-                        id="policyVersion"
-                        inputComponent="input"
-                        multiline={false}
-                        onChange={[Function]}
-                        renderSuffix={[Function]}
-                        type="text"
-                      >
-                        <div
-                          className="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl MuiInputBase-marginDense MuiOutlinedInput-marginDense"
-                          onClick={[Function]}
-                        >
-                          <input
-                            aria-invalid={false}
-                            autoFocus={false}
-                            className="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense"
-                            defaultValue="1.0.0"
-                            disabled={false}
-                            id="policyVersion"
-                            onAnimationStart={[Function]}
-                            onBlur={[Function]}
-                            onChange={[Function]}
-                            onFocus={[Function]}
-                            required={true}
-                            type="text"
-                          />
-                          <WithStyles(ForwardRef(NotchedOutline))
-                            className="MuiOutlinedInput-notchedOutline"
-                            label={
-                              <React.Fragment>
-                                Required
-                                 *
-                              </React.Fragment>
-                            }
-                            labelWidth={0}
-                            notched={true}
-                          >
-                            <ForwardRef(NotchedOutline)
-                              className="MuiOutlinedInput-notchedOutline"
-                              classes={
-                                Object {
-                                  "legend": "PrivateNotchedOutline-legend-2",
-                                  "legendLabelled": "PrivateNotchedOutline-legendLabelled-3",
-                                  "legendNotched": "PrivateNotchedOutline-legendNotched-4",
-                                  "root": "PrivateNotchedOutline-root-1",
-                                }
-                              }
-                              label={
-                                <React.Fragment>
-                                  Required
-                                   *
-                                </React.Fragment>
-                              }
-                              labelWidth={0}
-                              notched={true}
-                            >
-                              <fieldset
-                                aria-hidden={true}
-                                className="PrivateNotchedOutline-root-1 MuiOutlinedInput-notchedOutline"
-                              >
-                                <legend
-                                  className="PrivateNotchedOutline-legendLabelled-3 PrivateNotchedOutline-legendNotched-4"
-                                >
-                                  <span>
-                                    Required
-                                     *
-                                  </span>
-                                </legend>
-                              </fieldset>
-                            </ForwardRef(NotchedOutline)>
-                          </WithStyles(ForwardRef(NotchedOutline))>
-                        </div>
-                      </ForwardRef(InputBase)>
-                    </WithStyles(ForwardRef(InputBase))>
-                  </ForwardRef(OutlinedInput)>
-                </WithStyles(ForwardRef(OutlinedInput))>
-              </div>
-            </ForwardRef(FormControl)>
-          </WithStyles(ForwardRef(FormControl))>
-        </ForwardRef(TextField)>
-      </WithStyles(ForwardRef(TextField))>
-      <Button
-        active={false}
-        disabled={false}
-        onClick={[Function]}
-        title="Create a new policy version from the defined parameters"
-        variant="secondary"
-      >
-        <button
-          className="btn btn-secondary"
-          disabled={false}
-          onClick={[Function]}
-          title="Create a new policy version from the defined parameters"
-          type="button"
-        >
-          Create New Version
-        </button>
-      </Button>
-      <styled.div
-        id="onap.policies.monitoring.tcagen2_1.0.0_org.onap.new_1.0.0"
-        title="Policy Properties"
-      >
-        <div
-          className="sc-gsTCUz hXXDCR"
-          id="onap.policies.monitoring.tcagen2_1.0.0_org.onap.new_1.0.0"
-          title="Policy Properties"
-        />
-      </styled.div>
-    </div>
-  </styled.div>
-</PolicyEditor>
-`;
diff --git a/runtime/ui-react/src/components/dialogs/Policy/__snapshots__/PolicyModal.test.js.snap b/runtime/ui-react/src/components/dialogs/Policy/__snapshots__/PolicyModal.test.js.snap
deleted file mode 100644
index 8b1261b1c..000000000
--- a/runtime/ui-react/src/components/dialogs/Policy/__snapshots__/PolicyModal.test.js.snap
+++ /dev/null
@@ -1,159 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Verify PolicyModal Test the render method 1`] = `
-<Styled(Modal)
-  backdrop="static"
-  keyboard={false}
-  onHide={[Function]}
-  show={true}
-  size="xl"
->
-  <ModalHeader
-    closeButton={true}
-    closeLabel="Close"
-  >
-    <ModalTitle>
-      Edit the policy
-    </ModalTitle>
-  </ModalHeader>
-  <Alert
-    closeLabel="Close alert"
-    dismissible={true}
-    onClose={[Function]}
-    show={false}
-    transition={
-      Object {
-        "$$typeof": Symbol(react.forward_ref),
-        "defaultProps": Object {
-          "appear": false,
-          "in": false,
-          "mountOnEnter": false,
-          "timeout": 300,
-          "unmountOnExit": false,
-        },
-        "render": [Function],
-      }
-    }
-    variant="success"
-  >
-    <styled.div />
-  </Alert>
-  <Alert
-    closeLabel="Close alert"
-    dismissible={true}
-    onClose={[Function]}
-    show={false}
-    transition={
-      Object {
-        "$$typeof": Symbol(react.forward_ref),
-        "defaultProps": Object {
-          "appear": false,
-          "in": false,
-          "mountOnEnter": false,
-          "timeout": 300,
-          "unmountOnExit": false,
-        },
-        "render": [Function],
-      }
-    }
-    variant="danger"
-  >
-    <styled.div />
-  </Alert>
-  <ModalBody>
-    <div
-      id="editor"
-    />
-    <FormGroup
-      as={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "defaultProps": Object {
-            "noGutters": false,
-          },
-          "render": [Function],
-        }
-      }
-      controlId="formPlaintextEmail"
-    >
-      <FormLabel
-        column={true}
-        sm="2"
-        srOnly={false}
-      >
-        Pdp Group Info
-      </FormLabel>
-      <Col
-        sm="3"
-      >
-        <StateManager
-          defaultInputValue=""
-          defaultMenuIsOpen={false}
-          defaultValue={null}
-          onChange={[Function]}
-          options={
-            Array [
-              Object {
-                "label": "monitoring",
-                "value": "monitoring",
-              },
-            ]
-          }
-          value={
-            Object {
-              "label": undefined,
-              "value": undefined,
-            }
-          }
-        />
-      </Col>
-      <Col
-        sm="3"
-      >
-        <StateManager
-          defaultInputValue=""
-          defaultMenuIsOpen={false}
-          defaultValue={null}
-          onChange={[Function]}
-          options={Array []}
-          value={
-            Object {
-              "label": undefined,
-              "value": undefined,
-            }
-          }
-        />
-      </Col>
-    </FormGroup>
-  </ModalBody>
-  <ModalFooter>
-    <Button
-      active={false}
-      disabled={false}
-      key="close"
-      onClick={[Function]}
-      variant="secondary"
-    >
-      Close
-    </Button>
-    <Button
-      active={false}
-      disabled={false}
-      key="save"
-      onClick={[Function]}
-      variant="primary"
-    >
-      Save Changes
-    </Button>
-    <Button
-      active={false}
-      disabled={false}
-      key="refresh"
-      onClick={[Function]}
-      variant="primary"
-    >
-      Refresh
-    </Button>
-  </ModalFooter>
-</Styled(Modal)>
-`;
diff --git a/runtime/ui-react/src/components/dialogs/Policy/__snapshots__/ToscaViewer.test.js.snap b/runtime/ui-react/src/components/dialogs/Policy/__snapshots__/ToscaViewer.test.js.snap
deleted file mode 100644
index 61fb4850d..000000000
--- a/runtime/ui-react/src/components/dialogs/Policy/__snapshots__/ToscaViewer.test.js.snap
+++ /dev/null
@@ -1,30 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Verify ToscaViewer Test the render method 1`] = `
-<styled.div>
-  <pre>
-    tosca_definitions_version: tosca_simple_yaml_1_1_0
-policy_types:
-  onap.policies.controlloop.Guard:
-    properties: {
-    }
-    name: onap.policies.controlloop.Guard
-    version: 1.0.0
-    derived_from: tosca.policies.Root
-    metadata: {
-    }
-    description: Guard Policies for Control Loop Operational Policies
-name: ToscaServiceTemplateSimple
-version: 1.0.0
-
-  </pre>
-  <Button
-    active={false}
-    disabled={false}
-    title="Create a new policy version from the defined parameters"
-    variant="secondary"
-  >
-    Create New Version
-  </Button>
-</styled.div>
-`;
diff --git a/runtime/ui-react/src/components/dialogs/Policy/toscaData.test.json b/runtime/ui-react/src/components/dialogs/Policy/toscaData.test.json
deleted file mode 100644
index 3b001b384..000000000
--- a/runtime/ui-react/src/components/dialogs/Policy/toscaData.test.json
+++ /dev/null
@@ -1,179 +0,0 @@
-{
-  "title": "onap.policies.monitoring.tcagen2",
-  "type": "object",
-  "required": [
-    "tca.policy"
-  ],
-  "properties": {
-    "tca.policy": {
-      "title": "onap.datatypes.monitoring.tca_policy",
-      "type": "object",
-      "required": [
-        "domain",
-        "metricsPerEventName"
-      ],
-      "properties": {
-        "domain": {
-          "type": "string",
-          "description": "Domain name to which TCA needs to be applied",
-          "default": "measurementsForVfScaling",
-          "const": "measurementsForVfScaling"
-        },
-        "metricsPerEventName": {
-          "type": "array",
-          "description": "Contains eventName and threshold details that need to be applied to given eventName",
-          "items": {
-            "title": "onap.datatypes.monitoring.metricsPerEventName",
-            "type": "object",
-            "required": [
-              "controlLoopSchemaType",
-              "eventName",
-              "policyName",
-              "policyScope",
-              "policyVersion",
-              "thresholds"
-            ],
-            "properties": {
-              "controlLoopSchemaType": {
-                "type": "string",
-                "description": "Specifies Control Loop Schema Type for the event Name e.g. VNF, VM",
-                "enum": [
-                  "VM",
-                  "VNF"
-                ]
-              },
-              "eventName": {
-                "type": "string",
-                "description": "Event name to which thresholds need to be applied"
-              },
-              "policyName": {
-                "type": "string",
-                "description": "TCA Policy Scope Name"
-              },
-              "policyScope": {
-                "type": "string",
-                "description": "TCA Policy Scope"
-              },
-              "policyVersion": {
-                "type": "string",
-                "description": "TCA Policy Scope Version"
-              },
-              "thresholds": {
-                "type": "array",
-                "description": "Thresholds associated with eventName",
-                "items": {
-                  "title": "onap.datatypes.monitoring.thresholds",
-                  "type": "object",
-                  "required": [
-                    "closedLoopControlName",
-                    "closedLoopEventStatus",
-                    "direction",
-                    "fieldPath",
-                    "severity",
-                    "thresholdValue",
-                    "version"
-                  ],
-                  "properties": {
-                    "closedLoopControlName": {
-                      "type": "string",
-                      "description": "Closed Loop Control Name associated with the threshold"
-                    },
-                    "closedLoopEventStatus": {
-                      "type": "string",
-                      "description": "Closed Loop Event Status of the threshold",
-                      "enum": [
-                        "ONSET",
-                        "ABATED"
-                      ]
-                    },
-                    "direction": {
-                      "type": "string",
-                      "description": "Direction of the threshold",
-                      "enum": [
-                        "LESS",
-                        "LESS_OR_EQUAL",
-                        "GREATER",
-                        "GREATER_OR_EQUAL",
-                        "EQUAL"
-                      ]
-                    },
-                    "fieldPath": {
-                      "type": "string",
-                      "description": "Json field Path as per CEF message which needs to be analyzed for TCA",
-                      "enum": [
-                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedTotalPacketsDelta",
-                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedOctetsDelta",
-                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedUnicastPacketsDelta",
-                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedMulticastPacketsDelta",
-                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedBroadcastPacketsDelta",
-                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedDiscardedPacketsDelta",
-                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedErrorPacketsDelta",
-                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedTotalPacketsAccumulated",
-                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedOctetsAccumulated",
-                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedUnicastPacketsAccumulated",
-                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedMulticastPacketsAccumulated",
-                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedBroadcastPacketsAccumulated",
-                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedDiscardedPacketsAccumulated",
-                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedErrorPacketsAccumulated",
-                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedTotalPacketsDelta",
-                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedOctetsDelta",
-                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedUnicastPacketsDelta",
-                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedMulticastPacketsDelta",
-                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedBroadcastPacketsDelta",
-                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedDiscardedPacketsDelta",
-                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedErrorPacketsDelta",
-                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedTotalPacketsAccumulated",
-                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedOctetsAccumulated",
-                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedUnicastPacketsAccumulated",
-                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedMulticastPacketsAccumulated",
-                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedBroadcastPacketsAccumulated",
-                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedDiscardedPacketsAccumulated",
-                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedErrorPacketsAccumulated",
-                        "$.event.measurementsForVfScalingFields.cpuUsageArray[*].cpuIdle",
-                        "$.event.measurementsForVfScalingFields.cpuUsageArray[*].cpuUsageInterrupt",
-                        "$.event.measurementsForVfScalingFields.cpuUsageArray[*].cpuUsageNice",
-                        "$.event.measurementsForVfScalingFields.cpuUsageArray[*].cpuUsageSoftIrq",
-                        "$.event.measurementsForVfScalingFields.cpuUsageArray[*].cpuUsageSteal",
-                        "$.event.measurementsForVfScalingFields.cpuUsageArray[*].cpuUsageSystem",
-                        "$.event.measurementsForVfScalingFields.cpuUsageArray[*].cpuWait",
-                        "$.event.measurementsForVfScalingFields.cpuUsageArray[*].percentUsage",
-                        "$.event.measurementsForVfScalingFields.meanRequestLatency",
-                        "$.event.measurementsForVfScalingFields.memoryUsageArray[*].memoryBuffered",
-                        "$.event.measurementsForVfScalingFields.memoryUsageArray[*].memoryCached",
-                        "$.event.measurementsForVfScalingFields.memoryUsageArray[*].memoryConfigured",
-                        "$.event.measurementsForVfScalingFields.memoryUsageArray[*].memoryFree",
-                        "$.event.measurementsForVfScalingFields.memoryUsageArray[*].memoryUsed",
-                        "$.event.measurementsForVfScalingFields.additionalMeasurements[*].arrayOfFields[0].value"
-                      ]
-                    },
-                    "severity": {
-                      "type": "string",
-                      "description": "Threshold Event Severity",
-                      "enum": [
-                        "CRITICAL",
-                        "MAJOR",
-                        "MINOR",
-                        "WARNING",
-                        "NORMAL"
-                      ]
-                    },
-                    "thresholdValue": {
-                      "type": "integer",
-                      "description": "Threshold value for the field Path inside CEF message"
-                    },
-                    "version": {
-                      "type": "string",
-                      "description": "Version number associated with the threshold"
-                    }
-                  }
-                },
-                "format": "tabs-top"
-              }
-            }
-          },
-          "format": "tabs-top"
-        }
-      }
-    }
-  }
-}
diff --git a/runtime/ui-react/src/components/dialogs/Policy/toscaData.test.yaml b/runtime/ui-react/src/components/dialogs/Policy/toscaData.test.yaml
deleted file mode 100644
index 15a3cec35..000000000
--- a/runtime/ui-react/src/components/dialogs/Policy/toscaData.test.yaml
+++ /dev/null
@@ -1,13 +0,0 @@
-tosca_definitions_version: tosca_simple_yaml_1_1_0
-policy_types:
-  onap.policies.controlloop.Guard:
-    properties: {
-    }
-    name: onap.policies.controlloop.Guard
-    version: 1.0.0
-    derived_from: tosca.policies.Root
-    metadata: {
-    }
-    description: Guard Policies for Control Loop Operational Policies
-name: ToscaServiceTemplateSimple
-version: 1.0.0
diff --git a/runtime/ui-react/src/components/dialogs/RefreshStatus.js b/runtime/ui-react/src/components/dialogs/RefreshStatus.js
deleted file mode 100644
index e23ab3f84..000000000
--- a/runtime/ui-react/src/components/dialogs/RefreshStatus.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-import React from 'react';
-import LoopActionService from '../../api/LoopActionService';
-import Spinner from 'react-bootstrap/Spinner';
-import styled from 'styled-components';
-
-const StyledSpinnerDiv = styled.div`
-  justify-content: center !important;
-  display: flex !important;
-`;
-
-export default class RefreshStatus extends React.Component {
-  state = {
-    loopName: this.props.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('/');
-      });
-  }
-
-  render() {
-    return (
-      <StyledSpinnerDiv>
-        <Spinner animation="border" role="status">
-        </Spinner>
-      </StyledSpinnerDiv>
-    );
-  }
-}
diff --git a/runtime/ui-react/src/components/dialogs/RefreshStatus.test.js b/runtime/ui-react/src/components/dialogs/RefreshStatus.test.js
deleted file mode 100644
index 7736ffd49..000000000
--- a/runtime/ui-react/src/components/dialogs/RefreshStatus.test.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-import React from 'react';
-import { shallow } from 'enzyme';
-import RefreshStatus from './RefreshStatus';
-import LoopCache from '../../api/LoopCache';
-import LoopActionService from '../../api/LoopActionService';
-
-describe('Verify RefreshStatus', () => {
-
-  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();
-
-    const component = shallow(<RefreshStatus loopCache={ loopCache } history={ historyMock } showSucAlert={ showSucAlert } showFailAlert={ showFailAlert }/>)
-    await flushPromises();
-    component.update();
-
-    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();
-
-    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();
-
-    expect(historyMock.push.mock.calls[0]).toEqual(['/']);
-  });
-
-});
diff --git a/runtime/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js b/runtime/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
deleted file mode 100644
index e7be9841e..000000000
--- a/runtime/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
+++ /dev/null
@@ -1,173 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP POLICY-CLAMP
- * ================================================================================
- * Copyright (C) 2019, 2021 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-
-import React, { forwardRef } from 'react'
-import Button from 'react-bootstrap/Button';
-import Modal from 'react-bootstrap/Modal';
-import styled from 'styled-components';
-import TemplateService from '../../../api/TemplateService';
-import ArrowUpward from '@material-ui/icons/ArrowUpward';
-import ChevronLeft from '@material-ui/icons/ChevronLeft';
-import ChevronRight from '@material-ui/icons/ChevronRight';
-import Clear from '@material-ui/icons/Clear';
-import FirstPage from '@material-ui/icons/FirstPage';
-import LastPage from '@material-ui/icons/LastPage';
-import Search from '@material-ui/icons/Search';
-import MaterialTable from "material-table";
-import LoopCache from '../../../api/LoopCache';
-import SvgGenerator from '../../loop_viewer/svg/SvgGenerator';
-
-const ModalStyled = styled(Modal)`
-  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' };
-
-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();
-  }
-
-  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('/')
-  }
-
-  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.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>
-    );
-  }
-}
diff --git a/runtime/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js b/runtime/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js
deleted file mode 100644
index d93f0b00c..000000000
--- a/runtime/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js
+++ /dev/null
@@ -1,163 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-import React from 'react';
-import { shallow } from 'enzyme';
-import ViewLoopTemplatesModal from './ViewLoopTemplatesModal';
-import { mount } from 'enzyme';
-import { BrowserRouter as Router } from 'react-router-dom';
-
-describe('Verify ViewLoopTemplatesModal', () => {
-  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 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 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();
-  });
-});
diff --git a/runtime/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap b/runtime/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap
deleted file mode 100644
index 73f659606..000000000
--- a/runtime/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap
+++ /dev/null
@@ -1,157 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Verify ViewLoopTemplatesModal Test the tosca model view render method 1`] = `
-<Styled(Modal)
-  backdrop="static"
-  keyboard={false}
-  onHide={[Function]}
-  show={true}
-  size="xl"
->
-  <ModalHeader
-    closeButton={true}
-    closeLabel="Close"
-  />
-  <ModalBody>
-    <WithStyles(Component)
-      columns={
-        Array [
-          Object {
-            "cellStyle": Object {
-              "border": "1px solid black",
-            },
-            "field": "index",
-            "headerStyle": Object {
-              "backgroundColor": "#ddd",
-              "border": "2px solid black",
-            },
-            "render": [Function],
-            "title": "#",
-          },
-          Object {
-            "cellStyle": Object {
-              "border": "1px solid black",
-            },
-            "field": "name",
-            "headerStyle": Object {
-              "backgroundColor": "#ddd",
-              "border": "2px solid black",
-            },
-            "title": "Template Name",
-          },
-          Object {
-            "cellStyle": Object {
-              "border": "1px solid black",
-            },
-            "field": "modelService.serviceDetails.name",
-            "headerStyle": Object {
-              "backgroundColor": "#ddd",
-              "border": "2px solid black",
-            },
-            "title": "Service Model Name",
-          },
-          Object {
-            "cellStyle": Object {
-              "border": "1px solid black",
-            },
-            "field": "allowedLoopType",
-            "headerStyle": Object {
-              "backgroundColor": "#ddd",
-              "border": "2px solid black",
-            },
-            "title": "Loop Type Allowed",
-          },
-          Object {
-            "cellStyle": Object {
-              "border": "1px solid black",
-            },
-            "field": "maximumInstancesAllowed",
-            "headerStyle": Object {
-              "backgroundColor": "#ddd",
-              "border": "2px solid black",
-            },
-            "title": "# Instances Allowed",
-          },
-          Object {
-            "cellStyle": Object {
-              "border": "1px solid black",
-            },
-            "editable": "never",
-            "field": "updatedDate",
-            "headerStyle": Object {
-              "backgroundColor": "#ddd",
-              "border": "2px solid black",
-            },
-            "title": "Modified Date",
-          },
-        ]
-      }
-      data={Array []}
-      icons={
-        Object {
-          "FirstPage": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "render": [Function],
-          },
-          "LastPage": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "render": [Function],
-          },
-          "NextPage": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "render": [Function],
-          },
-          "PreviousPage": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "render": [Function],
-          },
-          "ResetSearch": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "render": [Function],
-          },
-          "Search": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "render": [Function],
-          },
-          "SortArrow": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "render": [Function],
-          },
-        }
-      }
-      onRowClick={[Function]}
-      options={
-        Object {
-          "headerStyle": Object {
-            "backgroundColor": "#ddd",
-            "border": "1px solid black",
-            "fontSize": "15pt",
-            "text": "bold",
-          },
-          "rowStyle": [Function],
-        }
-      }
-      title="View Blueprint MicroService Templates"
-    />
-    <withRouter(SvgGenerator)
-      clickable={false}
-      generatedFrom="TEMPLATE"
-      loopCache={
-        LoopCache {
-          "loopJsonCache": Object {},
-        }
-      }
-    />
-  </ModalBody>
-  <ModalFooter>
-    <Button
-      active={false}
-      disabled={false}
-      onClick={[Function]}
-      variant="secondary"
-    >
-      Close
-    </Button>
-  </ModalFooter>
-</Styled(Modal)>
-`;
diff --git a/runtime/ui-react/src/components/dialogs/UserInfoModal.js b/runtime/ui-react/src/components/dialogs/UserInfoModal.js
deleted file mode 100644
index d452f6de0..000000000
--- a/runtime/ui-react/src/components/dialogs/UserInfoModal.js
+++ /dev/null
@@ -1,115 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-
-import React from 'react'
-import Button from 'react-bootstrap/Button';
-import Modal from 'react-bootstrap/Modal';
-import Form from 'react-bootstrap/Form';
-import Row from 'react-bootstrap/Row';
-import Col from 'react-bootstrap/Col';
-import styled from 'styled-components';
-import UserService from '../../api/UserService';
-
-const ModalStyled = styled(Modal)`
-  background-color: transparent;
-`
-
-export default class UserInfoModal extends React.Component {
-
-  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 })
-    });
-  }
-
-  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>
-    );
-  }
-}
diff --git a/runtime/ui-react/src/components/dialogs/UserInfoModal.test.js b/runtime/ui-react/src/components/dialogs/UserInfoModal.test.js
deleted file mode 100644
index 716879232..000000000
--- a/runtime/ui-react/src/components/dialogs/UserInfoModal.test.js
+++ /dev/null
@@ -1,84 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-import React from 'react';
-import { shallow } from 'enzyme';
-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"
-          });
-        }
-      });
-    });
-  })
-
-  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: {}
-    });
-
-    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"]
-      }
-    });
-
-    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");
-  });
-});
diff --git a/runtime/ui-react/src/components/dialogs/__snapshots__/UserInfoModal.test.js.snap b/runtime/ui-react/src/components/dialogs/__snapshots__/UserInfoModal.test.js.snap
deleted file mode 100644
index 548a2d938..000000000
--- a/runtime/ui-react/src/components/dialogs/__snapshots__/UserInfoModal.test.js.snap
+++ /dev/null
@@ -1,119 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Verify UserInfoModal Test the render method full permission 1`] = `
-<Styled(Modal)
-  onHide={[Function]}
-  show={true}
-  size="lg"
->
-  <ModalHeader
-    closeButton={true}
-    closeLabel="Close"
-  >
-    <ModalTitle>
-      User Info
-    </ModalTitle>
-  </ModalHeader>
-  <ModalBody>
-    <FormGroup
-      as={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "defaultProps": Object {
-            "noGutters": false,
-          },
-          "render": [Function],
-        }
-      }
-      controlId="userName"
-    >
-      <FormLabel
-        column={true}
-        sm="3"
-        srOnly={false}
-      >
-        Current User:
-      </FormLabel>
-      <Col>
-        <FormControl
-          defaultValue="test"
-          plaintext={true}
-          readOnly={true}
-        />
-      </Col>
-    </FormGroup>
-    <FormGroup
-      as={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "defaultProps": Object {
-            "noGutters": false,
-          },
-          "render": [Function],
-        }
-      }
-      controlId="cldsVersion"
-    >
-      <FormLabel
-        column={true}
-        sm="3"
-        srOnly={false}
-      >
-        CLDS Version:
-      </FormLabel>
-      <Col>
-        <FormControl
-          defaultValue="1.0.0"
-          plaintext={true}
-          readOnly={true}
-        />
-      </Col>
-    </FormGroup>
-    <FormGroup
-      as={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "defaultProps": Object {
-            "noGutters": false,
-          },
-          "render": [Function],
-        }
-      }
-      controlId="userPermissions"
-    >
-      <FormLabel
-        column={true}
-        sm="3"
-        srOnly={false}
-      >
-        User Permissions:
-      </FormLabel>
-      <Col>
-        <FormControl
-          defaultValue="permission1"
-          key="permission1"
-          plaintext={true}
-          readOnly={true}
-        />
-        <FormControl
-          defaultValue="permission2"
-          key="permission2"
-          plaintext={true}
-          readOnly={true}
-        />
-      </Col>
-    </FormGroup>
-  </ModalBody>
-  <ModalFooter>
-    <Button
-      active={false}
-      disabled={false}
-      onClick={[Function]}
-      type="null"
-      variant="secondary"
-    >
-      Cancel
-    </Button>
-  </ModalFooter>
-</Styled(Modal)>
-`;
diff --git a/runtime/ui-react/src/components/loop_viewer/logs/LoopLogs.js b/runtime/ui-react/src/components/loop_viewer/logs/LoopLogs.js
deleted file mode 100644
index 3435ba3bc..000000000
--- a/runtime/ui-react/src/components/loop_viewer/logs/LoopLogs.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-import React from 'react';
-import Table from 'react-bootstrap/Table';
-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 };
-`
-const TableStyled = styled(Table)`
-
-  overflow: auto;
-`
-const TableRow = ({ logRow }) => (
-  <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;
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-    return this.state.loopCache !== nextState.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 }/>));
-    }
-  }
-
-  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>
-
-    );
-  }
-}
diff --git a/runtime/ui-react/src/components/loop_viewer/logs/LoopLogs.test.js b/runtime/ui-react/src/components/loop_viewer/logs/LoopLogs.test.js
deleted file mode 100644
index d3a21d80d..000000000
--- a/runtime/ui-react/src/components/loop_viewer/logs/LoopLogs.test.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-import React from 'react';
-import { shallow } from 'enzyme';
-import LoopLogs from './LoopLogs';
-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"
-      }
-    ]
-  });
-
-  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"
-        }
-      ]
-    });
-
-    component.setProps({ loopCache: loopCacheUpdated });
-    expect(component.find('TableRow').length).toEqual(2);
-  });
-});
diff --git a/runtime/ui-react/src/components/loop_viewer/logs/__snapshots__/LoopLogs.test.js.snap b/runtime/ui-react/src/components/loop_viewer/logs/__snapshots__/LoopLogs.test.js.snap
deleted file mode 100644
index 996c67457..000000000
--- a/runtime/ui-react/src/components/loop_viewer/logs/__snapshots__/LoopLogs.test.js.snap
+++ /dev/null
@@ -1,62 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Verify LoopLogs Test the render method 1`] = `
-<styled.div>
-  <label>
-    Loop Logs
-  </label>
-  <Styled(Component)
-    hover={true}
-    responsive={true}
-    striped={true}
-    variant={true}
-  >
-    <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>
-      <TableRow
-        key="1"
-        logRow={
-          Object {
-            "id": 1,
-            "logComponent": "CLAMP",
-            "logInstant": "2019-07-08T09:44:37Z",
-            "logType": "INFO",
-            "message": "Operational policies UPDATED",
-          }
-        }
-      />
-    </tbody>
-  </Styled(Component)>
-</styled.div>
-`;
diff --git a/runtime/ui-react/src/components/loop_viewer/status/LoopStatus.js b/runtime/ui-react/src/components/loop_viewer/status/LoopStatus.js
deleted file mode 100644
index f539ad436..000000000
--- a/runtime/ui-react/src/components/loop_viewer/status/LoopStatus.js
+++ /dev/null
@@ -1,110 +0,0 @@
-/*-
-* ============LICENSE_START=======================================================
-* ONAP CLAMP
-* ================================================================================
-* Copyright (C) 2019 AT&T Intellectual Property. All rights
-*                             reserved.
-* ================================================================================
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-* ============LICENSE_END============================================
-* ===================================================================
-*
-*/
-import React from 'react';
-import Table from 'react-bootstrap/Table';
-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 };
-`
-
-const TableStyled = styled(Table)`
-  overflow: auto;
-`
-
-const TableRow = ({ statusRow }) => (
-  <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({})
-  }
-
-  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
-        } }/>)
-      })
-
-    }
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-    return this.state.loopCache !== nextState.loopCache;
-  }
-
-  componentWillReceiveProps(newProps) {
-    this.setState({
-      loopCache: newProps.loopCache
-    });
-  }
-
-  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>
-    );
-  }
-}
-
diff --git a/runtime/ui-react/src/components/loop_viewer/status/LoopStatus.test.js b/runtime/ui-react/src/components/loop_viewer/status/LoopStatus.test.js
deleted file mode 100644
index b84067e18..000000000
--- a/runtime/ui-react/src/components/loop_viewer/status/LoopStatus.test.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-import React from 'react';
-import { shallow } from 'enzyme';
-import LoopStatus from './LoopStatus';
-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"
-        }
-      }
-    }
-  });
-
-  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 });
-
-    const forms = component.find('TableRow');
-    expect(forms.get(0).props.statusRow.stateName).toEqual("SENT");
-    expect(component.find('label').text()).toContain('SUBMIT');
-  });
-});
diff --git a/runtime/ui-react/src/components/loop_viewer/status/__snapshots__/LoopStatus.test.js.snap b/runtime/ui-react/src/components/loop_viewer/status/__snapshots__/LoopStatus.test.js.snap
deleted file mode 100644
index 24d879de9..000000000
--- a/runtime/ui-react/src/components/loop_viewer/status/__snapshots__/LoopStatus.test.js.snap
+++ /dev/null
@@ -1,66 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Verify LoopStatus Test the render method 1`] = `
-<styled.div>
-  <label>
-    Loop Status: 
-    DESIGN
-  </label>
-  <div>
-    <Styled(Component)
-      hover={true}
-      responsive={true}
-      striped={true}
-      variant={true}
-    >
-      <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>
-        <TableRow
-          key="POLICY"
-          statusRow={
-            Object {
-              "componentName": "POLICY",
-              "description": "The policies defined have NOT yet been created on the policy engine",
-              "stateName": "NOT_SENT",
-            }
-          }
-        />
-        <TableRow
-          key="DCAE"
-          statusRow={
-            Object {
-              "componentName": "DCAE",
-              "description": "The DCAE blueprint has been found in the DCAE inventory but not yet instancianted for this loop",
-              "stateName": "BLUEPRINT_DEPLOYED",
-            }
-          }
-        />
-      </tbody>
-    </Styled(Component)>
-  </div>
-</styled.div>
-`;
diff --git a/runtime/ui-react/src/components/loop_viewer/svg/SvgGenerator.js b/runtime/ui-react/src/components/loop_viewer/svg/SvgGenerator.js
deleted file mode 100644
index 2692aefa0..000000000
--- a/runtime/ui-react/src/components/loop_viewer/svg/SvgGenerator.js
+++ /dev/null
@@ -1,248 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-
-import React from 'react'
-import styled from 'styled-components';
-import { withRouter } from "react-router-dom";
-import LoopCache from '../../../api/LoopCache';
-import OnapConstant from '../../../utils/OnapConstants';
-
-const DivStyled = styled.div`
-  overflow-x: scroll;
-  display: flex;
-  width: 100%;
-  height: 100%;
-`
-
-const emptySvg = (<svg>
-  <text x="60" y="40">No LOOP (SVG)</text>
-</svg>);
-
-class SvgGenerator extends React.Component {
-  boxWidth = 200;
-  boxHeight = 100;
-  boxSpace = 50;
-
-  static GENERATED_FROM_INSTANCE = "INSTANCE";
-  static GENERATED_FROM_TEMPLATE = "TEMPLATE";
-
-  state = {
-    loopCache: new LoopCache({}),
-    clickable: false,
-    generatedFrom: SvgGenerator.GENERATED_FROM_INSTANCE, // INSTANCE / TEMPLATE
-  }
-
-  constructor(props) {
-    super(props);
-    this.state.loopCache = props.loopCache;
-    this.state.clickable = props.clickable;
-    this.state.generatedFrom = props.generatedFrom;
-    this.handleSvgClick = this.handleSvgClick.bind(this);
-    this.renderSvg = this.renderSvg.bind(this);
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-    return this.state.loopCache !== nextProps.loopCache;
-  }
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.loopCache !== this.props.loopCache) {
-      this.setState({
-        loopCache: this.props.loopCache,
-      });
-    }
-  }
-
-  handleSvgClick(event) {
-    console.debug("svg click event received");
-    if (this.state.clickable) {
-      var elementName = event.target.parentNode.getAttribute('policyId');
-      console.info("SVG element clicked", elementName);
-      // Only allow movement to policy editing IF there busyLoadingCOunt is 0,
-      // meaning we are not waiting for refreshStatus to complete, for example
-      if (elementName !== null && !this.props.isBusyLoading()) {
-        this.props.history.push("/policyModal/" + event.target.parentNode.getAttribute('policyType') + "/" + elementName);
-      }
-    }
-  }
-
-  createVesBox(xPos) {
-    return this.createOneBox(xPos, null, null, 'VES Collector', 'VES', null);
-  }
-
-  createOneArrow(xPos) {
-    return (
-      <svg width={ this.boxSpace } height={ this.boxHeight } x={ xPos }>
-        <defs>
-          <marker viewBox="0 0 20 20" markerWidth="20" markerHeight="20" orient="auto" refX="8.5" refY="5" id="arrow">
-            <path d="m 1 5 l 0 -3 l 7 3 l -7 3 z"
-                  stroke-width="1" stroke-linecap="butt" stroke-dasharray="10000, 1"
-                  fill="#000000" stroke="#000000"/>
-          </marker>
-        </defs>
-        <line x1="0" y1="50%" x2="100%" y2="50%" stroke-width="2" color="black" stroke="black" marker-end="url(#arrow)"/>
-      </svg>
-    );
-  }
-
-  createBeginCircle(xPos, text) {
-    return (
-      <svg width={ this.boxWidth } height={ this.boxHeight } x={ xPos }>
-        <circle cx={ this.boxWidth - 30 } cy="50%" r="30" stroke-width="1" color="black" stroke="black" fill="#27ae60"/>
-        <text x={ this.boxWidth - 30 } y="50%" text-anchor="middle" dominant-baseline="middle" textLength="20%" lengthAdjust="spacingAndGlyphs">{ text }</text>
-      </svg>
-    );
-  }
-
-  createEndCircle(xPos, text) {
-    return (
-      <svg width={ this.boxWidth } height={ this.boxHeight } x={ xPos }>
-        <circle cx={ 30 } cy="50%" r="30" stroke-width="2" color="black" stroke="black" fill="#27ae60"/>
-        <text x={ 30 } y="50%" text-anchor="middle" dominant-baseline="middle" textLength="20%" lengthAdjust="spacingAndGlyphs">{ text }</text>
-      </svg>
-    );
-  }
-
-  createOneBox(xPos, policyId, loopElementModelId, name, title, policyType) {
-    return (
-      <svg width={ this.boxWidth } height={ this.boxHeight } x={ xPos } title="test">
-        <g policyId={ policyId } loopElementModelId={ loopElementModelId } policyType={ policyType }>
-          <rect width="100%" height="100%" stroke-width="2" color="black" stroke="black" fill="#1abc9c"/>
-          <text x="50%" y="15%" color="white" fill="white" dominant-baseline="middle" text-anchor="middle" textLength="50%" lengthAdjust="spacingAndGlyphs">{ title }</text>
-          <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" textLength="80%" lengthAdjust="spacingAndGlyphs">{ name }</text>
-          <text x="50%" y="80%" text-anchor="middle" dominant-baseline="middle" textLength="110%" lengthAdjust="spacingAndGlyphs">{ policyId }</text>
-        </g>
-      </svg>
-    );
-  }
-
-  createSvgFromTemplate() {
-    const allElements = [];
-    var xPos = 0;
-
-    allElements.push(this.createBeginCircle(xPos, "Start"))
-    xPos += (this.boxWidth + this.boxSpace);
-
-    allElements.push(this.createOneArrow(xPos - this.boxSpace));
-
-    allElements.push(this.createVesBox(xPos));
-    xPos += (this.boxWidth + this.boxSpace);
-
-    allElements.push(this.createOneArrow(xPos - this.boxSpace));
-    //createOneBox(xPos, policyId, loopElementModelId , name, title, policyType)
-    for (var loopElement of this.state.loopCache.getAllLoopElementModels()) {
-
-      allElements.push(this.createOneBox(xPos,
-        loopElement['name'],
-        loopElement['name'],
-        loopElement['shortName'],
-        loopElement['loopElementType'],
-        loopElement['loopElementType']))
-      xPos += (this.boxWidth + this.boxSpace);
-      allElements.push(this.createOneArrow(xPos - this.boxSpace));
-    }
-
-    allElements.push(this.createEndCircle(xPos, "End"))
-    xPos += (this.boxWidth + this.boxSpace);
-
-    return allElements;
-  }
-
-  createSvgFromInstance() {
-    const allElements = [];
-    var xPos = 0;
-
-    allElements.push(this.createBeginCircle(xPos, "Start"))
-    xPos += (this.boxWidth + this.boxSpace);
-
-    allElements.push(this.createOneArrow(xPos - this.boxSpace));
-
-    allElements.push(this.createVesBox(xPos));
-    xPos += (this.boxWidth + this.boxSpace);
-
-    allElements.push(this.createOneArrow(xPos - this.boxSpace));
-
-    for (var msPolicy in this.state.loopCache.getMicroServicePolicies()) {
-      var loopElementModelName = this.state.loopCache.getMicroServicePolicies()[msPolicy]['loopElementModel'];
-      if (loopElementModelName !== undefined) {
-        loopElementModelName = loopElementModelName['name'];
-      }
-      allElements.push(this.createOneBox(xPos,
-        this.state.loopCache.getMicroServicePolicies()[msPolicy]['name'],
-        loopElementModelName,
-        this.state.loopCache.getMicroServicePolicies()[msPolicy]['policyModel']['policyAcronym'],
-        'microservice',
-        OnapConstant.microServiceType))
-      xPos += (this.boxWidth + this.boxSpace);
-      allElements.push(this.createOneArrow(xPos - this.boxSpace));
-    }
-
-    for (var opPolicy in this.state.loopCache.getOperationalPolicies()) {
-      loopElementModelName = this.state.loopCache.getOperationalPolicies()[opPolicy]['loopElementModel'];
-      if (loopElementModelName !== undefined) {
-        loopElementModelName = loopElementModelName['name'];
-      }
-      allElements.push(this.createOneBox(xPos,
-        this.state.loopCache.getOperationalPolicies()[opPolicy]['name'],
-        loopElementModelName,
-        this.state.loopCache.getOperationalPolicies()[opPolicy]['policyModel']['policyAcronym'],
-        'operational',
-        OnapConstant.operationalPolicyType))
-      xPos += (this.boxWidth + this.boxSpace);
-      allElements.push(this.createOneArrow(xPos - this.boxSpace));
-    }
-
-    allElements.push(this.createEndCircle(xPos, "End"))
-    xPos += (this.boxWidth + this.boxSpace);
-
-    return allElements;
-  }
-
-  renderSvg() {
-    if (this.state.loopCache.getLoopName() === undefined) {
-      return [emptySvg];
-    }
-    if (this.state.generatedFrom === SvgGenerator.GENERATED_FROM_INSTANCE) {
-      return this.createSvgFromInstance();
-    } else if (this.state.generatedFrom === SvgGenerator.GENERATED_FROM_TEMPLATE) {
-      return this.createSvgFromTemplate();
-    }
-  }
-
-  render() {
-    var allTheElements = this.renderSvg();
-    var svgWidth = this.boxWidth * allTheElements.length;
-    var svgHeight = this.boxHeight + 50;
-    return (
-
-      <DivStyled onClick={ this.handleSvgClick }>
-        <svg key="main" height={ svgHeight } width={ svgWidth } viewBox="0,0,{svgWidth},{svgHeight}" preserveAspectRatio="none">
-          <svg key="content" x="-50" y="25">
-            { allTheElements }
-          </svg>
-        </svg>
-      </DivStyled>
-    );
-  }
-}
-
-export default withRouter(SvgGenerator);
diff --git a/runtime/ui-react/src/components/menu/MenuBar.js b/runtime/ui-react/src/components/menu/MenuBar.js
deleted file mode 100644
index 995db9e16..000000000
--- a/runtime/ui-react/src/components/menu/MenuBar.js
+++ /dev/null
@@ -1,123 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP POLICY-CLAMP
- * ================================================================================
- * Copyright (C) 2019, 2021 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-import React from 'react';
-import Nav from 'react-bootstrap/Nav';
-import Navbar from 'react-bootstrap/Navbar';
-import NavDropdown from 'react-bootstrap/NavDropdown';
-import OnapConstants from '../../utils/OnapConstants';
-import 'bootstrap-css-only/css/bootstrap.min.css';
-import styled from 'styled-components';
-import { Link } from 'react-router-dom';
-
-const StyledLink = styled(Link)`
-    color: ${props => props.theme.menuFontColor};
-    background-color: ${props => props.theme.menuBackgroundColor};
-    font-weight: normal;
-    display: block;
-    width: 100%;
-    padding: .25rem 1.5rem;
-    clear: both;
-    text-align: inherit;
-    white-space: nowrap;
-    border: 0;
-    :hover {
-        text-decoration: none;
-        background-color: ${props => props.theme.menuHighlightedBackgroundColor};
-        color:  ${props => props.theme.menuHighlightedFontColor};
-    }
-`;
-const StyledNavLink = styled(Nav.Link)`
-    color: ${props => props.theme.menuFontColor};
-    background-color: ${props => props.theme.menuBackgroundColor};
-    font-weight: normal;
-    padding: .25rem 1.5rem;
-    :hover {
-        background-color: ${props => props.theme.menuHighlightedBackgroundColor};
-        color:  ${props => props.theme.menuHighlightedFontColor};
-    }
-`;
-
-const StyledNavDropdown = styled(NavDropdown)`
-    color: ${props => props.theme.menuFontColor};
-    & .dropdown-toggle {
-    color: ${props => props.theme.menuFontColor};
-    background-color: ${props => props.theme.backgroundColor};
-    font-weight: normal;
-        :hover {
-                font-weight: bold;
-        }
-    }
-`;
-
-export default class MenuBar extends React.Component {
-    state = {
-        loopName: this.props.loopName,
-        disabled: true
-    };
-
-    componentWillReceiveProps(newProps) {
-        if (newProps.loopName !== OnapConstants.defaultLoopName) {
-            this.setState({ disabled: false });
-        } else {
-            this.setState({ disabled: true });
-        }
-    }
-
-    render () {
-        return (
-                <Navbar.Collapse>
-                    <StyledNavDropdown title="POLICY Framework">
-                            <NavDropdown.Item as={StyledLink} to="/viewAllPolicies">View All Policies</NavDropdown.Item>
-                    </StyledNavDropdown>
-                    <StyledNavDropdown title="CLAMP Options">
-                            <NavDropdown.Item as={StyledLink} to="/manageDictionaries">Tosca Metadata Dictionaries</NavDropdown.Item>
-                            <NavDropdown.Divider />
-                            <NavDropdown.Item as={StyledLink} to="/viewLoopTemplatesModal">View All Loop Templates</NavDropdown.Item>
-                    </StyledNavDropdown>
-                    <StyledNavDropdown title="LOOP Instance">
-                            <NavDropdown.Item as={StyledLink} to="/createLoop">Create</NavDropdown.Item>
-                            <NavDropdown.Item as={StyledLink} to="/openLoop">Open</NavDropdown.Item>
-                            <NavDropdown.Item as={StyledLink} to="/closeLoop" disabled={this.state.disabled}>Close</NavDropdown.Item>
-                            <NavDropdown.Item as={StyledLink} to="/modifyLoop" disabled={this.state.disabled}>Modify</NavDropdown.Item>
-                            <NavDropdown.Divider />
-                            <NavDropdown.Item as={StyledLink} to="/loopProperties" disabled={this.state.disabled}>Properties</NavDropdown.Item>
-                            <NavDropdown.Item as={StyledLink} to="/refreshStatus" disabled={this.state.disabled}>Refresh Status</NavDropdown.Item>
-                    </StyledNavDropdown>
-                    <StyledNavDropdown title="LOOP Operations">
-                            <NavDropdown.Item as={StyledLink} to="/submit" disabled={this.state.disabled}>Create and deploy to Policy Framework (SUBMIT)</NavDropdown.Item>
-                            <NavDropdown.Item as={StyledLink} to="/stop" disabled={this.state.disabled}>Undeploy from Policy Framework (STOP)</NavDropdown.Item>
-                            <NavDropdown.Item as={StyledLink} to="/restart" disabled={this.state.disabled}>ReDeploy to Policy Framework (RESTART)</NavDropdown.Item>
-                            <NavDropdown.Item as={StyledLink} to="/delete" disabled={this.state.disabled}>Delete loop instance (DELETE)</NavDropdown.Item>
-                            <NavDropdown.Divider />
-                            <NavDropdown.Item as={StyledLink} to="/deploy" disabled={this.state.disabled}>Deploy to DCAE (DEPLOY)</NavDropdown.Item>
-                            <NavDropdown.Item as={StyledLink} to="/undeploy" disabled={this.state.disabled}>UnDeploy to DCAE (UNDEPLOY)</NavDropdown.Item>
-                    </StyledNavDropdown>
-                    <StyledNavDropdown title="Help">
-                            <StyledNavLink href="https://wiki.onap.org/" target="_blank">Wiki</StyledNavLink>
-                            <StyledNavLink href="mailto:onap-discuss@lists.onap.org?subject=CLAMP&body=Please send us suggestions or feature enhancements or defect. If possible, please send us the steps to replicate any defect.">Contact Us</StyledNavLink>
-                            <NavDropdown.Item as={StyledLink} to="/userInfo">User Info</NavDropdown.Item>
-                    </StyledNavDropdown>
-                </Navbar.Collapse>
-        );
-    }
-}
diff --git a/runtime/ui-react/src/components/menu/MenuBar.test.js b/runtime/ui-react/src/components/menu/MenuBar.test.js
deleted file mode 100644
index 81117bb90..000000000
--- a/runtime/ui-react/src/components/menu/MenuBar.test.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-import React from 'react';
-import { shallow } from 'enzyme';
-import MenuBar from './MenuBar';
-
-describe('Verify MenuBar', () => {
-
-  it('Test the render method', () => {
-    const component = shallow(<MenuBar/>)
-
-    expect(component).toMatchSnapshot();
-  });
-
-  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);
-  });
-});
diff --git a/runtime/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap b/runtime/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap
deleted file mode 100644
index ba19097e5..000000000
--- a/runtime/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap
+++ /dev/null
@@ -1,1070 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Verify MenuBar Test the render method 1`] = `
-<NavbarCollapse>
-  <Styled(NavDropdown)
-    title="POLICY Framework"
-  >
-    <DropdownItem
-      as={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": e {
-            "baseHash": 1014106698,
-            "baseStyle": undefined,
-            "componentId": "sc-bdfBwQ",
-            "isStatic": false,
-            "rules": Array [
-              "
-    color: ",
-              [Function],
-              ";
-    background-color: ",
-              [Function],
-              ";
-    font-weight: normal;
-    display: block;
-    width: 100%;
-    padding: .25rem 1.5rem;
-    clear: both;
-    text-align: inherit;
-    white-space: nowrap;
-    border: 0;
-    :hover {
-        text-decoration: none;
-        background-color: ",
-              [Function],
-              ";
-        color:  ",
-              [Function],
-              ";
-    }
-",
-            ],
-            "staticRulesId": "",
-          },
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "shouldForwardProp": undefined,
-          "styledComponentId": "sc-bdfBwQ",
-          "target": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "propTypes": Object {
-              "innerRef": [Function],
-              "onClick": [Function],
-              "replace": [Function],
-              "target": [Function],
-              "to": [Function],
-            },
-            "render": [Function],
-          },
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
-        }
-      }
-      disabled={false}
-      to="/viewAllPolicies"
-    >
-      View All Policies
-    </DropdownItem>
-  </Styled(NavDropdown)>
-  <Styled(NavDropdown)
-    title="CLAMP Options"
-  >
-    <DropdownItem
-      as={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": e {
-            "baseHash": 1014106698,
-            "baseStyle": undefined,
-            "componentId": "sc-bdfBwQ",
-            "isStatic": false,
-            "rules": Array [
-              "
-    color: ",
-              [Function],
-              ";
-    background-color: ",
-              [Function],
-              ";
-    font-weight: normal;
-    display: block;
-    width: 100%;
-    padding: .25rem 1.5rem;
-    clear: both;
-    text-align: inherit;
-    white-space: nowrap;
-    border: 0;
-    :hover {
-        text-decoration: none;
-        background-color: ",
-              [Function],
-              ";
-        color:  ",
-              [Function],
-              ";
-    }
-",
-            ],
-            "staticRulesId": "",
-          },
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "shouldForwardProp": undefined,
-          "styledComponentId": "sc-bdfBwQ",
-          "target": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "propTypes": Object {
-              "innerRef": [Function],
-              "onClick": [Function],
-              "replace": [Function],
-              "target": [Function],
-              "to": [Function],
-            },
-            "render": [Function],
-          },
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
-        }
-      }
-      disabled={false}
-      to="/manageDictionaries"
-    >
-      Tosca Metadata Dictionaries
-    </DropdownItem>
-    <DropdownDivider
-      role="separator"
-    />
-    <DropdownItem
-      as={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": e {
-            "baseHash": 1014106698,
-            "baseStyle": undefined,
-            "componentId": "sc-bdfBwQ",
-            "isStatic": false,
-            "rules": Array [
-              "
-    color: ",
-              [Function],
-              ";
-    background-color: ",
-              [Function],
-              ";
-    font-weight: normal;
-    display: block;
-    width: 100%;
-    padding: .25rem 1.5rem;
-    clear: both;
-    text-align: inherit;
-    white-space: nowrap;
-    border: 0;
-    :hover {
-        text-decoration: none;
-        background-color: ",
-              [Function],
-              ";
-        color:  ",
-              [Function],
-              ";
-    }
-",
-            ],
-            "staticRulesId": "",
-          },
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "shouldForwardProp": undefined,
-          "styledComponentId": "sc-bdfBwQ",
-          "target": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "propTypes": Object {
-              "innerRef": [Function],
-              "onClick": [Function],
-              "replace": [Function],
-              "target": [Function],
-              "to": [Function],
-            },
-            "render": [Function],
-          },
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
-        }
-      }
-      disabled={false}
-      to="/viewLoopTemplatesModal"
-    >
-      View All Loop Templates
-    </DropdownItem>
-  </Styled(NavDropdown)>
-  <Styled(NavDropdown)
-    title="LOOP Instance"
-  >
-    <DropdownItem
-      as={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": e {
-            "baseHash": 1014106698,
-            "baseStyle": undefined,
-            "componentId": "sc-bdfBwQ",
-            "isStatic": false,
-            "rules": Array [
-              "
-    color: ",
-              [Function],
-              ";
-    background-color: ",
-              [Function],
-              ";
-    font-weight: normal;
-    display: block;
-    width: 100%;
-    padding: .25rem 1.5rem;
-    clear: both;
-    text-align: inherit;
-    white-space: nowrap;
-    border: 0;
-    :hover {
-        text-decoration: none;
-        background-color: ",
-              [Function],
-              ";
-        color:  ",
-              [Function],
-              ";
-    }
-",
-            ],
-            "staticRulesId": "",
-          },
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "shouldForwardProp": undefined,
-          "styledComponentId": "sc-bdfBwQ",
-          "target": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "propTypes": Object {
-              "innerRef": [Function],
-              "onClick": [Function],
-              "replace": [Function],
-              "target": [Function],
-              "to": [Function],
-            },
-            "render": [Function],
-          },
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
-        }
-      }
-      disabled={false}
-      to="/createLoop"
-    >
-      Create
-    </DropdownItem>
-    <DropdownItem
-      as={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": e {
-            "baseHash": 1014106698,
-            "baseStyle": undefined,
-            "componentId": "sc-bdfBwQ",
-            "isStatic": false,
-            "rules": Array [
-              "
-    color: ",
-              [Function],
-              ";
-    background-color: ",
-              [Function],
-              ";
-    font-weight: normal;
-    display: block;
-    width: 100%;
-    padding: .25rem 1.5rem;
-    clear: both;
-    text-align: inherit;
-    white-space: nowrap;
-    border: 0;
-    :hover {
-        text-decoration: none;
-        background-color: ",
-              [Function],
-              ";
-        color:  ",
-              [Function],
-              ";
-    }
-",
-            ],
-            "staticRulesId": "",
-          },
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "shouldForwardProp": undefined,
-          "styledComponentId": "sc-bdfBwQ",
-          "target": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "propTypes": Object {
-              "innerRef": [Function],
-              "onClick": [Function],
-              "replace": [Function],
-              "target": [Function],
-              "to": [Function],
-            },
-            "render": [Function],
-          },
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
-        }
-      }
-      disabled={false}
-      to="/openLoop"
-    >
-      Open
-    </DropdownItem>
-    <DropdownItem
-      as={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": e {
-            "baseHash": 1014106698,
-            "baseStyle": undefined,
-            "componentId": "sc-bdfBwQ",
-            "isStatic": false,
-            "rules": Array [
-              "
-    color: ",
-              [Function],
-              ";
-    background-color: ",
-              [Function],
-              ";
-    font-weight: normal;
-    display: block;
-    width: 100%;
-    padding: .25rem 1.5rem;
-    clear: both;
-    text-align: inherit;
-    white-space: nowrap;
-    border: 0;
-    :hover {
-        text-decoration: none;
-        background-color: ",
-              [Function],
-              ";
-        color:  ",
-              [Function],
-              ";
-    }
-",
-            ],
-            "staticRulesId": "",
-          },
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "shouldForwardProp": undefined,
-          "styledComponentId": "sc-bdfBwQ",
-          "target": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "propTypes": Object {
-              "innerRef": [Function],
-              "onClick": [Function],
-              "replace": [Function],
-              "target": [Function],
-              "to": [Function],
-            },
-            "render": [Function],
-          },
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
-        }
-      }
-      disabled={true}
-      to="/closeLoop"
-    >
-      Close
-    </DropdownItem>
-    <DropdownItem
-      as={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": e {
-            "baseHash": 1014106698,
-            "baseStyle": undefined,
-            "componentId": "sc-bdfBwQ",
-            "isStatic": false,
-            "rules": Array [
-              "
-    color: ",
-              [Function],
-              ";
-    background-color: ",
-              [Function],
-              ";
-    font-weight: normal;
-    display: block;
-    width: 100%;
-    padding: .25rem 1.5rem;
-    clear: both;
-    text-align: inherit;
-    white-space: nowrap;
-    border: 0;
-    :hover {
-        text-decoration: none;
-        background-color: ",
-              [Function],
-              ";
-        color:  ",
-              [Function],
-              ";
-    }
-",
-            ],
-            "staticRulesId": "",
-          },
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "shouldForwardProp": undefined,
-          "styledComponentId": "sc-bdfBwQ",
-          "target": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "propTypes": Object {
-              "innerRef": [Function],
-              "onClick": [Function],
-              "replace": [Function],
-              "target": [Function],
-              "to": [Function],
-            },
-            "render": [Function],
-          },
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
-        }
-      }
-      disabled={true}
-      to="/modifyLoop"
-    >
-      Modify
-    </DropdownItem>
-    <DropdownDivider
-      role="separator"
-    />
-    <DropdownItem
-      as={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": e {
-            "baseHash": 1014106698,
-            "baseStyle": undefined,
-            "componentId": "sc-bdfBwQ",
-            "isStatic": false,
-            "rules": Array [
-              "
-    color: ",
-              [Function],
-              ";
-    background-color: ",
-              [Function],
-              ";
-    font-weight: normal;
-    display: block;
-    width: 100%;
-    padding: .25rem 1.5rem;
-    clear: both;
-    text-align: inherit;
-    white-space: nowrap;
-    border: 0;
-    :hover {
-        text-decoration: none;
-        background-color: ",
-              [Function],
-              ";
-        color:  ",
-              [Function],
-              ";
-    }
-",
-            ],
-            "staticRulesId": "",
-          },
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "shouldForwardProp": undefined,
-          "styledComponentId": "sc-bdfBwQ",
-          "target": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "propTypes": Object {
-              "innerRef": [Function],
-              "onClick": [Function],
-              "replace": [Function],
-              "target": [Function],
-              "to": [Function],
-            },
-            "render": [Function],
-          },
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
-        }
-      }
-      disabled={true}
-      to="/loopProperties"
-    >
-      Properties
-    </DropdownItem>
-    <DropdownItem
-      as={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": e {
-            "baseHash": 1014106698,
-            "baseStyle": undefined,
-            "componentId": "sc-bdfBwQ",
-            "isStatic": false,
-            "rules": Array [
-              "
-    color: ",
-              [Function],
-              ";
-    background-color: ",
-              [Function],
-              ";
-    font-weight: normal;
-    display: block;
-    width: 100%;
-    padding: .25rem 1.5rem;
-    clear: both;
-    text-align: inherit;
-    white-space: nowrap;
-    border: 0;
-    :hover {
-        text-decoration: none;
-        background-color: ",
-              [Function],
-              ";
-        color:  ",
-              [Function],
-              ";
-    }
-",
-            ],
-            "staticRulesId": "",
-          },
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "shouldForwardProp": undefined,
-          "styledComponentId": "sc-bdfBwQ",
-          "target": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "propTypes": Object {
-              "innerRef": [Function],
-              "onClick": [Function],
-              "replace": [Function],
-              "target": [Function],
-              "to": [Function],
-            },
-            "render": [Function],
-          },
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
-        }
-      }
-      disabled={true}
-      to="/refreshStatus"
-    >
-      Refresh Status
-    </DropdownItem>
-  </Styled(NavDropdown)>
-  <Styled(NavDropdown)
-    title="LOOP Operations"
-  >
-    <DropdownItem
-      as={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": e {
-            "baseHash": 1014106698,
-            "baseStyle": undefined,
-            "componentId": "sc-bdfBwQ",
-            "isStatic": false,
-            "rules": Array [
-              "
-    color: ",
-              [Function],
-              ";
-    background-color: ",
-              [Function],
-              ";
-    font-weight: normal;
-    display: block;
-    width: 100%;
-    padding: .25rem 1.5rem;
-    clear: both;
-    text-align: inherit;
-    white-space: nowrap;
-    border: 0;
-    :hover {
-        text-decoration: none;
-        background-color: ",
-              [Function],
-              ";
-        color:  ",
-              [Function],
-              ";
-    }
-",
-            ],
-            "staticRulesId": "",
-          },
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "shouldForwardProp": undefined,
-          "styledComponentId": "sc-bdfBwQ",
-          "target": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "propTypes": Object {
-              "innerRef": [Function],
-              "onClick": [Function],
-              "replace": [Function],
-              "target": [Function],
-              "to": [Function],
-            },
-            "render": [Function],
-          },
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
-        }
-      }
-      disabled={true}
-      to="/submit"
-    >
-      Create and deploy to Policy Framework (SUBMIT)
-    </DropdownItem>
-    <DropdownItem
-      as={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": e {
-            "baseHash": 1014106698,
-            "baseStyle": undefined,
-            "componentId": "sc-bdfBwQ",
-            "isStatic": false,
-            "rules": Array [
-              "
-    color: ",
-              [Function],
-              ";
-    background-color: ",
-              [Function],
-              ";
-    font-weight: normal;
-    display: block;
-    width: 100%;
-    padding: .25rem 1.5rem;
-    clear: both;
-    text-align: inherit;
-    white-space: nowrap;
-    border: 0;
-    :hover {
-        text-decoration: none;
-        background-color: ",
-              [Function],
-              ";
-        color:  ",
-              [Function],
-              ";
-    }
-",
-            ],
-            "staticRulesId": "",
-          },
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "shouldForwardProp": undefined,
-          "styledComponentId": "sc-bdfBwQ",
-          "target": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "propTypes": Object {
-              "innerRef": [Function],
-              "onClick": [Function],
-              "replace": [Function],
-              "target": [Function],
-              "to": [Function],
-            },
-            "render": [Function],
-          },
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
-        }
-      }
-      disabled={true}
-      to="/stop"
-    >
-      Undeploy from Policy Framework (STOP)
-    </DropdownItem>
-    <DropdownItem
-      as={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": e {
-            "baseHash": 1014106698,
-            "baseStyle": undefined,
-            "componentId": "sc-bdfBwQ",
-            "isStatic": false,
-            "rules": Array [
-              "
-    color: ",
-              [Function],
-              ";
-    background-color: ",
-              [Function],
-              ";
-    font-weight: normal;
-    display: block;
-    width: 100%;
-    padding: .25rem 1.5rem;
-    clear: both;
-    text-align: inherit;
-    white-space: nowrap;
-    border: 0;
-    :hover {
-        text-decoration: none;
-        background-color: ",
-              [Function],
-              ";
-        color:  ",
-              [Function],
-              ";
-    }
-",
-            ],
-            "staticRulesId": "",
-          },
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "shouldForwardProp": undefined,
-          "styledComponentId": "sc-bdfBwQ",
-          "target": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "propTypes": Object {
-              "innerRef": [Function],
-              "onClick": [Function],
-              "replace": [Function],
-              "target": [Function],
-              "to": [Function],
-            },
-            "render": [Function],
-          },
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
-        }
-      }
-      disabled={true}
-      to="/restart"
-    >
-      ReDeploy to Policy Framework (RESTART)
-    </DropdownItem>
-    <DropdownItem
-      as={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": e {
-            "baseHash": 1014106698,
-            "baseStyle": undefined,
-            "componentId": "sc-bdfBwQ",
-            "isStatic": false,
-            "rules": Array [
-              "
-    color: ",
-              [Function],
-              ";
-    background-color: ",
-              [Function],
-              ";
-    font-weight: normal;
-    display: block;
-    width: 100%;
-    padding: .25rem 1.5rem;
-    clear: both;
-    text-align: inherit;
-    white-space: nowrap;
-    border: 0;
-    :hover {
-        text-decoration: none;
-        background-color: ",
-              [Function],
-              ";
-        color:  ",
-              [Function],
-              ";
-    }
-",
-            ],
-            "staticRulesId": "",
-          },
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "shouldForwardProp": undefined,
-          "styledComponentId": "sc-bdfBwQ",
-          "target": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "propTypes": Object {
-              "innerRef": [Function],
-              "onClick": [Function],
-              "replace": [Function],
-              "target": [Function],
-              "to": [Function],
-            },
-            "render": [Function],
-          },
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
-        }
-      }
-      disabled={true}
-      to="/delete"
-    >
-      Delete loop instance (DELETE)
-    </DropdownItem>
-    <DropdownDivider
-      role="separator"
-    />
-    <DropdownItem
-      as={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": e {
-            "baseHash": 1014106698,
-            "baseStyle": undefined,
-            "componentId": "sc-bdfBwQ",
-            "isStatic": false,
-            "rules": Array [
-              "
-    color: ",
-              [Function],
-              ";
-    background-color: ",
-              [Function],
-              ";
-    font-weight: normal;
-    display: block;
-    width: 100%;
-    padding: .25rem 1.5rem;
-    clear: both;
-    text-align: inherit;
-    white-space: nowrap;
-    border: 0;
-    :hover {
-        text-decoration: none;
-        background-color: ",
-              [Function],
-              ";
-        color:  ",
-              [Function],
-              ";
-    }
-",
-            ],
-            "staticRulesId": "",
-          },
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "shouldForwardProp": undefined,
-          "styledComponentId": "sc-bdfBwQ",
-          "target": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "propTypes": Object {
-              "innerRef": [Function],
-              "onClick": [Function],
-              "replace": [Function],
-              "target": [Function],
-              "to": [Function],
-            },
-            "render": [Function],
-          },
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
-        }
-      }
-      disabled={true}
-      to="/deploy"
-    >
-      Deploy to DCAE (DEPLOY)
-    </DropdownItem>
-    <DropdownItem
-      as={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": e {
-            "baseHash": 1014106698,
-            "baseStyle": undefined,
-            "componentId": "sc-bdfBwQ",
-            "isStatic": false,
-            "rules": Array [
-              "
-    color: ",
-              [Function],
-              ";
-    background-color: ",
-              [Function],
-              ";
-    font-weight: normal;
-    display: block;
-    width: 100%;
-    padding: .25rem 1.5rem;
-    clear: both;
-    text-align: inherit;
-    white-space: nowrap;
-    border: 0;
-    :hover {
-        text-decoration: none;
-        background-color: ",
-              [Function],
-              ";
-        color:  ",
-              [Function],
-              ";
-    }
-",
-            ],
-            "staticRulesId": "",
-          },
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "shouldForwardProp": undefined,
-          "styledComponentId": "sc-bdfBwQ",
-          "target": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "propTypes": Object {
-              "innerRef": [Function],
-              "onClick": [Function],
-              "replace": [Function],
-              "target": [Function],
-              "to": [Function],
-            },
-            "render": [Function],
-          },
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
-        }
-      }
-      disabled={true}
-      to="/undeploy"
-    >
-      UnDeploy to DCAE (UNDEPLOY)
-    </DropdownItem>
-  </Styled(NavDropdown)>
-  <Styled(NavDropdown)
-    title="Help"
-  >
-    <Styled(NavLink)
-      href="https://wiki.onap.org/"
-      target="_blank"
-    >
-      Wiki
-    </Styled(NavLink)>
-    <Styled(NavLink)
-      href="mailto:onap-discuss@lists.onap.org?subject=CLAMP&body=Please send us suggestions or feature enhancements or defect. If possible, please send us the steps to replicate any defect."
-    >
-      Contact Us
-    </Styled(NavLink)>
-    <DropdownItem
-      as={
-        Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "attrs": Array [],
-          "componentStyle": e {
-            "baseHash": 1014106698,
-            "baseStyle": undefined,
-            "componentId": "sc-bdfBwQ",
-            "isStatic": false,
-            "rules": Array [
-              "
-    color: ",
-              [Function],
-              ";
-    background-color: ",
-              [Function],
-              ";
-    font-weight: normal;
-    display: block;
-    width: 100%;
-    padding: .25rem 1.5rem;
-    clear: both;
-    text-align: inherit;
-    white-space: nowrap;
-    border: 0;
-    :hover {
-        text-decoration: none;
-        background-color: ",
-              [Function],
-              ";
-        color:  ",
-              [Function],
-              ";
-    }
-",
-            ],
-            "staticRulesId": "",
-          },
-          "foldedComponentIds": Array [],
-          "render": [Function],
-          "shouldForwardProp": undefined,
-          "styledComponentId": "sc-bdfBwQ",
-          "target": Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "propTypes": Object {
-              "innerRef": [Function],
-              "onClick": [Function],
-              "replace": [Function],
-              "target": [Function],
-              "to": [Function],
-            },
-            "render": [Function],
-          },
-          "toString": [Function],
-          "warnTooManyClasses": [Function],
-          "withComponent": [Function],
-        }
-      }
-      disabled={false}
-      to="/userInfo"
-    >
-      User Info
-    </DropdownItem>
-  </Styled(NavDropdown)>
-</NavbarCollapse>
-`;
diff --git a/runtime/ui-react/src/index.js b/runtime/ui-react/src/index.js
deleted file mode 100644
index 9baeaeec6..000000000
--- a/runtime/ui-react/src/index.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-import React from 'react';
-import ReactDOM from 'react-dom';
-import OnapClamp from './OnapClamp';
-import { Route, MemoryRouter } from 'react-router-dom'
-
-
-const routing = (
-  <MemoryRouter forceRefresh={ false }>
-    <Route path="/" component={ OnapClamp }/>
-  </MemoryRouter>
-);
-
-export var mainClamp = ReactDOM.render(
-  routing,
-  document.getElementById('root')
-)
diff --git a/runtime/ui-react/src/logo.png b/runtime/ui-react/src/logo.png
deleted file mode 100644
index c6f6857a5..000000000
--- a/runtime/ui-react/src/logo.png
+++ /dev/null
diff --git a/runtime/ui-react/src/setupTests.js b/runtime/ui-react/src/setupTests.js
deleted file mode 100644
index 30ce019ea..000000000
--- a/runtime/ui-react/src/setupTests.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP POLICY-CLAMP
- * ================================================================================
- * Copyright (C) 2019, 2021 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-
-import { configure } from 'enzyme';
-import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-
-configure({ adapter: new Adapter() });
-global.fetch = require('jest-fetch-mock');
diff --git a/runtime/ui-react/src/theme/globalStyle.js b/runtime/ui-react/src/theme/globalStyle.js
deleted file mode 100644
index 5245aae19..000000000
--- a/runtime/ui-react/src/theme/globalStyle.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-
-import { 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;
-  }
-
-  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;
-  }
-
-  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;
-  }
-
-  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',
-
-  backgroundColor: '#eeeeee',
-  fontFamily: 'Arial, Sans-serif',
-  fontSize: '16px',
-
-  loopViewerBackgroundColor: 'white',
-  loopViewerFontColor: 'yellow',
-  loopViewerHeaderBackgroundColor: '#337ab7',
-  loopViewerHeaderFontColor: 'white',
-
-  loopLogsHeaderBackgroundColor: 'white',
-  loopLogsHeaderFontColor: 'black',
-
-  menuBackgroundColor: 'white',
-  menuFontColor: 'black',
-  menuHighlightedBackgroundColor: '#337ab7',
-  menuHighlightedFontColor: 'white',
-
-  toscaTextareaBackgroundColor: 'white',
-  toscaTextareaFontSize: '13px',
-
-  policyEditorBackgroundColor: 'white',
-  policyEditorFontSize: '13px'
-};
diff --git a/runtime/ui-react/src/utils/CsvToJson.js b/runtime/ui-react/src/utils/CsvToJson.js
deleted file mode 100644
index 6d95b3119..000000000
--- a/runtime/ui-react/src/utils/CsvToJson.js
+++ /dev/null
@@ -1,204 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-
-export default 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;
-}
diff --git a/runtime/ui-react/src/utils/CsvToJson.test.js b/runtime/ui-react/src/utils/CsvToJson.test.js
deleted file mode 100644
index e36e85554..000000000
--- a/runtime/ui-react/src/utils/CsvToJson.test.js
+++ /dev/null
@@ -1,268 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-
-import 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);
-  });
-})
diff --git a/runtime/ui-react/src/utils/OnapConstants.js b/runtime/ui-react/src/utils/OnapConstants.js
deleted file mode 100644
index c5b96d4c2..000000000
--- a/runtime/ui-react/src/utils/OnapConstants.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-
-// 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"
-};
-
-export default OnapConstants;
diff --git a/runtime/ui-react/src/utils/OnapUtils.js b/runtime/ui-react/src/utils/OnapUtils.js
deleted file mode 100644
index 9ba938240..000000000
--- a/runtime/ui-react/src/utils/OnapUtils.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2020 AT&T Intellectual Property. All rights
- *                             reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-
-export default class OnapUtils {
-
-  constructor() {
-    this.clickBlocked = false;
-  }
-
-  static jsonEditorErrorFormatter(errors) {
-
-    let messages = [];
-    let messagesOutputString = null;
-
-    // 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"
-    // }
-
-    // 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;
-          }
-        }
-      }
-    }
-
-    return messagesOutputString;
-  }
-}