Added in panel support - details panels
Change-Id: I2803edd6fe12cb0d97a2d3c45a692ea701786dd2
diff --git a/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.html b/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.html
new file mode 100644
index 0000000..1c4a22f
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.html
@@ -0,0 +1,137 @@
+<!--
+~ Copyright 2014-present Open Networking Foundation
+~
+~ 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.
+-->
+<div id="ov-app" filedrop on-file-drop="appDropped()">
+ <div class="tabular-header">
+ <h2>
+ {{lionFn('title_apps')}}
+ ({{ tableData.length }}
+ {{ lionFn('total') }})
+ </h2>
+ <div class="ctrl-btns">
+ <div class="refresh" (click)="toggleRefresh()">
+ <onos-icon classes="{{ autoRefresh?'active refresh':'refresh' }}"
+ iconId="refresh" iconSize="42" toolTip="{{ autoRefreshTip }}"></onos-icon>
+ </div>
+ <div class="separator"></div>
+
+ <!--<form id="inputFileForm">-->
+ <!--<input id="uploadFile"-->
+ <!--type="file" size="50" accept=".oar,.jar"-->
+ <!--file-model="appFile">-->
+ <!--</form>-->
+
+ <div class="active" trigger-form>
+ <onos-icon classes="{{ 'active upload' }}"
+ iconId="upload" iconSize="42" toolTip="{{ uploadTip }}"></onos-icon>
+ </div>
+ <div (click)="appAction('activate')">
+ <onos-icon classes="{{ ctrlBtnState.installed?'active play':'play' }}"
+ iconId="play" iconSize="42" toolTip="{{ activateTip }}"></onos-icon>
+ </div>
+ <div (click)="appAction('deactivate')">
+ <onos-icon classes="{{ ctrlBtnState.active?'active stop':'stop' }}"
+ iconId="stop" iconSize="42" toolTip="{{ deactivateTip }}"></onos-icon>
+ </div>
+ <div (click)="appAction('uninstall')">
+ <!--[ngClass]="{active: ctrlBtnState.selection}">-->
+ <!--tooltip tt-msg="uninstallTip"-->
+ <onos-icon classes="{{ ctrlBtnState.selection?'active garbage':'garbage' }}"
+ iconId="garbage" iconSize="42" toolTip="{{ uninstallTip }}"></onos-icon>
+ </div>
+ <div (click)="downloadApp()">
+ <onos-icon classes="{{ ctrlBtnState.selection?'active download':'download' }}"
+ iconId="download" iconSize="42" toolTip="{{ downloadTip }}"></onos-icon>
+ </div>
+ </div>
+ <div class="search">
+ <input id="searchinput" [(ngModel)]="tableDataFilter.queryStr" type="search" #search placeholder="Search"/>
+ <!--(keyup)="onSearch(search.value)" (search)="onSearch(search.value)"/>-->
+ <select [(ngModel)]="tableDataFilter.queryBy">
+ <!--(change)="onSearchBy($event)" (change)="search.value = ''">-->
+ <option value="" disabled>Search By</option>
+ <option value="$">All Fields</option>
+ <option value="title">{{lionFn('title')}}</option>
+ <option value="id">{{lionFn('app_id')}}</option>
+ <option value="version">{{lionFn('version')}}</option>
+ <option value="category">{{lionFn('category')}}</option>
+ <option value="origin">{{lionFn('origin')}}</option>
+ </select>
+ </div>
+
+ </div>
+
+ <div class="summary-list" onos-table-resize>
+ <table onos-flash-changes id-prop="id" width="100%">
+ <tr class="table-header">
+ <th colId="state" [ngStyle]="{width: '32px'}" class="table-icon" (click)="onSort('state')">
+ <onos-icon classes="active" [iconId]="sortIcon('state')"></onos-icon>
+ </th>
+ <th colId="icon" [ngStyle]="{width: '32px'}" class="table-icon"></th>
+ <th colId="title" (click)="onSort('title')">{{lionFn('title')}}
+ <onos-icon classes="active" [iconId]="sortIcon('title')"></onos-icon>
+ </th>
+ <th colId="id" (click)="onSort('id')">{{lionFn('app_id')}}
+ <onos-icon classes="active" [iconId]="sortIcon('id')"></onos-icon>
+ </th>
+ <th colId="version" (click)="onSort('version')"> {{lionFn('version')}}
+ <onos-icon classes="active" [iconId]="sortIcon('version')"></onos-icon>
+ </th>
+ <th colId="category" (click)="onSort('category')"> {{lionFn('category')}}
+ <onos-icon classes="active" [iconId]="sortIcon('category')"></onos-icon>
+ </th>
+ <th colId="origin" (click)="onSort('origin')"> {{lionFn('origin')}}
+ <onos-icon classes="active" [iconId]="sortIcon('origin')"></onos-icon>
+ </th>
+ </tr>
+
+ <tr *ngIf="tableData.length === 0" class="no-data">
+ <td colspan="5">
+ {{annots.no_rows_msg}}
+ </td>
+ </tr>
+ <!-- See https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe
+ Angular has dropped the filter and order by pipe that were present in
+ AngularJS - filter and sort the data at source instead -->
+ <tr class="table-body" *ngFor="let app of tableData | filter: tableDataFilter"
+ (click)="selectCallback($event, app)"
+ [ngClass]="{selected: app.id === selId, 'data-change': isChanged(app.id)}">
+ <td class="table-icon">
+ <onos-icon iconId="{{app._iconid_state}}"></onos-icon>
+ </td>
+ <td class="table-icon">
+ <!-- The path below gets the app icon from the old GUI path -->
+ <img src="../../ui/rs/applications/{{app.icon}}/icon"
+ height="24px" width="24px" />
+ </td>
+ <td>{{ app.title }}</td>
+ <td>{{ app.id }}</td>
+ <td>{{ app.version }}</td>
+ <td>{{ app.category }}</td>
+ <td>{{ app.origin }}</td>
+ </tr>
+ </table>
+
+ </div>
+ <!-- There are 2 ways this component can be included
+ 1) Insert it in to the ngFor above and have it created as the row is rendered
+ for the row that has a selId != '' OR
+ 2) Include it here and let selId dictate its state
+ The advantage in 2) is that panel can be animated in and out, as it is not
+ killed every time the selection changes.
+ -->
+ <onos-appsdetails class="floatpanels" id="{{ selId }}"></onos-appsdetails>
+
+</div>