open app on resolved policy
[groupbasedpolicy.git] / groupbasedpolicy-ui / module / src / main / resources / gbp / resolved-policy / epg-sidepanel.tpl.html
index bcbc96a8593c3b69f73452eb966dcf56303f9597..82fa874cc6156e1bf6f9680162b22892b36b02f6 100644 (file)
@@ -7,11 +7,16 @@
                </div>
                <md-divider></md-divider>
                <md-divider></md-divider>
-           <md-subheader class="md-primary">Endpoint-groups ({{sidePanelObject.data.length}})</md-subheader>
+           <md-subheader class="md-primary">Endpoint-groups ({{sidePanelObject.length}})</md-subheader>
            <md-list>
-               <ng-repeat ng-repeat="epg in sidePanelObject.data">
-                       <md-list-item ng-click="openSidePanel('resolved-policy/epg-sidepanel', epg, null)" ng-mouseenter="highlightNode(epg.data.id)" ng-mouseleave="fadeAll()">
-                               {{epg.data.id}}
+               <ng-repeat ng-repeat="epg in sidePanelObject">
+                       <md-list-item class="md-2-line"
+                              ng-click="openSidePanel('resolved-policy/epg-sidepanel', epg, null)"
+                              ng-mouseenter="highlightNode(epg.id)"
+                              ng-mouseleave="fadeAll()">
+                    <div class="md-list-item-text" flex>
+                        <h3>{{epg.id}}</h3>
+                    </div>
                        </md-list-item>
                </ng-repeat>
            </md-list>
@@ -21,7 +26,7 @@
                        <ul class="breadcrumbs">
                                <li class="breadcrumb" ng-click="deselectEpg()" role="button">Endpoint-groups</li>
                                <li class="breadcrumb"><i class="material-icons">keyboard_arrow_right</i></li>
-                               <li class="breadcrumb">{{selectedNode.data.id}}</li>
+                               <li class="breadcrumb">{{sidePanelObject.id}}</li>
                        </ul>
                </div>
                <md-divider></md-divider>
                <md-subheader class="md-primary">Endpoint-group info</md-subheader>
                <div layout="row" class="layout-padding-lr15 layout-row">
                    <span flex="50" class="flex-50"><strong>Endpoint-group ID</strong></span>
-                   <span flex="" class="ng-binding flex">{{sidePanelObject.data.id}}</span>
-               </div>
-               <div layout="row" class="layout-padding-lr15 layout-row layout-padding-b15">
-                   <span flex="50" class="flex-50"><strong>intra-group-policy</strong></span>
-                   <span flex="" class="ng-binding flex">
-                       <i ng-class="sidePanelObject.data['intra-group-policy']" class="fa fa-circle status-circle flex-5" flex="5">
-                               <md-tooltip md-direction="right">
-                                       {{sidePanelObject.data['intra-group-policy']}}
-                               </md-tooltip>
-                       </i>
-                   </span>
+                   <span flex="" class="ng-binding flex">{{sidePanelObject.id}}</span>
                </div>
                <md-divider></md-divider>
-               <div ng-if="sidePanelObject.data['provider-named-selector']">
-                   <md-subheader class="md-primary">Provider-named selectors ({{sidePanelObject.data['provider-named-selector'].length}})</md-subheader>
+               <div ng-if="sidePanelObject['provided-contracts'].length">
+                   <md-subheader class="md-primary">Provided contracts ({{sidePanelObject['provided-contracts'].length}})</md-subheader>
                    <md-list>
-                       <ng-repeat ng-repeat="providerNamedSelector in sidePanelObject.data['provider-named-selector']">
-                               <md-list-item class="expander" ng-click="openSidePanelContract(providerNamedSelector.contract[0])">
-                                       {{providerNamedSelector.name}}
-                                       <md-content class="md-whiteframe-2dp ng-scope layout-margin">
-                                               <div flex>
-                                                       <div layout="row" class="layout-row">
-                                                       <span flex="50" class="flex-50"><strong>Contract ID</strong></span>
-                                                               <span flex class="ng-binding flex">{{providerNamedSelector.contract[0]}}</span>
-                                                       </div>
-                                               </div>
-                                       </md-content>
-                               </md-list-item>
-                       </ng-repeat>
+                <md-list-item class="md-2-line"
+                              ng-click="openSidePanelContract(providedContract);"
+                              ng-repeat="providedContract in sidePanelObject['provided-contracts']">
+                    <div class="md-list-item-text" flex>
+                        <h3>{{providedContract}}</h3>
+                    </div>
+                </md-list-item>
                    </md-list>
            </div>
-               <div ng-if="sidePanelObject.data['consumer-named-selector']">
-                   <md-subheader class="md-primary">Consumer-named selectors ({{sidePanelObject.data['consumer-named-selector'].length}})</md-subheader>
+               <div ng-if="sidePanelObject['consumed-contracts'].length">
+                   <md-subheader class="md-primary">Consumed contracts ({{sidePanelObject['consumed-contracts'].length}})</md-subheader>
                    <md-list>
