TEIIDTOOLS-419: Ports the odata query editor from DSB

* package.json
 * Needs lodash because well its lodash!
 * x2js for parsing xml into json

* dataservice-card
* datasevice-list
 * Provides an odata icon to the card if a service is published allowing
   for opening the odata query editor.

* dataservices-compoment
 * Show the odata editor

* .../odata-control/...
 * Component UI for the odata editor

* virt-route
 * Model for a virtualization's routes of the published service, eg. odata

ngapp/package.json

@@ -28,11 +28,13 @@
     "core-js": "^2.5.3",
     "express": "^4.16.2",
     "file-saver": "1.3.3",
+    "lodash": "^4.17.10",
     "ng2-codemirror": "^1.1.3",
     "ngx-bootstrap": "^2.0.2",
     "patternfly": "^3.41.0",
     "patternfly-ng": "^3.1.2",
     "rxjs": "^5.5.6",
+    "x2js": "^3.2.1",
     "zone.js": "^0.8.20"
   },
   "devDependencies": {

ngapp/src/app/core/api.service.ts

@@ -23,6 +23,7 @@ import "rxjs/add/operator/catch";
 import "rxjs/add/operator/map";
 import { Observable } from "rxjs/Observable";
 import { ErrorObservable } from "rxjs/observable/ErrorObservable";
+import * as X2JS from 'x2js';
 
 export abstract class ApiService {
 
@@ -59,6 +60,61 @@ export abstract class ApiService {
     return this.appSettings.getKomodoUserWorkspacePath();
   }
 
+  protected isXML(xml: string): boolean {
+    try {
+      const parser = new X2JS();
+      const xmlDoc = parser.xml2js(xml); //is valid XML
+      return xmlDoc != null;
+    } catch (err) {
+      // was not XML
+      return false;
+    }
+  }
+
+  protected tryXMLParse(xml: string): any {
+    try {
+      const parser = new X2JS();
+      const xmlDoc = parser.xml2js(xml); //is valid XML
+      return xmlDoc;
+    } catch (err) {}
+
+    return null;
+  }
+
+  protected tryNumberParse(jsonString: string): number {
+    try {
+      var n = parseInt(jsonString);
+      if (n && typeof n === "number") {
+        return n;
+      }
+    } catch (e) {}
+
+    return null;
+  }
+
+  /**
+   * Try to parse the given string and if parseable
+   * then return the object
+   */
+  protected tryJsonParse (jsonString: string): any {
+    try {
+      var o = JSON.parse(jsonString);
+
+      // Handle non-exception-throwing cases:
+      // Neither JSON.parse(false) or JSON.parse(1234) throw errors, hence the type-checking,
+      // but... JSON.parse(null) returns null, and typeof null === "object",
+      // so we must check for that, too. Thankfully, null is falsey, so this suffices:
+      if (o && typeof o === "object") {
+        return o;
+      }
+    } catch (e) {}
+
+    return null;
+  }
+
+  /**
+   * @returns true if the item is parseable
+   */
   protected isJSON(item: string): boolean {
     item = typeof item !== "string" ? JSON.stringify(item) : item;
 

ngapp/src/app/dataservices/dataservices-cards/dataservice-card/dataservice-card.component.css

@@ -57,3 +57,13 @@ a.list-pf-title.view-name {
   display: flex;
   padding: 3px;
 }
+
+.odata-card-icon {
+  width: 16px;
+  height: 16px;
+  padding-left: 4px;
+  padding-right: 4px;
+  background-size: 16px 16px;
+  background-repeat: no-repeat;
+  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAALlJREFUeNpi/N/D4MDAwLCfgQLAAmc5TmBgEDPAVHFlAYTWScCUe3UBaH0BkiEgA2TsMRU+PgChsclBAeOod4aUd0CGsQtAbPn5gUTvgIAH0Ona8RD2z48MDDuAXrizgYHBqoGBwbIeU/eTgwwMKx3QvAMzAATY+SHhBDLk4wOIBmxhguISkBfQAZ88hL66AIJxACY4C2QbNucSARCGfAIasiMREhZg/kNw9BEDqJbYQKHjSIkhAAEGAHmtTMAm);
+}

ngapp/src/app/dataservices/dataservices-cards/dataservice-card/dataservice-card.component.html

@@ -78,6 +78,13 @@
             data-placement="right"
             title="Edit">
       </span>
+      <span *ngIf="dataservice.servicePublished"
+            class="pull-right odata-card-icon card-action-icon"
+            (click)="onClick(odataLookEvent)"
+            data-toggle="tooltip"
+            data-placement="right"
+            title="Odata Preview">
+      </span>
 
       <span class="pull-left fa fa-cogs fa-2x card-action-icon"
             style="color:grey;"

ngapp/src/app/dataservices/dataservices-cards/dataservice-card/dataservice-card.component.ts

@@ -38,11 +38,13 @@ export class DataserviceCardComponent implements DoCheck, OnInit {
   public static readonly quickLookDataserviceEvent = "quickLook";
   public static readonly testDataserviceEvent = "test";
   public static readonly downloadDataserviceEvent = "download";
+  public static readonly odataLookDataserviceEvent = "odataLook";
 
   public readonly editEvent = DataserviceCardComponent.editDataserviceEvent;
   public readonly quickLookEvent = DataserviceCardComponent.quickLookDataserviceEvent;
   public readonly testEvent = DataserviceCardComponent.testDataserviceEvent;
   public readonly downloadEvent = DataserviceCardComponent.downloadDataserviceEvent;
+  public readonly odataLookEvent = DataserviceCardComponent.odataLookDataserviceEvent;
 
   @Input() public dataservice: Dataservice;
   @Input() public selectedDataservices: Dataservice[];

ngapp/src/app/dataservices/dataservices-cards/dataservices-cards.component.ts

@@ -40,6 +40,7 @@ export class DataservicesCardsComponent {
   @Output() public editDataservice: EventEmitter<string> = new EventEmitter<string>();
   @Output() public quickLookDataservice: EventEmitter<string> = new EventEmitter<string>();
   @Output() public downloadDataservice: EventEmitter<string> = new EventEmitter<string>();
+  @Output() public odataLookDataservice: EventEmitter<string> = new EventEmitter<string>();
 
   public logger: LoggerService;
 
@@ -77,6 +78,9 @@ export class DataservicesCardsComponent {
       case DataserviceCardComponent.downloadDataserviceEvent:
         this.downloadDataservice.emit ( event.dataserviceName );
         break;
+      case DataserviceCardComponent.odataLookDataserviceEvent:
+        this.odataLookDataservice.emit( event.dataserviceName );
+        break;
       default:
         this.logger.error( "Unhandled event type of '" + event.eventType + "'" );
         break;

ngapp/src/app/dataservices/dataservices-list/dataservices-list.component.css

@@ -40,4 +40,12 @@ a.list-pf-title.view-name {
   margin-left: 10px;
 }
 
-
+.odata-list-icon {
+  width: 16px;
+  height: 16px;
+  padding-left: 8px;
+  padding-right: 8px;
+  background-size: 16px 16px;
+  background-repeat: no-repeat;
+  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAALlJREFUeNpi/N/D4MDAwLCfgQLAAmc5TmBgEDPAVHFlAYTWScCUe3UBaH0BkiEgA2TsMRU+PgChsclBAeOod4aUd0CGsQtAbPn5gUTvgIAH0Ona8RD2z48MDDuAXrizgYHBqoGBwbIeU/eTgwwMKx3QvAMzAATY+SHhBDLk4wOIBmxhguISkBfQAZ88hL66AIJxACY4C2QbNucSARCGfAIasiMREhZg/kNw9BEDqJbYQKHjSIkhAAEGAHmtTMAm);
+}

ngapp/src/app/dataservices/dataservices-list/dataservices-list.component.html

@@ -83,7 +83,8 @@
                                                           activateActionTemplate,
                                                           publishActionTemplate,
                                                           downloadActionTemplate,
-                                                          deleteActionTemplate )"
+                                                          deleteActionTemplate,
+                                                          odataLookActionTemplate )"
                          (onActionSelect)="handleAction($event, item)">
               <ng-template #editActionTemplate let-action="action">
                 <span class="fa fa-edit">&nbsp;</span>{{ action.title }}
@@ -106,6 +107,9 @@
               <ng-template #deleteActionTemplate let-action="action">
                 <span class="fa fa-trash-o">&nbsp;</span>{{ action.title }}
               </ng-template>
+              <ng-template #odataLookActionTemplate let-action="action">
+                <span class="odata-list-icon">&nbsp;</span>
+              </ng-template>
             </pfng-action>
           </ng-template>
           <ng-template #expandTemplate let-item="item" let-index="index">

ngapp/src/app/dataservices/dataservices-list/dataservices-list.component.ts

@@ -43,6 +43,7 @@ export class DataservicesListComponent implements OnInit {
   private static readonly publishActionId = "publish";
   private static readonly downloadActionId = "download";
   private static readonly testActionId = "test";
+  private static readonly odataLookActionId = "odata-test";
 
   public items: Dataservice[];
   public listConfig: ListConfig;
@@ -60,6 +61,7 @@ export class DataservicesListComponent implements OnInit {
   @Output() public deleteDataservice: EventEmitter<string> = new EventEmitter<string>();
   @Output() public editDataservice: EventEmitter<string> = new EventEmitter<string>();
   @Output() public quickLookDataservice: EventEmitter<string> = new EventEmitter<string>();
+  @Output() public odataLookDataservice: EventEmitter<string> = new EventEmitter<string>();
 
   public logger: LoggerService;
 
@@ -82,6 +84,7 @@ export class DataservicesListComponent implements OnInit {
    * @param publishActionTemplate {TemplateRef} the publish action template
    * @param downloadActionTemplate {TemplateRef} the download action template
    * @param deleteActionTemplate {TemplateRef} the delete action template
+   * @param odataLookActionTemplate {TemplateRef} the odata preview action template
    * @returns {ActionConfig} the actions configuration
    */
   public getActionConfig( ds: Dataservice,
@@ -91,9 +94,17 @@ export class DataservicesListComponent implements OnInit {
                           activateActionTemplate: TemplateRef< any >,
                           publishActionTemplate: TemplateRef< any >,
                           downloadActionTemplate: TemplateRef< any >,
-                          deleteActionTemplate: TemplateRef< any > ): ActionConfig {
+                          deleteActionTemplate: TemplateRef< any >,
+                          odataLookActionTemplate: TemplateRef< any > ): ActionConfig {
     const actionConfig = {
       primaryActions: [
+        {
+          visible: ds.servicePublished,
+          id: DataservicesListComponent.odataLookActionId,
+          template: odataLookActionTemplate,
+          title: "Odata Test",
+          tooltip: "Test the published virtualization"
+        },
         {
           disabled: ds.serviceDeploymentLoading,
           id: DataservicesListComponent.editActionId,
@@ -144,7 +155,8 @@ export class DataservicesListComponent implements OnInit {
           template: deleteActionTemplate,
           title: "Delete",
           tooltip: "Delete this data service"
-        } ],
+        }
+       ],
     } as ActionConfig;
 
     return actionConfig;
@@ -219,6 +231,10 @@ export class DataservicesListComponent implements OnInit {
     this.quickLookDataservice.emit(dataserviceName);
   }
 
+  public onOdataLookDataservice( dataserviceName: string): void {
+    this.odataLookDataservice.emit(dataserviceName);
+  }
+
   public handleAction($event: Action, item: any): void {
     switch ( $event.id ) {
       case DataservicesListComponent.activateActionId:
@@ -242,6 +258,9 @@ export class DataservicesListComponent implements OnInit {
       case DataservicesListComponent.testActionId:
         this.onTestDataservice( item.getId() );
         break;
+      case DataservicesListComponent.odataLookActionId:
+        this.onOdataLookDataservice( item.getId() );
+        break;
       default:
         this.logger.error( "Unhandled event type of '" + $event.title + "'" );
         break;

ngapp/src/app/dataservices/dataservices.component.html

@@ -86,14 +86,16 @@ <h1 class="card-pf-title">
                                  (activateDataservice)="onActivate($event)" (testDataservice)="onTest($event)"
                                  (publishDataservice)="onPublish($event)" (deleteDataservice)="onDelete($event)"
                                  (editDataservice)="onEdit($event)" (quickLookDataservice)="onQuickLook($event)"
-                                 (downloadDataservice)="onDownload($event)" (dataserviceSelected)="onSelected($event)"
-                                 (dataserviceDeselected)="onDeselected($event)"></app-dataservices-list>
+                                 (downloadDataservice)="onDownload($event)" (odataLookDataservice)="onOdataLook($event)"
+                                 (dataserviceSelected)="onSelected($event)" (dataserviceDeselected)="onDeselected($event)">
+          </app-dataservices-list>
           <app-dataservices-cards *ngIf="isCardLayout && hasDataservices" [dataservices]="filteredDataservices" [selectedDataservices]="selectedDataservices"
                                   (activateDataservice)="onActivate($event)" (testDataservice)="onTest($event)"
                                   (publishDataservice)="onPublish($event)" (deleteDataservice)="onDelete($event)"
                                   (editDataservice)="onEdit($event)" (quickLookDataservice)="onQuickLook($event)"
-                                  (downloadDataservice)="onDownload($event)" (dataserviceSelected)="onSelected($event)"
-                                  (dataserviceDeselected)="onDeselected($event)"></app-dataservices-cards>
+                                  (downloadDataservice)="onDownload($event)" (odataLookDataservice)="onOdataLook($event)"
+                                  (dataserviceSelected)="onSelected($event)" (dataserviceDeselected)="onDeselected($event)">
+          </app-dataservices-cards>
         </div>
       </div>
       <div class="col-md-12 {{resultsAreaCss}}" *ngIf="showResults">
@@ -108,6 +110,17 @@ <h1 class="card-pf-title">
         <app-sql-control [quicklook]="true" [selectedViews]="selectedViews" [serviceViews]="allServiceViews"
                                             [viewSql]="quickLookSql"></app-sql-control>
       </div>
+      <div class="col-md-12 {{resultsAreaCss}}" *ngIf="showOdataEditor">
+        <hr class="dataservice-results-hr">
+        <div>
+          <div>
+            <span class="quicklook-title">Odata Results for Published Virtualization Service '{{ odataServiceName }}'</span>
+            <span class="pull-right fa fa-fw fa-close dataservice-results-action-icon-close" (click)="setOdataEditorPanelOpenState(false)"></span>
+          </div>
+          <br>
+          <app-odata-control [dataserviceName]="odataServiceName"></app-odata-control>
+        </div>
+      </div>
     </div>
 
   </div>