From f8fda6ca24b871f82f33ff90cfdb0a2db519920d Mon Sep 17 00:00:00 2001 From: Mark Drilling Date: Wed, 10 Jan 2018 15:41:05 -0600 Subject: [PATCH] adds support for multiple dataservice views --- .../connection-table-selector.component.html | 2 +- .../dataservices/dataservices.component.css | 6 ++ .../dataservices/dataservices.component.html | 13 ++-- .../dataservices/dataservices.component.ts | 37 ++++++++++- .../shared/dataservice.service.ts | 48 ++++++++++++++ .../shared/mock-dataservice.service.ts | 14 ++++ .../sql-control/sql-control.component.css | 38 ++++++++++- .../sql-control/sql-control.component.html | 32 ++++++++-- .../sql-control/sql-control.component.spec.ts | 11 ++++ .../sql-control/sql-control.component.ts | 64 ++++++++++++------- .../test-dataservice.component.html | 3 +- .../test-dataservice.component.ts | 28 +++++++- 12 files changed, 252 insertions(+), 44 deletions(-) diff --git a/ngapp/src/app/dataservices/connection-table-selector/connection-table-selector.component.html b/ngapp/src/app/dataservices/connection-table-selector/connection-table-selector.component.html index ccff95ea..27a584cd 100644 --- a/ngapp/src/app/dataservices/connection-table-selector/connection-table-selector.component.html +++ b/ngapp/src/app/dataservices/connection-table-selector/connection-table-selector.component.html @@ -81,7 +81,7 @@ No tables selected -
+
diff --git a/ngapp/src/app/dataservices/dataservices.component.css b/ngapp/src/app/dataservices/dataservices.component.css index c3b6406a..ef086d0f 100644 --- a/ngapp/src/app/dataservices/dataservices.component.css +++ b/ngapp/src/app/dataservices/dataservices.component.css @@ -95,3 +95,9 @@ a.clear-filters { cursor: pointer; font-size: 1.5em; } + +.quicklook-title { + margin-left: 50px; + font-size: 1.25em; + font-weight: bold; +} diff --git a/ngapp/src/app/dataservices/dataservices.component.html b/ngapp/src/app/dataservices/dataservices.component.html index 0dfc9be0..9454607f 100644 --- a/ngapp/src/app/dataservices/dataservices.component.html +++ b/ngapp/src/app/dataservices/dataservices.component.html @@ -112,12 +112,15 @@

- - - -

Quick Look Results for Dataservice '{{ quickLookServiceName }}'

+
+ + + Quick Look Results for Dataservice '{{ quickLookServiceName }}' + +

