fix(ui): overview empty first time opening app

ui/src/app/model/application.model.ts

@@ -26,8 +26,6 @@ export class Application {
     vulnerabilities: Array<Vulnerability>;
     project_key: string; // project unique key
 
-    overview: Overview;
-
     // true if someone has updated the application ( used for warnings )
     externalChange: boolean;
 

ui/src/app/store/applications.state.ts

@@ -3,20 +3,21 @@ import { Action, createSelector, State, StateContext } from '@ngxs/store';
 import { Application, Overview } from 'app/model/application.model';
 import { IntegrationModel, ProjectIntegration } from 'app/model/integration.model';
 import { Key } from 'app/model/keys.model';
-import { Observable } from 'rxjs';
 import { tap } from 'rxjs/operators';
 import * as ActionApplication from './applications.action';
 import * as ActionProject from './project.action';
 
 export class ApplicationsStateModel {
     public applications: { [key: string]: Application };
+    public overviews: { [key: string]: Overview };
     public currentProjectKey: string;
     public loading: boolean;
 }
 
 export function getInitialApplicationsState(): ApplicationsStateModel {
     return {
         applications: {},
+        overviews: {},
         currentProjectKey: null,
         loading: true,
     };
@@ -35,6 +36,13 @@ export class ApplicationsState {
         );
     }
 
+    static selectOverview(projectKey: string, applicationName: string) {
+        return createSelector(
+            [ApplicationsState],
+            (state: ApplicationsStateModel) => state.overviews[projectKey + '/' + applicationName]
+        );
+    }
+
     constructor(private _http: HttpClient) { }
 
     @Action(ActionApplication.AddApplication)
@@ -86,7 +94,6 @@ export class ApplicationsState {
             });
             ctx.dispatch(new ActionProject.AddApplicationInProject(app));
         }));
-
     }
 
     @Action(ActionApplication.LoadApplication)
@@ -184,18 +191,15 @@ export class ApplicationsState {
         const state = ctx.getState();
         const appKey = action.payload.projectKey + '/' + action.payload.applicationName;
 
-        if (state.applications[appKey] && state.applications[appKey].overview) {
-            return Observable.empty();
-        }
-
         return this._http.get<Overview>(
             `/ui/project/${action.payload.projectKey}/application/${action.payload.applicationName}/overview`
         ).pipe(tap((overview) => {
-            let applicationUpdated = Object.assign({}, state.applications[appKey], { overview });
-
             ctx.setState({
                 ...state,
-                applications: Object.assign({}, state.applications, { [appKey]: applicationUpdated }),
+                overviews: {
+                    ...state.overviews,
+                    [appKey]: overview
+                }
             });
         }));
     }

ui/src/app/views/application/show/home/application.home.component.ts

@@ -1,38 +1,48 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { Store } from '@ngxs/store';
-import { FetchApplicationOverview } from 'app/store/applications.action';
+import { Subscription } from 'rxjs';
+import { filter } from 'rxjs/operators';
 import { Application, Overview, Severity } from '../../../../model/application.model';
 import { ChartData, ChartSeries, GraphConfiguration, GraphType } from '../../../../model/graph.model';
 import { Metric } from '../../../../model/metric.model';
 import { Tests } from '../../../../model/pipeline.model';
 import { Project } from '../../../../model/project.model';
+import { AutoUnsubscribe } from '../../../../shared/decorator/autoUnsubscribe';
+import { FetchApplicationOverview } from '../../../../store/applications.action';
+import { ApplicationsState } from '../../../../store/applications.state';
 
 @Component({
     selector: 'app-home',
     templateUrl: './application.home.html',
     styleUrls: ['./application.home.scss']
 })
