Agent Tab panel visibility check base class (#1829)

* Agent Tab panel visibility check base class

* Add context menu to tab panel tables for Edit and Delete

src/sql/parts/jobManagement/common/jobManagementUtilities.ts

@@ -7,7 +7,7 @@
 
 import * as nls from 'vs/nls';
 
-export class AgentJobUtilities {
+export class JobManagementUtilities {
 
 	public static startIconClass: string = 'action-label icon runJobIcon';
 	public static stopIconClass: string = 'action-label icon stopJobIcon';
@@ -63,8 +63,8 @@ export class AgentJobUtilities {
 	}
 
 	public static getActionIconClassName(startIcon: HTMLElement, stopIcon: HTMLElement, executionStatus: number) {
-		this.setRunnable(startIcon, AgentJobUtilities.startIconClass.length);
+		this.setRunnable(startIcon, JobManagementUtilities.startIconClass.length);
-		this.setRunnable(stopIcon, AgentJobUtilities.stopIconClass.length);
+		this.setRunnable(stopIcon, JobManagementUtilities.stopIconClass.length);
 		switch (executionStatus) {
 			case(1): // executing
 				startIcon.className += ' non-runnable';

src/sql/parts/jobManagement/views/alertsView.component.ts

@@ -12,17 +12,25 @@ import 'vs/css!../common/media/jobs';
 import 'vs/css!sql/media/icons/common-icons';
 import 'vs/css!sql/base/browser/ui/table/media/table';
 
-import { Component, Inject, forwardRef, ElementRef, ChangeDetectorRef, ViewChild, AfterContentChecked } from '@angular/core';
+
-import * as sqlops from 'sqlops';
+import * as dom from 'vs/base/browser/dom';
 import * as nls from 'vs/nls';
+import * as sqlops from 'sqlops';
+import { Component, Inject, forwardRef, ElementRef, ChangeDetectorRef, ViewChild, OnInit } from '@angular/core';
 import { Table } from 'sql/base/browser/ui/table/table';
 import { AgentViewComponent } from 'sql/parts/jobManagement/agent/agentView.component';
-import * as dom from 'vs/base/browser/dom';
+import { IJobManagementService } from 'sql/parts/jobManagement/common/interfaces';
-import { IJobManagementService } from '../common/interfaces';
+import { JobManagementView } from 'sql/parts/jobManagement/views/jobManagementView';
 import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { TabChild } from 'sql/base/browser/ui/panel/tab.component';
 import { ICommandService } from 'vs/platform/commands/common/commands';
+import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
+import { IAction } from 'vs/base/common/actions';
+import { TPromise } from 'vs/base/common/winjs.base';
+import { EditAlert, DeleteAlert } from 'sql/parts/jobManagement/views/jobActions';
+import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
+
 export const VIEW_SELECTOR: string = 'jobalertsview-component';
 export const ROW_HEIGHT: number = 45;
 
@@ -31,7 +39,10 @@ export const ROW_HEIGHT: number = 45;
 	templateUrl: decodeURI(require.toUrl('./alertsView.component.html')),
 	providers: [{ provide: TabChild, useExisting: forwardRef(() => AlertsViewComponent) }],
 })
-export class AlertsViewComponent implements AfterContentChecked {
+export class AlertsViewComponent extends JobManagementView implements OnInit {
+
+	private NewAlertText: string = nls.localize('jobAlertToolbar-NewJob', "New Alert");
+	private RefreshText: string = nls.localize('jobAlertToolbar-Refresh', "Refresh");
 
 	private columns: Array<Slick.Column<any>> = [
 		{ name: nls.localize('jobAlertColumns.name', 'Name'), field: 'name', width: 200, id: 'name' },
@@ -44,25 +55,17 @@ export class AlertsViewComponent implements AfterContentChecked {
 	private options: Slick.GridOptions<any> = {
 		syncColumnCellResize: true,
 		enableColumnReorder: false,
-		rowHeight: 45,
+		rowHeight: ROW_HEIGHT,
 		enableCellNavigation: true,
 		editable: false
 	};
 
 	private dataView: any;
+	private _isCloud: boolean;
 
 	@ViewChild('jobalertsgrid') _gridEl: ElementRef;
-	private isVisible: boolean = false;
-	private isInitialized: boolean = false;
-	private isRefreshing: boolean = false;
-	private _table: Table<any>;
-	public alerts: sqlops.AgentAlertInfo[];
-	private _serverName: string;
-	private _isCloud: boolean;
-	private _showProgressWheel: boolean;
 
-	private NewAlertText: string = nls.localize('jobAlertToolbar-NewJob', "New Alert");
+	public alerts: sqlops.AgentAlertInfo[];
-	private RefreshText: string = nls.localize('jobAlertToolbar-Refresh', "Refresh");
 
 	constructor(
 		@Inject(forwardRef(() => CommonServiceInterface)) private _dashboardService: CommonServiceInterface,
@@ -71,34 +74,24 @@ export class AlertsViewComponent implements AfterContentChecked {
 		@Inject(forwardRef(() => AgentViewComponent)) private _agentViewComponent: AgentViewComponent,
 		@Inject(IJobManagementService) private _jobManagementService: IJobManagementService,
 		@Inject(IThemeService) private _themeService: IThemeService,
-		@Inject(ICommandService) private _commandService: ICommandService
+		@Inject(ICommandService) private _commandService: ICommandService,
-	) {
+		@Inject(IContextMenuService) contextMenuService: IContextMenuService,
+		@Inject(IKeybindingService)  keybindingService: IKeybindingService) {
+		super(contextMenuService, keybindingService);
 		this._isCloud = this._dashboardService.connectionManagementService.connectionInfo.serverInfo.isCloud;
 	}
 
+	ngOnInit(){
+		// set base class elements
+		this._visibilityElement = this._gridEl;
+		this._parentComponent = this._agentViewComponent;
+	 }
+
 	public layout() {
 		this._table.layout(new dom.Dimension(dom.getContentWidth(this._gridEl.nativeElement), dom.getContentHeight(this._gridEl.nativeElement)));
 	}
 
-	ngAfterContentChecked() {
+	onFirstVisible() {
-		if (this.isVisible === false && this._gridEl.nativeElement.offsetParent !== null) {
-			this.isVisible = true;
-			if (!this.isInitialized) {
-				this._showProgressWheel = true;
-				this.onFirstVisible(false);
-				this.isInitialized = true;
-			}
-		} else if (this.isVisible === true && this._agentViewComponent.refresh === true) {
-			this._showProgressWheel = true;
-			this.onFirstVisible(false);
-			this.isRefreshing = true;
-			this._agentViewComponent.refresh = false;
-		} else if (this.isVisible === true && this._gridEl.nativeElement.offsetParent === null) {
-			this.isVisible = false;
-		}
-	}
-
-	onFirstVisible(cached?: boolean) {
 		let self = this;
 		let columns = this.columns.map((column) => {
 			column.rerenderOnResize = true;
@@ -118,11 +111,22 @@ export class AlertsViewComponent implements AfterContentChecked {
 		this._table = new Table(this._gridEl.nativeElement, undefined, columns, this.options);
 		this._table.grid.setData(this.dataView, true);
 
+		this._register(this._table.onContextMenu((e: DOMEvent, data: Slick.OnContextMenuEventArgs<any>) => {
+			self.openContextMenu(e);
+		}));
+
 		let ownerUri: string = this._dashboardService.connectionManagementService.connectionInfo.ownerUri;
 		this._jobManagementService.getAlerts(ownerUri).then((result) => {
 			if (result && result.alerts) {
 				self.alerts = result.alerts;
 				self.onAlertsAvailable(result.alerts);
+			} else {
+				// TODO: handle error
+			}
+
+			this._showProgressWheel = false;
+			if (this.isVisible) {
+				this._cd.detectChanges();
 			}
 		});
 	}
@@ -144,9 +148,13 @@ export class AlertsViewComponent implements AfterContentChecked {
 		this.dataView.endUpdate();
 		this._table.autosizeColumns();
 		this._table.resizeCanvas();
+	}
 
-		this._showProgressWheel = false;
+	protected getTableActions(): TPromise<IAction[]> {
-		this._cd.detectChanges();
+		let actions: IAction[] = [];
+		actions.push(new EditAlert(EditAlert.ID, EditAlert.LABEL));
+		actions.push(new DeleteAlert(DeleteAlert.ID, DeleteAlert.LABEL));
+		return TPromise.as(actions);
 	}
 
 	private openCreateAlertDialog() {

src/sql/parts/jobManagement/views/jobActions.ts

@@ -114,3 +114,132 @@ export class NewStepAction extends Action {
 		});
 	}
 }
+
+export class EditJob extends Action {
+	public static ID = 'jobaction.editJob';
+	public static LABEL = nls.localize('jobaction.editJob', "Edit Job");
+
+	constructor(
+		id: string,
+		label: string
+	) {
+		super(id, label);
+	}
+
+	public run(info: any): TPromise<boolean> {
+		return TPromise.as(true);
+	}
+}
+
+export class DeleteJob extends Action {
+	public static ID = 'jobaction.deleteJob';
+	public static LABEL = nls.localize('jobaction.deleteJob', "Delete Job");
+
+	constructor(
+		id: string,
+		label: string
+	) {
+		super(id, label);
+	}
+
+	public run(info: any): TPromise<boolean> {
+		return TPromise.as(true);
+	}
+}
+
+export class EditAlert extends Action {
+	public static ID = 'jobaction.editAlert';
+	public static LABEL = nls.localize('jobaction.editAlert', "Edit Alert");
+
+	constructor(
+		id: string,
+		label: string
+	) {
+		super(id, label);
+	}
+
+	public run(info: any): TPromise<boolean> {
+		return TPromise.as(true);
+	}
+}
+
+export class DeleteAlert extends Action {
+	public static ID = 'jobaction.deleteAlert';
+	public static LABEL = nls.localize('jobaction.deleteAlert', "Delete Alert");
+
+	constructor(
+		id: string,
+		label: string
+	) {
+		super(id, label);
+	}
+
+	public run(info: any): TPromise<boolean> {
+		return TPromise.as(true);
+	}
+}
+
+export class EditOperator extends Action {
+	public static ID = 'jobaction.editAlert';
+	public static LABEL = nls.localize('jobaction.editOperator', "Edit Operator");
+
+	constructor(
+		id: string,
+		label: string
+	) {
+		super(id, label);
+	}
+
+	public run(info: any): TPromise<boolean> {
+		return TPromise.as(true);
+	}
+}
+
+export class DeleteOperator extends Action {
+	public static ID = 'jobaction.deleteOperator';
+	public static LABEL = nls.localize('jobaction.deleteOperator', "Delete Operator");
+
+	constructor(
+		id: string,
+		label: string
+	) {
+		super(id, label);
+	}
+
+	public run(info: any): TPromise<boolean> {
+		return TPromise.as(true);
+	}
+}
+
+
+export class EditProxy extends Action {
+	public static ID = 'jobaction.editProxy';
+	public static LABEL = nls.localize('jobaction.editProxy', "Edit Proxy");
+
+	constructor(
+		id: string,
+		label: string
+	) {
+		super(id, label);
+	}
+
+	public run(info: any): TPromise<boolean> {
+		return TPromise.as(true);
+	}
+}
+
+export class DeleteProxy extends Action {
+	public static ID = 'jobaction.deleteOperator';
+	public static LABEL = nls.localize('jobaction.deleteProxy', "Delete Proxy");
+
+	constructor(
+		id: string,
+		label: string
+	) {
+		super(id, label);
+	}
+
+	public run(info: any): TPromise<boolean> {
+		return TPromise.as(true);
+	}
+}

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

@@ -10,8 +10,8 @@ import * as sqlops from 'sqlops';
 import { Taskbar, ITaskbarContent } from 'sql/base/browser/ui/taskbar/taskbar';
 import { RunJobAction, StopJobAction, NewStepAction } from 'sql/parts/jobManagement/views/jobActions';
 import { JobCacheObject } from 'sql/parts/jobManagement/common/jobManagementService';
-import { AgentJobUtilities } from '../common/agentJobUtilities';
+import { JobManagementUtilities } from 'sql/parts/jobManagement/common/jobManagementUtilities';
-import { IJobManagementService } from '../common/interfaces';
+import { IJobManagementService } from 'sql/parts/jobManagement/common/interfaces';
 import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
 import { AgentViewComponent } from 'sql/parts/jobManagement/agent/agentView.component';
 import { JobHistoryController, JobHistoryDataSource,
@@ -209,8 +209,8 @@ export class JobHistoryComponent extends Disposable implements OnInit {
 				self._stepRows = self.agentJobHistoryInfo.steps.map(step => {
 					let stepViewRow = new JobStepsViewRow();
 					stepViewRow.message = step.message;
-					stepViewRow.runStatus = AgentJobUtilities.convertToStatusString(step.runStatus);
+					stepViewRow.runStatus = JobManagementUtilities.convertToStatusString(step.runStatus);
-					self._runStatus = AgentJobUtilities.convertToStatusString(self.agentJobHistoryInfo.runStatus);
+					self._runStatus = JobManagementUtilities.convertToStatusString(self.agentJobHistoryInfo.runStatus);
 					stepViewRow.stepName = step.stepName;
 					stepViewRow.stepID = step.stepId.toString();
 					return stepViewRow;
@@ -253,7 +253,7 @@ export class JobHistoryComponent extends Disposable implements OnInit {
 	private convertToJobHistoryRow(historyInfo: sqlops.AgentJobHistoryInfo): JobHistoryRow {
 		let jobHistoryRow = new JobHistoryRow();
 		jobHistoryRow.runDate = this.formatTime(historyInfo.runDate);
-		jobHistoryRow.runStatus = AgentJobUtilities.convertToStatusString(historyInfo.runStatus);
+		jobHistoryRow.runStatus = JobManagementUtilities.convertToStatusString(historyInfo.runStatus);
 		jobHistoryRow.instanceID = historyInfo.instanceId;
 		return jobHistoryRow;
 	}
@@ -269,7 +269,7 @@ export class JobHistoryComponent extends Disposable implements OnInit {
 	private setActions(): void {
 		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);
+		JobManagementUtilities.getActionIconClassName(startIcon, stopIcon, this.agentJobInfo.currentExecutionStatus);
 	}
 
 

src/sql/parts/jobManagement/views/jobManagementView.ts

@@ -0,0 +1,82 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { ElementRef, AfterContentChecked } from '@angular/core';
+import { AgentViewComponent } from 'sql/parts/jobManagement/agent/agentView.component';
+import { IAction } from 'vs/base/common/actions';
+import { ResolvedKeybinding } from 'vs/base/common/keyCodes';
+import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
+import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
+import { Disposable } from 'vs/base/common/lifecycle';
+import { Table } from 'sql/base/browser/ui/table/table';
+import { TPromise } from 'vs/base/common/winjs.base';
+
+export abstract class JobManagementView extends Disposable implements AfterContentChecked {
+	protected isVisible: boolean = false;
+	protected isInitialized: boolean = false;
+	protected isRefreshing: boolean = false;
+	protected _showProgressWheel: boolean;
+	protected _visibilityElement: ElementRef;
+	protected _parentComponent: AgentViewComponent;
+	protected _table: Table<any>;
+
+	constructor(
+		protected _contextMenuService: IContextMenuService,
+		protected _keybindingService: IKeybindingService) {
+		super();
+	}
+
+	ngAfterContentChecked() {
+		if (this._visibilityElement && this._parentComponent) {
+			if (this.isVisible === false && this._visibilityElement.nativeElement.offsetParent !== null) {
+				this.isVisible = true;
+				if (!this.isInitialized) {
+					this._showProgressWheel = true;
+					this.onFirstVisible();
+					this.isInitialized = true;
+				}
+			} else if (this.isVisible === true && this._parentComponent.refresh === true) {
+				this._showProgressWheel = true;
+				this.onFirstVisible();
+				this.isRefreshing = true;
+				this._parentComponent.refresh = false;
+			} else if (this.isVisible === true && this._visibilityElement.nativeElement.offsetParent === null) {
+				this.isVisible = false;
+			}
+		}
+	}
+
+	abstract onFirstVisible();
+
+	protected openContextMenu(event): void {
+		let actions = this.getTableActions();
+		if (actions) {
+			let grid = this._table.grid;
+			let rowIndex = grid.getCellFromEvent(event).row;
+
+			let actionContext= {
+				rowIndex: rowIndex
+			};
+
+			let anchor = { x: event.pageX + 1, y: event.pageY };
+
+			this._contextMenuService.showContextMenu({
+				getAnchor: () => anchor,
+				getActions: () => actions,
+				getKeyBinding: (action) => this._keybindingFor(action),
+				getActionsContext: () => (actionContext)
+			});
+		}
+	}
+
+	protected _keybindingFor(action: IAction): ResolvedKeybinding {
+		var [kb] = this._keybindingService.lookupKeybindings(action.id);
+		return kb;
+	}
+
+	protected getTableActions(): TPromise<IAction[]> {
+		return undefined;
+	}
+}

src/sql/parts/jobManagement/views/jobStepsViewTree.ts

@@ -3,18 +3,15 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import {
+
-	NewQueryAction, ScriptSelectAction, EditDataAction, ScriptCreateAction, ScriptExecuteAction, ScriptAlterAction,
+import * as DOM from 'vs/base/browser/dom';
-	BackupAction, ManageActionContext, BaseActionContext, ManageAction, RestoreAction
-} from 'sql/workbench/common/actions';
 import * as tree from 'vs/base/parts/tree/browser/tree';
 import * as TreeDefaults from 'vs/base/parts/tree/browser/treeDefaults';
 import { Promise, TPromise } from 'vs/base/common/winjs.base';
 import { IMouseEvent } from 'vs/base/browser/mouseEvent';
 import { generateUuid } from 'vs/base/common/uuid';
-import * as DOM from 'vs/base/browser/dom';
 import { AgentJobHistoryInfo } from 'sqlops';
-import { AgentJobUtilities } from 'sql/parts/jobManagement/common/agentJobUtilities';
+import { JobManagementUtilities } from 'sql/parts/jobManagement/common/jobManagementUtilities';
 
 export class JobStepsViewRow {
 	public stepID: string;
@@ -99,7 +96,7 @@ export class JobStepsViewRenderer implements tree.IRenderer {
 	private _statusIcon: HTMLElement;
 
 	public getHeight(tree: tree.ITree, element: JobStepsViewRow): number {
-		return 22 * Math.ceil(element.message.length/AgentJobUtilities.jobMessageLength);
+		return 22 * Math.ceil(element.message.length/JobManagementUtilities.jobMessageLength);
 	}
 
 	public getTemplateId(tree: tree.ITree, element: JobStepsViewRow | JobStepsViewModel): string {

src/sql/parts/jobManagement/views/jobsView.component.ts

@@ -12,22 +12,28 @@ import 'vs/css!../common/media/jobs';
 import 'vs/css!sql/media/icons/common-icons';
 import 'vs/css!sql/base/browser/ui/table/media/table';
 
-import { Component, Inject, forwardRef, ElementRef, ChangeDetectorRef, ViewChild, AfterContentChecked } from '@angular/core';
 import * as sqlops from 'sqlops';
-import * as vscode from 'vscode';
 import * as nls from 'vs/nls';
+import * as dom from 'vs/base/browser/dom';
+import { Component, Inject, forwardRef, ElementRef, ChangeDetectorRef, ViewChild, AfterContentChecked, OnInit } from '@angular/core';
 import { Table } from 'sql/base/browser/ui/table/table';
 import { AgentViewComponent } from 'sql/parts/jobManagement/agent/agentView.component';
 import { RowDetailView } from 'sql/base/browser/ui/table/plugins/rowdetailview';
 import { JobCacheObject } from 'sql/parts/jobManagement/common/jobManagementService';
-import { AgentJobUtilities } from 'sql/parts/jobManagement/common/agentJobUtilities';
+import { JobManagementUtilities } from 'sql/parts/jobManagement/common/jobManagementUtilities';
 import { HeaderFilter } from 'sql/base/browser/ui/table/plugins/headerFilter.plugin';
-import * as dom from 'vs/base/browser/dom';
+import { IJobManagementService } from 'sql/parts/jobManagement/common/interfaces';
-import { IJobManagementService } from '../common/interfaces';
+import { JobManagementView } from 'sql/parts/jobManagement/views/jobManagementView';
 import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { TabChild } from 'sql/base/browser/ui/panel/tab.component';
 import { ICommandService } from 'vs/platform/commands/common/commands';
+import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
+import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
+import { TPromise } from 'vs/base/common/winjs.base';
+import { IAction } from 'vs/base/common/actions';
+import { EditJob, DeleteJob } from 'sql/parts/jobManagement/views/jobActions';
+
 export const JOBSVIEW_SELECTOR: string = 'jobsview-component';
 export const ROW_HEIGHT: number = 45;
 
@@ -37,11 +43,10 @@ export const ROW_HEIGHT: number = 45;
 	providers: [{ provide: TabChild, useExisting: forwardRef(() => JobsViewComponent) }],
 })
 
-export class JobsViewComponent implements AfterContentChecked {
+export class JobsViewComponent extends JobManagementView implements OnInit  {
 
-	private _jobCacheObject: JobCacheObject;
+	private NewJobText: string = nls.localize("jobsToolbar-NewJob", "New Job");
-
+	private RefreshText: string = nls.localize("jobsToolbar-Refresh", "Refresh");
-	private _disposables = new Array<vscode.Disposable>();
 
 	private columns: Array<Slick.Column<any>> = [
 		{
@@ -68,36 +73,21 @@ export class JobsViewComponent implements AfterContentChecked {
 		}
 	];
 
-
+	private _jobCacheObject: JobCacheObject;
-	private options: Slick.GridOptions<any> = {
-		syncColumnCellResize: true,
-		enableColumnReorder: false,
-		rowHeight: 45,
-		enableCellNavigation: true,
-		editable: true
-	};
-
 	private rowDetail: RowDetailView;
 	private filterPlugin: any;
 	private dataView: any;
-
-	@ViewChild('jobsgrid') _gridEl: ElementRef;
-	private isVisible: boolean = false;
-	private isInitialized: boolean = false;
-	private isRefreshing: boolean = false;
-	private _table: Table<any>;
-	public jobs: sqlops.AgentJobInfo[];
-	public jobHistories: { [jobId: string]: sqlops.AgentJobHistoryInfo[]; } = Object.create(null);
 	private _serverName: string;
 	private _isCloud: boolean;
-	private _showProgressWheel: boolean;
 	private filterStylingMap: { [columnName: string]: [any]; } = {};
 	private filterStack = ['start'];
 	private filterValueMap: { [columnName: string]: string[]; } = {};
 	private sortingStylingMap: { [columnName: string]: any; } = {};
 
-	private NewJobText: string = nls.localize("jobsToolbar-NewJob", "New Job");
+	public jobs: sqlops.AgentJobInfo[];
-	private RefreshText: string = nls.localize("jobsToolbar-Refresh", "Refresh");
+	public jobHistories: { [jobId: string]: sqlops.AgentJobHistoryInfo[]; } = Object.create(null);
+
+	@ViewChild('jobsgrid') _gridEl: ElementRef;
 
 	constructor(
 		@Inject(forwardRef(() => CommonServiceInterface)) private _dashboardService: CommonServiceInterface,
@@ -106,8 +96,11 @@ export class JobsViewComponent implements AfterContentChecked {
 		@Inject(forwardRef(() => AgentViewComponent)) private _agentViewComponent: AgentViewComponent,
 		@Inject(IJobManagementService) private _jobManagementService: IJobManagementService,
 		@Inject(IThemeService) private _themeService: IThemeService,
-		@Inject(ICommandService) private _commandService: ICommandService
+		@Inject(ICommandService) private _commandService: ICommandService,
+		@Inject(IContextMenuService) contextMenuService: IContextMenuService,
+		@Inject(IKeybindingService)  keybindingService: IKeybindingService
 	) {
+		super(contextMenuService, keybindingService);
 		let jobCacheObjectMap = this._jobManagementService.jobCacheObjectMap;
 		this._serverName = _dashboardService.connectionManagementService.connectionInfo.connectionProfile.serverName;
 		let jobCache = jobCacheObjectMap[this._serverName];
@@ -121,43 +114,24 @@ export class JobsViewComponent implements AfterContentChecked {
 		this._isCloud = this._dashboardService.connectionManagementService.connectionInfo.serverInfo.isCloud;
 	}
 
+	ngOnInit(){
+		// set base class elements
+		this._visibilityElement = this._gridEl;
+		this._parentComponent = this._agentViewComponent;
+	}
+
 	public layout() {
 		this._table.layout(new dom.Dimension(dom.getContentWidth(this._gridEl.nativeElement), dom.getContentHeight(this._gridEl.nativeElement)));
 	}
 
-	ngAfterContentChecked() {
+	onFirstVisible() {
-		if (this.isVisible === false && this._gridEl.nativeElement.offsetParent !== null) {
+		let self = this;
-			this.isVisible = true;
+		let cached: boolean = false;
-			if (!this.isInitialized) {
 		if (this._jobCacheObject.serverName === this._serverName && this._jobCacheObject.jobs.length > 0) {
-					this._showProgressWheel = true;
+			cached = true;
 			this.jobs = this._jobCacheObject.jobs;
-					this.onFirstVisible(true);
-					this.isInitialized = true;
-				} else {
-					this._showProgressWheel = true;
-					this.onFirstVisible(false);
-					this.isInitialized = true;
-				}
-			}
-		} else if (this.isVisible === true && this._agentViewComponent.refresh === true) {
-			this._showProgressWheel = true;
-			this.onFirstVisible(false);
-			this.isRefreshing = true;
-			this._agentViewComponent.refresh = false;
-		} /*else if (this.isVisible === true && this._agentViewComponent.refresh === false) {
-			if (!this.isRefreshing) {
-				this._showProgressWheel = true;
-				this.onFirstVisible(true);
-			}
-			this.isRefreshing = false;
-		}*/ else if (this.isVisible === true && this._gridEl.nativeElement.offsetParent === null) {
-			this.isVisible = false;
-		}
 		}
 
-	onFirstVisible(cached?: boolean) {
-		let self = this;
 		let columns = this.columns.map((column) => {
 			column.rerenderOnResize = true;
 			return column;
@@ -184,10 +158,13 @@ export class JobsViewComponent implements AfterContentChecked {
 		});
 		this.rowDetail = rowDetail;
 		columns.unshift(this.rowDetail.getColumnDefinition());
+
 		let filterPlugin = new HeaderFilter({}, this._themeService);
 		this.filterPlugin = filterPlugin;
+
 		$(this._gridEl.nativeElement).empty();
-		this._table = new Table(this._gridEl.nativeElement, undefined, columns, this.options);
+
+		this._table = new Table(this._gridEl.nativeElement, undefined, columns, options);
 		this._table.grid.setData(this.dataView, true);
 		this._table.grid.onClick.subscribe((e, args) => {
 			let job = self.getJob(args);
@@ -195,8 +172,17 @@ export class JobsViewComponent implements AfterContentChecked {
 			self._agentViewComponent.agentJobInfo = job;
 			self._agentViewComponent.showHistory = true;
 		});
+
+		this._register(this._table.onContextMenu((e: DOMEvent, data: Slick.OnContextMenuEventArgs<any>) => {
+			self.openContextMenu(e);
+		}));
+
 		if (cached && this._agentViewComponent.refresh !== true) {
 			this.onJobsAvailable(null);
+			this._showProgressWheel = false;
+			if (this.isVisible) {
+				this._cd.detectChanges();
+			}
 		} else {
 			let ownerUri: string = this._dashboardService.connectionManagementService.connectionInfo.ownerUri;
 			this._jobManagementService.getJobs(ownerUri).then((result) => {
@@ -204,6 +190,13 @@ export class JobsViewComponent implements AfterContentChecked {
 					self.jobs = result.jobs;
 					self._jobCacheObject.jobs = self.jobs;
 					self.onJobsAvailable(result.jobs);
+				} else {
+					// TODO: handle error
+				}
+
+				this._showProgressWheel = false;
+				if (this.isVisible) {
+					this._cd.detectChanges();
 				}
 			});
 		}
@@ -222,14 +215,14 @@ export class JobsViewComponent implements AfterContentChecked {
 					id: job.jobId,
 					jobId: job.jobId,
 					name: job.name,
-					lastRun: AgentJobUtilities.convertToLastRun(job.lastRun),
+					lastRun: JobManagementUtilities.convertToLastRun(job.lastRun),
-					nextRun: AgentJobUtilities.convertToNextRun(job.nextRun),
+					nextRun: JobManagementUtilities.convertToNextRun(job.nextRun),
-					enabled: AgentJobUtilities.convertToResponse(job.enabled),
+					enabled: JobManagementUtilities.convertToResponse(job.enabled),
-					currentExecutionStatus: AgentJobUtilities.convertToExecutionStatusString(job.currentExecutionStatus),
+					currentExecutionStatus: JobManagementUtilities.convertToExecutionStatusString(job.currentExecutionStatus),
 					category: job.category,
-					runnable: AgentJobUtilities.convertToResponse(job.runnable),
+					runnable: JobManagementUtilities.convertToResponse(job.runnable),
-					hasSchedule: AgentJobUtilities.convertToResponse(job.hasSchedule),
+					hasSchedule: JobManagementUtilities.convertToResponse(job.hasSchedule),
-					lastRunOutcome: AgentJobUtilities.convertToStatusString(job.lastRunOutcome)
+					lastRunOutcome: JobManagementUtilities.convertToStatusString(job.lastRunOutcome)
 				};
 			});
 		}
@@ -326,6 +319,7 @@ export class JobsViewComponent implements AfterContentChecked {
 				this.expandJobs(false);
 			}
 		});
+
 		this.filterPlugin.onCommand.subscribe((e, args: any) => {
 			this.columnSort(args.column.name, args.command === 'sort-asc');
 		});
@@ -345,11 +339,6 @@ export class JobsViewComponent implements AfterContentChecked {
 			let currentTarget = e.currentTarget;
 			currentTarget.title = currentTarget.innerText;
 		});
-		this._showProgressWheel = false;
-
-		if (this.isVisible) {
-			this._cd.detectChanges();
-		}
 
 		const self = this;
 		$(window).resize(() => {
@@ -362,6 +351,7 @@ export class JobsViewComponent implements AfterContentChecked {
 				self._table.resizeCanvas();
 			}
 		});
+
 		this._table.grid.onColumnsResized.subscribe((e, data: any) => {
 			let nameWidth: number = data.grid.getColumnWidths()[1];
 			// adjust job name when resized
@@ -376,6 +366,7 @@ export class JobsViewComponent implements AfterContentChecked {
 				self.createJobChart(job.jobId, previousRuns);
 			});
 		});
+
 		$('#jobsDiv .jobview-grid .monaco-table .slick-viewport .grid-canvas .ui-widget-content.slick-row').hover((e1) =>
 			this.highlightErrorRows(e1), (e2) => this.hightlightNonErrorRows(e2));
 
@@ -383,6 +374,7 @@ export class JobsViewComponent implements AfterContentChecked {
 			$('#jobsDiv .jobview-grid .monaco-table .slick-viewport .grid-canvas .ui-widget-content.slick-row').hover((e1) =>
 				this.highlightErrorRows(e1), (e2) => this.hightlightNonErrorRows(e2));
 		});
+
 		// cache the dataview for future use
 		this._jobCacheObject.dataView = this.dataView;
 		this.filterValueMap['start'] = [[], this.dataView.getItems()];
@@ -560,7 +552,7 @@ export class JobsViewComponent implements AfterContentChecked {
 	private checkPreviousFilters(item): boolean {
 		for (let column in this.filterValueMap) {
 			if (column !== 'start' && this.filterValueMap[column][0].length > 0) {
-				if (!_.contains(this.filterValueMap[column][0], item[AgentJobUtilities.convertColNameToField(column)])) {
+				if (!_.contains(this.filterValueMap[column][0], item[JobManagementUtilities.convertColNameToField(column)])) {
 					return false;
 				}
 			}
@@ -647,7 +639,7 @@ export class JobsViewComponent implements AfterContentChecked {
 		}
 		let maxDuration: number = 0;
 		jobHistories.forEach(history => {
-			let historyDuration = AgentJobUtilities.convertDurationToSeconds(history.runDuration);
+			let historyDuration = JobManagementUtilities.convertDurationToSeconds(history.runDuration);
 			if (historyDuration > maxDuration) {
 				maxDuration = historyDuration;
 			}
@@ -657,7 +649,7 @@ export class JobsViewComponent implements AfterContentChecked {
 		let chartHeights = [];
 		for (let i = 0; i < jobHistories.length; i++) {
 			let duration = jobHistories[i].runDuration;
-			let chartHeight = (maxBarHeight * AgentJobUtilities.convertDurationToSeconds(duration)) / maxDuration;
+			let chartHeight = (maxBarHeight * JobManagementUtilities.convertDurationToSeconds(duration)) / maxDuration;
 			chartHeights.push(`${chartHeight}px`);
 		}
 		return chartHeights;
@@ -829,6 +821,13 @@ export class JobsViewComponent implements AfterContentChecked {
 		}
 	}
 
+	protected getTableActions(): TPromise<IAction[]> {
+		let actions: IAction[] = [];
+		actions.push(new EditJob(EditJob.ID, EditJob.LABEL));
+		actions.push(new DeleteJob(DeleteJob.ID, DeleteJob.LABEL));
+		return TPromise.as(actions);
+	}
+
 	private openCreateJobDialog() {
 		let ownerUri: string = this._dashboardService.connectionManagementService.connectionInfo.ownerUri;
 		this._commandService.executeCommand('agent.openCreateJobDialog', ownerUri);

src/sql/parts/jobManagement/views/operatorsView.component.ts

@@ -12,7 +12,7 @@ import 'vs/css!../common/media/jobs';
 import 'vs/css!sql/media/icons/common-icons';
 import 'vs/css!sql/base/browser/ui/table/media/table';
 
-import { Component, Inject, forwardRef, ElementRef, ChangeDetectorRef, ViewChild, AfterContentChecked } from '@angular/core';
+import { Component, Inject, forwardRef, ElementRef, ChangeDetectorRef, ViewChild, OnInit } from '@angular/core';
 import * as sqlops from 'sqlops';
 import * as nls from 'vs/nls';
 import { Table } from 'sql/base/browser/ui/table/table';
@@ -23,6 +23,12 @@ import { CommonServiceInterface } from 'sql/services/common/commonServiceInterfa
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { TabChild } from 'sql/base/browser/ui/panel/tab.component';
 import { ICommandService } from 'vs/platform/commands/common/commands';
+import { JobManagementView } from 'sql/parts/jobManagement/views/jobManagementView';
+import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
+import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
+import { TPromise } from 'vs/base/common/winjs.base';
+import { IAction } from 'vs/base/common/actions';
+import { EditOperator, DeleteOperator } from 'sql/parts/jobManagement/views/jobActions';
 export const VIEW_SELECTOR: string = 'joboperatorsview-component';
 export const ROW_HEIGHT: number = 45;
 
@@ -32,7 +38,10 @@ export const ROW_HEIGHT: number = 45;
 	providers: [{ provide: TabChild, useExisting: forwardRef(() => OperatorsViewComponent) }],
 })
 
-export class OperatorsViewComponent implements AfterContentChecked {
+export class OperatorsViewComponent extends JobManagementView implements OnInit {
+
+	private NewOperatorText: string = nls.localize('jobOperatorToolbar-NewItem', "New Operator");
+	private RefreshText: string = nls.localize('jobOperatorToolbar-Refresh', "Refresh");
 
 	private columns: Array<Slick.Column<any>> = [
 		{ name: nls.localize('jobOperatorsView.name', 'Name'), field: 'name', width: 200, id: 'name' },
@@ -49,19 +58,12 @@ export class OperatorsViewComponent implements AfterContentChecked {
 	};
 
 	private dataView: any;
-
-	@ViewChild('operatorsgrid') _gridEl: ElementRef;
-	private isVisible: boolean = false;
-	private isInitialized: boolean = false;
-	private isRefreshing: boolean = false;
-	private _table: Table<any>;
-	public operators: sqlops.AgentOperatorInfo[];
 	private _serverName: string;
 	private _isCloud: boolean;
-	private _showProgressWheel: boolean;
 
-	private NewOperatorText: string = nls.localize('jobOperatorToolbar-NewItem', "New Operator");
+	@ViewChild('operatorsgrid') _gridEl: ElementRef;
-	private RefreshText: string = nls.localize('jobOperatorToolbar-Refresh', "Refresh");
+
+	public operators: sqlops.AgentOperatorInfo[];
 
 	constructor(
 		@Inject(forwardRef(() => CommonServiceInterface)) private _dashboardService: CommonServiceInterface,
@@ -70,34 +72,25 @@ export class OperatorsViewComponent implements AfterContentChecked {
 		@Inject(forwardRef(() => AgentViewComponent)) private _agentViewComponent: AgentViewComponent,
 		@Inject(IJobManagementService) private _jobManagementService: IJobManagementService,
 		@Inject(IThemeService) private _themeService: IThemeService,
-		@Inject(ICommandService) private _commandService: ICommandService
+		@Inject(ICommandService) private _commandService: ICommandService,
+		@Inject(IContextMenuService) contextMenuService: IContextMenuService,
+		@Inject(IKeybindingService)  keybindingService: IKeybindingService
 	) {
+		super(contextMenuService, keybindingService);
 		this._isCloud = this._dashboardService.connectionManagementService.connectionInfo.serverInfo.isCloud;
 	}
 
+	ngOnInit(){
+		// set base class elements
+		this._visibilityElement = this._gridEl;
+		this._parentComponent = this._agentViewComponent;
+	}
+
 	public layout() {
 		this._table.layout(new dom.Dimension(dom.getContentWidth(this._gridEl.nativeElement), dom.getContentHeight(this._gridEl.nativeElement)));
 	}
 
-	ngAfterContentChecked() {
+	onFirstVisible() {
-		if (this.isVisible === false && this._gridEl.nativeElement.offsetParent !== null) {
-			this.isVisible = true;
-			if (!this.isInitialized) {
-				this._showProgressWheel = true;
-				this.onFirstVisible(false);
-				this.isInitialized = true;
-			}
-		} else if (this.isVisible === true && this._agentViewComponent.refresh === true) {
-			this._showProgressWheel = true;
-			this.onFirstVisible(false);
-			this.isRefreshing = true;
-			this._agentViewComponent.refresh = false;
-		} else if (this.isVisible === true && this._gridEl.nativeElement.offsetParent === null) {
-			this.isVisible = false;
-		}
-	}
-
-	onFirstVisible(cached?: boolean) {
 		let self = this;
 		let columns = this.columns.map((column) => {
 			column.rerenderOnResize = true;
@@ -117,11 +110,22 @@ export class OperatorsViewComponent implements AfterContentChecked {
 		this._table = new Table(this._gridEl.nativeElement, undefined, columns, this.options);
 		this._table.grid.setData(this.dataView, true);
 
+		this._register(this._table.onContextMenu((e: DOMEvent, data: Slick.OnContextMenuEventArgs<any>) => {
+			self.openContextMenu(e);
+		}));
+
 		let ownerUri: string = this._dashboardService.connectionManagementService.connectionInfo.ownerUri;
 		this._jobManagementService.getOperators(ownerUri).then((result) => {
 			if (result && result.operators) {
 				self.operators = result.operators;
 				self.onOperatorsAvailable(result.operators);
+			} else {
+				// TODO: handle error
+			}
+
+			this._showProgressWheel = false;
+			if (this.isVisible) {
+				this._cd.detectChanges();
 			}
 		});
 	}
@@ -141,9 +145,13 @@ export class OperatorsViewComponent implements AfterContentChecked {
 		this.dataView.endUpdate();
 		this._table.autosizeColumns();
 		this._table.resizeCanvas();
+	}
 
-		this._showProgressWheel = false;
+	protected getTableActions(): TPromise<IAction[]> {
-		this._cd.detectChanges();
+		let actions: IAction[] = [];
+		actions.push(new EditOperator(EditOperator.ID, EditOperator.LABEL));
+		actions.push(new DeleteOperator(DeleteOperator.ID, DeleteOperator.LABEL));
+		return TPromise.as(actions);
 	}
 
 	private openCreateOperatorDialog() {

src/sql/parts/jobManagement/views/proxiesView.component.ts

@@ -12,17 +12,24 @@ import 'vs/css!../common/media/jobs';
 import 'vs/css!sql/media/icons/common-icons';
 import 'vs/css!sql/base/browser/ui/table/media/table';
 
-import { Component, Inject, forwardRef, ElementRef, ChangeDetectorRef, ViewChild, AfterContentChecked } from '@angular/core';
+import * as dom from 'vs/base/browser/dom';
 import * as sqlops from 'sqlops';
 import * as nls from 'vs/nls';
+import { Component, Inject, forwardRef, ElementRef, ChangeDetectorRef, ViewChild, OnInit } from '@angular/core';
 import { Table } from 'sql/base/browser/ui/table/table';
 import { AgentViewComponent } from 'sql/parts/jobManagement/agent/agentView.component';
-import * as dom from 'vs/base/browser/dom';
+import { IJobManagementService } from 'sql/parts/jobManagement/common/interfaces';
-import { IJobManagementService } from '../common/interfaces';
+import { EditProxy, DeleteProxy } from 'sql/parts/jobManagement/views/jobActions';
 import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
-import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { TabChild } from 'sql/base/browser/ui/panel/tab.component';
+import { JobManagementView } from 'sql/parts/jobManagement/views/jobManagementView';
+import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
+import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
+import { TPromise } from 'vs/base/common/winjs.base';
+import { IAction } from 'vs/base/common/actions';
 import { ICommandService } from 'vs/platform/commands/common/commands';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
+
 export const VIEW_SELECTOR: string = 'jobproxiesview-component';
 export const ROW_HEIGHT: number = 45;
 
@@ -32,7 +39,10 @@ export const ROW_HEIGHT: number = 45;
 	providers: [{ provide: TabChild, useExisting: forwardRef(() => ProxiesViewComponent) }],
 })
 
-export class ProxiesViewComponent implements AfterContentChecked {
+export class ProxiesViewComponent extends JobManagementView implements OnInit {
+
+	private NewProxyText: string = nls.localize('jobProxyToolbar-NewItem', "New Proxy");
+	private RefreshText: string = nls.localize('jobProxyToolbar-Refresh', "Refresh");
 
 	private columns: Array<Slick.Column<any>> = [
 		{ name: nls.localize('jobProxiesView.accountName', 'Account Name'), field: 'accountName', width: 200, id: 'accountName' },
@@ -42,25 +52,18 @@ export class ProxiesViewComponent implements AfterContentChecked {
 	private options: Slick.GridOptions<any> = {
 		syncColumnCellResize: true,
 		enableColumnReorder: false,
-		rowHeight: 45,
+		rowHeight: ROW_HEIGHT,
 		enableCellNavigation: true,
 		editable: false
 	};
 
 	private dataView: any;
-
-	@ViewChild('proxiesgrid') _gridEl: ElementRef;
-	private isVisible: boolean = false;
-	private isInitialized: boolean = false;
-	private isRefreshing: boolean = false;
-	private _table: Table<any>;
-	public proxies: sqlops.AgentProxyInfo[];
 	private _serverName: string;
 	private _isCloud: boolean;
-	private _showProgressWheel: boolean;
 
-	private NewProxyText: string = nls.localize('jobProxyToolbar-NewItem', "New Proxy");
+	public proxies: sqlops.AgentProxyInfo[];
-	private RefreshText: string = nls.localize('jobProxyToolbar-Refresh', "Refresh");
+
+	@ViewChild('proxiesgrid') _gridEl: ElementRef;
 
 	constructor(
 		@Inject(forwardRef(() => CommonServiceInterface)) private _dashboardService: CommonServiceInterface,
@@ -69,34 +72,25 @@ export class ProxiesViewComponent implements AfterContentChecked {
 		@Inject(forwardRef(() => AgentViewComponent)) private _agentViewComponent: AgentViewComponent,
 		@Inject(IJobManagementService) private _jobManagementService: IJobManagementService,
 		@Inject(IThemeService) private _themeService: IThemeService,
-		@Inject(ICommandService) private _commandService: ICommandService
+		@Inject(ICommandService) private _commandService: ICommandService,
+		@Inject(IContextMenuService) contextMenuService: IContextMenuService,
+		@Inject(IKeybindingService)  keybindingService: IKeybindingService
 	) {
+		super(contextMenuService, keybindingService);
 		this._isCloud = this._dashboardService.connectionManagementService.connectionInfo.serverInfo.isCloud;
 	}
 
+	ngOnInit(){
+		// set base class elements
+		this._visibilityElement = this._gridEl;
+		this._parentComponent = this._agentViewComponent;
+	}
+
 	public layout() {
 		this._table.layout(new dom.Dimension(dom.getContentWidth(this._gridEl.nativeElement), dom.getContentHeight(this._gridEl.nativeElement)));
 	}
 
-	ngAfterContentChecked() {
+	onFirstVisible() {
-		if (this.isVisible === false && this._gridEl.nativeElement.offsetParent !== null) {
-			this.isVisible = true;
-			if (!this.isInitialized) {
-				this._showProgressWheel = true;
-				this.onFirstVisible(false);
-				this.isInitialized = true;
-			}
-		} else if (this.isVisible === true && this._agentViewComponent.refresh === true) {
-			this._showProgressWheel = true;
-			this.onFirstVisible(false);
-			this.isRefreshing = true;
-			this._agentViewComponent.refresh = false;
-		} else if (this.isVisible === true && this._gridEl.nativeElement.offsetParent === null) {
-			this.isVisible = false;
-		}
-	}
-
-	onFirstVisible(cached?: boolean) {
 		let self = this;
 		let columns = this.columns.map((column) => {
 			column.rerenderOnResize = true;
@@ -116,11 +110,22 @@ export class ProxiesViewComponent implements AfterContentChecked {
 		this._table = new Table(this._gridEl.nativeElement, undefined, columns, this.options);
 		this._table.grid.setData(this.dataView, true);
 
+		this._register(this._table.onContextMenu((e: DOMEvent, data: Slick.OnContextMenuEventArgs<any>) => {
+			self.openContextMenu(e);
+		}));
+
 		let ownerUri: string = this._dashboardService.connectionManagementService.connectionInfo.ownerUri;
 		this._jobManagementService.getProxies(ownerUri).then((result) => {
 			if (result && result.proxies) {
 				self.proxies = result.proxies;
 				self.onProxiesAvailable(result.proxies);
+			} else {
+				// TODO: handle error
+			}
+
+			this._showProgressWheel = false;
+			if (this.isVisible) {
+				this._cd.detectChanges();
 			}
 		});
 	}
@@ -139,9 +144,13 @@ export class ProxiesViewComponent implements AfterContentChecked {
 		this.dataView.endUpdate();
 		this._table.autosizeColumns();
 		this._table.resizeCanvas();
+	}
 
-		this._showProgressWheel = false;
+	protected getTableActions(): TPromise<IAction[]> {
-		this._cd.detectChanges();
+		let actions: IAction[] = [];
+		actions.push(new EditProxy(EditProxy.ID, EditProxy.LABEL));
+		actions.push(new DeleteProxy(DeleteProxy.ID, DeleteProxy.LABEL));
+		return TPromise.as(actions);
 	}
 
 	private openCreateProxyDialog() {