- +
diff --git a/ngapp/src/app/dataservices/dataservices.component.ts b/ngapp/src/app/dataservices/dataservices.component.ts index 76976e10..9d0ea5a6 100644 --- a/ngapp/src/app/dataservices/dataservices.component.ts +++ b/ngapp/src/app/dataservices/dataservices.component.ts @@ -25,6 +25,7 @@ import { DataserviceService } from "@dataservices/shared/dataservice.service"; import { DataservicesConstants } from "@dataservices/shared/dataservices-constants"; import { DeploymentState } from "@dataservices/shared/deployment-state.enum"; import { NotifierService } from "@dataservices/shared/notifier.service"; +import { Table } from "@dataservices/shared/table.model"; import { VdbService } from "@dataservices/shared/vdb.service"; import { WizardService } from "@dataservices/shared/wizard.service"; import { SqlControlComponent } from "@dataservices/sql-control/sql-control.component"; @@ -52,6 +53,7 @@ export class DataservicesComponent extends AbstractPageComponent { private resultsAreaCss = "dataservice-summary-bottom-area-no-results"; private resultsShowing = false; private quickLookSvcName: string; + private quickLookQueryText: string; private allServices: Dataservice[] = []; private filteredServices: Dataservice[] = []; @@ -70,6 +72,8 @@ export class DataservicesComponent extends AbstractPageComponent { private dataserviceStateSubscription: Subscription; private notifierService: NotifierService; private wizardService: WizardService; + private selectedSvcViews: Table[] = []; + private allSvcViews: Table[] = []; @ViewChild(ConfirmDeleteComponent) private confirmDeleteDialog: ConfirmDeleteComponent; @ViewChild(SqlControlComponent) private sqlControlComponent: SqlControlComponent; @@ -186,6 +190,20 @@ export class DataservicesComponent extends AbstractPageComponent { return this.selectedServices; } + /** + * Accessor for all available service views + */ + public get allServiceViews( ): Table[] { + return this.allSvcViews; + } + + /** + * Accessor for selected service view + */ + public get selectedViews( ): Table[] { + return this.selectedSvcViews; + } + /** * @returns {string} the quick look service name */ @@ -193,6 +211,13 @@ export class DataservicesComponent extends AbstractPageComponent { return this.quickLookSvcName; } + /** + * @returns {string} the quick look service name + */ + public get quickLookSql(): string { + return this.quickLookQueryText; + } + public onSelected(dataservice: Dataservice): void { // Only allow one item to be selected this.selectedServices.shift(); @@ -232,6 +257,9 @@ export class DataservicesComponent extends AbstractPageComponent { public onTest(svcName: string): void { const selectedService = this.filterDataservices().find((x) => x.getId() === svcName); this.dataserviceService.setSelectedDataservice(selectedService); + this.allSvcViews = this.dataserviceService.getSelectedDataserviceViews(); + this.selectedSvcViews = []; + this.selectedSvcViews.push(this.allServiceViews[0]); this.setQuickLookPanelOpenState(false); @@ -321,11 +349,18 @@ export class DataservicesComponent extends AbstractPageComponent { public onQuickLook(svcName: string): void { const selectedService = this.filterDataservices().find((x) => x.getId() === svcName); this.dataserviceService.setSelectedDataservice(selectedService); + this.allSvcViews = this.dataserviceService.getSelectedDataserviceViews(); + this.selectedSvcViews = []; + this.selectedSvcViews.push(this.allServiceViews[0]); + const viewName = this.selectedSvcViews[0].getName(); + this.quickLookQueryText = "SELECT * FROM " + viewName + ";"; if (!this.resultsShowing) { this.setQuickLookPanelOpenState(true); } this.setQuickLookResults(svcName); + this.sqlControlComponent.queryText = this.quickLookQueryText; + this.sqlControlComponent.submitCurrentQuery(); } public isFiltered(): boolean { @@ -478,8 +513,6 @@ export class DataservicesComponent extends AbstractPageComponent { */ private setQuickLookResults(svcName): void { this.quickLookSvcName = svcName; - this.sqlControlComponent.initQueryText(); - this.sqlControlComponent.submitCurrentQuery(); } } diff --git a/ngapp/src/app/dataservices/shared/dataservice.service.ts b/ngapp/src/app/dataservices/shared/dataservice.service.ts index 35b396f2..ec87dbc9 100644 --- a/ngapp/src/app/dataservices/shared/dataservice.service.ts +++ b/ngapp/src/app/dataservices/shared/dataservice.service.ts @@ -54,6 +54,7 @@ export class DataserviceService extends ApiService { private appSettingsService: AppSettingsService; private vdbService: VdbService; private selectedDataservice: Dataservice; + private dataserviceCurrentView: Table[] = []; private cachedDataserviceStates: Map = new Map(); private updatesSubscription: Subscription; @@ -74,6 +75,12 @@ export class DataserviceService extends ApiService { */ public setSelectedDataservice(service: Dataservice): void { this.selectedDataservice = service; + // When the dataservice is selected, init the selected view + const views: Table[] = this.getSelectedDataserviceViews(); + this.dataserviceCurrentView = []; + if (views && views.length > 0) { + this.dataserviceCurrentView.push(views[0]); + } } /** @@ -84,6 +91,47 @@ export class DataserviceService extends ApiService { return this.selectedDataservice; } + /** + * Get the current Dataservice selection's views. The table object is used for the view, + * with the Table name set to the full "modelName"."viewName" of the view. + * @returns {Table[]} the selected Dataservice views + */ + public getSelectedDataserviceViews( ): Table[] { + if (!this.selectedDataservice || this.selectedDataservice === null) { + return []; + } + + const modelName = this.selectedDataservice.getServiceViewModel(); + const serviceView = this.selectedDataservice.getServiceViewName(); + + // TODO: we will need to get multiple views when supported + const view1: Table = new Table(); + view1.setName(modelName + "." + serviceView); + + const allViews: Table[] = []; + allViews.push(view1); + + return allViews; + } + + /** + * Get the current Dataservice current view. The table object is used for the view, + * with the Table name set to the full "modelName"."viewName" of the view. + * @returns {Table[]} the Dataservice current view + */ + public getSelectedDataserviceCurrentView( ): Table[] { + return this.dataserviceCurrentView; + } + + /** + * Set the current Dataservice current view. The table object is used for the view, + * with the Table name set to the full "modelName"."viewName" of the view. + * @param {Table[]} view the current view + */ + public setSelectedDataserviceCurrentView( view: Table[] ): void { + this.dataserviceCurrentView = view; + } + /** * Validates the specified data service name. If the name contains valid characters and the name is unique, the * service returns 'null'. Otherwise, a 'string' containing an error message is returned. diff --git a/ngapp/src/app/dataservices/shared/mock-dataservice.service.ts b/ngapp/src/app/dataservices/shared/mock-dataservice.service.ts index 431e1d86..80dd4d9b 100644 --- a/ngapp/src/app/dataservices/shared/mock-dataservice.service.ts +++ b/ngapp/src/app/dataservices/shared/mock-dataservice.service.ts @@ -23,6 +23,7 @@ import { Dataservice } from "@dataservices/shared/dataservice.model"; import { DataserviceService } from "@dataservices/shared/dataservice.service"; import { NewDataservice } from "@dataservices/shared/new-dataservice.model"; import { NotifierService } from "@dataservices/shared/notifier.service"; +import { Table } from "@dataservices/shared/table.model"; import { VdbService } from "@dataservices/shared/vdb.service"; import "rxjs/add/observable/of"; import "rxjs/add/observable/throw"; @@ -90,6 +91,19 @@ export class MockDataserviceService extends DataserviceService { return this.serv1; } + /** + * Get the views for the selected Dataservice + * @returns {Table[]} the views + */ + public getSelectedDataserviceViews(): Table[] { + const table: Table = new Table(); + table.setName("views.View1"); + const tables: Table[] = []; + tables.push(table); + + return tables; + } + /** * Updates the current Dataservice states - triggers update to be broadcast to interested components */ diff --git a/ngapp/src/app/dataservices/sql-control/sql-control.component.css b/ngapp/src/app/dataservices/sql-control/sql-control.component.css index ccdce30c..aea3039b 100644 --- a/ngapp/src/app/dataservices/sql-control/sql-control.component.css +++ b/ngapp/src/app/dataservices/sql-control/sql-control.component.css @@ -1,6 +1,23 @@ +.view-table-full-div { + padding-left: 0; + padding-right: 10px; + min-height: 240px; + max-height: 240px; + border: 1px inset grey; + overflow-y: auto; +} + +.view-table-quicklook-div { + padding-left: 0; + padding-right: 10px; + min-height: 120px; + max-height: 120px; + border: 1px inset grey; + overflow-y: auto; +} + .sql-control-control-title { - margin: 0.5em; - float: left; + margin: 5px 0 0; color: grey; font-weight: bold; } @@ -10,11 +27,14 @@ } .sql-control-editor { - clear: both; border: 1px inset grey; + margin-left: 15px; + padding-left: 0; } .sql-results-panel { + padding-left: 0; + padding-right: 0; clear: both; border: 1px inset grey; } @@ -30,3 +50,15 @@ .row-number-column { text-align: center; } + +.quicklook-sql-title { + font-size: 1.25em; + font-weight: bold; +} + +.quicklook-sql { + margin-left: 15px; + font-size: 1.15em; + font-weight: bold; + font-style: italic; +} diff --git a/ngapp/src/app/dataservices/sql-control/sql-control.component.html b/ngapp/src/app/dataservices/sql-control/sql-control.component.html index 5876a8fb..5e65d6e2 100644 --- a/ngapp/src/app/dataservices/sql-control/sql-control.component.html +++ b/ngapp/src/app/dataservices/sql-control/sql-control.component.html @@ -1,8 +1,27 @@
-
-
Query Editor
- -
+
+
+ + + + +
+
+
+ SQL:{{ queryText }} +
@@ -31,7 +53,7 @@
- There was an error running the Query! + Error running Query for '{{ viewName }}'
diff --git a/ngapp/src/app/dataservices/sql-control/sql-control.component.spec.ts b/ngapp/src/app/dataservices/sql-control/sql-control.component.spec.ts index e7d74c3c..7a578d9b 100644 --- a/ngapp/src/app/dataservices/sql-control/sql-control.component.spec.ts +++ b/ngapp/src/app/dataservices/sql-control/sql-control.component.spec.ts @@ -8,6 +8,7 @@ import { DataserviceService } from "@dataservices/shared/dataservice.service"; import { MockDataserviceService } from "@dataservices/shared/mock-dataservice.service"; import { MockVdbService } from "@dataservices/shared/mock-vdb.service"; import { NotifierService } from "@dataservices/shared/notifier.service"; +import { Table } from "@dataservices/shared/table.model"; import { VdbService } from "@dataservices/shared/vdb.service"; import { NgxDatatableModule } from "@swimlane/ngx-datatable"; import { CodemirrorModule } from "ng2-codemirror"; @@ -37,6 +38,16 @@ describe("SqlControlComponent", () => { beforeEach(() => { fixture = TestBed.createComponent(SqlControlComponent); component = fixture.componentInstance; + + // Set the inputs for the component + component.viewSql = "SELECT * FROM views.View1"; + const table = new Table(); + table.setName("views.View1"); + const tables: Table[] = []; + tables.push(table); + component.serviceViews = tables; + component.selectedViews = tables; + fixture.detectChanges(); }); diff --git a/ngapp/src/app/dataservices/sql-control/sql-control.component.ts b/ngapp/src/app/dataservices/sql-control/sql-control.component.ts index 727461a4..6df35721 100644 --- a/ngapp/src/app/dataservices/sql-control/sql-control.component.ts +++ b/ngapp/src/app/dataservices/sql-control/sql-control.component.ts @@ -22,6 +22,7 @@ import { ColumnData } from "@dataservices/shared/column-data.model"; import { DataserviceService } from "@dataservices/shared/dataservice.service"; import { QueryResults } from "@dataservices/shared/query-results.model"; import { RowData } from "@dataservices/shared/row-data.model"; +import { Table } from "@dataservices/shared/table.model"; import { LoadingState } from "@shared/loading-state.enum"; import "codemirror/addon/display/placeholder.js"; import "codemirror/addon/selection/active-line.js"; @@ -35,7 +36,10 @@ import "codemirror/mode/sql/sql.js"; }) export class SqlControlComponent implements OnInit { - @Input() public editorVisible = true; + @Input() public quicklook = false; + @Input() public selectedViews: Table[] = []; + @Input() public serviceViews: Table[] = []; + @Input() public viewSql = ""; public columns: any[] = []; public rows: any[] = []; @@ -50,19 +54,16 @@ export class SqlControlComponent implements OnInit { public customClasses = { sortAscending: "fa fa-sort-asc", - sortDescending: "fa fa-sort-desc", - pagerLeftArrow: "fa fa-chevron-left", - pagerRightArrow: "fa fa-chevron-right", - pagerPrevious: "fa fa-step-backward", - pagerNext: "fa fa-step-forward" + sortDescending: "fa fa-sort-desc" }; private dataserviceService: DataserviceService; private logger: LoggerService; private showResults = false; private queryResultsLoading: LoadingState; - private queryTxt: string; private queryResults: QueryResults; + private queryMap: Map = new Map(); + private previousViewName: string; constructor( dataserviceService: DataserviceService, logger: LoggerService ) { this.dataserviceService = dataserviceService; @@ -70,15 +71,29 @@ export class SqlControlComponent implements OnInit { } public ngOnInit(): void { - this.initQueryText(); + this.queryMap.clear(); + this.setQueryText(); + this.queryMap.set(this.viewName, this.queryText); + this.previousViewName = this.viewName; this.submitCurrentQuery(); } /* - * Initialize the query text based on the selected dataservice + * Handle View selection from the view table */ - public initQueryText( ): void { - this.queryTxt = this.getDataserviceInitialQueryText(); + public onViewSelect( {selected} ): void { + // Save query for current selection first + this.queryMap.set(this.previousViewName, this.queryText); + + // View table is single select so use first element + const view: Table = selected[ 0 ]; + + this.selectedViews = []; + this.selectedViews.push(view); + + this.setQueryText(); + this.previousViewName = this.viewName; + this.submitCurrentQuery(); } /* @@ -99,14 +114,14 @@ export class SqlControlComponent implements OnInit { * Get the SQL text */ public get queryText( ): string { - return this.queryTxt; + return this.viewSql; } /** * Set the SQL text */ public set queryText( sql: string ) { - this.queryTxt = sql; + this.viewSql = sql; } /** @@ -130,19 +145,20 @@ export class SqlControlComponent implements OnInit { return ( this.queryResultsLoading != null && (this.queryResultsLoading === LoadingState.LOADED_INVALID) ); } + public get viewName(): string { + return !this.selectedViews ? "" : this.selectedViews[0].getName(); + } + /* - * the selected data service query text - */ - private getDataserviceInitialQueryText(): string { - const dataservice = this.dataserviceService.getSelectedDataservice(); - const modelName = dataservice.getServiceViewModel(); - const serviceView = dataservice.getServiceViewName(); - - if ( !modelName || !serviceView ) { - return "SELECT * FROM "; + * Sets the query text based on the selected dataservice + */ + public setQueryText( ): void { + const mapEntry = this.queryMap.get(this.viewName); + if (mapEntry) { + this.viewSql = mapEntry; + } else { + this.viewSql = "SELECT * FROM " + this.viewName + ";"; } - - return "SELECT * FROM " + modelName + "." + serviceView + ";"; } /* diff --git a/ngapp/src/app/dataservices/test-dataservice/test-dataservice.component.html b/ngapp/src/app/dataservices/test-dataservice/test-dataservice.component.html index 4eed23a2..387547e5 100644 --- a/ngapp/src/app/dataservices/test-dataservice/test-dataservice.component.html +++ b/ngapp/src/app/dataservices/test-dataservice/test-dataservice.component.html @@ -24,7 +24,8 @@

Test Dataservice '{{ this.dataservice.getId() }}'

- +
diff --git a/ngapp/src/app/dataservices/test-dataservice/test-dataservice.component.ts b/ngapp/src/app/dataservices/test-dataservice/test-dataservice.component.ts index beac3b60..9e9fa75f 100644 --- a/ngapp/src/app/dataservices/test-dataservice/test-dataservice.component.ts +++ b/ngapp/src/app/dataservices/test-dataservice/test-dataservice.component.ts @@ -5,6 +5,7 @@ import { LoggerService } from "@core/logger.service"; import { Dataservice } from "@dataservices/shared/dataservice.model"; import { DataserviceService } from "@dataservices/shared/dataservice.service"; import { DataservicesConstants } from "@dataservices/shared/dataservices-constants"; +import { Table } from "@dataservices/shared/table.model"; import { AbstractPageComponent } from "@shared/abstract-page.component"; import { LoadingState } from "@shared/loading-state.enum"; @@ -22,6 +23,9 @@ export class TestDataserviceComponent extends AbstractPageComponent { private dataservice: Dataservice; private dataserviceService: DataserviceService; private pageLoadingState: LoadingState = LoadingState.LOADED_VALID; + private selectedSvcViews: Table[] = []; + private allSvcViews: Table[] = []; + private quickLookQueryText: string; constructor( router: Router, route: ActivatedRoute, dataserviceService: DataserviceService, logger: LoggerService ) { super(route, logger); @@ -30,6 +34,11 @@ export class TestDataserviceComponent extends AbstractPageComponent { public loadAsyncPageData(): void { this.dataservice = this.dataserviceService.getSelectedDataservice(); + this.allSvcViews = this.dataserviceService.getSelectedDataserviceViews(); + this.selectedSvcViews = []; + this.selectedSvcViews.push(this.allSvcViews[0]); + const viewName = this.selectedSvcViews[0].getName(); + this.quickLookQueryText = "SELECT * FROM " + viewName + ";"; } /** @@ -47,10 +56,23 @@ export class TestDataserviceComponent extends AbstractPageComponent { } /** - * Determine if page has loaded but was not successful + * Accessor for all available service views */ - public get pageLoadedInvalid( ): boolean { - return this.pageLoadingState === LoadingState.LOADED_INVALID; + public get allServiceViews( ): Table[] { + return this.allSvcViews; } + /** + * Accessor for selected service view + */ + public get selectedViews( ): Table[] { + return this.selectedSvcViews; + } + + /** + * @returns {string} the quick look service name + */ + public get quickLookSql(): string { + return this.quickLookQueryText; + } }