aboutsummaryrefslogtreecommitdiffstats
path: root/vid/src/main/webapp/app/vid/scripts/view-models
diff options
context:
space:
mode:
Diffstat (limited to 'vid/src/main/webapp/app/vid/scripts/view-models')
-rw-r--r--vid/src/main/webapp/app/vid/scripts/view-models/aaiGetSubs.htm79
-rw-r--r--vid/src/main/webapp/app/vid/scripts/view-models/aaiSubDetails.htm93
-rw-r--r--vid/src/main/webapp/app/vid/scripts/view-models/aaiSubViewEdit.htm147
-rw-r--r--vid/src/main/webapp/app/vid/scripts/view-models/creationDialog.htm64
-rw-r--r--vid/src/main/webapp/app/vid/scripts/view-models/deletionDialog.htm80
-rw-r--r--vid/src/main/webapp/app/vid/scripts/view-models/detailsDialog.htm48
-rw-r--r--vid/src/main/webapp/app/vid/scripts/view-models/dummy.txt0
-rw-r--r--vid/src/main/webapp/app/vid/scripts/view-models/instantiate.htm204
-rw-r--r--vid/src/main/webapp/app/vid/scripts/view-models/msoCommit.htm47
-rw-r--r--vid/src/main/webapp/app/vid/scripts/view-models/popupWindow.htm8
-rw-r--r--vid/src/main/webapp/app/vid/scripts/view-models/sample.html61
-rw-r--r--vid/src/main/webapp/app/vid/scripts/view-models/sampleWithIframe.html23
-rw-r--r--vid/src/main/webapp/app/vid/scripts/view-models/serviceModels.htm90
-rw-r--r--vid/src/main/webapp/app/vid/scripts/view-models/singlePageSample.html87
-rw-r--r--vid/src/main/webapp/app/vid/scripts/view-models/vidhome.htm39
15 files changed, 1070 insertions, 0 deletions
diff --git a/vid/src/main/webapp/app/vid/scripts/view-models/aaiGetSubs.htm b/vid/src/main/webapp/app/vid/scripts/view-models/aaiGetSubs.htm
new file mode 100644
index 000000000..7d46e3dac
--- /dev/null
+++ b/vid/src/main/webapp/app/vid/scripts/view-models/aaiGetSubs.htm
@@ -0,0 +1,79 @@
+<!--
+ ============LICENSE_START=======================================================
+ VID
+ ================================================================================
+ Copyright (C) 2017 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=========================================================
+ -->
+
+<link rel="stylesheet" type="text/css" href="app/vid/styles/aaiGetSubs.css" />
+<link rel="stylesheet" type="text/css" href="app/vid/styles/aaiSubDetails.css" />
+<script src="app/vid/scripts/controller/aaiSubscriberController.js"></script>
+<div ng-controller="aaiSubscriberController" ng-cloak>
+
+ <div>
+ <div class="statusLine" ng-class="{true:'aaiVisible', false:'aaiHidden'}[isSpinnerVisible]">
+ <img src="app/vid/images/spinner.gif"></img>
+ <label>Status:</label><span class="status">{{status}}</span>
+ </div>
+
+ <h2 class="heading2"><center>Search Existing Service Instances</center></h2>
+ <br>
+ Please search by the Subscriber name or enter Service Instance Id below:&nbsp;<br><br>
+
+ <table>
+ <tr>
+ <td style="width:30%">
+ <div class="fn-ebz-container">
+ <label class="fn-ebz-text-label">Subscriber Name:</label>
+ </div>
+ </td>
+ <td style="width:60%" nowrap>
+ <div class="fn-ebz-container" ng-init="autoGetSubs();">
+ <select ng-model="selectedCustomer" ng-options="item.globalCustomerId as item.subscriberName for item in customerList | orderBy:'subscriberName'">
+ <option value="">Select a subscriber</option></select>
+ &nbsp;&nbsp;<a class="btn btn-primary" ng-click="refreshSubs();" ><span class="glyphicon glyphicon-refresh"></span></a>
+ </div>
+ </td>
+
+ </tr>
+ <tr>
+ <td style="width:30%">
+ <div class="fn-ebz-container">
+ <label class="fn-ebz-text-label">Service Instance Id:</label>
+ </div>
+ </td>
+ <td style="width:60%">
+ <div class="fn-ebz-container">
+ <input type="text" style="width: 350px;" name="selectedServiceInstance" ng-model="selectedServiceInstance"/>
+ </div>
+ </td>
+
+ </tr>
+ <tr>
+ <td>
+ <td style="width:30%">
+ <div class="fn-ebz-container">
+ <button type="submit" att-button size="small" ng-click="getSubscriberDet(selectedCustomer,selectedServiceInstance);">Submit</button></a>
+ </div>
+ </td>
+ </td>
+ </tr>
+ </table>
+
+
+ </div>
+
+</div>
diff --git a/vid/src/main/webapp/app/vid/scripts/view-models/aaiSubDetails.htm b/vid/src/main/webapp/app/vid/scripts/view-models/aaiSubDetails.htm
new file mode 100644
index 000000000..90932875a
--- /dev/null
+++ b/vid/src/main/webapp/app/vid/scripts/view-models/aaiSubDetails.htm
@@ -0,0 +1,93 @@
+<!--
+ ============LICENSE_START=======================================================
+ VID
+ ================================================================================
+ Copyright (C) 2017 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=========================================================
+ -->
+
+ <div ng-controller="aaiSubscriberController" ng-cloak>
+
+ <div>
+ <div class="statusLine" ng-class="{true:'aaiVisible', false:'aaiHidden'}[isSpinnerVisible]">
+ <img src="app/vid/images/spinner.gif">
+ </img>
+ <label>Status:</label><span class="status">{{status}}</span>
+ </div>
+
+ <h1 class="heading1"><center>Subscriber Details for {{selectedSubscriber}} ({{selectedSubscriberName}})</center></h1>
+ <br>
+ <div class="fn-ebz-container">
+ Filter:
+ <input class="fn-ebz-text" type="text" ng-model="searchString" size="20" style="width: 250px;">
+ </div>
+ <div ng-init="getSubDetails();">
+
+ <div style="margin-top: 30px">
+ <table att-table width="100%" table-data="displayData" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage" type="header">
+
+ <thead att-table-row>
+ <tr>
+ <th att-table-header sortable="true" key="viewSubDetails">View/Edit</th>
+ <th att-table-header sortable="true" key="globalCustomerId">Global Customer ID</th>
+ <th att-table-header sortable="true" key="subscriberName">Subscriber Name</th>
+ <th att-table-header sortable="true" key="serviceType">Service Type</th>
+ <th att-table-header default-sort="A" sortable="true" key="serviceInstanceName">Service Instance Name</th>
+ <th att-table-header sortable="true" key="serviceInstanceId">Service Instance ID</th>
+ </tr>
+ </thead>
+ <tbody att-table-row type="body" row-repeat="disData in displayData">
+ <tr>
+ <td att-table-body>
+ <div>
+ <a alt="View/Edit" ng-click="getAsdcModel(disData);"> View/Edit </a>
+ </div>
+ </td>
+ <!-- <td att-table-body ><button type=button ng-click="getAsdcModel(disData);" att-button btn-type="primary" size="small">View/Edit</button></td> --->
+ <td att-table-body ng-bind="disData['globalCustomerId']"></td>
+ <td att-table-body ng-bind="disData['subscriberName']"></td>
+ <td att-table-body ng-bind="disData['serviceType']"></td>
+ <td att-table-body ng-bind="disData['serviceInstanceName']"></td>
+ <td att-table-body ng-bind="disData['serviceInstanceId']"></td>
+ </tr>
+ </tbody>
+ </table>
+ <table width='100%'>
+ <tr>
+ <td width='33%' valign='middle'>
+ <span style="cursor: pointer" ng-if="currentPage>1"><button att-button size="small" ng-click="prevPage();">&lt; prev page</button></span>
+ </td>
+ <td width='33%' valign='middle'>
+ Jump to page:
+ <input class="fn-ebz-text" type="text" ng-model="currentPage" size="5" style="width: 47px;">
+ Results per page: <span style="cursor: pointer" ng-click="viewPerPage = 10" ng-style="viewPerPage === 10 && {'textDecoration':'underline','text-color':'black'}">10</span>
+ | <span style="cursor: pointer" ng-click="viewPerPage = 25" ng-style="viewPerPage === 25 && {'textDecoration':'underline','text-color':'black'}">25</span>
+ | <span style="cursor: pointer" ng-click="viewPerPage = 50" ng-style="viewPerPage === 50 && {'textDecoration':'underline','text-color':'black'}">50</span>
+ </td>
+ <td width='34%' align='right' valign='middle'>
+ <span style="cursor: pointer" ng-if="currentPage<totalPage"><button att-button ng-click="nextPage();">next page &gt;</button></span>
+ </td>
+ </tr>
+ </table>
+
+
+ </div>
+
+ </div>
+
+
+ </div>
+
+ </div>
diff --git a/vid/src/main/webapp/app/vid/scripts/view-models/aaiSubViewEdit.htm b/vid/src/main/webapp/app/vid/scripts/view-models/aaiSubViewEdit.htm
new file mode 100644
index 000000000..53c9a6b04
--- /dev/null
+++ b/vid/src/main/webapp/app/vid/scripts/view-models/aaiSubViewEdit.htm
@@ -0,0 +1,147 @@
+<!--
+ ============LICENSE_START=======================================================
+ VID
+ ================================================================================
+ Copyright (C) 2017 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=========================================================
+ -->
+
+<div ng-controller="aaiSubscriberController" ng-cloak>
+
+ <div popup-window class="popupContents" ngx-show="{{popup.isVisible}}"
+ ng-cloak>
+ <div ng-include="'app/vid/scripts/view-models/creationDialog.htm'"></div>
+ <div ng-include="'app/vid/scripts/view-models/deletionDialog.htm'"></div>
+ <div ng-include="'app/vid/scripts/view-models/detailsDialog.htm'"></div>
+ </div>
+
+ <div>
+ <div class="statusLine">
+ <img src="app/vid/images/spinner.gif"
+ ng-class="{true:'aaiVisible', false:'aaiHidden'}[isSpinnerVisible]"></img>
+ <label>Status:</label><span class="status">{{status}}</span>
+ </div>
+
+ <h2 class="heading2">
+ <center>VIEW/EDIT SERVICE INSTANCE <a class="btn btn-primary btn-xs pull-right" ng-click="reloadRoute();" ><span class="glyphicon glyphicon-refresh"></span></a></center>
+ </h2>
+ </center>
+ </h2>
+ <br>
+
+
+ <center>
+ <table border="1">
+ <tr>
+ <th style="text-align: center" width="33%">SUBSCRIBER:
+ {{globalCustomerId}}</th>
+ <th style="text-align: center" width="34%">SERVICE TYPE:
+ {{serviceType}}</th>
+ <th style="text-align: center" width="33%">SERVICE INSTANCE
+ ID: {{serviceInstanceId}}</th>
+ <tr>
+ <tr>
+ <td colspan='3' style="text-align: center">Service Instance
+ Name: {{serviceInstanceName || "Not defined"}}
+ </td>
+ <tr>
+ </table>
+
+ </center>
+
+
+ <br>
+
+ <div ng-init="autoPopulateViewEdit();">
+ <script type="text/ng-template" id="nodes_renderer.html">
+ <div ui-tree-handle data-drag-enabled="false" class="tree-node tree-node-content">
+ <a class="btn btn-success btn-xs" ng-if="node.nodes && node.nodes.length > 0" data-nodrag ng-click="toggle(this)"><span
+ class="glyphicon"
+ ng-class="{
+ 'glyphicon-chevron-right': collapsed,
+ 'glyphicon-chevron-down': !collapsed
+ }"></span></a>
+ <div class='btn'>{{node.nodeType}}</div><div class='btn'>{{node.nodeId}}</div><div class='btn'>{{node.nodeStatus}}</div>
+
+ <a class="pull-right btn btn-danger btn-xs" ng-if="node.delete != false" data-nodrag ng-click="showVnfDetails(node);"><span class="glyphicon glyphicon-remove"></a>
+ <a class="pull-right btn btn-primary btn-xs" ng-if="node.info != false" data-nodrag ng-click="showVnfDetails();"><span
+ class="glyphicon glyphicon-zoom-in"></span></a>
+
+ </div>
+ <ol ui-tree-nodes ng-model="node.nodes" ng-class="{hidden: collapsed}">
+ <li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_renderer.html'">
+ </li>
+ </ol>
+</script>
+ <b>EXISTING</b>
+ <div ng-controller="TreeCtrl">
+ <div>
+ <div ui-tree id="tree-root" >
+ <ol ui-tree-nodes ng-model="treeList"">
+ <li ng-repeat="node in treeList" ui-tree-node data-nodrag
+ ng-include="'nodes_renderer.html'"></li>
+ </ol>
+ </div>
+ </div>
+
+ </div>
+ <b>AVAILABLE</b>
+
+ <script type="text/ng-template" id="nodes_renderer2.html">
+ <div ui-tree-handle data-drag-enabled="false" class="tree-node tree-node-content" >
+ <a class="btn btn-success btn-xs" ng-if="node.nodes && node.nodes.length > 0" data-nodrag ng-click="toggle(this)"><span
+ class="glyphicon"
+ ng-class="{
+ 'glyphicon-chevron-right': collapsed,
+ 'glyphicon-chevron-down': !collapsed
+ }"></span></a>
+ <div class='btn'>{{node.nodeType}}</div><div class='btn'>{{node.nodeId}}</div><div class='btn'>{{node.nodeStatus}}</div>
+
+ <a class="pull-right btn btn-primary btn-xs" ng-if="node.delete != false" data-nodrag ng-click="callDelete(this)">
+ <span class="glyphicon glyphicon-plus"></span>
+ </a>
+
+ <a class="pull-right btn btn-primary btn-xs" ng-if="node.info != false" data-nodrag ng-click="showInfoDialog(node.itemType, node.nodeId, node.nodeType);">
+ <span class="glyphicon glyphicon-zoom-in"></span>
+ </a>
+
+ </div>
+ <ol ui-tree-nodes ng-model="node.nodes" ng-class="{hidden: collapsed}">
+ <li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_renderer2.html'">
+ </li>
+ </ol>
+</script>
+
+ <div ng-controller="TreeCtrl">
+ <div>
+ <div ui-tree id="tree-root">
+ <ol ui-tree-nodes ng-model="availableTreeList">
+ <li ng-repeat="node in availableTreeList" ui-tree-node
+ data-nodrag ng-include="'nodes_renderer2.html'"></li>
+ </ol>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div>
+
+ <button type="button" " att-button
+ btn-type="primary" size="small">Show Details</button>
+
+ <pre>
+ {{inventoryResponseItem | json}}
+ </pre>
+ </div>
+ </div>
diff --git a/vid/src/main/webapp/app/vid/scripts/view-models/creationDialog.htm b/vid/src/main/webapp/app/vid/scripts/view-models/creationDialog.htm
new file mode 100644
index 000000000..d016b8f5d
--- /dev/null
+++ b/vid/src/main/webapp/app/vid/scripts/view-models/creationDialog.htm
@@ -0,0 +1,64 @@
+<!--
+ ============LICENSE_START=======================================================
+ VID
+ ================================================================================
+ Copyright (C) 2017 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=========================================================
+ -->
+
+<div ng-controller="creationDialogController">
+
+ <div ng-show="isDialogVisible">
+ <div class="titleLine">
+ <img src="app/vid/images/spinner.gif"
+ ngx-visible="{{isSpinnerVisible}}"></img>
+ <h3>Create {{componentName}}</h3>
+ </div>
+
+ <div class="error" ng-show="isErrorVisible">
+ <img src="app/vid/images/error.png"></img>{{error}}
+ </div>
+
+ <div ngx-visible="{{isDataVisible}}">
+ <parameter-block control="summaryControl"></parameter-block>
+ <h4>
+ User Provided Data (<img class="requiredIndicator"
+ src="app/vid/images/asterisk.png" height='10' width='10'></img> indicates required field)
+ </h4>
+ <parameter-block control="userProvidedControl"
+ callback="userParameterChanged(id);" editable></parameter-block>
+
+ <div class="prompt">
+ <p>
+ Enter Data and <span>Confirm</span> to<br />Create <span>{{componentName}}</span>
+ </p>
+ <p>
+ <span>Cancel</span> to Return to Previous Page.<br />Data entered
+ will be lost
+ </p>
+ </div>
+
+ </div>
+ <div class="buttonRow">
+ <button ngx-enabled="{{isConfirmEnabled}}" att-button size="small"
+ ng-click="confirm();">Confirm</button>
+ <button type="button" ng-click="cancel();" att-button
+ btn-type="primary" size="small">Cancel</button>
+ </div>
+ </div>
+
+ <div ng-include="'app/vid/scripts/view-models/msoCommit.htm'"></div>
+
+</div>
diff --git a/vid/src/main/webapp/app/vid/scripts/view-models/deletionDialog.htm b/vid/src/main/webapp/app/vid/scripts/view-models/deletionDialog.htm
new file mode 100644
index 000000000..029d6eaa8
--- /dev/null
+++ b/vid/src/main/webapp/app/vid/scripts/view-models/deletionDialog.htm
@@ -0,0 +1,80 @@
+<!--
+ ============LICENSE_START=======================================================
+ VID
+ ================================================================================
+ Copyright (C) 2017 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=========================================================
+ -->
+
+<div ng-controller="deletionDialogController">
+
+ <div ng-show="isDialogVisible">
+ <div class="titleLine">
+ <img src="app/vid/images/spinner.gif"
+ ngx-visible="{{isSpinnerVisible}}"></img>
+ <h3>Delete {{componentName}}</h3>
+ </div>
+
+ <div class="error" ng-show="isErrorVisible">
+ <img src="app/vid/images/error.png"></img>{{error}}
+ </div>
+
+ <parameter-block control="summaryControl"></parameter-block>
+
+ <div ngx-visible="{{isDataVisible}}">
+
+ <h4>
+ User Provided Data (<img class="requiredIndicator"
+ src="app/vid/images/asterisk.png" height='10' width='10'></img> indicates required field)
+ </h4>
+ <parameter-block control="userProvidedControl"
+ callback="userParameterChanged(id);" editable></parameter-block>
+
+ <div class="prompt">
+ <p>
+ Enter Data and <span>Confirm</span> to<br />Delete <span>{{componentName}}</span>
+ </p>
+ <p>
+ <span>Cancel</span> to Return to Previous Page.<br />Data entered
+ will be lost
+ </p>
+ </div>
+ </div>
+
+<!--
+ <div class="prompt">
+ <p>
+ <span>Confirm</span> to Request<br />DELETION of <span>{{componentName}}</span>
+ </p>
+ <p>
+ <span>Cancel</span> to Return to Previous Page
+ </p>
+ </div> -->
+
+ <div class="buttonRow">
+ <!-- <button type="button" ng-click="confirm();" att-button
+ btn-type="primary" size="small" class="confirm">Confirm</button>
+ <button type="button" ng-click="cancel();" att-button
+ btn-type="primary" size="small">Cancel</button> --->
+ <button ngx-enabled="{{isConfirmEnabled}}" att-button size="small"
+ ng-click="confirm();">Confirm</button>
+ <button type="button" ng-click="cancel();" att-button
+ btn-type="primary" size="small">Cancel</button>
+ </div>
+ </div>
+
+ <div ng-include="'app/vid/scripts/view-models/msoCommit.htm'"></div>
+
+</div>
diff --git a/vid/src/main/webapp/app/vid/scripts/view-models/detailsDialog.htm b/vid/src/main/webapp/app/vid/scripts/view-models/detailsDialog.htm
new file mode 100644
index 000000000..82afcbf50
--- /dev/null
+++ b/vid/src/main/webapp/app/vid/scripts/view-models/detailsDialog.htm
@@ -0,0 +1,48 @@
+<!--
+ ============LICENSE_START=======================================================
+ VID
+ ================================================================================
+ Copyright (C) 2017 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=========================================================
+ -->
+
+<div ng-controller="detailsDialogController" ng-show="isDialogVisible">
+
+ <div class="titleLine">
+ <img src="app/vid/images/spinner.gif"
+ ngx-visible="{{isSpinnerVisible}}"></img>
+ <h3>Service Instance Details</h3> <!-- {{componentName}} -->
+ </div>
+
+ <div class="error" ng-show="isErrorVisible">
+ <img src="app/vid/images/error.png"></img>{{error}}
+ </div>
+
+ <parameter-block control="summaryControl"></parameter-block>
+
+ <h4>{{componentName}} Details</h4>
+
+ <parameter-block control="detailsControl"></parameter-block>
+
+ <h4>Instantiation Transactions</h4>
+
+ <pre class="log">{{log}}</pre>
+
+ <div class="buttonRow">
+ <button type="button" ng-click="close();" att-button
+ btn-type="primary" size="small">Close</button>
+ </div>
+
+</div>
diff --git a/vid/src/main/webapp/app/vid/scripts/view-models/dummy.txt b/vid/src/main/webapp/app/vid/scripts/view-models/dummy.txt
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/vid/src/main/webapp/app/vid/scripts/view-models/dummy.txt
diff --git a/vid/src/main/webapp/app/vid/scripts/view-models/instantiate.htm b/vid/src/main/webapp/app/vid/scripts/view-models/instantiate.htm
new file mode 100644
index 000000000..1cfa4fb2d
--- /dev/null
+++ b/vid/src/main/webapp/app/vid/scripts/view-models/instantiate.htm
@@ -0,0 +1,204 @@
+<!--
+ ============LICENSE_START=======================================================
+ VID
+ ================================================================================
+ Copyright (C) 2017 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=========================================================
+ -->
+
+<div ng-controller="InstantiationController">
+
+ <div popup-window class="popupContents" ngx-show="{{popup.isVisible}}"
+ ng-cloak>
+ <div ng-include="'app/vid/scripts/view-models/creationDialog.htm'"></div>
+ <div ng-include="'app/vid/scripts/view-models/deletionDialog.htm'"></div>
+ <div ng-include="'app/vid/scripts/view-models/detailsDialog.htm'"></div>
+ </div>
+ <div ng-controller="aaiSubscriberController" ng-init="getComponentList() ">
+ <div class="statusLine" ng-class="{true:'aaiVisible', false:'aaiHidden'}[isSpinnerVisible]">
+ <img src="app/vid/images/spinner.gif"></img>
+ <label>Status:</label><span class="status">{{status}}</span>
+ </div>
+
+ <h1 class="heading1" style="margin-top: 20px;">View/Edit Service Instance</h1>
+ <a class="btn btn-primary btn-xs pull-right" ng-click="reloadRoute();" ><span class="glyphicon glyphicon-refresh"></span></a>
+
+ <br>
+
+ <center>
+ <table att-table border="1" ng-model="service">
+ <tr>
+ <th style="text-align: center" width="33%">SUBSCRIBER:
+ {{service.instance.globalCustomerId}}</th>
+ <th style="text-align: center" width="34%">SERVICE TYPE:
+ {{service.instance.serviceType}}</th>
+ <th style="text-align: center" width="33%">SERVICE INSTANCE
+ ID: {{service.instance.serviceInstanceId}}</th>
+ <tr>
+ <tr>
+ <td colspan='3' style="text-align: center">Service Instance
+ Name: {{service.instance.name || "Not defined"}}
+ </td>
+ <tr>
+ </table>
+
+ </center>
+
+ <div ui-tree data-drag-enabled="false" data-nodrop-enabled="true" style="margin: 30px">
+
+ <ol ui-tree-nodes="" ng-model="service" >
+ <li ng-repeat="aService in [service]" ui-tree-node>
+ <div ui-tree-handle class="tree-node tree-node-content">
+ <a class="btn btn-success btn-xs" ng-if="(aService.instance.vnfs && aService.instance.vnfs.length > 0) || (aService.instance.networks && aService.instance.networks.length > 0)" data-nodrag ng-click="this.toggle()">
+ <span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>
+ </a>
+ SERVICE INSTANCE: {{aService.instance.name}}
+ <a ng-if="aService.instance.vnfs.length == 0" class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="deleteService(aService.instance);">
+ <span class="glyphicon glyphicon-remove"></span>
+ </a>
+
+ <div class="pull-right btn-group" ng-if="aService.model.vnfs && !equals(aService.model.vnfs, {})">
+ <button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Add VNF<span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu" ng-model="aService.model.vnfs">
+ <li role="menuitem" ng-repeat="(vnfUuid, vnf) in aService.model.vnfs">
+ <!-- 9-21 -->
+ <!-- <a ng-click="addVnfInstance(this, aService.instance, vnf)">{{vnf.name}}</a>-->
+ <a ng-click="addVnfInstance(vnf)">{{vnf.name}}</a>
+ </li>
+ </ul>
+ </div>
+ <!-- <div class="pull-right btn-group" ng-if="aService.model.networks && !equals(aService.model.networks, {})">
+ <button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Add Network<span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu" ng-model="aService.model.networks">
+ <li ng-repeat="(networkUuid, network) in aService.model.networks">
+ <a ng-click="addNetworkInstance(network)">{{network.name}}</a>
+ </li>
+ </ul>
+ </div> -->
+ <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="describeService(aService.instance)" style="margin-right: 8px;">
+ <span class="glyphicon glyphicon-info-sign"></span>
+ </a>
+ </div>
+ <ol ui-tree-nodes="" ng-model="aService.instance.vnfs" ng-class="{hidden: collapsed}">
+ <li ng-repeat="vnf in aService.instance.vnfs" ui-tree-node>
+ <div ui-tree-handle class="tree-node tree-node-content">
+ <a class="btn btn-success btn-xs" ng-if="(vnf.vfModules && vnf.vfModules.length > 0) || (vnf.volumeGroups && vnf.volumeGroups.length > 0)" data-nodrag ng-click="this.toggle()">
+ <span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>
+ </a>
+ VNF: {{vnf.name}} | TYPE: {{vnf.nodeType}} | ORCH STATUS: {{vnf.nodeStatus}}
+ <a ng-if="(vnf.vfModules.length == 0) && (vnf.volumeGroups.length == 0)" class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="deleteVnf(aService.instance, vnf)">
+ <span class="glyphicon glyphicon-remove"></span>
+ </a>
+ <div class="pull-right btn-group" ng-if="aService.modelByInvariantUuid.vnfs[vnf.object['persona-model-id']][vnf.object['persona-model-version']].vfModules">
+ <button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Add VF-Module<span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu" ng-model="vnf">
+ <li ng-repeat="(vfModuleInvariantUuid, vfModuleVersionModel) in aService.modelByInvariantUuid.vnfs[vnf.object['persona-model-id']][vnf.object['persona-model-version']].vfModules">
+ <a ng-repeat="(vfModuleVersion, vfModule) in vfModuleVersionModel" ng-click="addVfModuleInstance(vnf, vfModule)">{{vfModule.name}}</a>
+ </li>
+ </ul>
+ </div>
+ <div class="pull-right btn-group" ng-if="aService.modelByInvariantUuid.vnfs[vnf.object['persona-model-id']][vnf.object['persona-model-version']].volumeGroups">
+ <button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Add Volume Group<span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu" ng-model="vnf">
+ <li ng-repeat="(volumeGroupInvariantUuid, volumeGroupVersionModel) in aService.modelByInvariantUuid.vnfs[vnf.object['persona-model-id']][vnf.object['persona-model-version']].volumeGroups">
+ <a ng-repeat="(volumeGroupVersion, volumeGroup) in volumeGroupVersionModel" ng-click="addVolumeGroupInstance(vnf, volumeGroup)">{{volumeGroup.name}}</a>
+ </li>
+ </ul>
+ </div>
+ <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="describeVnf(aService.instance, vnf)" style="margin-right: 8px;">
+ <span class="glyphicon glyphicon-info-sign"></span>
+ </a>
+ </div>
+ <ol ui-tree-nodes="" ng-model="vnf.vfModules" ng-class="{hidden: collapsed}">
+ <li ng-repeat="vfModule in vnf.vfModules" ui-tree-node>
+ <div ui-tree-handle class="tree-node tree-node-content">
+ <a class="btn btn-success btn-xs" ng-if="(vfModule.volumeGroups && vfModule.volumeGroups.length > 0)" data-nodrag ng-click="this.toggle()">
+ <span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>
+ </a>
+ VFMODULE: {{vfModule.name}} | TYPE: {{vfModule.nodeType}} | ORCH STATUS: {{vfModule.nodeStatus}}
+ <!-- -->
+ <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="deleteVfModule(aService.instance, vfModule, vnf)">
+ <span class="glyphicon glyphicon-remove"></span>
+ </a>
+ <div class="pull-right btn-group">
+ <!-- <button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Attach Volume Group<span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu" ng-model="vnf.volumeGroups">
+ <li ng-repeat="volumeGroup in vnf.availableVolumeGroups">
+ <a ng-click="attachVolumeGroupInstance(vfModule, volumeGroup)">{{volumeGroup.name}}</a>
+ </li>
+ </ul> -->
+ </div>
+ <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="describeVfModule(aService.instance, vfModule)" style="margin-right: 8px;">
+ <span class="glyphicon glyphicon-info-sign"></span>
+ </a>
+ </div>
+ <ol ui-tree-nodes="" ng-model="vfModule.volumeGroups" ng-class="{hidden: collapsed}">
+ <li ng-repeat="volumeGroup in vfModule.volumeGroups" ui-tree-node>
+ <div ui-tree-handle class="tree-node tree-node-content">
+ VOLUME GROUP: {{volumeGroup.name}} | TYPE: {{volumeGroup.nodeType}} | ORCH STATUS: {{volumeGroup.nodeStatus}}
+ <!-- <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="deleteVolumeGroup(aService.instance, vnf, vfModule, volumeGroup)">
+ <span class="glyphicon glyphicon-remove"></span>
+ </a> -->
+ <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="describeVolumeGroup(aService.instance, volumeGroup)" style="margin-right: 8px;">
+ <span class="glyphicon glyphicon-info-sign"></span>
+ </a>
+ </div>
+ </li>
+ </ol>
+ </li>
+ </ol>
+ <ol ui-tree-nodes="" ng-model="vnf.availableVolumeGroups" ng-class="{hidden: collapsed}">
+ <li ng-repeat="volumeGroup in vnf.availableVolumeGroups" ui-tree-node>
+ <div ui-tree-handle class="tree-node tree-node-content">
+ VOLUME GROUP: {{volumeGroup.name}} | TYPE: {{volumeGroup.nodeType}} | ORCH STATUS: {{volumeGroup.nodeStatus}}
+ <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="deleteVnfVolumeGroup(aService.instance, vnf, volumeGroup)">
+ <span class="glyphicon glyphicon-remove"></span>
+ </a>
+ <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="describeVolumeGroup(aService.instance, volumeGroup)" style="margin-right: 8px;">
+ <span class="glyphicon glyphicon-info-sign"></span>
+ </a>
+ </div>
+ </li>
+ </ol>
+ </li>
+ </ol>
+ <ol ui-tree-nodes="" ng-model="aService.instance.networks" ng-class="{hidden: collapsed}">
+ <li ng-repeat="network in aService.instance.networks" ui-tree-node>
+ <div ui-tree-handle class="tree-node tree-node-content">
+ NETWORK: {{network.name}} | TYPE: {{network.nodeType}} | ORCH STATUS: {{network.nodeStatus}}
+ <!-- <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="deleteNetwork(aService.instance, network)">
+ <span class="glyphicon glyphicon-remove"></span>
+ </a> -->
+ <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="describeNetwork(aService.instance, network)" style="margin-right: 8px;">
+ <span class="glyphicon glyphicon-info-sign"></span>
+ </a>
+ </div>
+ </li>
+ </ol>
+ </li>
+ </ol>
+ </div>
+ </div>
+</div>
diff --git a/vid/src/main/webapp/app/vid/scripts/view-models/msoCommit.htm b/vid/src/main/webapp/app/vid/scripts/view-models/msoCommit.htm
new file mode 100644
index 000000000..a47b98323
--- /dev/null
+++ b/vid/src/main/webapp/app/vid/scripts/view-models/msoCommit.htm
@@ -0,0 +1,47 @@
+<!--
+ ============LICENSE_START=======================================================
+ VID
+ ================================================================================
+ Copyright (C) 2017 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=========================================================
+ -->
+
+<div ng-controller="msoCommitController" ng-show="isViewVisible">
+
+ <div class="statusLine">
+ <img src="app/vid/images/spinner.gif"
+ ngx-visible="{{isSpinnerVisible}}"> </img> <label>Status:</label><span
+ class="status">{{status}}</span>
+ </div>
+
+ <div class="feedback">
+
+ <div progress-bar control="progressBarControl"
+ value="{{percentProgress}}" increases-only="true"
+ ngx-show="{{isProgressVisible}}"></div>
+
+ <div class="error" ng-show="!isProgressVisible">
+ <img src="app/vid/images/error.png"></img>{{error}}
+ </div>
+
+ </div>
+
+ <pre class="log">{{log}}</pre>
+
+ <div class="buttonRow">
+ <button ngx-enabled="{{isCloseEnabled}}" att-button size="small"
+ ng-click="close();">Close</button>
+ </div>
+</div>
diff --git a/vid/src/main/webapp/app/vid/scripts/view-models/popupWindow.htm b/vid/src/main/webapp/app/vid/scripts/view-models/popupWindow.htm
new file mode 100644
index 000000000..57c40f3f6
--- /dev/null
+++ b/vid/src/main/webapp/app/vid/scripts/view-models/popupWindow.htm
@@ -0,0 +1,8 @@
+<table
+ style="display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-collapse: collapse; margin: 0; padding: 0">
+ <tr>
+ <td align="center" style="vertical-align: top; padding: 10px"><div
+ style="display: inline-block; padding: 5px; background-color: white"
+ ng-transclude></div></td>
+ </tr>
+</table>
diff --git a/vid/src/main/webapp/app/vid/scripts/view-models/sample.html b/vid/src/main/webapp/app/vid/scripts/view-models/sample.html
new file mode 100644
index 000000000..9cfb10e49
--- /dev/null
+++ b/vid/src/main/webapp/app/vid/scripts/view-models/sample.html
@@ -0,0 +1,61 @@
+<!--
+ ============LICENSE_START=======================================================
+ VID
+ ================================================================================
+ Copyright (C) 2017 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=========================================================
+ -->
+
+<div ng-controller="samplePageController">
+
+ <h1 class="heading1" style="margin-top:10px;">Profile Search</h1>
+
+ <table att-table table-data="tableData" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">
+
+ <thead att-table-row type="header">
+ <tr>
+ <th att-table-header sortable="true" key="id">User ID</th>
+ <th att-table-header sortable="true" key="lastName">Last Name</th>
+ <th att-table-header sortable="true" key="firstName">First Name</th>
+ <th att-table-header sortable="true" key="email">Email</th>
+ <th att-table-header sortable="true" key="orgUserId">User ID</th>
+ <th att-table-header sortable="true" key="org_manager_userid">Manager User ID</th>
+ </tr>
+ </thead>
+ <tbody att-table-row type="body" row-repeat="rowData in tableData">
+ <tr>
+ <td att-table-body ng-bind="rowData['id']"></td>
+ <td att-table-body ng-bind="rowData['lastName']"></td>
+ <td att-table-body ng-bind="rowData['firstName']"></td>
+ <td att-table-body ng-bind="rowData['email']"></td>
+ <td att-table-body ng-bind="rowData['orgUserId']"></td>
+ <td att-table-body ng-bind="rowData['managerId']"></td>
+ </tr>
+ </tbody>
+ </table>
+
+ <div class="fn-ebz-container">
+ Rows Per Page:
+ <input class="fn-ebz-text" readonly type="text" ng-model="viewPerPage" size="5" style="width: 47px;">
+ </div>
+ <div class="fn-ebz-container">
+ Current Page:
+ <input class="fn-ebz-text" type="text" ng-model="currentPageNum" size="5" style="width: 47px;">
+ </div>
+ <div class="fn-ebz-container">
+ Total Page(s):
+ <input class="fn-ebz-text" type="text" ng-model="totalPages" size="5" readonly="true" style="width: 47px;">
+ </div>
+</div>
diff --git a/vid/src/main/webapp/app/vid/scripts/view-models/sampleWithIframe.html b/vid/src/main/webapp/app/vid/scripts/view-models/sampleWithIframe.html
new file mode 100644
index 000000000..ea128ece8
--- /dev/null
+++ b/vid/src/main/webapp/app/vid/scripts/view-models/sampleWithIframe.html
@@ -0,0 +1,23 @@
+<!--
+ ============LICENSE_START=======================================================
+ VID
+ ================================================================================
+ Copyright (C) 2017 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=========================================================
+ -->
+
+<div ng-controller="samplePageWithIframeController" style="margin-left: auto;margin-right: auto;height:700px;">
+ <iframe style="margin-top:5px;width:100%;height:100%" frameBorder="0" vspace="0" src="user_profile"></iframe>
+</div>
diff --git a/vid/src/main/webapp/app/vid/scripts/view-models/serviceModels.htm b/vid/src/main/webapp/app/vid/scripts/view-models/serviceModels.htm
new file mode 100644
index 000000000..84f14ab6b
--- /dev/null
+++ b/vid/src/main/webapp/app/vid/scripts/view-models/serviceModels.htm
@@ -0,0 +1,90 @@
+<!--
+ ============LICENSE_START=======================================================
+ VID
+ ================================================================================
+ Copyright (C) 2017 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=========================================================
+ -->
+<link rel="stylesheet" type="text/css" href="app/vid/styles/serviceModels.css" />
+<div popup-window class="popupContents" ngx-show="{{popup.isVisible}}" ng-cloak>
+ <div ng-include="'app/vid/scripts/view-models/creationDialog.htm'"/>
+</div>
+<div>
+
+ <span class="statusLine" ng-class="{true:'smcVisible', false:'smcHidden'}[isSpinnerVisible]">
+ <img src="app/vid/images/spinner.gif"></img>
+ </span>
+ <span class="statusLine" ng-class="{true:'progVisible', false:'progHidden'}[isProgressVisible]">
+ <label>Status:</label><span class="status"><span ng-show="error"><font color='red'><b>Error: </b></font></span>{{status}}</span>
+ </span>
+ <br><br>
+
+ <div class="fn-ebz-container">
+ Filter:
+ <input class="fn-ebz-text" type="text" ng-model="searchString" size="20" style="width: 250px;">
+ </div>
+
+ <h1 class="heading1" style="margin-top:20px;">Browse SDC Service Models</h1>
+ <div style="margin-top:30px" ng-init="getServiceModels();">
+
+ <table att-table table-data="services" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">
+ <thead att-table-row type="header">
+ <tr>
+ <th att-table-header key="action">Action</th>
+ <th att-table-header key="uuid">UUID</th>
+ <th att-table-header key="invariantUUID">Invariant UUID</th>
+ <th att-table-header default-sort="A" key="name">Name</th>
+ <th att-table-header key="version">Version</th>
+ <th att-table-header key="category">Category</th>
+ <th att-table-header key="distributionStatus">Distribution Status</th>
+ <th att-table-header key="lastUpdaterUserId">Last Updated By</th>
+ <th att-table-header key="toscaModelUrl">Tosca Model</th>
+ </tr>
+ </thead>
+ <tbody att-table-row type="body" row-repeat="service in services">
+ <tr>
+ <td att-table-body ><button type=button ng-click="deployService(service)" att-button btn-type="primary" size="small">Deploy</button></td>
+ <td att-table-body ng-bind="service['uuid']"></td>
+ <td att-table-body ng-bind="service['invariantUUID']"></td>
+ <td att-table-body ng-bind="service['name']"></td>
+ <td att-table-body ng-bind="service['version']"></td>
+ <td att-table-body ng-bind="service['category']"></td>
+ <td att-table-body ng-bind="service['distributionStatus']"></td>
+ <td att-table-body ng-bind="service['lastUpdaterUserId']"></td>
+ <td att-table-body ng-bind="service['toscaModelUrl']"></td>
+ </tr>
+ </tbody>
+ </table>
+ <table width='100%'>
+ <tr>
+ <td width='33%' valign='middle'>
+ <span style="cursor: pointer" ng-if="currentPage>1"><button att-button size="small" ng-click="prevPage();">&lt; prev page</button></span>
+ </td>
+ <td width='33%' valign='middle'>
+ Jump to page:
+ <input class="fn-ebz-text" type="text" ng-model="currentPage" size="5" style="width: 47px;">
+ Results per page: <span style="cursor: pointer" ng-click="viewPerPage = 10" ng-style="viewPerPage === 10 && {'textDecoration':'underline','text-color':'black'}">10</span>
+ | <span style="cursor: pointer" ng-click="viewPerPage = 25" ng-style="viewPerPage === 25 && {'textDecoration':'underline','text-color':'black'}">25</span>
+ | <span style="cursor: pointer" ng-click="viewPerPage = 50" ng-style="viewPerPage === 50 && {'textDecoration':'underline','text-color':'black'}">50</span>
+ </td>
+ <td width='34%' align='right' valign='middle'>
+ <span style="cursor: pointer" ng-if="currentPage<totalPage"><button att-button ng-click="nextPage();">next page &gt;</button></span>
+ </td>
+ </tr>
+ </table>
+
+ </div>
+ </div>
+
diff --git a/vid/src/main/webapp/app/vid/scripts/view-models/singlePageSample.html b/vid/src/main/webapp/app/vid/scripts/view-models/singlePageSample.html
new file mode 100644
index 000000000..0e6c6f2a4
--- /dev/null
+++ b/vid/src/main/webapp/app/vid/scripts/view-models/singlePageSample.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<!--
+ ============LICENSE_START=======================================================
+ VID
+ ================================================================================
+ Copyright (C) 2017 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=========================================================
+ -->
+
+<html>
+ <head>
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+ <meta http-equiv="cache-control" content="max-age=0" />
+ <meta http-equiv="cache-control" content="no-cache" />
+ <meta http-equiv="expires" content="0" />
+ <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
+ <meta http-equiv="pragma" content="no-cache" />
+ <!-- CSS -->
+ <link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/fn-ebz.css" >
+ <link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/sandbox/styles/demo.css" >
+ <link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/sandbox/styles/base.css" >
+ <link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/sandbox/styles/btn.css" >
+ <link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/sandbox/styles/dtpk.css" >
+ <link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/sandbox/styles/frms.css" >
+ <link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/sandbox/styles/sldr.css" >
+ <link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/sandbox/styles/style.css" >
+ <link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/sandbox/styles/tbs.css" >
+ <link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/ebz_header/portal_ebz_header.css">
+ <link rel="stylesheet" type="text/css" href="static/fusion/css/jquery-ui.css">
+ <!-- Basic AngularJS -->
+ <script src= "app/fusion/external/ebz/angular_js/angular.js"></script>
+ <script src= "app/fusion/external/ebz/angular_js/angular-sanitize.js"></script>
+ <script src= "app/fusion/external/ebz/angular_js/angular-route.min.js"></script>
+ <script src= "app/fusion/external/ebz/angular_js/app.js"></script>
+ <script src= "app/fusion/external/ebz/angular_js/gestures.js"></script>
+ <script src= "app/fusion/external/ebz/sandbox/att-abs-tpls.js" type="text/javascript"></script>
+ <!-- jQuery -->
+ <script src="static/js/jquery-1.10.2.js"></script>
+ <script src="static/js/jquery.mask.min.js" type="text/javascript"></script>
+ <script src="static/js/jquery-ui.js" type="text/javascript"></script>
+ <!-- AngularJS Gridster -->
+ <script src="static/fusion/js/att_angular_gridster/ui-gridster-tpls.js"></script>
+ <script src="static/fusion/js/att_angular_gridster/angular-gridster.js"></script>
+ <!-- AngularJS Config -->
+ <script src= "app/fusion/external/ebz/angular_js/app.js"></script>
+ <script src= "app/fusion/external/ebz/angular_js/checklist-model.js"></script>
+ <!-- Utility -->
+ <script src="app/fusion/scripts/modalService.js"></script>
+ <!-- Controller js -->
+ <script src="app/fusion/scripts/controllers/rolefunctionpopupController.js"></script>
+ <script src="app/fusion/scripts/controllers/modelpopupController.js"></script>
+ <script src="app/fusionapp/scripts/controller/sampleController.js"></script>
+ <script src="app/fusionapp/scripts/controller/sample-page-controller.js"></script>
+ <script src="app/fusionapp/scripts/controller/sample-page-iframe-controller.js"></script>
+ <!-- Header and Footer -->
+
+ <link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/ebz_header/header.css">
+ <link rel="stylesheet" type="text/css" href="app/fusion/external/ebz/ebz_header/footer.css" >
+ <script src="app/fusion/scripts/directives/footer.js"></script>
+ <script src="app/fusion/external/ebz/js/footer.js"></script>
+ <script src="app/fusion/scripts/directives/header.js"></script>
+ <script src="app/fusion/scripts/directives/leftMenu.js"></script>
+ <!-- Services -->
+ <script src="app/fusion/scripts/services/profileService.js"></script>
+
+ </head>
+ <body class="appBody" ng-app="abs">
+ <div ng-include src="'app/fusion/scripts/view-models/profile-page/popup_modal_rolefunction.html'"></div>
+ <div ng-include src="'app/fusion/scripts/view-models/profile-page/popup_modal.html'"></div>
+ <div q-header></div>
+ <div q-menu class="appLeftMenu"></div>
+ <div ng-view style="min-height: 450px;margin-top:-50px;margin-left:210px;margin-right:10px;"></div>
+ <div q-footer class="appFooter"></div>
+ </body>
+</html>
diff --git a/vid/src/main/webapp/app/vid/scripts/view-models/vidhome.htm b/vid/src/main/webapp/app/vid/scripts/view-models/vidhome.htm
new file mode 100644
index 000000000..41b3b2a77
--- /dev/null
+++ b/vid/src/main/webapp/app/vid/scripts/view-models/vidhome.htm
@@ -0,0 +1,39 @@
+<!--
+ ============LICENSE_START=======================================================
+ VID
+ ================================================================================
+ Copyright (C) 2017 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=========================================================
+ -->
+
+<div>
+ <h1 class="heading1">OpenECOMP</h1>
+ <br>
+ <h1 class="heading1"><u>Welcome to VID</u></h1>
+ <br>
+ The Virtual Infrastructure Deployment (VID) application allows infrastructure service deployment operators
+ to instantiate service instances and their constituent parts for Distributed service models required by the
+ OpenECOMP service operations that manage them, such as Mobility Network Services, etc. The models are defined by OpenECOMP component SDC. The service
+ deployment operator selects the service operations owner and model that they wish to instantiate. After
+ entry of appropriate data, the operator instructs VID to direct another OpenECOMP component, MSO, to instantiate
+ the selected service model. Once the service instance has been instantiated, the service operator can instruct
+ VID to direct MSO to instantiate the service instance's component VNFs, VF Modules, Networks and Volume Groups.
+ The VID user can also search for, and display, existing service instances and direct the instantiation of
+ subsequent instance components.
+ <br><br>
+
+ <h1 class="heading1"><a href="mailto:portal@lists.openecomp.org" target="_top">Contact Us</a></h1>
+ <a href="mailto:portal@lists.openecomp.org" target="_top">Please click here to contact us.</a>
+</div>