-                       <ng-repeat ng-repeat="consumerNamedSelector in sidePanelObject.data['consumer-named-selector']">
-                               <md-list-item class="expander" ng-click="openSidePanelContract(consumerNamedSelector.contract[0]);">
-                                       {{consumerNamedSelector.name}}
-                                       <md-content class="md-whiteframe-2dp ng-scope layout-margin">
-                                               <div flex>
-                                                       <div layout="row" class="layout-row">
-                                                       <span flex="50" class="flex-50"><strong>Contract ID</strong></span>
-                                                               <span flex class="ng-binding flex">{{consumerNamedSelector.contract[0]}}</span>
-                                                       </div>
-                                               </div>
-                                       </md-content>
-                               </md-list-item>
-                       </ng-repeat>
+                <md-list-item class="md-2-line"
+                              ng-click="openSidePanelContract(consumedContract);"
+                              ng-repeat="consumedContract in sidePanelObject['consumed-contracts']">
+                    <div class="md-list-item-text" flex>
+                        <h3>{{consumedContract}}</h3>
+                    </div>
+                </md-list-item>
                    </md-list>
            </div>
            <md-divider></md-divider>
            <md-subheader class="md-primary">
                <div layout="row" class="layout-row">
                        <span>Endpoints ({{endpoints.data.length}})</span>
-                       <span class="flex" flex></span>
-                       <span ng-if="endpoints.data.length">
-                               <md-button class="md-button md-primary md-button md-ink-ripple expand-button" type="button" ng-click="expandAll(endpoints.data)" aria-label="Expand all">            
-                           <i class="fa fa-expand ng-scope"></i>
-                               <div class="md-ripple-container"></div>
-                               <md-tooltip md-direction="bottom">
-                                       Expand all
-                               </md-tooltip>
-                       </md-button>
-                       <md-button class="md-button md-primary md-button md-ink-ripple expand-button" type="button" ng-click="collapseAll(endpoints.data)" aria-label="Collapse all">
-                                       <i class="fa fa-compress ng-scope"></i>
-                           <div class="md-ripple-container"></div>
-                               <md-tooltip md-direction="bottom">
-                                       Collapse all
-                               </md-tooltip>
-                       </md-button>
-               </span>
                </div>
            </md-subheader>
            <md-list class="expander">
-               <ng-repeat ng-repeat="endpoint in endpoints.data">
-               <md-button class="md-icon-button" ng-click="rootOpenEndpointDialog('edit', endpoint)">
-                   <md-icon>edit</md-icon>
-               </md-button>
-               <md-button class="md-icon-button" ng-click="rootDeleteEndpointDialog(endpoint)">
-                   <md-icon>delete</md-icon>
-               </md-button>
-                       <md-list-item ng-click="toggleExpanded(endpoint)">
-                               <span>{{endpoint.data['context-id']}}</span>
-                               <md-content ng-show="endpoint.expanded" class="md-whiteframe-2dp ng-scope layout-margin">
-                                       <div flex>
-                                               <div layout="row" class="layout-row">
-                                               <span flex="50" class="flex-50"><strong>Context Type</strong></span>
-                                                       <span flex class="ng-binding flex">{{endpoint.data['context-type']}}</span>
-                                               </div>
-                                               <div layout="row" class="layout-row">
-                                               <span flex="50" class="flex-50"><strong>Address</strong></span>
-                                                       <span flex class="ng-binding flex">{{endpoint.data.address}}</span>
-                                               </div>
-                                               <div layout="row" class="layout-row">
-                                               <span flex="50" class="flex-50"><strong>Address Type</strong></span>
-                                                       <span flex class="ng-binding flex">{{endpoint.data['address-type']}}</span>
-                                               </div>
-                                               <div layout="row" class="layout-row">
-                                               <span flex="50" class="flex-50"><strong>Network Domain ID</strong></span>
-                                                       <span flex class="ng-binding flex">{{endpoint.data['network-containment']['network-domain-id']}}</span>
-                                               </div>
-                                               <div layout="row" class="layout-row">
-                                               <span flex="50" class="flex-50"><strong>Network Domain Type</strong></span>
-                                                       <span flex class="ng-binding flex">{{endpoint.data['network-containment']['network-domain-type']}}</span>
-                                               </div>
-                                               </div>
-                               </md-content>
-                       </md-list-item>
-               </ng-repeat>
+                       <md-list-item class="md-3-line" layout="row" ng-repeat="endpoint in endpoints.data">
+                               <div layout-padding flex="15">
+                                       <h3>{{endpoint.getEndpointContextTypeAcronym()}}</h3>
+                                       <md-tooltip md-direction="right">{{endpoint.data['context-type']}}</md-tooltip>
+                               </div>
+                               <div class="md-list-item-text" flex>
+                                       <h3>{{endpoint.data['context-id']}}</h3>
+                                       <p>Address: {{endpoint.data.address}} </p>
+                                       <p>Network Domain: {{endpoint.data['network-containment']['network-domain-id']}} </p>
+                    <p>SGT: {{endpointSgtList.findSgtsForEndpoint(endpoint)}} </p>
+                               </div>
+                               <div flex="10">
+                                       <md-button class="md-icon-button" ng-click="rootOpenEndpointDialog('edit', endpoint)">
+                                               <md-icon>edit</md-icon>
+                                       </md-button>
+                               </div>
+                               <div flex="10">
+                                       <md-button class="md-icon-button" ng-click="rootDeleteEndpointDialog(endpoint)">
+                                               <md-icon>delete</md-icon>
+                                       </md-button>
+                               </div>
+                       </md-list-item>
            </md-list>
     </div>
-</md-content>
\ No newline at end of file
+</md-content>