| <!-- |
| Licensed to the Apache Software Foundation (ASF) under one or more |
| contributor license agreements. See the NOTICE file distributed with |
| this work for additional information regarding copyright ownership. |
| The ASF licenses this file to You 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. |
| --> |
| <hr/> |
| <div> |
| <h4 (click)="toggleBoolean('showTopologies')"><span [class]="'clickable inline-glyph glyhpicon glyphicon-' + (this['showTopologies'] ? 'minus' : 'plus')"></span> Topologies</h4> |
| </div> |
| <div *ngIf="this['showTopologies']"> |
| <ng-container *ngFor="let topology of topologies"> |
| <div> |
| <span [class]="'clickable inline-glyph |
| glyhpicon glyphicon-' + (this['showTopology_' + topology.topology] ? 'minus' : 'plus')" |
| (click)="toggleBoolean('showTopology_' + topology.topology)"></span> |
| <span (click)="toggleBoolean('showTopology_' + topology.topology)"><strong>{{topology.topology}}</strong></span> |
| <span class="inline-glyph glyphicon glyphicon-pushpin btn btn-xs" *ngIf="topology.pinned" |
| title="You may unpin this topology in gateway-site.xml by removing it from the list declared in 'knox.homepage.pinned.topologies'" |
| data-toggle="tooltip"></span> |
| <span class="inline-glyph glyphicon glyphicon-cog btn btn-xs" *ngIf="!topology.pinned" |
| title="You may pin this topology in gateway-site.xml using the 'knox.homepage.pinned.topologies' property" |
| data-toggle="tooltip"></span> |
| </div> |
| |
| <div class="table-responsive" *ngIf="this['showTopology_' + topology.topology]"> |
| |
| <!-- UI services --> |
| <mat-grid-list cols="4" rowHeight="130px"> |
| <mat-grid-tile *ngFor="let service of topology.uiServices.service" [colspan]="1" [rowspan]="1"> |
| <a href="{{service.serviceUrl}}" target="_blank" *ngIf="!this['enableServiceText_' + service.serviceName.toLowerCase()]"> |
| <img src="assets/service-logos/{{service.serviceName.toLowerCase()}}.png" height="50px" (error)="enableServiceText('enableServiceText_' + service.serviceName.toLowerCase())"/> |
| </a> |
| <a href="{{service.serviceUrl}}" target="_blank" *ngIf="this['enableServiceText_' + service.serviceName.toLowerCase()]"> |
| {{service.shortDesc}} |
| </a> |
| <mat-grid-tile-footer class="tile-shortDesc"> |
| <h3>{{service.shortDesc}} <span class="small" *ngIf="service.version">(v{{service.version}})</span></h3> |
| </mat-grid-tile-footer> |
| <mat-grid-tile-footer class="tile-longDesc" style="height:100px;"> |
| <h3>{{service.description}}</h3> |
| </mat-grid-tile-footer> |
| </mat-grid-tile> |
| </mat-grid-list> |
| |
| <!-- API services --> |
| <table class="table table-hover" [mfData]="topology.apiServices.service" #api="mfDataTable" [mfRowsOnPage]="5"> |
| <colgroup> |
| <col width="30%"> |
| <col width="70%"> |
| </colgroup> |
| <thead> |
| <tr *ngIf="topology.apiServices.service.length == 0"><th colspan="2">No API services found</th></tr> |
| <tr *ngIf="topology.apiServices.service.length > 0"><th colspan="2">API services</th></tr> |
| </thead> |
| <tbody> |
| <tr *ngFor="let service of api.data"> |
| <td> |
| <span class="inline-glyph glyphicon glyphicon-info-sign btn btn-xs" |
| title="{{service.description}}" |
| data-toggle="tooltip"></span> |
| {{service.shortDesc}} <span class="small" *ngIf="service.version">(v{{service.version}})</span> |
| </td> |
| <td> |
| <a href="{{service.serviceUrl}}">{{service.serviceUrl}}</a> |
| </td> |
| </tr> |
| </tbody> |
| <tfoot> |
| <tr> |
| <td colspan="4"> |
| <mfBootstrapPaginator [rowsOnPageSet]="[5,10,15]"></mfBootstrapPaginator> |
| </td> |
| </tr> |
| </tfoot> |
| </table> |
| </div> |
| </ng-container> |
| <hr /> |
| </div> |