added taskbar instead of custom action bar (#1288)

* added taskbar instead of custom action bar

* set actions buttons based on context

* cr comments

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 startIconClass: string = 'action-label icon runJobIcon';
-	public static stopIconClass: string = 'icon-stop';
+	public static stopIconClass: string = 'action-label icon stopJobIcon';
 
 	public static convertToStatusString(status: number): string {
 		switch(status) {

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;

src/sql/parts/jobManagement/views/jobHistory.component.html

@@ -15,14 +15,7 @@
  </div>
 
 <!-- Actions -->
-<ul class="action-buttons">
+<div #actionbarContainer class="actionbar-container"></div>
-	<li>
-		<div class="icon-start" (click)="jobAction('run', this._agentJobInfo.name)">Run</div>
-	</li>
-	<li>
-		<div class="icon-stop" (click)="jobAction('stop', this._.agentJobInfo.name)">Stop</div>
-	</li>
-</ul>
 
 <!-- Overview  -->
  <div class="overview-container">

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 startIcon: HTMLElement = $('.action-label.icon.runJobIcon').get(0);
-		let stopIcon: HTMLElement = $('.icon-stop').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 = <HTMLElement>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;
-	}
 }
 

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 .action-label.icon.runJobIcon,
-.vs-dark ul.action-buttons div.icon-start,
+.vs-dark .action-label.icon.runJobIcon,
-.hc-black ul.action-buttons div.icon-start {
+.hc-black .action-label.icon.runJobIcon {
-	display: inline-block;
-	height: 20px;
-	width: 20px;
 	background-image: url('../common/media/start.svg');
-	background-repeat: no-repeat;
+	padding-right: 5px;
-	cursor: pointer;
 }
 
-.vs ul.action-buttons .icon-stop,
+.vs .action-label.icon.stopJobIcon,
-.vs-dark ul.action-buttons .icon-stop,
+.vs-dark .action-label.icon.stopJobIcon,
-.hc-black ul.action-buttons .icon-stop {
+.hc-black .action-label.icon.stopJobIcon {
-	display: inline-block;
 	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;
-}
+}
+
+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;
+}
+
+
+
+

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<boolean> {
+		let jobName = context.agentJobInfo.name;
+		let ownerUri = context.ownerUri;
+		return new TPromise<boolean>((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<boolean> {
+		let jobName = context.agentJobInfo.name;
+		let ownerUri = context.ownerUri;
+		return new TPromise<boolean>((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);
+				}
+			});
+		});
+	}
+}