Stream list: wording

Resole #706

Author: oodamien

ui/src/app/streams/streams/streams.component.html

@@ -1,7 +1,7 @@
 <div id="streams-list">
 
   <div class="heading">
-    <div class="actions hidden visible-md-block visible-lg-block" *ngIf="!isAppsEmpty()" [appRoles]="['ROLE_CREATE']">
+    <div class="actions hidden visible-md-block visible-lg-block" *ngIf="!isStreamsEmpty()" [appRoles]="['ROLE_CREATE']">
       <a class="btn btn-primary" routerLink="create">Create Stream(s)</a>
     </div>
     <div class="description">
@@ -12,7 +12,7 @@ <h1 class="no-user-selection">Streams</h1>
     </div>
   </div>
 
-  <div id="filters" class="pui-filter" *ngIf="!isAppsEmpty()">
+  <div id="filters" class="pui-filter" *ngIf="!isStreamsEmpty()">
     <form #registerAppsForm="ngForm" name="registerAppsForm" role="form" (ngSubmit)="search()" novalidate>
 
       <div class="pui-filter-center">
@@ -178,20 +178,32 @@ <h1 class="no-user-selection">Streams</h1>
 
   <div *ngIf="streamDefinitions" id="empty">
 
-    <div *ngIf="isAppsEmpty()" class="text-center">
-      <div class="alert alert-warning" style="display:inline-block;margin:0 auto">
-        <strong>No registered apps.</strong>
+    <div *ngIf="isStreamsEmpty()" class="text-center">
+      <div class="alert alert-warning" style="display:inline-block;margin:0 auto" *ngIf="!noApplicationRegister">
+        <strong>No Streams exist, yet.</strong>
         <div [appRoles]="['ROLE_CREATE']">
-          <p>You can register apps by clicking:</p>
+          <p>You can create streams by clicking:</p>
           <a routerLink="create" class="btn btn-primary">
             Create a stream
           </a>
         </div>
       </div>
+      <div class="alert alert-warning" style="display:inline-block;margin:0 auto" *ngIf="noApplicationRegister">
+        <strong>No Streams exist and no registered apps.</strong>
+        <div [appRoles]="['ROLE_CREATE']">
+          <p>You can register apps by clicking:</p>
+          <a routerLink="/apps/register-apps" class="btn btn-primary">
+            Register Application(s)
+          </a>
+          <a routerLink="/apps/bulk-import-apps" class="btn btn-primary">
+            Bulk Import Application(s)
+          </a>
+        </div>
+      </div>
     </div>
 
     <div id="no-result" class="row"
-         *ngIf="!isAppsEmpty() && streamDefinitions.totalPages < 2 && streamDefinitions.items.length == 0">
+         *ngIf="!isStreamsEmpty() && streamDefinitions.totalPages < 2 && streamDefinitions.items.length == 0">
       <div class="col-md-8"></div>
       <div class="col-md-8">
         <div class="alert alert-warning" style="border:0 none;padding: 1.5rem 2rem;">

ui/src/app/streams/streams/streams.component.spec.ts

@@ -35,6 +35,8 @@ import { StreamGraphDefinitionComponent } from '../components/stream-graph-defin
 import { TruncatePipe } from '../../shared/pipes/truncate.pipe';
 import { BusyService } from '../../shared/services/busy.service';
 import { MockModalService } from '../../tests/mocks/modal';
