From 46fb68214f54ae4f3c4b4a9bfe67577e2794b7bb Mon Sep 17 00:00:00 2001 From: Aditya Bist Date: Tue, 1 May 2018 17:19:54 -0700 Subject: [PATCH] added taskbar instead of custom action bar (#1288) * added taskbar instead of custom action bar * set actions buttons based on context * cr comments --- .../jobManagement/common/agentJobUtilities.ts | 4 +- .../parts/jobManagement/common/media/jobs.css | 14 ++- .../views/jobHistory.component.html | 9 +- .../views/jobHistory.component.ts | 72 +++++++-------- .../parts/jobManagement/views/jobHistory.css | 73 ++++++--------- .../jobManagement/views/jobHistoryActions.ts | 88 +++++++++++++++++++ 6 files changed, 164 insertions(+), 96 deletions(-) create mode 100644 src/sql/parts/jobManagement/views/jobHistoryActions.ts diff --git a/src/sql/parts/jobManagement/common/agentJobUtilities.ts b/src/sql/parts/jobManagement/common/agentJobUtilities.ts index 70a564fbcc..f5cce4a835 100644 --- a/src/sql/parts/jobManagement/common/agentJobUtilities.ts +++ b/src/sql/parts/jobManagement/common/agentJobUtilities.ts @@ -9,8 +9,8 @@ import * as nls from 'vs/nls'; export class AgentJobUtilities { - public static startIconClass: string = 'icon-start'; - public static stopIconClass: string = 'icon-stop'; + public static startIconClass: string = 'action-label icon runJobIcon'; + public static stopIconClass: string = 'action-label icon stopJobIcon'; public static convertToStatusString(status: number): string { switch(status) { diff --git a/src/sql/parts/jobManagement/common/media/jobs.css b/src/sql/parts/jobManagement/common/media/jobs.css index aab0e1b4fc..0b31451bce 100644 --- a/src/sql/parts/jobManagement/common/media/jobs.css +++ b/src/sql/parts/jobManagement/common/media/jobs.css @@ -21,12 +21,16 @@ jobhistory-component { display: block; } -.vs-dark .job-heading-container { +.job-heading-container { height: 49px; - border-bottom: 3px solid #444444; + border-bottom: 3px solid #f4f4f4; display: -webkit-box; } +.vs-dark .job-heading-container { + border-bottom: 3px solid #444444; +} + #jobsDiv .jobview-grid { height: 96%; width : 100%; @@ -179,12 +183,14 @@ agentview-component .jobview-grid .grid-canvas > .ui-widget-content.slick-row.od cursor: pointer; } -jobsview-component .jobview-grid > .monaco-table .slick-viewport > .grid-canvas - .vs-dark .jobview-grid > .monaco-table .slick-header-columns .slick-resizable-handle { border-left: 1px dotted white; } +.jobview-grid > .monaco-table .slick-header-columns .slick-resizable-handle { + border-left: 1px dotted #444444; +} + .job-heading-container > .icon.in-progress { height: 20px; width: 20px; diff --git a/src/sql/parts/jobManagement/views/jobHistory.component.html b/src/sql/parts/jobManagement/views/jobHistory.component.html index a58b0534bf..f007d00d5b 100644 --- a/src/sql/parts/jobManagement/views/jobHistory.component.html +++ b/src/sql/parts/jobManagement/views/jobHistory.component.html @@ -15,14 +15,7 @@ - +
diff --git a/src/sql/parts/jobManagement/views/jobHistory.component.ts b/src/sql/parts/jobManagement/views/jobHistory.component.ts index 6ddcfd6aa8..d0b1976c29 100644 --- a/src/sql/parts/jobManagement/views/jobHistory.component.ts +++ b/src/sql/parts/jobManagement/views/jobHistory.component.ts @@ -29,6 +29,8 @@ import { JobCacheObject } from 'sql/parts/jobManagement/common/jobManagementServ import { AgentJobUtilities } from '../common/agentJobUtilities'; import { ITreeOptions } from 'vs/base/parts/tree/browser/tree'; import { ScrollbarVisibility } from 'vs/base/common/scrollable'; +import { Taskbar, ITaskbarContent } from 'sql/base/browser/ui/taskbar/taskbar'; +import { RunJobAction, StopJobAction } from 'sql/parts/jobManagement/views/jobHistoryActions'; export const DASHBOARD_SELECTOR: string = 'jobhistory-component'; @@ -46,8 +48,10 @@ export class JobHistoryComponent extends Disposable implements OnInit { private _treeDataSource: JobHistoryDataSource; private _treeRenderer: JobHistoryRenderer; private _treeFilter: JobHistoryFilter; + private _actionBar: Taskbar; @ViewChild('table') private _tableContainer: ElementRef; + @ViewChild('actionbarContainer') private _actionbarContainer: ElementRef; @Input() public agentJobInfo: AgentJobInfo = undefined; @Input() public agentJobHistories: AgentJobHistoryInfo[] = undefined; @@ -127,6 +131,7 @@ export class JobHistoryComponent extends Disposable implements OnInit { }, {verticalScrollMode: ScrollbarVisibility.Visible}); this._register(attachListStyler(this._tree, this.bootstrapService.themeService)); this._tree.layout(1024); + this._initActionBar(); } ngAfterContentChecked() { @@ -200,7 +205,7 @@ export class JobHistoryComponent extends Disposable implements OnInit { stepViewRow.stepID = step.stepId.toString(); return stepViewRow; }); - this._showSteps = true; + this._showSteps = self._stepRows.length > 0; } else { this._showSteps = false; } @@ -230,38 +235,6 @@ export class JobHistoryComponent extends Disposable implements OnInit { } } - private jobAction(action: string, jobName: string): void { - let ownerUri: string = this._dashboardService.connectionManagementService.connectionInfo.ownerUri; - const self = this; - this._jobManagementService.jobAction(ownerUri, jobName, action).then(result => { - if (result.succeeded) { - switch (action) { - case ('run'): - var startMsg = localize('jobSuccessfullyStarted', 'The job was successfully started.'); - self._notificationService.notify({ - severity: Severity.Info, - message: startMsg - }); - break; - case ('stop'): - var stopMsg = localize('jobSuccessfullyStopped', 'The job was successfully stopped.'); - self._notificationService.notify({ - severity: Severity.Info, - message: stopMsg - }); - break; - default: - break; - } - } else { - self._notificationService.notify({ - severity: Severity.Error, - message: result.errorMessage - }); - } - }); - } - private goToJobs(): void { this._isVisible = false; this._agentViewComponent.showHistory = false; @@ -284,22 +257,45 @@ export class JobHistoryComponent extends Disposable implements OnInit { } private setActions(): void { - let startIcon: HTMLElement = $('.icon-start').get(0); - let stopIcon: HTMLElement = $('.icon-stop').get(0); + let startIcon: HTMLElement = $('.action-label.icon.runJobIcon').get(0); + let stopIcon: HTMLElement = $('.action-label.icon.stopJobIcon').get(0); AgentJobUtilities.getActionIconClassName(startIcon, stopIcon, this.agentJobInfo.currentExecutionStatus); } + + private _initActionBar() { + let runJobAction = this.bootstrapService.instantiationService.createInstance(RunJobAction); + let stopJobAction = this.bootstrapService.instantiationService.createInstance(StopJobAction); + let taskbar = this._actionbarContainer.nativeElement; + this._actionBar = new Taskbar(taskbar, this.bootstrapService.contextMenuService); + this._actionBar.context = this; + this._actionBar.setContent([ + { action: runJobAction }, + { action: stopJobAction } + ]); + } + + /** GETTERS */ + public get showSteps(): boolean { return this._showSteps; } + public get stepRows() { + return this._stepRows; + } + + public get ownerUri(): string { + return this._dashboardService.connectionManagementService.connectionInfo.ownerUri; + } + + /** SETTERS */ + public set showSteps(value: boolean) { this._showSteps = value; this._cd.detectChanges(); } - public get stepRows() { - return this._stepRows; - } + } diff --git a/src/sql/parts/jobManagement/views/jobHistory.css b/src/sql/parts/jobManagement/views/jobHistory.css index 7362ceeed2..4042d1bcc9 100644 --- a/src/sql/parts/jobManagement/views/jobHistory.css +++ b/src/sql/parts/jobManagement/views/jobHistory.css @@ -10,27 +10,6 @@ padding-bottom: 15px; } -.vs-dark ul.action-buttons { - border-top: 3px solid #444444; -} - -.action-buttons { - padding-top: 15px; - padding-left: 10px; - border-top: 3px solid #f4f4f4; - list-style-type: none; -} - -ul.action-buttons .icon-start, .icon-stop { - padding-left: 25px; -} - -ul.action-buttons li { - padding-right: 25px; - display: inline-block; - width: 50px; -} - .overview-container .overview-tab .resultsViewCollapsible { padding: 15px; display: inline; @@ -41,6 +20,10 @@ ul.action-buttons li { padding-left: 13px; } +.overview-container { + padding-top: 10px; +} + .vs-dark .overview-container .overview-tab { color: #fff; } @@ -119,40 +102,32 @@ input#accordion:checked ~ .accordion-content { float: left; cursor: pointer; padding-left: 13px; + padding-bottom: 10px; } .vs-dark.monaco-shell .all-jobs >.back-button-icon { content: url('../common/media/back_inverse.svg'); } -.vs ul.action-buttons div.icon-start, -.vs-dark ul.action-buttons div.icon-start, -.hc-black ul.action-buttons div.icon-start { - display: inline-block; - height: 20px; - width: 20px; +.vs .action-label.icon.runJobIcon, +.vs-dark .action-label.icon.runJobIcon, +.hc-black .action-label.icon.runJobIcon { background-image: url('../common/media/start.svg'); - background-repeat: no-repeat; - cursor: pointer; + padding-right: 5px; } -.vs ul.action-buttons .icon-stop, -.vs-dark ul.action-buttons .icon-stop, -.hc-black ul.action-buttons .icon-stop { - display: inline-block; +.vs .action-label.icon.stopJobIcon, +.vs-dark .action-label.icon.stopJobIcon, +.hc-black .action-label.icon.stopJobIcon { background-image: url('../common/media/stop.svg'); - background-repeat: no-repeat; - height: 20px; - width: 20px; - cursor: pointer; } -ul.action-buttons div.icon-start.non-runnable { +a.action-label.icon.runJobIcon.non-runnable { opacity: 0.4; cursor: default; } -ul.action-buttons div.icon-stop.non-runnable { +a.action-label.icon.stopJobIcon.non-runnable { opacity: 0.4; cursor: default; } @@ -202,12 +177,9 @@ table.step-list tr.step-row td { padding-bottom: 10px; } -.vs-dark .step-table .monaco-tree .monaco-tree-rows.show-twisties > .monaco-tree-row.has-children > .content:before { - background-image: none; -} - .step-table .monaco-tree .monaco-tree-rows.show-twisties > .monaco-tree-row.has-children > .content:before { background: none; + background-image: none; } .step-table .monaco-tree.focused .monaco-tree-rows.show-twisties > .monaco-tree-row.has-children.selected:not(.loading) > .content:before { @@ -262,4 +234,17 @@ jobhistory-component > .jobhistory-heading-container > .icon.in-progress { height: 20px; padding-top: 16px; padding-left: 20px; -} \ No newline at end of file +} + +jobhistory-component > .actionbar-container .monaco-action-bar > ul.actions-container { + border-top: 3px solid #f4f4f4; + padding-top: 10px; +} + +.vs-dark jobhistory-component > .actionbar-container .monaco-action-bar > ul.actions-container { + border-top: 3px solid #444444; +} + + + + diff --git a/src/sql/parts/jobManagement/views/jobHistoryActions.ts b/src/sql/parts/jobManagement/views/jobHistoryActions.ts new file mode 100644 index 0000000000..c77a5135fe --- /dev/null +++ b/src/sql/parts/jobManagement/views/jobHistoryActions.ts @@ -0,0 +1,88 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the Source EULA. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ + +import { TPromise } from 'vs/base/common/winjs.base'; +import { Action } from 'vs/base/common/actions'; +import * as nls from 'vs/nls'; +import { INotificationService } from 'vs/platform/notification/common/notification'; +import Severity from 'vs/base/common/severity'; +import { BaseActionContext } from '../../../workbench/common/actions'; +import { JobHistoryComponent } from 'sql/parts/jobManagement/views/jobHistory.component'; +import { JobManagementService } from '../common/jobManagementService'; +import { IJobManagementService } from '../common/interfaces'; + +export enum JobHistoryActions { + Run = 'run', + Stop = 'stop', +} +export class RunJobAction extends Action { + public static ID = 'jobaction.runJob'; + public static LABEL = nls.localize('jobaction.run', "Run"); + + constructor( + @INotificationService private notificationService: INotificationService, + @IJobManagementService private jobManagementService: IJobManagementService + ) { + super(RunJobAction.ID, RunJobAction.LABEL, 'runJobIcon'); + } + + public run(context: JobHistoryComponent): TPromise { + let jobName = context.agentJobInfo.name; + let ownerUri = context.ownerUri; + return new TPromise((resolve, reject) => { + this.jobManagementService.jobAction(ownerUri, jobName, JobHistoryActions.Run).then(result => { + if (result.succeeded) { + var startMsg = nls.localize('jobSuccessfullyStarted', ': The job was successfully started.'); + this.notificationService.notify({ + severity: Severity.Info, + message: jobName+ startMsg + }); + resolve(true); + } else { + this.notificationService.notify({ + severity: Severity.Error, + message: result.errorMessage + }); + resolve(false); + } + }); + }); + } +} + +export class StopJobAction extends Action { + public static ID = 'jobaction.stopJob'; + public static LABEL = nls.localize('jobaction.stop', "Stop"); + + constructor( + @INotificationService private notificationService: INotificationService, + @IJobManagementService private jobManagementService: IJobManagementService + ) { + super(StopJobAction.ID, StopJobAction.LABEL, 'stopJobIcon'); + } + + public run(context: JobHistoryComponent): TPromise { + let jobName = context.agentJobInfo.name; + let ownerUri = context.ownerUri; + return new TPromise((resolve, reject) => { + this.jobManagementService.jobAction(ownerUri, jobName, JobHistoryActions.Stop).then(result => { + if (result.succeeded) { + var stopMsg = nls.localize('jobSuccessfullyStopped', ': The job was successfully stopped.'); + this.notificationService.notify({ + severity: Severity.Info, + message: jobName+ stopMsg + }); + resolve(true); + } else { + this.notificationService.notify({ + severity: Severity.Error, + message: result.errorMessage + }); + resolve(false); + } + }); + }); + } +} \ No newline at end of file