Feat/model backed ui (#1145)

This is an initial PR for a new model-driven UI where extensions can provide definitions of the components & how they're laid out using Containers.
#1140, #1141, #1142, #1143 and #1144 are all tracking additional work needed to improve the initial implementation and fix some issues with the implementation.

Features:
- Supports defining a FlexContainer that maps to a flexbox-based layout.
- Supports creating a card component, which is a key-value pair based control that will lay out simple information to a user. Eventually this will have an optional set of actions associated with it.
- Has a sample project which shows how to use the API and was used for verification
This commit is contained in:
Kevin Cunnane
2018-04-13 15:59:18 -07:00
committed by GitHub
parent e022f4a0d1
commit b2c70e9301
63 changed files with 13238 additions and 84 deletions

View File

@@ -22,7 +22,7 @@ import { ISqlOAuthService } from 'sql/common/sqlOAuthService';
import { IFileBrowserService, IFileBrowserDialogController } from 'sql/parts/fileBrowser/common/interfaces';
import { IClipboardService } from 'sql/platform/clipboard/common/clipboardService';
import { ICapabilitiesService } from 'sql/services/capabilities/capabilitiesService';
import { IDashboardWebviewService } from 'sql/services/dashboardWebview/common/dashboardWebviewService';
import { IDashboardViewService } from 'sql/services/dashboard/common/dashboardViewService';
import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
@@ -93,7 +93,7 @@ export interface IBootstrapService {
capabilitiesService: ICapabilitiesService;
configurationEditorService: ConfigurationEditingService;
commandService: ICommandService;
dashboardWebviewService: IDashboardWebviewService;
dashboardViewService: IDashboardViewService;
jobManagementService: IJobManagementService;
environmentService: IEnvironmentService;

View File

@@ -24,7 +24,7 @@ import { ISqlOAuthService } from 'sql/common/sqlOAuthService';
import { IFileBrowserService, IFileBrowserDialogController } from 'sql/parts/fileBrowser/common/interfaces';
import { IClipboardService } from 'sql/platform/clipboard/common/clipboardService';
import { ICapabilitiesService } from 'sql/services/capabilities/capabilitiesService';
import { IDashboardWebviewService } from 'sql/services/dashboardWebview/common/dashboardWebviewService';
import { IDashboardViewService } from 'sql/services/dashboard/common/dashboardViewService';
import { $ } from 'vs/base/browser/dom';
import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
@@ -102,7 +102,7 @@ export class BootstrapService implements IBootstrapService {
@IClipboardService public clipboardService: IClipboardService,
@ICapabilitiesService public capabilitiesService: ICapabilitiesService,
@ICommandService public commandService: ICommandService,
@IDashboardWebviewService public dashboardWebviewService: IDashboardWebviewService,
@IDashboardViewService public dashboardViewService: IDashboardViewService,
@IJobManagementService public jobManagementService: IJobManagementService,
@IEnvironmentService public environmentService: IEnvironmentService
) {

View File

@@ -9,22 +9,23 @@ import { createDecorator } from 'vs/platform/instantiation/common/instantiation'
import Event from 'vs/base/common/event';
import * as sqlops from 'sqlops';
import { IItemConfig, IComponentShape } from 'sql/workbench/api/common/sqlExtHostTypes';
import { IView, IModelView } from 'sql/services/model/modelViewService';
export const SERVICE_ID = 'dashboardWebviewService';
export const SERVICE_ID = 'dashboardViewService';
export interface IDashboardWebview {
readonly id: string;
readonly connection: sqlops.connection.Connection;
readonly serverInfo: sqlops.ServerInfo;
export interface IDashboardWebview extends IView {
setHtml(html: string): void;
onMessage: Event<string>;
sendMessage(message: string);
}
export interface IDashboardWebviewService {
export interface IDashboardViewService {
_serviceBrand: any;
onRegisteredWebview: Event<IDashboardWebview>;
registerWebview(widget: IDashboardWebview);
onRegisteredModelView: Event<IModelView>;
registerModelView(widget: IModelView);
}
export const IDashboardWebviewService = createDecorator<IDashboardWebviewService>(SERVICE_ID);
export const IDashboardViewService = createDecorator<IDashboardViewService>(SERVICE_ID);

View File

@@ -5,17 +5,24 @@
'use strict';
import { IDashboardWebviewService, IDashboardWebview } from 'sql/services/dashboardWebview/common/dashboardWebviewService';
import { IDashboardViewService, IDashboardWebview } from 'sql/services/dashboard/common/dashboardViewService';
import Event, { Emitter } from 'vs/base/common/event';
import { IModelView } from 'sql/services/model/modelViewService';
export class DashboardWebviewService implements IDashboardWebviewService {
export class DashboardViewService implements IDashboardViewService {
_serviceBrand: any;
private _onRegisteredWebview = new Emitter<IDashboardWebview>();
public readonly onRegisteredWebview: Event<IDashboardWebview> = this._onRegisteredWebview.event;
private _onRegisteredModelView = new Emitter<IModelView>();
public readonly onRegisteredModelView: Event<IModelView> = this._onRegisteredModelView.event;
public registerWebview(widget: IDashboardWebview) {
this._onRegisteredWebview.fire(widget);
}
registerModelView(view: IModelView) {
this._onRegisteredModelView.fire(view);
}
}

View File

@@ -0,0 +1,22 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
'use strict';
import * as sqlops from 'sqlops';
import { IItemConfig, IComponentShape } from 'sql/workbench/api/common/sqlExtHostTypes';
export interface IView {
readonly id: string;
readonly connection: sqlops.connection.Connection;
readonly serverInfo: sqlops.ServerInfo;
}
export interface IModelView extends IView {
initializeModel(rootComponent: IComponentShape): void;
clearContainer(componentId: string): void;
addToContainer(containerId: string, item: IItemConfig): void;
setLayout(componentId: string, layout: any): void;
setProperties(componentId: string, properties: { [key: string]: any }): void;
}