+import { AppsService } from '../../apps/apps.service';
+import { MockAppsService } from '../../tests/mocks/apps';
 
 /**
  * Test {@link StreamsComponent}.
@@ -49,6 +51,7 @@ describe('StreamsComponent', () => {
   const streamsService = new MockStreamsService();
   const authService = new MockAuthService();
   const modalService = new MockModalService();
+  const appsService = new MockAppsService();
 
   beforeEach(async(() => {
     const aboutService = new MocksSharedAboutService();
@@ -85,6 +88,7 @@ describe('StreamsComponent', () => {
       ],
       providers: [
         { provide: SharedAboutService, useValue: aboutService },
+        { provide: AppsService, useValue: appsService },
         { provide: AuthService, useValue: authService },
         { provide: BusyService, useValue: new BusyService() },
         { provide: StreamsService, useValue: streamsService },

ui/src/app/streams/streams/streams.component.ts

@@ -14,8 +14,10 @@ import { SortParams, OrderParams } from '../../shared/components/shared.interfac
 import { IntervalObservable } from 'rxjs/observable/IntervalObservable';
 import { StreamListParams } from '../components/streams.interface';
 import { Subject } from 'rxjs/Subject';
-import { takeUntil } from 'rxjs/operators';
+import { mergeMap, takeUntil } from 'rxjs/operators';
 import { BusyService } from '../../shared/services/busy.service';
+import { AppsService } from '../../apps/apps.service';
+import { AppRegistration } from '../../shared/model/app-registration.model';
 
 @Component({
   selector: 'app-streams',
@@ -82,6 +84,11 @@ export class StreamsComponent implements OnInit, OnDestroy {
     q: ''
   };
 
+  /**
+   * State of application register empty
+   */
+  noApplicationRegister: boolean;
+
   /**
    * Contain a key application of each selected application
    * @type {Array}
@@ -104,12 +111,14 @@ export class StreamsComponent implements OnInit, OnDestroy {
    *
    * @param {StreamsService} streamsService
    * @param {BsModalService} modalService
+   * @param {AppsService} appsService
    * @param {BusyService} busyService
    * @param {ToastyService} toastyService
    * @param {Router} router
    */
   constructor(public streamsService: StreamsService,
               private modalService: BsModalService,
+              private appsService: AppsService,
               private busyService: BusyService,
               private toastyService: ToastyService,
               private router: Router) {
@@ -146,7 +155,8 @@ export class StreamsComponent implements OnInit, OnDestroy {
   refresh() {
     console.log('Loading Stream Definitions...', this.params);
     const busy = this.streamsService
-      .getDefinitions(this.params).map((page: Page<StreamDefinition>) => {
+      .getDefinitions(this.params)
+      .map((page: Page<StreamDefinition>) => {
         this.form.checkboxes = page.items.map((stream) => {
           return this.itemsSelected.indexOf(stream.name) > -1;
         });
@@ -155,14 +165,32 @@ export class StreamsComponent implements OnInit, OnDestroy {
         });
         return page;
       })
+      .pipe(
+        mergeMap(
+          val => this.appsService.getApps({
+            q: '',
+            type: null,
+            page: 0,
+            size: 1,
+            order: 'name',
+            sort: OrderParams.ASC
+          }),
+          (val1, val2) => {
+            return {
+              streams: val1,
+              apps: val2,
+            };
+          })
+      )
       .pipe(takeUntil(this.ngUnsubscribe$))
-      .subscribe((page: Page<StreamDefinition>) => {
-          if (page.items.length === 0 && this.params.page > 0) {
+      .subscribe((value: { streams: Page<StreamDefinition>, apps: Page<AppRegistration> }) => {
+          if (value.streams.items.length === 0 && this.params.page > 0) {
             this.params.page = 0;
             this.refresh();
             return;
           }
-          this.streamDefinitions = page;
+          this.noApplicationRegister = !(value.apps.totalElements > 0);
+          this.streamDefinitions = value.streams;
           this.changeExpand();
           this.changeCheckboxes();
           this.updateContext();
@@ -229,7 +257,7 @@ export class StreamsComponent implements OnInit, OnDestroy {
   /**
    * Determine if there is no application
    */
-  isAppsEmpty(): boolean {
+  isStreamsEmpty(): boolean {
     if (this.streamDefinitions) {
       if (this.streamDefinitions.totalPages < 2) {
         return (this.params.q === '' && this.streamDefinitions.items.length === 0);