From 8e9b9a154345e29e848bf42a0020756976e2ab91 Mon Sep 17 00:00:00 2001 From: phantomjinx Date: Thu, 24 May 2018 14:32:44 +0100 Subject: [PATCH] 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. --- ngapp/package.json | 1 + ngapp/src/app/core/api.service.ts | 10 +- .../odata-control/odata-constants.ts | 5 + .../odata-control/odata-control.component.css | 84 +++++++- .../odata-control.component.html | 64 ++++-- .../odata-control.component.spec.ts | 68 ------- .../odata-control/odata-control.component.ts | 189 ++++++++---------- .../shared/dataservice.service.ts | 18 +- .../sql-control/sql-control.component.css | 8 + ngapp/src/styles.css | 9 +- 10 files changed, 234 insertions(+), 222 deletions(-) delete mode 100644 ngapp/src/app/dataservices/odata-control/odata-control.component.spec.ts diff --git a/ngapp/package.json b/ngapp/package.json index b652d712..570b2790 100644 --- 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 index a5b06f0a..02530c17 100644 --- 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 index 8a95da5f..4ba0196a 100644 --- 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 index 770d6363..7dc2ae51 100644 --- 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,7 +99,19 @@ 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; } @@ -79,6 +119,8 @@ .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 index a870a856..0cc76314 100644 --- 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 @@
+ +
+ + {{i18n.runningOdataMetadataFetch}} +
+
@@ -37,13 +43,13 @@
-
+
-
+
@@ -67,7 +73,7 @@
-
+