finished log view

src/app/appmarket/appinstance/app-log-access/app-log-access.component.css

@@ -0,0 +1,15 @@
+.terminal {
+    height: 60vh;
+    overflow-y: scroll;
+    padding: 10px;
+    background: black;
+    color: white;
+}
+
+.log {
+    white-space: pre-wrap;
+}
+
+.button-height {
+    height: 70%;
+}

src/app/appmarket/appinstance/app-log-access/app-log-access.component.html

@@ -1,26 +1,30 @@
-<h2>Application instance logs</h2>
 <div *ngIf="pods">
-    <div *ngIf="!hasMultiplePods">
-        <h3>Logs</h3>
-    </div>
-    <div *ngIf="hasMultiplePods()">
+    <h2 class="mb-5">{{ 'APP_INSTANCE.LOG_ACCESS.HEADER' | translate}}</h2>
+    <hr>
+    <div class="grid mt-2 mb-2">
         <div>
-            <h3>Pod selector</h3>
+            <p class="font-bold pl-2">{{ 'APP_INSTANCE.LOG_ACCESS.POD' | translate}}</p>
             <p-dropdown [options]="podInfos" [(ngModel)]="selectedPodInfo" (onChange)="selectPod($event)"
-                        placeholder="Choose a pod">
+                        placeholder="{{ 'APP_INSTANCE.LOG_ACCESS.DROPDOWN_PLACEHOLDER' | translate}}" class="col-2 bottom">
                 <ng-template let-option pTemplate="items">
                     {{ option.displayName }}
                 </ng-template>
                 <ng-template let-selected pTemplate="selectedItem">
                     {{ selected.displayName }}
                 </ng-template>
             </p-dropdown>
-            <div *ngIf="selectedPodLogs">
-                <div *ngFor="let line of selectedPodLogs.lines">
-                    <p>{{ line }}</p>
-                </div>
-                <a (click)="getLogs(selectedPodInfo.name, selectedPodLogs.lines)">Download log in a text file</a>
-            </div>
         </div>
+        <div class="flex-grow-1"></div>
+        <button type="button" class="btn btn-primary mr-3 align-self-end button-height"
+                (click)="refreshLogs(selectedPodInfo)" [disabled]="!selectedPodInfo">
+            {{ 'APP_INSTANCE.LOG_ACCESS.REFRESH' | translate}}
+        </button>
+        <button type="button" class="btn btn-primary align-self-end button-height"
+                (click)="downloadLogs(selectedPodInfo.name, selectedPodLogs.lines)" [disabled]="!selectedPodInfo">
+            {{ 'APP_INSTANCE.LOG_ACCESS.DOWNLOAD' | translate}}
+        </button>
+    </div>
+    <div *ngIf="selectedPodLogs" class="terminal mt-5">
+        <div *ngFor="let log of selectedPodLogs.lines" class="log">{{ log }}</div>
     </div>
 </div>

src/app/appmarket/appinstance/app-log-access/app-log-access.component.ts

@@ -2,6 +2,7 @@ import {Component, Input, OnInit} from '@angular/core';
 import {PodLogs} from '../../../model/pod-logs';
 import {AppLogsService} from '../../../service/app-logs.service';
 import {PodInfo} from '../../../model/podinfo';