+@AutoUnsubscribe()
 export class ApplicationHomeComponent implements OnInit {
-
     @Input() project: Project;
     @Input() application: Application;
 
     dashboards: Array<GraphConfiguration>;
-    ready = false;
     overview: Overview;
+    overviewSubscription: Subscription;
 
     constructor(
         private _translate: TranslateService,
         private store: Store
-    ) {
-
-    }
+    ) { }
 
     ngOnInit(): void {
         this.store.dispatch(new FetchApplicationOverview({ projectKey: this.project.key, applicationName: this.application.name }));
+        this.overviewSubscription = this.store.select(ApplicationsState.selectOverview(this.project.key, this.application.name))
+            .pipe(filter((o) => o != null))
+            .subscribe((o: Overview) => {
+                this.overview = o;
+                this.renderGraph();
+            });
+    }
+
+    renderGraph(): void {
         this.dashboards = new Array<GraphConfiguration>();
-        this.overview = this.application.overview;
         if (this.overview && this.overview.graphs.length > 0) {
             this.overview.graphs.forEach(g => {
                 if (g.datas && g.datas.length) {
@@ -50,7 +60,6 @@ export class ApplicationHomeComponent implements OnInit {
                 }
             });
         }
-        this.ready = true;
     }
 
     createUnitTestDashboard(metrics: Array<Metric>): void {
@@ -98,7 +107,7 @@ export class ApplicationHomeComponent implements OnInit {
         cc.showXAxisLabel = true;
         cc.showYAxisLabel = true;
         cc.xAxisLabel = this._translate.instant('graph_vulnerability_x');
-        cc.yAxisLabel = this._translate.instant('graph_vulnerability_y'); ;
+        cc.yAxisLabel = this._translate.instant('graph_vulnerability_y');
         cc.datas = new Array<ChartData>();
 
         Severity.Severities.forEach(s => {

ui/src/app/views/application/show/home/application.home.html

@@ -1,6 +1,6 @@
 <div class="ui grid">
     <div class="ui twelve wide column">
-        <ng-container *ngIf="ready && dashboards && dashboards.length > 0">
+        <ng-container *ngIf="dashboards && dashboards.length > 0">
             <ng-container *ngFor="let d of dashboards">
                 <div class="dashboard">
                     <h4>{{d.title}}</h4>
@@ -9,14 +9,13 @@ <h4>{{d.title}}</h4>
                     </div>
                 </div>
             </ng-container>
-
         </ng-container>
-        <ng-container *ngIf="ready && dashboards && dashboards.length === 0">
+        <ng-container *ngIf="dashboards && dashboards.length === 0">
             <div class="ui info message">
                 {{ 'application_home_no_graph' | translate }}
             </div>
         </ng-container>
-        <ng-container *ngIf="!ready">
+        <ng-container *ngIf="!dashboards">
             <div class="ui text active loader">{{ 'common_loading' | translate }}</div>
         </ng-container>
     </div>
@@ -25,13 +24,20 @@ <h4>{{d.title}}</h4>
             <h4>{{ 'application_home_repo' | translate }}</h4>
             <ng-container *ngIf="application.vcs_server">
                 <ul>
-                    <li><a [href]="overview?.git_url" target="_blank">{{application.vcs_server + ' - ' +
-                            application.repository_fullname}}</a></li>
+                    <li *ngIf="overview">
+                        <a [href]="overview?.git_url" target="_blank">
+                            {{application.vcs_server + ' - ' + application.repository_fullname}}
+                        </a>
+                    </li>
+                    <li *ngIf="!overview">
+                        {{application.vcs_server + ' - ' + application.repository_fullname}}
+                    </li>
                 </ul>
             </ng-container>
             <ng-container *ngIf="!application.vcs_server">
                 <div class="ui info message">
-                    <a [routerLink]="['/project', project.key, 'application', application.name]" [queryParams]="{tab: 'advanced'}">{{
+                    <a [routerLink]="['/project', project.key, 'application', application.name]"
+                        [queryParams]="{tab: 'advanced'}">{{
                         'application_home_no_repo' | translate }}</a>
                 </div>
             </ng-container>
@@ -42,7 +48,8 @@ <h4>{{ 'application_home_integration' | translate }}</h4>
                 </li>
             </ul>
             <div class="ui info message" *ngIf="!application.deployment_strategies">
-                <a [routerLink]="['/project', project.key,'application', application.name]" [queryParams]="{tab: 'advanced'}">{{
+                <a [routerLink]="['/project', project.key,'application', application.name]"
+                    [queryParams]="{tab: 'advanced'}">{{
                     'application_home_no_integration' | translate }}</a>
             </div>
             <h4>{{ 'common_usage' | translate}}</h4>
@@ -53,7 +60,8 @@ <h4>{{ 'common_usage' | translate}}</h4>
                     </li>
                 </ul>
             </ng-container>
-            <ng-container *ngIf="!application.usage || !application.usage.workflows || application.usage.workflows.length === 0">
+            <ng-container
+                *ngIf="!application.usage || !application.usage.workflows || application.usage.workflows.length === 0">
                 <div class="ui info message">
                     {{ 'application_home_no_usage' | translate }}
                 </div>