TEIIDTOOLS-480 Adjustments to layouts and selection

teiid · Sep 5, 2018 · fb77c1a · fb77c1a
1 parent 4f14705
commit fb77c1a
Show file tree

Hide file tree

Showing 15 changed files with 118 additions and 33 deletions.
diff --git a/...p/src/app/dataservices/dataservices-cards/dataservice-card/dataservice-card.component.css b/...p/src/app/dataservices/dataservices-cards/dataservice-card/dataservice-card.component.css
@@ -46,10 +46,6 @@ a.list-pf-title.view-name {
   margin-left: 10px !important;
 }
 
-.views-details {
-  background-color: var(--card-body-background-color);
-}
-
 .list-pf-container {
   -ms-flex-align: start;
   align-items: flex-start;
@@ -75,3 +71,21 @@ a.list-pf-title.view-name {
 #publishing-card-icons .CodeMirror {
   height: 80vh;
 }
+
+.views-details {
+  background-color: transparent;
+}
+.views-details:hover {
+  background-color: transparent;
+}
+
+.views-details .blank-slate-pf {
+  background-color: transparent;
+  min-width: 200px;
+  border: none;
+  padding: 0;
+}
+
+.views-details h1, .h1 {
+  font-size: 14px;
+}
diff --git a/.../src/app/dataservices/dataservices-cards/dataservice-card/dataservice-card.component.html b/.../src/app/dataservices/dataservices-cards/dataservice-card/dataservice-card.component.html
@@ -187,7 +187,7 @@ <h3>Publishing Logs for '{{dataservice.getId()}}'</h3>
             <ng-template #itemTemplate let-item="item">
               <div class="list-pf-main-content">
                 <span class="fa fa-table object-inline-icon"></span>
-                <a class="list-pf-title view-name">{{ item }}</a>
+                <a class="list-pf-title view-name" (click)="onEditView(item)">{{ item }}</a>
               </div>
             </ng-template>
           </pfng-list>

diff --git a/ngapp/src/app/dataservices/dataservices-cards/dataservice-card/dataservice-card.component.ts b/ngapp/src/app/dataservices/dataservices-cards/dataservice-card/dataservice-card.component.ts
@@ -20,12 +20,13 @@ import {
 } from "@angular/core";
 import * as _ from "lodash";
 import { LoggerService } from "@core/logger.service";
-import { Action, ActionConfig, CardAction, CardConfig, ListConfig } from "patternfly-ng";
+import { Action, ActionConfig, CardAction, CardConfig, EmptyStateConfig, ListConfig } from "patternfly-ng";
 import { Observable } from "rxjs/Observable";
 import { Subscription } from "rxjs/Subscription";
 import { Dataservice } from "@dataservices/shared/dataservice.model";
 import { DataserviceService } from "@dataservices/shared/dataservice.service";
 import { Connection } from "@connections/shared/connection.model";
+import { ViewEditorI18n } from "@dataservices/virtualization/view-editor/view-editor-i18n";
 
 @Component({
   encapsulation: ViewEncapsulation.None,
@@ -74,6 +75,7 @@ export class DataserviceCardComponent implements DoCheck, OnInit {
   private isLoading = true;
   private logger: LoggerService;
   private dataserviceService: DataserviceService;
+  private emptyStateConfig: EmptyStateConfig;
 
   public publishLogsEditorConfig = {
     lineNumbers: true,
@@ -216,13 +218,19 @@ export class DataserviceCardComponent implements DoCheck, OnInit {
       topBorder: false
     } as CardConfig;
 
+    this.emptyStateConfig = {
+      title: ViewEditorI18n.noViewsDefined
+    } as EmptyStateConfig;
+
     this.listConfig = {
       dblClick: false,
       multiSelect: false,
       selectItems: false,
       showCheckbox: false,
-      useExpandItems: false
+      useExpandItems: false,
+      emptyStateConfig: this.emptyStateConfig
     } as ListConfig;
+
   }
 
   /**
@@ -233,6 +241,18 @@ export class DataserviceCardComponent implements DoCheck, OnInit {
     this.cardEvent.emit( { eventType: type, dataserviceName: this.dataservice.getId() } );
   }
 
+  /**
+   * An event handler for when edit view is invoked.
+   * @param {string} vName the name of the view in the selected dataservice
+   */
+  public onEditView( vName: string ): void {
+    this.cardEvent.emit( {
+                                 eventType: DataserviceCardComponent.editDataserviceEvent,
+                                 dataserviceName: this.dataservice.getId(),
+                                 viewName: vName
+                               } );
+  }
+
   /**
    * An event handler for when the card is clicked.
    */

diff --git a/ngapp/src/app/dataservices/dataservices-cards/dataservices-cards.component.ts b/ngapp/src/app/dataservices/dataservices-cards/dataservices-cards.component.ts
@@ -19,6 +19,7 @@ import { Component, EventEmitter, Input, Output, ViewEncapsulation } from "@angu
 import { LoggerService } from "@core/logger.service";
 import { DataserviceCardComponent } from "@dataservices/dataservices-cards/dataservice-card/dataservice-card.component";
 import { Dataservice } from "@dataservices/shared/dataservice.model";
+import { NameValue } from "@dataservices/shared/name-value.model";
 
 @Component({
   moduleId: module.id,
@@ -37,7 +38,7 @@ export class DataservicesCardsComponent {
   @Output() public testDataservice: EventEmitter<string> = new EventEmitter<string>();
   @Output() public publishDataservice: EventEmitter<string> = new EventEmitter<string>();
   @Output() public deleteDataservice: EventEmitter<string> = new EventEmitter<string>();
-  @Output() public editDataservice: EventEmitter<string> = new EventEmitter<string>();
+  @Output() public editDataservice: EventEmitter<NameValue> = new EventEmitter<NameValue>();
   @Output() public quickLookDataservice: EventEmitter<string> = new EventEmitter<string>();
   @Output() public downloadDataservice: EventEmitter<string> = new EventEmitter<string>();
   @Output() public odataLookDataservice: EventEmitter<string> = new EventEmitter<string>();
@@ -55,13 +56,16 @@ export class DataservicesCardsComponent {
     return this.selectedDataservices.indexOf( dataservice ) !== -1;
   }
 
-  public onCardEvent( event: { eventType: string, dataserviceName: string } ): void {
+  public onCardEvent( event: { eventType: string, dataserviceName: string, viewName: string } ): void {
     switch ( event.eventType ) {
       case DataserviceCardComponent.deleteDataserviceEvent:
         this.deleteDataservice.emit( event.dataserviceName );
         break;
       case DataserviceCardComponent.editDataserviceEvent:
-        this.editDataservice.emit( event.dataserviceName );
+        const dsName = event.dataserviceName;
+        const viewName = event.viewName;
+        const nameVal = new NameValue(dsName, viewName);
+        this.editDataservice.emit( nameVal );
         break;
       case DataserviceCardComponent.publishDataserviceEvent:
         this.publishDataservice.emit( event.dataserviceName );

diff --git a/ngapp/src/app/dataservices/dataservices-list/dataservices-details.component.ts b/ngapp/src/app/dataservices/dataservices-list/dataservices-details.component.ts
@@ -26,7 +26,7 @@ import { DataservicesConstants } from "../shared/dataservices-constants";
   templateUrl: "dataservices-details.component.html"
 })
 export class DataservicesDetailsComponent implements OnInit {
-  @Input() public item: Dataservice;
+  @Input() public virtualization: Dataservice;
 
   public listConfig: ListConfig;
 
@@ -49,8 +49,8 @@ export class DataservicesDetailsComponent implements OnInit {
    */
   public get properties(): string[][] {
     const props = [
-      [ DataservicesConstants.dataserviceNameLabel, this.item.getId() ],
-      [ DataservicesConstants.descriptionLabel, this.item.getDescription() ]
+      [ DataservicesConstants.dataserviceNameLabel, this.virtualization.getId() ],
+      [ DataservicesConstants.descriptionLabel, this.virtualization.getDescription() ]
     ];
 
     return props;

diff --git a/ngapp/src/app/dataservices/dataservices-list/dataservices-list.component.html b/ngapp/src/app/dataservices/dataservices-list/dataservices-list.component.html
@@ -166,8 +166,10 @@ <h3>Publishing Logs for '{{item.getId()}}'</h3>
             </pfng-action>
           </ng-template>
           <ng-template #expandTemplate let-item="item" let-index="index">
-            <app-dataservices-details class="dataservices-details-properties" [item]="item" *ngIf="item.expandId === undefined"></app-dataservices-details>
-            <app-views-content [item]="item" *ngIf="item.expandId === 'views'"></app-views-content>
+            <app-dataservices-details class="dataservices-details-properties"
+                                      [virtualization]="item"
+                                      *ngIf="item.expandId === undefined"></app-dataservices-details>
+            <app-views-content [virtualization]="item" (editDataservice)="onEditView($event)" *ngIf="item.expandId === 'views'"></app-views-content>
           </ng-template>
         </pfng-list>
       </div>

diff --git a/ngapp/src/app/dataservices/dataservices-list/dataservices-list.component.ts b/ngapp/src/app/dataservices/dataservices-list/dataservices-list.component.ts
@@ -31,6 +31,7 @@ import { Subscription } from "rxjs/Subscription";
 import * as _ from "lodash";
 import { DataserviceService } from "@dataservices/shared/dataservice.service";
 import { Dataservice } from "@dataservices/shared/dataservice.model";
+import { NameValue } from "@dataservices/shared/name-value.model";
 
 @Component({
   encapsulation: ViewEncapsulation.None,
@@ -64,7 +65,7 @@ export class DataservicesListComponent implements OnInit {
   @Output() public publishDataservice: EventEmitter<string> = new EventEmitter<string>();
   @Output() public downloadDataservice: EventEmitter<string> = new EventEmitter<string>();
   @Output() public deleteDataservice: EventEmitter<string> = new EventEmitter<string>();
-  @Output() public editDataservice: EventEmitter<string> = new EventEmitter<string>();
+  @Output() public editDataservice: EventEmitter<NameValue> = new EventEmitter<NameValue>();
   @Output() public quickLookDataservice: EventEmitter<string> = new EventEmitter<string>();
   @Output() public odataLookDataservice: EventEmitter<string> = new EventEmitter<string>();
 
@@ -247,7 +248,12 @@ export class DataservicesListComponent implements OnInit {
   }
 
   public onEditDataservice(dataserviceName: string): void {
-    this.editDataservice.emit(dataserviceName);
+    const nameVal = new NameValue(dataserviceName, null);
+    this.editDataservice.emit(nameVal);
+  }
+
+  public onEditView(dsNameView: NameValue): void {
+    this.editDataservice.emit(dsNameView);
   }
 
   public onPreviewDataservice( dataserviceName: string): void {

diff --git a/ngapp/src/app/dataservices/dataservices-list/views-content.component.html b/ngapp/src/app/dataservices/dataservices-list/views-content.component.html
@@ -5,11 +5,11 @@
         [config]="listConfig"
         [itemTemplate]="itemTemplate"
         [expandTemplate]="expandTemplate"
-        [items]="getViews( item )">
+        [items]="getViews( virtualization )">
         <ng-template #itemTemplate let-item="item">
           <div class="list-pf-main-content">
             <span class="fa fa-table object-inline-icon"></span>
-            <a class="list-pf-title view-name">{{ item }}</a>
+            <a class="list-pf-title view-name" (click)="onEditView(item)">{{ item }}</a>
           </div>
         </ng-template>
         <ng-template #expandTemplate let-item="item" let-index="index">

diff --git a/ngapp/src/app/dataservices/dataservices-list/views-content.component.ts b/ngapp/src/app/dataservices/dataservices-list/views-content.component.ts
@@ -15,10 +15,11 @@
  * limitations under the License.
  */
 
-import { Component, Input, OnInit, ViewEncapsulation } from "@angular/core";
+import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from "@angular/core";
 import { Connection } from "@connections/shared/connection.model";
 import { Dataservice } from "@dataservices/shared/dataservice.model";
 import { ListConfig } from "patternfly-ng";
+import { NameValue } from "@dataservices/shared/name-value.model";
 
 @Component({
   encapsulation: ViewEncapsulation.None,
@@ -27,8 +28,8 @@ import { ListConfig } from "patternfly-ng";
 })
 export class ViewsContentComponent implements OnInit {
 
-  @Input() public item: Dataservice;
-  @Input() public selectedDataservices: Dataservice[];
+  @Input() public virtualization: Dataservice;
+  @Output() public editDataservice: EventEmitter<NameValue> = new EventEmitter<NameValue>();
 
   public listConfig: ListConfig;
 
@@ -83,4 +84,13 @@ export class ViewsContentComponent implements OnInit {
     } as ListConfig;
   }
 
+  /**
+   * An event handler for when edit view is invoked.
+   * @param {string} vName the name of the view in the selected dataservice
+   */
+  public onEditView( vName: string ): void {
+    const nameVal = new NameValue(this.virtualization.getId(), vName);
+    this.editDataservice.emit(nameVal);
+  }
+
 }
diff --git a/ngapp/src/app/dataservices/dataservices.component.ts b/ngapp/src/app/dataservices/dataservices.component.ts
@@ -55,6 +55,7 @@ import { ViewEditorI18n } from "@dataservices/virtualization/view-editor/view-ed
 import { CreateVirtualizationDialogComponent } from "@dataservices/create-virtualization-dialog/create-virtualization-dialog.component";
 import { ViewDefinition } from "@dataservices/shared/view-definition.model";
 import { ViewEditorState } from "@dataservices/shared/view-editor-state.model";
+import { NameValue } from "@dataservices/shared/name-value.model";
 
 @Component({
   moduleId: module.id,
@@ -725,13 +726,22 @@ export class DataservicesComponent extends AbstractPageComponent implements OnIn
   }
 
   /**
-   * Handle Edit of the specified Dataservice
+   * Handle Edit of the specified Dataservice and View
    * @param {string} svcName
    */
-  public onEdit(svcName: string): void {
-    const selectedService =  this.filteredDataservices.find((x) => x.getId() === svcName);
+  public onEdit(svcNameView: NameValue): void {
+    const virtName = svcNameView.getName();
+    const selectedService =  this.filteredDataservices.find((x) => x.getId() === virtName);
     this.selectionService.setSelectedVirtualization(selectedService);
 
+    const viewName = svcNameView.getValue();
+    let viewDefn: ViewDefinition = null;
+    if (viewName && viewName !== null) {
+      viewDefn = new ViewDefinition();
+      viewDefn.setName(viewName);
+    }
+    this.selectionService.setSelectedViewDefinition(selectedService, viewDefn);
+
     this.closeLookPanels();
 
     const link: string[] = [ DataservicesConstants.viewPath ];

diff --git a/ngapp/src/app/dataservices/shared/name-value.model.ts b/ngapp/src/app/dataservices/shared/name-value.model.ts
@@ -28,4 +28,12 @@ export class NameValue {
     this.value = value;
   }
 
+  public getName(): string {
+    return this.name;
+  }
+
+  public getValue(): string {
+    return this.value;
+  }
+
 }
diff --git a/...ataservices/virtualization/view-editor/view-editor-header/view-editor-header.component.ts b/...ataservices/virtualization/view-editor/view-editor-header/view-editor-header.component.ts
@@ -130,7 +130,7 @@ export class ViewEditorHeaderComponent implements OnInit, OnDestroy {
     } as NgxDataTableConfig;
 
     this.emptyStateConfig = {
-      title: ViewEditorI18n.noViewsFound
+      title: ViewEditorI18n.noViewsDefined
     } as EmptyStateConfig;
 
     this.tableConfig = {
@@ -151,6 +151,8 @@ export class ViewEditorHeaderComponent implements OnInit, OnDestroy {
       this.tableRows = [];
     }
 
+    const selectedView = this.selectionService.getSelectedViewDefinition();
+
     const vdbName = this.selectedVirtualization.getServiceVdbName();
     const editorStatesPattern = vdbName.toLowerCase() + "*";
 
@@ -171,7 +173,13 @@ export class ViewEditorHeaderComponent implements OnInit, OnDestroy {
             if (left.getName() > right.getName()) return 1;
             return 0;
           });
-          const initialView = (self.tableRows && self.tableRows.length > 0) ? self.tableRows[0] : null;
+
+          let initialView: ViewDefinition = null;
+          if (!selectedView || selectedView === null) {
+            initialView = (self.tableRows && self.tableRows.length > 0) ? self.tableRows[0] : null;
+          } else {
+            initialView =  self.tableRows.find((x) => x.getName() === selectedView.getName());
+          }
           self.selectView(initialView);
           self.viewsLoadingState = LoadingState.LOADED_VALID;
         },

diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/view-editor-i18n.ts b/ngapp/src/app/dataservices/virtualization/view-editor/view-editor-i18n.ts
@@ -113,7 +113,7 @@ export class ViewEditorI18n {
   // view editor header
   public static readonly viewDescriptionLabel = "Selected View Description";
   public static readonly viewDescriptionPlaceholder = "Enter a view description";
-  public static readonly noViewsFound = "No views found";
+  public static readonly noViewsDefined = "No views defined";
 
   // view preview
   public static readonly previewDataUnavailable = "Preview data unavailable";

diff --git a/ngapp/src/app/dataservices/virtualization/view-editor/view-editor.service.ts b/ngapp/src/app/dataservices/virtualization/view-editor/view-editor.service.ts
@@ -430,14 +430,17 @@ export class ViewEditorService {
 
     const dataserviceName = this._selectionService.getSelectedVirtualization().getId();
 
+    const self = this;
     this._dataserviceService.saveViewEditorStateRefreshViews( editorState, dataserviceName ).subscribe( () => {
+        // reset original view to saved state
+        self._originalView = ViewDefinition.create(this._editorView.toJSON());
         // fire save editor state succeeded event
-        this.fire( ViewEditorEvent.create( ViewEditorPart.EDITOR,
+        self.fire( ViewEditorEvent.create( ViewEditorPart.EDITOR,
                                            ViewEditorEventType.EDITOR_VIEW_SAVE_PROGRESS_CHANGED,
                                            [ ViewEditorProgressChangeId.COMPLETED_SUCCESS ] ) );
       }, () => {
         // fire save editor state failed event
-        this.fire( ViewEditorEvent.create( ViewEditorPart.EDITOR,
+        self.fire( ViewEditorEvent.create( ViewEditorPart.EDITOR,
                                            ViewEditorEventType.EDITOR_VIEW_SAVE_PROGRESS_CHANGED,
                                            [ ViewEditorProgressChangeId.COMPLETED_FAILED ] ) );
       }
@@ -499,7 +502,7 @@ export class ViewEditorService {
     // Clear preview results
     this.setPreviewResults(null, null, ViewEditorPart.EDITOR);
 
-    var querySql = "";
+    let querySql = "";
     if ( sourcePath != null && !sourcePath.startsWith(AddCompositionCommand.id) ) {
       // Fetch new results for source table
       querySql = this._editorView.getPreviewSql(sourcePath);

diff --git a/ngapp/src/styles.css b/ngapp/src/styles.css
@@ -152,7 +152,7 @@
 
 .object-card-selected .card-pf .card-pf-body,
 .object-card .card-pf .card-pf-body {
-  margin: 20px;
+  margin: 0;
   padding: 0;
 }
 
@@ -170,7 +170,7 @@
 }
 
 .object-card-body {
-  margin: 0 -20px;
+  margin: 0;
   max-height: 200px;
   overflow-y: auto;
 }