mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-02-15 10:58:31 -05:00
Refactor and rename dashboard tabs part 1 (#755)
* refactor and rename dashboard tabs * undo incorrect changes
This commit is contained in:
Abbie Petchtes
@@ -12,14 +12,14 @@
|
||||
</div>
|
||||
<panel style="flex: 1 1 auto; position: relative" class="dashboard-panel" (onTabChange)="handleTabChange($event)" (onTabClose)="handleTabClose($event)" [actions]="panelActions">
|
||||
<tab *ngFor="let tab of tabs" [title]="tab.title" class="fullsize" [identifier]="tab.id" [canClose]="tab.canClose" [actions]="tab.actions">
|
||||
<dashboard-webview-tab *ngIf="getContentType(tab) === 'webview-tab'" [tab]="tab">
|
||||
</dashboard-webview-tab>
|
||||
<dashboard-widget-tab *ngIf="getContentType(tab) === 'widgets-tab'" [tab]="tab">
|
||||
</dashboard-widget-tab>
|
||||
<dashboard-left-nav-bar *ngIf="getContentType(tab) === 'left-nav-bar'" [tab]="tab">
|
||||
</dashboard-left-nav-bar>
|
||||
<dashboard-grid-tab *ngIf="getContentType(tab) === 'grid-tab'" [tab]="tab">
|
||||
</dashboard-grid-tab>
|
||||
<dashboard-webview-container *ngIf="getContentType(tab) === 'webview-container'" [tab]="tab">
|
||||
</dashboard-webview-container>
|
||||
<dashboard-widget-container *ngIf="getContentType(tab) === 'widgets-container'" [tab]="tab">
|
||||
</dashboard-widget-container>
|
||||
<dashboard-nav-section *ngIf="getContentType(tab) === 'nav-section'" [tab]="tab">
|
||||
</dashboard-nav-section>
|
||||
<dashboard-grid-container *ngIf="getContentType(tab) === 'grid-container'" [tab]="tab">
|
||||
</dashboard-grid-container>
|
||||
</tab>
|
||||
</panel>
|
||||
</div>
|
||||
|
||||
@@ -3,15 +3,15 @@
|
||||
* Licensed under the Source EULA. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
import 'vs/css!./dashboardPage';
|
||||
import './dashboardPanelStyles';
|
||||
import 'vs/css!sql/parts/dashboard/common/dashboardPage';
|
||||
import 'sql/parts/dashboard/common/dashboardPanelStyles';
|
||||
|
||||
import { Component, Inject, forwardRef, ViewChild, ElementRef, ViewChildren, QueryList, OnDestroy, ChangeDetectorRef } from '@angular/core';
|
||||
|
||||
import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboardServiceInterface.service';
|
||||
import { WidgetConfig, TabConfig, PinConfig } from 'sql/parts/dashboard/common/dashboardWidget';
|
||||
import { Extensions, IInsightRegistry } from 'sql/platform/dashboard/common/insightRegistry';
|
||||
import { DashboardWidgetWrapper } from 'sql/parts/dashboard/common/dashboardWidgetWrapper.component';
|
||||
import { DashboardWidgetWrapper } from 'sql/parts/dashboard/contents/dashboardWidgetWrapper.component';
|
||||
import { IPropertiesConfig } from 'sql/parts/dashboard/pages/serverDashboardPage.contribution';
|
||||
import { PanelComponent } from 'sql/base/browser/ui/panel/panel.component';
|
||||
import { IDashboardRegistry, Extensions as DashboardExtensions, IDashboardTab } from 'sql/platform/dashboard/common/dashboardRegistry';
|
||||
@@ -22,8 +22,8 @@ import { AngularEventType } from 'sql/services/angularEventing/angularEventingSe
|
||||
import { DashboardTab } from 'sql/parts/dashboard/common/interfaces';
|
||||
import { error } from 'sql/base/common/log';
|
||||
import * as widgetHelper from 'sql/parts/dashboard/common/dashboardWidgetHelper';
|
||||
import { WIDGETS_TAB } from 'sql/parts/dashboard/tabs/dashboardWidgetTab.contribution';
|
||||
import { GRID_TAB } from 'sql/parts/dashboard/tabs/dashboardGridTab.contribution';
|
||||
import { WIDGETS_CONTAINER } from 'sql/parts/dashboard/containers/dashboardWidgetContainer.contribution';
|
||||
import { GRID_CONTAINER } from 'sql/parts/dashboard/containers/dashboardGridContainer.contribution';
|
||||
|
||||
import { Registry } from 'vs/platform/registry/common/platform';
|
||||
import * as types from 'vs/base/common/types';
|
||||
@@ -179,7 +179,7 @@ export abstract class DashboardPage extends Disposable implements OnDestroy {
|
||||
id: 'homeTab',
|
||||
publisher: undefined,
|
||||
title: this.homeTabTitle,
|
||||
content: { 'widgets-tab': homeWidgets },
|
||||
container: { 'widgets-container': homeWidgets },
|
||||
context: this.context,
|
||||
originalConfig: this._originalConfig,
|
||||
editable: true,
|
||||
@@ -242,24 +242,24 @@ export abstract class DashboardPage extends Disposable implements OnDestroy {
|
||||
if (dashboardTabs && dashboardTabs.length > 0) {
|
||||
let selectedTabs = dashboardTabs.map(v => {
|
||||
|
||||
if (Object.keys(v.content).length !== 1) {
|
||||
if (Object.keys(v.container).length !== 1) {
|
||||
error('Exactly 1 content must be defined per space');
|
||||
}
|
||||
|
||||
let key = Object.keys(v.content)[0];
|
||||
if (key === WIDGETS_TAB || key === GRID_TAB) {
|
||||
let configs = <WidgetConfig[]>Object.values(v.content)[0];
|
||||
let key = Object.keys(v.container)[0];
|
||||
if (key === WIDGETS_CONTAINER || key === GRID_CONTAINER) {
|
||||
let configs = <WidgetConfig[]>Object.values(v.container)[0];
|
||||
this._configModifiers.forEach(cb => {
|
||||
configs = cb.apply(this, [configs, this.dashboardService, this.context]);
|
||||
});
|
||||
this._gridModifiers.forEach(cb => {
|
||||
configs = cb.apply(this, [configs, this._originalConfig]);
|
||||
});
|
||||
if (key === WIDGETS_TAB) {
|
||||
return { id: v.id, title: v.title, content: { 'widgets-tab': configs }, alwaysShow: v.alwaysShow };
|
||||
if (key === WIDGETS_CONTAINER) {
|
||||
return { id: v.id, title: v.title, container: { 'widgets-container': configs }, alwaysShow: v.alwaysShow };
|
||||
|
||||
} else {
|
||||
return { id: v.id, title: v.title, content: { 'grid-tab': configs }, alwaysShow: v.alwaysShow };
|
||||
return { id: v.id, title: v.title, container: { 'grid-container': configs }, alwaysShow: v.alwaysShow };
|
||||
}
|
||||
}
|
||||
return v;
|
||||
@@ -288,7 +288,7 @@ export abstract class DashboardPage extends Disposable implements OnDestroy {
|
||||
|
||||
|
||||
private getContentType(tab: TabConfig): string {
|
||||
return tab.content ? Object.keys(tab.content)[0] : '';
|
||||
return tab.container ? Object.keys(tab.container)[0] : '';
|
||||
}
|
||||
|
||||
private addNewTab(tab: TabConfig): void {
|
||||
|
||||
@@ -11,7 +11,7 @@ import { registerTab, generateTabContentSchemaProperties } from 'sql/platform/da
|
||||
export interface IDashboardTabContrib {
|
||||
id: string;
|
||||
title: string;
|
||||
content: object;
|
||||
container: object;
|
||||
description?: string;
|
||||
provider?: string | string[];
|
||||
edition?: number | number[];
|
||||
@@ -61,8 +61,8 @@ const tabSchema: IJSONSchema = {
|
||||
}
|
||||
]
|
||||
},
|
||||
content: {
|
||||
description: localize('sqlops.extension.contributes.dashboard.tab.content', "The content that will be displayed in this tab."),
|
||||
container: {
|
||||
description: localize('sqlops.extension.contributes.dashboard.tab.container', "The container that will be displayed in this tab."),
|
||||
type: 'object',
|
||||
properties: generateTabContentSchemaProperties()
|
||||
},
|
||||
@@ -87,7 +87,7 @@ const tabContributionSchema: IJSONSchema = {
|
||||
ExtensionsRegistry.registerExtensionPoint<IDashboardTabContrib | IDashboardTabContrib[]>('dashboard.tabs', [], tabContributionSchema).setHandler(extensions => {
|
||||
|
||||
function handleCommand(tab: IDashboardTabContrib, extension: IExtensionPointUser<any>) {
|
||||
let { description, content, title, edition, provider, id, alwaysShow } = tab;
|
||||
let { description, container, title, edition, provider, id, alwaysShow } = tab;
|
||||
alwaysShow = alwaysShow || false;
|
||||
let publisher = extension.description.publisher;
|
||||
if (!title) {
|
||||
@@ -97,10 +97,10 @@ ExtensionsRegistry.registerExtensionPoint<IDashboardTabContrib | IDashboardTabCo
|
||||
if (!description) {
|
||||
extension.collector.warn('No description specified to show.');
|
||||
}
|
||||
if (!content) {
|
||||
extension.collector.warn('No content specified to show.');
|
||||
if (!container) {
|
||||
extension.collector.warn('No container specified to show.');
|
||||
}
|
||||
registerTab({ description, title, content, edition, provider, id, alwaysShow, publisher });
|
||||
registerTab({ description, title, container, edition, provider, id, alwaysShow, publisher });
|
||||
}
|
||||
|
||||
for (let extension of extensions) {
|
||||
|
||||
@@ -1,18 +0,0 @@
|
||||
<!--
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the Source EULA. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
-->
|
||||
<div style="display: flex; flex-flow: column; overflow: hidden; height: 100%; width: 100%">
|
||||
|
||||
<div #header>
|
||||
<div style="display: flex; flex: 0 0; padding: 3px 0 3px 0; flex-direction: row-reverse; justify-content: space-between">
|
||||
<span #actionbar style="flex: 0 0 auto; align-self: end"></span>
|
||||
<span *ngIf="_config.name" style="margin-left: 5px">{{_config.name}}</span>
|
||||
<span *ngIf="_config.icon" [ngClass]="['icon', _config.icon]" style="display: inline-block; padding: 10px; margin-left: 5px"></span>
|
||||
</div>
|
||||
</div>
|
||||
<ng-template component-host>
|
||||
</ng-template>
|
||||
</div>
|
||||
@@ -1,234 +0,0 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the Source EULA. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
import 'vs/css!sql/media/icons/common-icons';
|
||||
import 'vs/css!./dashboardWidgetWrapper';
|
||||
|
||||
import {
|
||||
Component, Input, Inject, forwardRef, ComponentFactoryResolver, AfterContentInit, ViewChild,
|
||||
ElementRef, OnInit, ChangeDetectorRef, OnDestroy, ReflectiveInjector, Injector, Type, ComponentRef
|
||||
} from '@angular/core';
|
||||
|
||||
import { ComponentHostDirective } from './componentHost.directive';
|
||||
import { WidgetConfig, WIDGET_CONFIG, IDashboardWidget } from './dashboardWidget';
|
||||
import { Extensions, IInsightRegistry } from 'sql/platform/dashboard/common/insightRegistry';
|
||||
import { error } from 'sql/base/common/log';
|
||||
import { RefreshWidgetAction, ToggleMoreWidgetAction, DeleteWidgetAction } from './actions';
|
||||
|
||||
/* Widgets */
|
||||
import { PropertiesWidgetComponent } from 'sql/parts/dashboard/widgets/properties/propertiesWidget.component';
|
||||
import { ExplorerWidget } from 'sql/parts/dashboard/widgets/explorer/explorerWidget.component';
|
||||
import { TasksWidget } from 'sql/parts/dashboard/widgets/tasks/tasksWidget.component';
|
||||
import { InsightsWidget } from 'sql/parts/dashboard/widgets/insights/insightsWidget.component';
|
||||
import { WebviewWidget } from 'sql/parts/dashboard/widgets/webview/webviewWidget.component';
|
||||
|
||||
import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboardServiceInterface.service';
|
||||
|
||||
import { IDisposable } from 'vs/base/common/lifecycle';
|
||||
import { IColorTheme } from 'vs/workbench/services/themes/common/workbenchThemeService';
|
||||
import * as colors from 'vs/platform/theme/common/colorRegistry';
|
||||
import * as themeColors from 'vs/workbench/common/theme';
|
||||
import { Action } from 'vs/base/common/actions';
|
||||
import { Registry } from 'vs/platform/registry/common/platform';
|
||||
import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
|
||||
|
||||
const componentMap: { [x: string]: Type<IDashboardWidget> } = {
|
||||
'properties-widget': PropertiesWidgetComponent,
|
||||
'explorer-widget': ExplorerWidget,
|
||||
'tasks-widget': TasksWidget,
|
||||
'insights-widget': InsightsWidget,
|
||||
'webview-widget': WebviewWidget
|
||||
};
|
||||
|
||||
@Component({
|
||||
selector: 'dashboard-widget-wrapper',
|
||||
templateUrl: decodeURI(require.toUrl('sql/parts/dashboard/common/dashboardWidgetWrapper.component.html'))
|
||||
})
|
||||
export class DashboardWidgetWrapper implements AfterContentInit, OnInit, OnDestroy {
|
||||
@Input() private _config: WidgetConfig;
|
||||
private _themeDispose: IDisposable;
|
||||
private _actions: Array<Action>;
|
||||
private _component: IDashboardWidget;
|
||||
private _actionbar: ActionBar;
|
||||
|
||||
@ViewChild('header', { read: ElementRef }) private header: ElementRef;
|
||||
@ViewChild('actionbar', { read: ElementRef }) private _actionbarRef: ElementRef;
|
||||
@ViewChild(ComponentHostDirective) componentHost: ComponentHostDirective;
|
||||
|
||||
constructor(
|
||||
@Inject(forwardRef(() => ComponentFactoryResolver)) private _componentFactoryResolver: ComponentFactoryResolver,
|
||||
@Inject(forwardRef(() => ElementRef)) private _ref: ElementRef,
|
||||
@Inject(forwardRef(() => DashboardServiceInterface)) private _bootstrap: DashboardServiceInterface,
|
||||
@Inject(forwardRef(() => ChangeDetectorRef)) private _changeref: ChangeDetectorRef,
|
||||
@Inject(forwardRef(() => Injector)) private _injector: Injector
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
let self = this;
|
||||
self._themeDispose = self._bootstrap.themeService.onDidColorThemeChange((event: IColorTheme) => {
|
||||
self.updateTheme(event);
|
||||
});
|
||||
}
|
||||
|
||||
ngAfterContentInit() {
|
||||
this.updateTheme(this._bootstrap.themeService.getColorTheme());
|
||||
this.loadWidget();
|
||||
this._changeref.detectChanges();
|
||||
this._actionbar = new ActionBar(this._actionbarRef.nativeElement);
|
||||
if (this._actions) {
|
||||
this._actionbar.push(this._bootstrap.instantiationService.createInstance(ToggleMoreWidgetAction, this._actions, this._component.actionsContext), { icon: true, label: false });
|
||||
}
|
||||
this.layout();
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this._themeDispose.dispose();
|
||||
}
|
||||
|
||||
public refresh(): void {
|
||||
if (this._component && this._component.refresh) {
|
||||
this._component.refresh();
|
||||
}
|
||||
}
|
||||
|
||||
public layout(): void {
|
||||
if (this._component && this._component.layout) {
|
||||
this._component.layout();
|
||||
}
|
||||
}
|
||||
|
||||
public get id(): string {
|
||||
return this._config.id;
|
||||
}
|
||||
|
||||
public enableEdit(): void {
|
||||
this._actionbar.push(this._bootstrap.instantiationService.createInstance(DeleteWidgetAction, this._config.id, this._bootstrap.getUnderlyingUri()), { icon: true, label: false });
|
||||
}
|
||||
|
||||
public disableEdit(): void {
|
||||
this._actionbar.pull(this._actionbar.length() - 1);
|
||||
}
|
||||
|
||||
private loadWidget(): void {
|
||||
if (Object.keys(this._config.widget).length !== 1) {
|
||||
error('Exactly 1 widget must be defined per space');
|
||||
return;
|
||||
}
|
||||
let key = Object.keys(this._config.widget)[0];
|
||||
let selector = this.getOrCreateSelector(key);
|
||||
if (selector === undefined) {
|
||||
error('Could not find selector', key);
|
||||
return;
|
||||
}
|
||||
|
||||
let componentFactory = this._componentFactoryResolver.resolveComponentFactory(selector);
|
||||
|
||||
let viewContainerRef = this.componentHost.viewContainerRef;
|
||||
viewContainerRef.clear();
|
||||
|
||||
let injector = ReflectiveInjector.resolveAndCreate([{ provide: WIDGET_CONFIG, useValue: this._config }], this._injector);
|
||||
let componentRef: ComponentRef<IDashboardWidget>;
|
||||
try {
|
||||
componentRef = viewContainerRef.createComponent(componentFactory, 0, injector);
|
||||
this._component = componentRef.instance;
|
||||
let actions = componentRef.instance.actions;
|
||||
if (componentRef.instance.refresh) {
|
||||
actions.push(new RefreshWidgetAction(componentRef.instance.refresh, componentRef.instance));
|
||||
}
|
||||
if (actions !== undefined && actions.length > 0) {
|
||||
this._actions = actions;
|
||||
this._changeref.detectChanges();
|
||||
}
|
||||
} catch (e) {
|
||||
error('Error rendering widget', key, e);
|
||||
return;
|
||||
}
|
||||
let el = <HTMLElement>componentRef.location.nativeElement;
|
||||
|
||||
// set widget styles to conform to its box
|
||||
el.style.overflow = 'hidden';
|
||||
el.style.flex = '1 1 auto';
|
||||
el.style.position = 'relative';
|
||||
}
|
||||
|
||||
/**
|
||||
* Attempts to get the selector for a given key, and if none is defined tries
|
||||
* to load it from the widget registry and configure as needed
|
||||
*
|
||||
* @private
|
||||
* @param {string} key
|
||||
* @returns {Type<IDashboardWidget>}
|
||||
* @memberof DashboardWidgetWrapper
|
||||
*/
|
||||
private getOrCreateSelector(key: string): Type<IDashboardWidget> {
|
||||
let selector = componentMap[key];
|
||||
if (selector === undefined) {
|
||||
// Load the widget from the registry
|
||||
let widgetRegistry = <IInsightRegistry>Registry.as(Extensions.InsightContribution);
|
||||
let insightConfig = widgetRegistry.getRegisteredExtensionInsights(key);
|
||||
if (insightConfig === undefined) {
|
||||
return undefined;
|
||||
}
|
||||
// Save the widget for future use
|
||||
selector = componentMap['insights-widget'];
|
||||
delete this._config.widget[key];
|
||||
this._config.widget['insights-widget'] = insightConfig;
|
||||
}
|
||||
return selector;
|
||||
}
|
||||
|
||||
private updateTheme(theme: IColorTheme): void {
|
||||
let el = <HTMLElement>this._ref.nativeElement;
|
||||
let headerEl: HTMLElement = this.header.nativeElement;
|
||||
let borderColor = theme.getColor(themeColors.SIDE_BAR_BACKGROUND, true);
|
||||
let backgroundColor = theme.getColor(colors.editorBackground, true);
|
||||
let foregroundColor = theme.getColor(themeColors.SIDE_BAR_FOREGROUND, true);
|
||||
let border = theme.getColor(colors.contrastBorder, true);
|
||||
|
||||
if (this._config.background_color) {
|
||||
backgroundColor = theme.getColor(this._config.background_color);
|
||||
}
|
||||
|
||||
if (this._config.border === 'none') {
|
||||
borderColor = undefined;
|
||||
}
|
||||
|
||||
if (backgroundColor) {
|
||||
el.style.backgroundColor = backgroundColor.toString();
|
||||
}
|
||||
|
||||
if (foregroundColor) {
|
||||
el.style.color = foregroundColor.toString();
|
||||
}
|
||||
|
||||
let borderString = undefined;
|
||||
if (border) {
|
||||
borderString = border.toString();
|
||||
el.style.borderColor = borderString;
|
||||
el.style.borderWidth = '1px';
|
||||
el.style.borderStyle = 'solid';
|
||||
} else if (borderColor) {
|
||||
borderString = borderColor.toString();
|
||||
el.style.border = '3px solid ' + borderColor.toString();
|
||||
} else {
|
||||
el.style.border = 'none';
|
||||
}
|
||||
|
||||
if (borderString) {
|
||||
headerEl.style.backgroundColor = borderString;
|
||||
} else {
|
||||
headerEl.style.backgroundColor = '';
|
||||
}
|
||||
|
||||
if (this._config.fontSize) {
|
||||
headerEl.style.fontSize = this._config.fontSize;
|
||||
}
|
||||
if (this._config.fontWeight) {
|
||||
headerEl.style.fontWeight = this._config.fontWeight;
|
||||
}
|
||||
if (this._config.padding) {
|
||||
headerEl.style.padding = this._config.padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the Source EULA. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
dashboard-widget-wrapper .action-label {
|
||||
padding: 7px;
|
||||
}
|
||||
Reference in New Issue
Block a user