TEIIDTOOLS-436: Convert the odata results to json and xml

* Adds icons for odata controls panels for the opening/closing the accordion groups * Small changes and fixes to layout * Adds spinner during initial metadata fetch and stop error message displaying prematurely * Uses CodeMirror for odata results * Adds Output Format control to allow choosing between XML and JSON * Uses ViewChild to access the CodeMirror instance, allowing changing of the mode between XML and JSON * DataserviceService * Ensures return of odata results is a string and in turn adds that string as a value to a json object. * Ensure the XML is formatted/beautified before its return * Specialise other references to the .CodeMirror class to ensure they do not conflict with one another.
teiid · May 25, 2018 · 8e9b9a1 · 8e9b9a1
1 parent 1460990
commit 8e9b9a1
Show file tree

Hide file tree

Showing 10 changed files with 234 additions and 222 deletions.
diff --git a/ngapp/package.json b/ngapp/package.json
@@ -34,6 +34,7 @@
     "patternfly": "^3.41.0",
     "patternfly-ng": "3.1.5",
     "rxjs": "^5.5.6",
+    "vkbeautify": "^0.99.3",
     "x2js": "^3.2.1",
     "zone.js": "^0.8.20"
   },

diff --git a/ngapp/src/app/core/api.service.ts b/ngapp/src/app/core/api.service.ts
@@ -60,7 +60,7 @@ export abstract class ApiService {
     return this.appSettings.getKomodoUserWorkspacePath();
   }
 
