Add seed code for sdnr app based on ONF Centennial
[ccsdk/apps.git] / sdnr / wireless-transport / code-Carbon-SR1 / ux / mwtnBrowser / mwtnBrowser-module / src / main / resources / mwtnBrowser / templates / frame.tpl.html
diff --git a/sdnr/wireless-transport/code-Carbon-SR1/ux/mwtnBrowser/mwtnBrowser-module/src/main/resources/mwtnBrowser/templates/frame.tpl.html b/sdnr/wireless-transport/code-Carbon-SR1/ux/mwtnBrowser/mwtnBrowser-module/src/main/resources/mwtnBrowser/templates/frame.tpl.html
new file mode 100644 (file)
index 0000000..6d43dbd
--- /dev/null
@@ -0,0 +1,191 @@
+<ht-header help-link='sdnr/pnfConfig/0.4.0/README.md'></ht-header>
+<mwtn-select-network-element></mwtn-select-network-element>
+
+<div class="owl container" ng-if="networkElements.length !== 0 && networkElement" style="width: 100%;">
+  <div class="row">
+    <uib-accordion close-others="oneAtATime">
+      <div class="col-md-12">
+        <div uib-accordion-group class="panel-primary" is-open="status.ne">
+          <uib-accordion-heading>
+            <i class="fa" ng-class="{'fa-chevron-down': status.ne, 'fa-chevron-right': !status.ne}"></i>
+            <span>{{'MWTN_NETWORKELEMENT' | translate}} '{{onfNetworkElement.getName()}}' </span>
+            <span> (#{{'MWTN_LTPS' | translate}}: {{onfNetworkElement.getLogicalTerminationPoints().length}})</span>
+            <i class="fa fa-spinner fa-pulse" ng-show="spinner.ne"></i>
+          </uib-accordion-heading>
+          <mwtn-json-viewer network-element="networkElement" data="onfNetworkElement.getData()" ne="true" ng-if="status.ne"></mwtn-json-viewer>
+          <br/>
+
+          <uib-accordion close-others="oneAtATime">
+            <div uib-accordion-group class="panel-default" is-open="status.neCurrentProblems" ng-if="neCurrentProblems">
+              <uib-accordion-heading>
+                <i class="fa" ng-class="{'fa-chevron-down': status.neCurrentProblems, 'fa-chevron-right': !status.neCurrentProblems}"></i>
+                <span>{{'MWTN_CURRENT_PROBLEM_LIST' | translate}}</span>
+                <i class="fa fa-spinner fa-pulse" ng-show="spinner.neCurrentProblems"></i>
+              </uib-accordion-heading>
+
+              <mwtn-grid network-element="networkElement" data="neCurrentProblems" ng-if="neCurrentProblems && !spinner.neCurrentProblems"></mwtn-grid>
+            </div>
+
+            <div uib-accordion-group class="panel-default" is-open="status.forwardingDomain" ng-show="forwardingDomain">
+              <uib-accordion-heading>
+                <i class="fa" ng-class="{'fa-chevron-down': status.forwardingDomain, 'fa-chevron-right': !status.forwardingDomain}"></i>
+                <span>{{'MWTN_FORWARDING_DOMAIN' | translate}}</span>
+                <i class="fa fa-spinner fa-pulse" ng-show="spinner.forwardingDomain"></i>
+              </uib-accordion-heading>
+
+              <mwtn-json-viewer network-element="networkElement" data="forwardingDomain" ng-if="status.forwardingDomain"></mwtn-json-viewer>
+            </div>
+
+            <div uib-accordion-group class="panel-default" is-open="status.forwardingConstructs" ng-show="forwardingConstructs">
+              <uib-accordion-heading>
+                <i class="fa" ng-class="{'fa-chevron-down': status.forwardingConstructs, 'fa-chevron-right': !status.forwardingConstructs}"></i>
+                <span>{{'MWTN_FORWARDING_CONSTRUCTS' | translate}}</span>
+                <i class="fa fa-spinner fa-pulse" ng-show="spinner.forwardingConstructs"></i>
+              </uib-accordion-heading>
+
+              <mwtn-grid network-element="networkElement" data="forwardingConstructs" ng-if="forwardingConstructs && !spinner.forwardingConstructs"></mwtn-grid>
+            
+              <!-- create fc -->
+              <div class="row">
+                <div class="col col-md-3">
+                  <label class="owl-dark" for="vlan">{{'MWTN_LTP1' | translate}}</label><br/>
+                  <select class="form-control" ng-model="fcCreation.ltp1">
+                    <option ng-repeat="ltp in forwardingDomain.ltp" value="{{ltp}}">{{ltp}}</option>
+                  </select>
+                </div>
+                <div class="col col-md-3">
+                  <label class="owl-dark" for="vlan">{{'MWTN_LTP2' | translate}}</label><br/>
+                  <select class="form-control" ng-model="fcCreation.ltp2">
+                    <option ng-repeat="ltp in forwardingDomain.ltp" value="{{ltp}}">{{ltp}}</option>
+                  </select>
+                </div>
+                <div class="col col-md-1 form-group">
+                  <label class="owl-dark" for="vlan">{{'MWTN_SERVICE_ID' | translate}}</label><br/>
+                  <input class="form-control" type="number" value="42" id="example-number-input" ng-model="fcCreation.vlan">
+                </div>
+                <div class="col col-md-2">
+                  <label style="color:white;" for="create">create</label><br/>
+                  <button type="button" class="btn btn-warning" ng-click="createForwardingConstruct()">
+                      <i class="fa fa-plus" aria-hidden="true"></i>
+                      <span style="color:white;">{{'MWTN_CREATE' | translate}}</span>
+                  </button>     
+                </div>
+                <div class="col col-md-3">
+                  <span class="owl-dark" ng-if="!fcCreation.error">{{fcCreation.info}}</span>
+                  <span class="error" ng-if="fcCreation.error">{{fcCreation.error}}</span>
+                </div>
+              </div>
+
+              <!-- delete fc -->
+              <div class="row">
+                <div class="col col-md-6 form-group">
+                  <label class="owl-dark" for="vlan">{{'MWTN_FC_UUID' | translate}}</label><br/>
+                  <select class="form-control" ng-model="fcDeletion.ltp">
+                    <option ng-repeat="fc in forwardingConstructs" value="{{fc.uuid}}">{{fc.uuid}}</option>
+                  </select>
+                </div>
+                <div class="col col-md-2 col-md-offset-1" >
+                  <label style="color:white;" for="delete">delete</label><br/>
+                  <button type="button" class="btn btn-danger" ng-click="deleteForwardingConstruct()">
+                      <i class="fa fa-times" aria-hidden="true"></i>
+                      <span style="color:white;">{{'MWTN_DELETE' | translate}}</span>
+                  </button>
+                </div>
+                <div class="col col-md-3">
+                  <span class="owl-dark" ng-if="!fcDeletion.error">{{fcDeletion.info}}</span>
+                  <span class="error" ng-if="fcDeletion.error">{{fcDeletion.error}}</span>
+                </div>
+              </div>
+        
+            </div>
+
+            <div ng-repeat="ltp in onfLtps" ng-show="status.ne" uib-accordion-group class="panel-default" is-open="status['ltp' + separator + ltp.getData().uuid]">
+              <uib-accordion-heading>
+                <i class="fa" ng-class="{'fa-chevron-down': status['ltp' + separator + ltp.getData().uuid], 'fa-chevron-right': !status['ltp' + separator + ltp.getData().uuid]}"></i>
+                <span>{{'MWTN_LTP' | translate}}(</span>
+                <b>{{ltp.getLayerProtocols()[0].getItuLabel().toUpperCase()}}</b>
+                <span>): {{ltp.getName()}} (ID: {{ltp.getId()}})</span>
+              </uib-accordion-heading>
+
+              <mwtn-json-viewer network-element="networkElement" data="ltp.getData()" ng-if="status['ltp' + separator + ltp.getData().uuid]"></mwtn-json-viewer>
+            </div>
+          </uib-accordion>
+        </div>
+
+        <div uib-accordion-group class="panel-default" is-open="status.clock" ng-if="clock">
+          <uib-accordion-heading>
+            <i class="fa" ng-class="{'fa-chevron-down': status.clock, 'fa-chevron-right': !status.clock}"></i>
+            <span>{{'MWTN_CLOCK' | translate}}</span>
+            <i class="fa fa-spinner fa-pulse" ng-show="spinner.clock"></i>
+          </uib-accordion-heading>
+
+          <!-- <mwtn-json-viewer network-element="networkElement" data="clock.getData()" ng-if="clock.getData() && !spinner.clock"></mwtn-json-viewer> -->
+          <mwtn-ptp-clock-viewer network-element="networkElement" data="clock.getData()" ng-if="clock.getData() && !spinner.clock"></mwtn-ptp-clock-viewer>
+        </div>
+
+
+      </div>
+
+
+    </uib-accordion>
+  </div>
+  <div class="row" ng-repeat="orderedPac in orderedPacs" ng-if="pacs[orderedPac]">
+    <uib-accordion close-others="oneAtATime">
+      <div ng-class="{ 'col-md-12': pacs[orderedPac].length === 1, 'col-md-6': pacs[orderedPac].length !== 1 }" style="margin-top: 5px;"
+        ng-repeat="pac in pacs[orderedPac]">
+        <div uib-accordion-group class="panel-primary" is-open="status[ [orderedPac, pac['layer-protocol']].join(separator) ]">
+          <uib-accordion-heading>
+            <i class="fa" ng-class="{'fa-chevron-down': status[ [orderedPac, pac['layer-protocol']].join(separator) ], 'fa-chevron-right': !status[ [orderedPac, pac['layer-protocol']].join(separator) ]}"></i>
+            <span>{{ ['mwtn', orderedPac].join('-').replaceAll('-', '_').toUpperCase() | translate }} '{{pac['layer-protocol']}}'</span>
+          </uib-accordion-heading>
+
+          <div ng-repeat="part in parts" uib-accordion-group class="panel-default" is-open="status[ [orderedPac, pac['layer-protocol'], pac[part].id].join(separator) ]">
+            <uib-accordion-heading>
+              <i class="fa" ng-class="{'fa-chevron-down': status[ [orderedPac, pac['layer-protocol'], pac[part].id].join(separator) ], 'fa-chevron-right': !status[ [orderedPac, pac['layer-protocol'], pac[part].id].join(separator) ]}"></i>
+              <span>{{ ['mwtn', part].join('-').replaceAll('-', '_').toUpperCase() | translate}}</span>
+              <i class="fa fa-spinner fa-pulse" ng-show="spinner[ [orderedPac, pac['layer-protocol'], pac[part].id].join(separator) ]"></i>
+            </uib-accordion-heading>
+
+
+            <!-- current-problem-list -->
+            <mwtn-grid network-element="networkElement" data="pac[part].data['current-problem-list']" ng-if="pac[part].data['current-problem-list'] && !spinner[ [orderedPac, pac['layer-protocol'], pac[part].id].join(separator) ]"></mwtn-grid>
+            <div ng-if="pac[part].data['current-problem-list'].length === 0">Alarm free ;)</div>
+
+            <!-- PM Current -->
+            <mwtn-json-viewer network-element="networkElement" data="pac[part].data['current-performance-data-list'][0]" 
+                              path="[orderedPac, pac['layer-protocol'], pac[part].id].join(separator)"
+                              ng-if="part === 'current-performance' && pac[part].data && !spinner[ [orderedPac, pac['layer-protocol'], pac[part].id].join(separator) ]"></mwtn-json-viewer>
+            <hr ng-if="part === 'current-performance' && pac[part].data && !spinner[ [orderedPac, pac['layer-protocol'], pac[part].id].join(separator) ]">
+            <mwtn-json-viewer network-element="networkElement" data="pac[part].data['current-performance-data-list'][1]" 
+                              path="[orderedPac, pac['layer-protocol'], pac[part].id].join(separator)"
+                              ng-if="part === 'current-performance' && pac[part].data && !spinner[ [orderedPac, pac['layer-protocol'], pac[part].id].join(separator) ]"></mwtn-json-viewer>
+
+            <!-- PM history -->
+            <mwtn-grid network-element="networkElement" data="pac[part].data['historical-performance-data-list']" 
+                       path="[orderedPac, pac['layer-protocol'], pac[part].id].join(separator)" 
+                       ng-if="pac[part].data['historical-performance-data-list'] && !spinner[ [orderedPac, pac['layer-protocol'], pac[part].id].join(separator) ]"></mwtn-grid>
+
+            <!-- else -->
+            <mwtn-json-viewer network-element="networkElement" data="pac[part].data"
+                              path="[orderedPac, pac['layer-protocol'], pac[part].id].join(separator)" 
+                              ng-if="status[ [orderedPac, pac['layer-protocol'], pac[part].id].join(separator)] && 
+                                    pac[part].data && 
+                                    part !== 'current-problems' &&
+                                    part !== 'current-performance' &&
+                                    part !== 'historical-performances' &&
+                                    !spinner[ [orderedPac, pac['layer-protocol'], pac[part].id].join(separator) ]"></mwtn-json-viewer>
+
+          </div>
+        </div>
+      </div>
+      <hr class="white">
+    </uib-accordion>
+  </div>
+
+</div>
+
+<hr />
+<div class="owl">
+       <span class="white">ONAP SDN-R | ONF Wireless for @distversion@ - Build: @buildtime@</span>
+</div>