+import {ActivatedRoute} from '@angular/router';
 
 @Component({
     selector: 'app-log-access',
@@ -18,26 +19,39 @@ export class AppLogAccessComponent implements OnInit {
 
     public blobUrl;
 
-    constructor(private logService: AppLogsService) {
-    }
+    constructor(private logService: AppLogsService,
+                private route: ActivatedRoute) {}
 
     ngOnInit(): void {
-        this.logService.getPodNames(this.appInstanceId).subscribe(
-            podNames => {
-                this.pods = new Map<PodInfo, PodLogs>();
-                this.podInfos = podNames;
-                podNames.forEach(pod => {
-                    this.logService.getLogsFromPod(this.appInstanceId, pod.name).subscribe(
-                        podLogs => {
-                            this.pods.set(pod, podLogs);
-                        }
-                    )
-                })
-            }
+        this.retrieveLogs();
+    }
+
+    private retrieveLogs(): void {
+        this.route.params.subscribe(params => {
+            this.appInstanceId = params['id'];
+            this.logService.getPodNames(this.appInstanceId).subscribe(
+                podNames => {
+                    this.pods = new Map<PodInfo, PodLogs>();
+                    this.podInfos = podNames;
+                    podNames.forEach(pod => {
+                        this.logService.getLogsFromPod(this.appInstanceId, pod.name).subscribe(
+                            podLogs => {
+                                this.pods.set(pod, podLogs);
+                            }
+                        )
+                    })
+                }
+            )
+        })
+    }
+
+    refreshLogs(pod: PodInfo): void {
+        this.logService.getLogsFromPod(this.appInstanceId, pod.name).subscribe(
+            podLogs => this.selectedPodLogs = podLogs
         )
     }
 
-    getLogs(podName: string, lines: string[]): void {
+    downloadLogs(podName: string, lines: string[]): void {
         const content = lines.join('\n');
         const blob = new Blob([content], {type: 'text/plain'})
         this.blobUrl = window.URL.createObjectURL(blob);
@@ -51,10 +65,6 @@ export class AppLogAccessComponent implements OnInit {
         a.remove();
     }
 
-    hasMultiplePods(): boolean {
-        return this.pods.size > 1;
-    }
-
     selectPod(event: any): void {
         this.selectedPodLogs = this.pods.get(event.value);
     }

src/app/appmarket/appinstance/appinstance.routes.ts

@@ -1,9 +1,11 @@
 import {Route} from '@angular/router';
 import {AppInstanceComponent, AppInstanceListComponent} from './index';
 import {AppInstanceShellViewComponent} from './appinstance-shell-view/appinstance-shell-view.component';
+import {AppLogAccessComponent} from './app-log-access/app-log-access.component';
 
 export const AppInstanceRoutes: Route[] = [
     {path: 'instances', component: AppInstanceListComponent},
     {path: 'instances/:id', component: AppInstanceComponent},
     {path: 'instances/:id/shell/:podname', component: AppInstanceShellViewComponent},
+    {path: 'instances/:id/logs', component: AppLogAccessComponent},
 ];

src/app/appmarket/appinstance/appinstance/appinstance.component.html

@@ -149,6 +149,11 @@ <h3><em style="color: #337ab7;">{{ translateState(appInstanceStatus?.state) }}</
                                     {{'APP_INSTANCE.DISABLE_AUTO_UPGRADES_BUTTON' | translate}}
                                 </a>
                             </li>
+                            <li>
+                                <a role="button" [routerLink]="router.url + '/logs'">
+                                    {{'APP_INSTANCE.VIEW_LOGS' | translate}}
+                                </a>
+                            </li>
                             <li *roles="['ROLE_DOMAIN_ADMIN', 'ROLE_SYSTEM_ADMIN']" style="background-color: #ff0000;">
                                 <a role="button" (click)="this.undeployModal.show()" style="color: #ffffff;">
                                     {{'APP_INSTANCE.UNDEPLOY_BUTTON' | translate}}
@@ -318,8 +323,6 @@ <h3>{{'APP_INSTANCE.DEPLOYMENT_HISTORY.HEADER' | translate}}</h3>
                              screenReaderPaginationLabel="{{ 'PAGINATION.SCREEN_READER.PAGINATION' | translate }}"
                              screenReaderPageLabel="{{ 'PAGINATION.SCREEN_READER.PAGE' | translate }}"
                              screenReaderCurrentLabel="{{ 'PAGINATION.SCREEN_READER.CURRENT' | translate }}"></pagination-controls>
-
-        <app-log-access [appInstanceId]="appInstanceId"></app-log-access>
     </div>
 
     <!-- apply config modal -->