-  protected isXML(xml: string): boolean {
+  public isXML(xml: string): boolean {
     try {
       const parser = new X2JS();
       const xmlDoc = parser.xml2js(xml); //is valid XML
@@ -71,7 +71,7 @@ export abstract class ApiService {
     }
   }
 
-  protected tryXMLParse(xml: string): any {
+  public tryXMLParse(xml: string): any {
     try {
       const parser = new X2JS();
       const xmlDoc = parser.xml2js(xml); //is valid XML
@@ -81,7 +81,7 @@ export abstract class ApiService {
     return null;
   }
 
-  protected tryNumberParse(jsonString: string): number {
+  public tryNumberParse(jsonString: string): number {
     try {
       var n = parseInt(jsonString);
       if (n && typeof n === "number") {
@@ -96,7 +96,7 @@ export abstract class ApiService {
    * Try to parse the given string and if parseable
    * then return the object
    */
-  protected tryJsonParse (jsonString: string): any {
+  public tryJsonParse (jsonString: string): any {
     try {
       var o = JSON.parse(jsonString);
 
@@ -115,7 +115,7 @@ export abstract class ApiService {
   /**
    * @returns true if the item is parseable
    */
-  protected isJSON(item: string): boolean {
+  public isJSON(item: string): boolean {
     item = typeof item !== "string" ? JSON.stringify(item) : item;
 
     try {

diff --git a/ngapp/src/app/dataservices/odata-control/odata-constants.ts b/ngapp/src/app/dataservices/odata-control/odata-constants.ts
@@ -17,6 +17,8 @@
 
 export class OdataConstants {
 
+  public readonly UrlNotAvailable = 'URL Not Available';
+
   public readonly AscendingChoice = "Asc";
   public readonly columnPlaceholder = "column";
   public readonly Columns = "Columns";
@@ -33,6 +35,7 @@ export class OdataConstants {
   public readonly resultLimitPlaceholder = "Select result limit...";
   public readonly resultsTabular = "Tabular";
   public readonly resultsRaw = "Raw";
+  public readonly runningOdataMetadataFetch = "Fetching OData metadata ...";
   public readonly runningOdataQuery = "Running OData query...";
   public readonly runQueryAction = "Submit";
   public readonly Select = "Select";
@@ -46,6 +49,7 @@ export class OdataConstants {
   public readonly valuePlaceholder = "value";
   public readonly Where = "Where";
   public readonly OrderBy = "Order By";
+  public readonly ResultFormat = "Format";
 
   public readonly noResultsColumnName = "Err: No Data!";
   public readonly noResultsMsg = "No data was returned from the query";
@@ -61,6 +65,7 @@ export class OdataConstants {
   public readonly help_columns = "Select the columns to be included in the results.";
   public readonly help_where = "Create where clauses for filtering the results based on the values in each tuple. Use the + button to add new where clauses (clauses are and-ed together) and remove them with the - buttons.";
   public readonly help_orderBy = "Sort the results by column in ascending or descending order.";
+  public readonly help_format = "Choose the format of the query results.";
   public readonly help_resultsTable = "Use the column headers to sort the results or filter them by entering values. Results are paginated in blocks of 25 and can be scrolled through with the controls at the foot of the table.";
   public readonly help_resultsRaw = "The raw data as returned from the odata teiid service in json format.";
  	public readonly help_sqlSearch = "Use the Teiid dialect of SQL to construct a query that interrogates the data service for data results. Use the record limit to limit the number of results returned. Set the starting record index to fetch a subset of results starting at the given row index.";

diff --git a/ngapp/src/app/dataservices/odata-control/odata-control.component.css b/ngapp/src/app/dataservices/odata-control/odata-control.component.css
@@ -54,6 +54,34 @@
   clear: both;
 }
 
+.odata-controls {
+  max-height: 27em;
+  border-style: solid;
+  border-width: 1px;
+  border-color: rgb(187,187,187);
+  overflow-y: auto;
+}
+
+/*
+ * Add icon for accordion group being open
+ */
+.odata-controls .panel-title .accordion-toggle[aria-expanded="true"]::after {
+  float: right;
+  content: "\f106";
+  color: #424242;
+  font-family: "FontAwesome";
+}
+
+/*
+ * Add icon for accordion group being closed
+ */
+.odata-controls .panel-title .accordion-toggle[aria-expanded="false"]::after {
+  float: right;
+  content: "\f107";
+  color: #424242;
+  font-family: "FontAwesome";
+}
+
 .odata-control-panel-title {
   font-weight: bold;
   display: inline-block;
@@ -71,14 +99,28 @@
   height: 1em;
 }
 
+.odata-exp-select-group-entity {
+    float: left;
+    width: 40%;
+    margin-right: 5em;
+}
+
+.odata-exp-select-group-limit {
+  float: left;
+  width: 40%;
+}
+
 .odata-exp-column-group {
+  float: left;
   margin-bottom: 0;
   padding-left: 0;
 }
 
 .odata-exp-column-group-row {
   margin-top: 0;
   margin-bottom: 0;
+  margin-right: 5em;
+  margin-left: 0.25em;
 }
 
 .odata-exp-select-group,
@@ -90,6 +132,11 @@
   font-weight: bold;
 }
 
+.odata-format-row label {
+  margin-right: 5em;
+  font-weight: bold;
+}
+
 .odata-exp-where-group-row {
   padding-top: 0.25em;
   padding-left: 0.25em !important;
@@ -109,18 +156,32 @@
   padding-right: 1%;
 }
 
-.odata-form-control {
+.odata-form-text-control {
   color: #000000;
   background-color: #FFFFFB;
-  border: 2px outset #FCFFFF;
   font-weight: bold;
   width: 100%;
+  border-top-color: rgb(187, 187, 187);
+  border-top-style: solid;
+  border-top-width: 1px;
+  border-left-color: rgb(187, 187, 187);
+  border-left-style: solid;
+  border-left-width: 1px;
+  border-right-color: rgb(252, 255, 255);
+  border-right-style: outset;
+  border-right-width: 2px;
+  border-bottom-color: rgb(252, 255, 255);
+  border-bottom-style: outset;
+  border-bottom-width: 2px;
+  padding-left: 0.5em;
+  margin-bottom: 0.5em;
 }
 
 .odata-exp-order-by-group-row-label {
   padding-left: 0;
   width: 30%;
   word-wrap: break-word;
+  margin-bottom: 0.5em;
 }
 
 .odata-form-where-add-btn {
@@ -146,17 +207,24 @@
   margin-bottom: 0.5em;
 }
 
-#odata-results-table {
+#odata-results {
   clear: both;
   padding-left: 0;
   padding-right: 0;
   padding-bottom: 2em;
   position: relative;
-}
-
-.odata-results-table-grid {
-  font-weight: lighter;
-}
+  border-color: rgb(187,187,187);
+  border-style: solid;
+  border-width: 1px;
+}
+
+/*
+ * Limit CodeMirror class changes to
+ * the odata-results.
+ */
+/*#odata-results .CodeMirror {
+  height: 25em;
+}*/
 
 #odata-search-progress-spinner {
   font-style: italic;

diff --git a/ngapp/src/app/dataservices/odata-control/odata-control.component.html b/ngapp/src/app/dataservices/odata-control/odata-control.component.html
@@ -1,4 +1,10 @@
 <div class="row">
+  <!-- Show spinner while fetching metadata for controls -->
+	<div id="odata-metadata-progress-spinner" class="col-md-12" [hidden]="!metadataFetchInProgress">
+    <div class="spinner spinner-lg spinner-inline"></div>
+    {{i18n.runningOdataMetadataFetch}}
+	</div>
+
   <div class="col-sm-12 odata-editor" [hidden]="!hasOdataAttributes">
     <div id="odata-endpoint-url" class="row col-sm-8">
       <label class="control-label col-sm-1" for="test-page-url-path">{{i18n.urlPath}}</label>
@@ -37,13 +43,13 @@
         </div>
         <form name="odata-exp-select" role="form">
           <div class="odata-exp-select-group">
-            <div class="col-xs-7">
+            <div class="odata-exp-select-group-entity">
               <select id="selectView" class="form-control" name="entity" [(ngModel)]="entity">
                 <option *ngFor="let e of entities" [value]="e">{{e.name}}</option>
               </select>
             </div>
 
-            <div class="col-xs-5">
+            <div class="odata-exp-select-group-limit">
               <select id="selectLimit" class="form-control" name="limit" [(ngModel)]="limit">
                 <option *ngFor="let lim of limits" [value]="lim">{{lim}}</option>
               </select>
@@ -67,7 +73,7 @@
           </div>
         </div>
         <form name="odata-exp-columns" role="form">
-          <div class="form-group odata-exp-column-group" *ngFor="let column of columns">
+          <div class="odata-exp-column-group" *ngFor="let column of columns">
             <div class="odata-exp-column-group-row checkbox">
               <label>
                 <input type="checkbox" value=""
@@ -83,7 +89,7 @@
       <!-- Where Group -->
       <!-- -->
       <!-- -->
-      <accordion-group [isOpen]="odata.hasWhere">
+      <accordion-group>
         <div accordion-heading>
           <div class="pull-left odata-control-panel-title" >{{i18n.Where}}</div>
           <div class="pull-left odata-control-panel-title-help">
@@ -94,7 +100,7 @@
           </div>
         </div>
         <form name="odata-exp-where" role="form">
-          <div class="form-group odata-exp-where-group" *ngFor="let where of wheres;let i = index">
+          <div class="odata-exp-where-group" *ngFor="let where of wheres;let i = index">
             <div class="col-xs-4 odata-exp-where-group-row">
               <select class="form-control" name="where-column-{{i}}" [(ngModel)]="where.column" (change)="onWhereColumnSelected(where)">
                 <option *ngFor="let column of columns" [ngValue]="column">{{column.name}}</option>
@@ -106,7 +112,7 @@
               </select>
             </div>
             <div class="col-xs-3 odata-exp-where-group-row" [hidden]="where.error">
-              <input type="text" class="odata-form-control" [(ngModel)]="where.value" name="where-value-{{i}}" placeholder="{{i18n.valuePlaceholder}}" />
+              <input type="text" class="odata-form-text-control" [(ngModel)]="where.value" name="where-value-{{i}}" placeholder="{{i18n.valuePlaceholder}}" />
             </div>
 
             <div id="odata-exp-where-group-buttons" class="col-xs-1 odata-exp-where-group-row">
@@ -140,8 +146,8 @@
           </div>
         </div>
         <form name="odata-exp-order-by" role="form">
-          <div class="form-group odata-exp-order-by-group" *ngFor="let column of columns">
-            <div class="odata-exp-order-by-group-row form-group">
+          <div class="odata-exp-order-by-group" *ngFor="let column of columns">
+            <div class="odata-exp-order-by-group-row">
               <div class='odata-exp-order-by-group-row-label radio-inline'>
                 <label>{{column.name}}</label>
               </div>
@@ -161,18 +167,40 @@
           </div>
         </form>
       </accordion-group>
+      <!-- -->
+      <!-- -->
+      <!-- Output Format -->
+      <!-- -->
+      <!-- -->
+      <accordion-group [isOpen]="true">
+        <div accordion-heading>
+          <div class="pull-left odata-control-panel-title">{{i18n.ResultFormat}}</div>
+          <div class="pull-left odata-control-panel-title-help">
+            <label class="help-label">
+	            <span class="fa fa-info-circle" tooltip="{{i18n.help_format}}"
+	                  containerClass="custom-tooltip" container="body"></span>
+	          </label>
+          </div>
+        </div>
+        <form name="odata-exp-format" role="form">
+          <div class="odata-format-row">
+            <label class="radio-inline">
+              <input type="radio" name="odata-format-json" value="JSON" [(ngModel)]="resultsType">
+              JSON
+            </label>
+            <label class="radio-inline">
+              <input type="radio" name="odata-format-xml" value="XML" [(ngModel)]="resultsType">
+              XML
+            </label>
+          </div>
+        </form>
+      </accordion-group>
     </accordion>
   </div>
 
-  <div class="col-sm-8" [hidden]="!hasOdataAttributes || !showResultsTable">
-    <div id="odata-results-table">
-      <pfng-table class="odata-results-table-grid"
-                  [columns]="resultColumns"
-                  [config]="resultTableConfig"
-                  [rows]="resultRows"
-                  (onPageNumberChange)="handlePageNumber($event)"
-                  (onPageSizeChange)="handlePageSize($event)">
-      </pfng-table>
+  <div class="col-sm-8" [hidden]="!hasOdataAttributes || !showResults">
+    <div id="odata-results">
+      <codemirror #odataResultsEditor [(ngModel)]="results" [config]="resultsConfig"></codemirror>
     </div>
   </div>
 
@@ -186,7 +214,7 @@ <h3 [ngClass]="searchMsgClasses">{{searchMsg}}</h3>
     {{i18n.runningOdataQuery}}
 	</div>
 
-	<div id="odata-metadata-fetch-failure" class="col-sm-12" [hidden]="hasOdataAttributes">
+	<div id="odata-metadata-fetch-failure" class="col-sm-12" [hidden]="!metadataFailure">
 	  <h3>{{i18n.metadataFetchFailure}}</h3>
 	</div>
 </div>