From b813ace79c05827e2b91d3d70f7d23aae07e46f9 Mon Sep 17 00:00:00 2001
From: Aasim Khan <aasimkhan30@gmail.com>
Date: Fri, 6 Sep 2019 17:27:41 -0700
Subject: [PATCH] Added opening latest notebook run to context menu from
 notebooks pane (#7066)

* added agent notebooks, notebook history view and view materialized notebook button

* Got a basic UI running for viewing notebook history

* made some changes to make UI look good

* Added new notebook dialog

* Added new notebook Dialog

* Added create notebook dialog

* Added edit and delete notebook job

* Added some notebook history features

* Added new notebook job icons, fixed a minor bug
in openmaterializednotebookAPI and added fixed the
schedule Picker API.

* Fixed Bugs in Notebook Grid expansion

* Fixed Notebook table highlighting and
grid generation is done using code.

* fixed some UI bugs

* Added changes to reflect sqltoolservice api

* Fixed some localize keys

* Made changes in the PR and added
ability to open Template Notebooks from
notebook history view.

* Added pin and renaming to notebook history

* made some library calls async

* fixed an import bug caused by merging from master

* Validation in NotebookJobDialog

* Added entry points for scheduling notebooks
on file explorer and notebook editor

* Handled no active connections and
a small bug in collapsing grid

* fix a bug in scheduling notebook from explorer
and toolbar

* setting up agent providers from connection now

* changed modals

* Reupload edited template

* Add dialog info, solved an edit bug and localized
UI strings.

* Bug fixes in UI, notebook renaming and
editing template on fly.

* fixed a bug that failed editing notebook jobs from notebook jobs table

* Fixed a cyclic dependency, made strings const and
some other changes in the PR

* Made some cyclic dependency and some fixes from PR

* made some changes mentioned in the PR

* Changed storage database health text

* Changed the sqltoolservice version to the point to the latest build.

* Added open Latest notebook notebook run to notebooks view context menu

* Fixed a small compilation error

* fixed a spelling mistake in function name

* made changes mentioned in the PR added open Notebook Functionality to charts

* Changed some context menues strings and order

* made some changes from the PR and fixed an API call

* made some changes mentioned in the PR

* Changed sqltoolsservice version to point to the latest build
---
 extensions/agent/package.json                 | 178 ++---
 extensions/agent/src/dialogs/jobDialog.ts     |   2 +-
 .../agent/src/dialogs/notebookDialog.ts       |   2 -
 extensions/mssql/src/config.json              |   2 +-
 extensions/mssql/src/contracts.ts             |   2 +-
 .../jobManagement/browser/jobActions.ts       |  20 +-
 .../browser/jobManagementView.ts              |   3 +
 .../browser/media/jobHistory.css              |   1 +
 .../jobManagement/browser/media/jobs.css      | 643 +++++++++++++++---
 .../browser/notebookHistory.component.html    |  17 +-
 .../browser/notebooksView.component.ts        |  70 +-
 11 files changed, 711 insertions(+), 229 deletions(-)

diff --git a/extensions/agent/package.json b/extensions/agent/package.json
index e79b7e3a3a..e05e84d145 100644
--- a/extensions/agent/package.json
+++ b/extensions/agent/package.json
@@ -1,93 +1,93 @@
 {
-  "name": "agent",
-  "displayName": "SQL Server Agent",
-  "description": "Manage and troubleshoot SQL Server Agent jobs",
-  "version": "0.42.0",
-  "publisher": "Microsoft",
-  "preview": true,
-  "license": "https://raw.githubusercontent.com/Microsoft/azuredatastudio/master/LICENSE.txt",
-  "icon": "images/sqlserver.png",
-  "aiKey": "AIF-5574968e-856d-40d2-af67-c89a14e76412",
-  "engines": {
-    "vscode": "^1.25.0"
-  },
-  "activationEvents": [
-    "*"
-  ],
-  "main": "./out/main",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/Microsoft/azuredatastudio.git"
-  },
-  "extensionDependencies": [
-    "Microsoft.mssql"
-  ],
-  "contributes": {
-    "outputChannels": [
-      "sqlagent"
-    ],
-    "dashboard.tabs": [
-      {
-        "id": "data-management-agent",
-        "description": "Manage and troubleshoot SQL Agent jobs",
-        "provider": "MSSQL",
-        "title": "SQL Agent",
-        "when": "connectionProvider == 'MSSQL' && !mssql:iscloud",
-        "container": {
-          "controlhost-container": {
-            "type": "agent"
-          }
-        }
-      }
-    ],
-    "commands": [
-      {
-        "command": "agent.openNotebookDialog",
-        "title": "Schedule Notebook",
-        "icon": {
-          "dark": "resources/dark/open_notebook_inverse.svg",
-          "light": "resources/light/open_notebook.svg"
-        }
-      },
-      {
-        "command": "agent.reuploadTemplate",
-        "title": "Reupload Template",
-        "icon": {
-          "dark": "resources/dark/open_notebook_inverse.svg",
-          "light": "resources/light/open_notebook.svg"
-        }
-      }
-    ],
-    "menus": {
-      "notebook/toolbar": [
-        {
-          "command": "agent.openNotebookDialog",
-          "when": "providerId == sql"
-        },
-        {
-          "command": "agent.reuploadTemplate",
-          "when": "agent:trackedTemplate"
-        }
-      ],
-      "explorer/context": [
-        {
-          "command": "agent.openNotebookDialog",
-          "when": "resourceExtname == .ipynb"
-        }
-      ]
-    }
-  },
-  "dependencies": {
-    "vscode-nls": "^3.2.1"
-  },
-  "devDependencies": {
-    "mocha-junit-reporter": "^1.17.0",
-    "mocha-multi-reporters": "^1.1.7",
-    "@types/mocha": "^5.2.5",
-    "@types/node": "^8.10.25",
-    "mocha": "^5.2.0",
-    "should": "^13.2.1",
-    "typemoq": "^2.1.0",
+	"name": "agent",
+	"displayName": "SQL Server Agent",
+	"description": "Manage and troubleshoot SQL Server Agent jobs",
+	"version": "0.42.0",
+	"publisher": "Microsoft",
+	"preview": true,
+	"license": "https://raw.githubusercontent.com/Microsoft/azuredatastudio/master/LICENSE.txt",
+	"icon": "images/sqlserver.png",
+	"aiKey": "AIF-5574968e-856d-40d2-af67-c89a14e76412",
+	"engines": {
+		"vscode": "^1.25.0"
+	},
+	"activationEvents": [
+		"*"
+	],
+	"main": "./out/main",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/Microsoft/azuredatastudio.git"
+	},
+	"extensionDependencies": [
+		"Microsoft.mssql"
+	],
+	"contributes": {
+		"outputChannels": [
+			"sqlagent"
+		],
+		"dashboard.tabs": [
+			{
+				"id": "data-management-agent",
+				"description": "Manage and troubleshoot SQL Agent jobs",
+				"provider": "MSSQL",
+				"title": "SQL Agent",
+				"when": "connectionProvider == 'MSSQL' && !mssql:iscloud",
+				"container": {
+					"controlhost-container": {
+						"type": "agent"
+					}
+				}
+			}
+		],
+		"commands": [
+			{
+				"command": "agent.openNotebookDialog",
+				"title": "Schedule Notebook",
+				"icon": {
+					"dark": "resources/dark/open_notebook_inverse.svg",
+					"light": "resources/light/open_notebook.svg"
+				}
+			},
+			{
+				"command": "agent.reuploadTemplate",
+				"title": "Update Template",
+				"icon": {
+					"dark": "resources/dark/open_notebook_inverse.svg",
+					"light": "resources/light/open_notebook.svg"
+				}
+			}
+		],
+		"menus": {
+			"notebook/toolbar": [
+				{
+					"command": "agent.openNotebookDialog",
+					"when": "providerId == sql && !agent:trackedTemplate"
+				},
+				{
+					"command": "agent.reuploadTemplate",
+					"when": "agent:trackedTemplate"
+				}
+			],
+			"explorer/context": [
+				{
+					"command": "agent.openNotebookDialog",
+					"when": "resourceExtname == .ipynb"
+				}
+			]
+		}
+	},
+	"dependencies": {
+		"vscode-nls": "^3.2.1"
+	},
+	"devDependencies": {
+		"mocha-junit-reporter": "^1.17.0",
+		"mocha-multi-reporters": "^1.1.7",
+		"@types/mocha": "^5.2.5",
+		"@types/node": "^8.10.25",
+		"mocha": "^5.2.0",
+		"should": "^13.2.1",
+		"typemoq": "^2.1.0",
     "vscode": "1.1.5"
   }
 }
diff --git a/extensions/agent/src/dialogs/jobDialog.ts b/extensions/agent/src/dialogs/jobDialog.ts
index 01a2a93b98..9641810399 100644
--- a/extensions/agent/src/dialogs/jobDialog.ts
+++ b/extensions/agent/src/dialogs/jobDialog.ts
@@ -723,4 +723,4 @@ export class JobDialog extends AgentDialog<JobData>  {
 		this.model.alerts = this.alerts;
 		this.model.categoryId = +this.model.jobCategoryIdsMap.find(cat => cat.name === this.model.category).id;
 	}
-}
\ No newline at end of file
+}
diff --git a/extensions/agent/src/dialogs/notebookDialog.ts b/extensions/agent/src/dialogs/notebookDialog.ts
index 839b9b9a60..47aa340558 100644
--- a/extensions/agent/src/dialogs/notebookDialog.ts
+++ b/extensions/agent/src/dialogs/notebookDialog.ts
@@ -66,8 +66,6 @@ export class NotebookDialog extends AgentDialog<NotebookData>  {
 	private removeScheduleButton: azdata.ButtonComponent;
 	private descriptionTextBox: azdata.InputBoxComponent;
 
-
-
 	private isEdit: boolean = false;
 
 	// Job objects
diff --git a/extensions/mssql/src/config.json b/extensions/mssql/src/config.json
index 4b42e5cc3a..8848a8568c 100644
--- a/extensions/mssql/src/config.json
+++ b/extensions/mssql/src/config.json
@@ -1,6 +1,6 @@
 {
 	"downloadUrl": "https://github.com/Microsoft/sqltoolsservice/releases/download/v{#version#}/microsoft.sqltools.servicelayer-{#fileName#}",
-	"version": "2.0.0-release.11",
+	"version": "2.0.0-release.12",
 	"downloadFileNames": {
 		"Windows_86": "win-x86-netcoreapp2.2.zip",
 		"Windows_64": "win-x64-netcoreapp2.2.zip",
diff --git a/extensions/mssql/src/contracts.ts b/extensions/mssql/src/contracts.ts
index 3e67c98d0e..1bac306d62 100644
--- a/extensions/mssql/src/contracts.ts
+++ b/extensions/mssql/src/contracts.ts
@@ -298,7 +298,7 @@ export namespace UpdateAgentNotebookRunNameRequest {
 }
 
 export namespace DeleteMaterializedNotebookRequest {
-	export const type = new RequestType<DeleteAgentMaterializedNotebookParams, azdata.ResultStatus, void, void>('agent/deletenotebookmaterialized');
+	export const type = new RequestType<DeleteAgentMaterializedNotebookParams, azdata.ResultStatus, void, void>('agent/deletematerializednotebook');
 }
 
 export namespace UpdateAgentNotebookRunPinRequest {
diff --git a/src/sql/platform/jobManagement/browser/jobActions.ts b/src/sql/platform/jobManagement/browser/jobActions.ts
index 08e1dd2b07..3360c484cf 100644
--- a/src/sql/platform/jobManagement/browser/jobActions.ts
+++ b/src/sql/platform/jobManagement/browser/jobActions.ts
@@ -589,7 +589,7 @@ export class NewNotebookJobAction extends Action {
 
 export class EditNotebookJobAction extends Action {
 	public static ID = 'notebookaction.editNotebook';
-	public static LABEL = nls.localize('notebookaction.editJob', "Edit Notebook Job");
+	public static LABEL = nls.localize('notebookaction.editJob', "Edit");
 
 	constructor(
 		@ICommandService private _commandService: ICommandService
@@ -624,7 +624,7 @@ export class OpenTemplateNotebookAction extends Action {
 
 export class DeleteNotebookAction extends Action {
 	public static ID = 'notebookaction.deleteNotebook';
-	public static LABEL = nls.localize('notebookaction.deleteNotebook', "Delete Notebook");
+	public static LABEL = nls.localize('notebookaction.deleteNotebook', "Delete");
 
 	constructor(
 		@INotificationService private _notificationService: INotificationService,
@@ -732,3 +732,19 @@ export class RenameNotebookMaterializedAction extends Action {
 		return Promise.resolve(true);
 	}
 }
+
+export class OpenLatestRunMaterializedNotebook extends Action {
+	public static ID = 'notebookaction.openLatestRun';
+	public static LABEL = nls.localize('notebookaction.openLatestRun', "Open Latest Run");
+
+	constructor(
+		@ICommandService private _commandService: ICommandService,
+	) {
+		super(OpenLatestRunMaterializedNotebook.ID, OpenLatestRunMaterializedNotebook.LABEL);
+	}
+
+	public run(actionInfo: IJobActionInfo): Promise<boolean> {
+		actionInfo.component.openLastNRun(actionInfo.targetObject.job, 0, 1);
+		return Promise.resolve(true);
+	}
+}
diff --git a/src/sql/workbench/parts/jobManagement/browser/jobManagementView.ts b/src/sql/workbench/parts/jobManagement/browser/jobManagementView.ts
index d069bb8541..629078b158 100644
--- a/src/sql/workbench/parts/jobManagement/browser/jobManagementView.ts
+++ b/src/sql/workbench/parts/jobManagement/browser/jobManagementView.ts
@@ -124,6 +124,9 @@ export abstract class JobManagementView extends TabChild implements AfterContent
 	public refreshJobs() {
 		this._agentViewComponent.refresh = true;
 	}
+
+	public openLastNRun(notebook: azdata.AgentNotebookInfo, n: number, maxVisibleElements: number) {
+	}
 }
 
 export interface JobActionContext {
diff --git a/src/sql/workbench/parts/jobManagement/browser/media/jobHistory.css b/src/sql/workbench/parts/jobManagement/browser/media/jobHistory.css
index 740e1be8cf..c71ac95a80 100644
--- a/src/sql/workbench/parts/jobManagement/browser/media/jobHistory.css
+++ b/src/sql/workbench/parts/jobManagement/browser/media/jobHistory.css
@@ -441,6 +441,7 @@ notebookhistory-component
 	height: 40px;
 	background-size: 40px 40px;
 	background-repeat: no-repeat;
+	cursor: pointer;
 }
 
 .vs-dark .notebook-grid-item > .img-error,
diff --git a/src/sql/workbench/parts/jobManagement/browser/media/jobs.css b/src/sql/workbench/parts/jobManagement/browser/media/jobs.css
index 7a1f5d8c41..b8ad590328 100644
--- a/src/sql/workbench/parts/jobManagement/browser/media/jobs.css
+++ b/src/sql/workbench/parts/jobManagement/browser/media/jobs.css
@@ -5,18 +5,17 @@
 
 agentview-component {
 	height: 100%;
-	width : 100%;
+	width: 100%;
 	display: block;
 }
 
 jobsview-component,
 notebooksview-component {
 	height: 100%;
-	width : 100%;
+	width: 100%;
 	display: block;
 }
 
-
 .job-heading-container {
 	height: 50px;
 	border-bottom: 3px solid #f4f4f4;
@@ -33,13 +32,13 @@ notebooksview-component {
 
 .jobview-grid {
 	height: calc(100% - 75px);
-	width : 100%;
+	width: 100%;
 	display: block;
 }
 
 .jobnotebooksview-grid {
 	height: calc(100% - 75px);
-	width : 100%;
+	width: 100%;
 	display: block;
 }
 
@@ -53,13 +52,35 @@ notebooksview-component {
 	font-weight: bold;
 }
 
-.hc-black #jobsDiv jobsview-component .jobview-grid .grid-canvas .ui-widget-content.slick-row .slick-cell,
-.hc-black #notebooksDiv notebooks-component .jobnotebooksview-grid .grid-canvas .ui-widget-content.slick-row .slick-cell {
+.hc-black
+	#jobsDiv
+	jobsview-component
+	.jobview-grid
+	.grid-canvas
+	.ui-widget-content.slick-row
+	.slick-cell,
+.hc-black
+	#notebooksDiv
+	notebooks-component
+	.jobnotebooksview-grid
+	.grid-canvas
+	.ui-widget-content.slick-row
+	.slick-cell {
 	border: 1px solid #2b56f2;
 }
 
-#jobsDiv jobsview-component .jobview-grid .grid-canvas .ui-widget-content.slick-row .slick-cell,
-#notebooksDiv notebooksview-component .jobnotebooksview-grid .grid-canvas .ui-widget-content.slick-row .slick-cell {
+#jobsDiv
+	jobsview-component
+	.jobview-grid
+	.grid-canvas
+	.ui-widget-content.slick-row
+	.slick-cell,
+#notebooksDiv
+	notebooksview-component
+	.jobnotebooksview-grid
+	.grid-canvas
+	.ui-widget-content.slick-row
+	.slick-cell {
 	border-right: transparent !important;
 	border-left: transparent !important;
 	line-height: 33px !important;
@@ -103,8 +124,14 @@ notebooksview-component {
 }
 
 #jobsDiv .jobview-grid .slick-cell.l1.r1.error-row .jobview-jobnametext,
-#notebooksDiv .jobnotebooksview-grid .slick-cell.l1.r1.error-row .jobview-jobnametext,
-#notebooksDiv .jobnotebooksview-grid .slick-cell.l1.r1.notebook-error-row .jobview-jobnametext {
+#notebooksDiv
+	.jobnotebooksview-grid
+	.slick-cell.l1.r1.error-row
+	.jobview-jobnametext,
+#notebooksDiv
+	.jobnotebooksview-grid
+	.slick-cell.l1.r1.notebook-error-row
+	.jobview-jobnametext {
 	width: 100%;
 }
 
@@ -117,7 +144,10 @@ notebooksview-component {
 	display: inline-block;
 }
 
-#operatorsDiv .joboperatorsview-grid .slick-cell.l1.r1 .operatorview-operatornametext,
+#operatorsDiv
+	.joboperatorsview-grid
+	.slick-cell.l1.r1
+	.operatorview-operatornametext,
 #alertsDiv .jobalertsview-grid .slick-cell.l1.r1 .alertview-alertnametext,
 #proxiesDiv .jobproxiesview-grid .slick-cell.l1.r1 .proxyview-proxynametext {
 	text-overflow: ellipsis;
@@ -132,8 +162,18 @@ notebooksview-component {
 	border-bottom: none;
 }
 
-.jobview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row .slick-cell.l1.r1.error-row,
-.jobnotebooksview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row .slick-cell.l1.r1.error-row {
+.jobview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row
+	.slick-cell.l1.r1.error-row,
+.jobnotebooksview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row
+	.slick-cell.l1.r1.error-row {
 	width: 100%;
 	opacity: 1;
 	font-weight: 700;
@@ -141,7 +181,12 @@ notebooksview-component {
 	color: orangered;
 }
 
-.jobnotebooksview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row .slick-cell.l1.r1.notebook-error-row {
+.jobnotebooksview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row
+	.slick-cell.l1.r1.notebook-error-row {
 	width: 100%;
 	opacity: 1;
 	font-weight: 700;
@@ -150,9 +195,24 @@ notebooksview-component {
 	color: orange;
 }
 
-.jobview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row .slick-cell._detail_selector.error-row,
-.jobnotebooksview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row .slick-cell._detail_selector.error-row,
-.jobnotebooksview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row .slick-cell._detail_selector.notebook-error-row {
+.jobview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row
+	.slick-cell._detail_selector.error-row,
+.jobnotebooksview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row
+	.slick-cell._detail_selector.error-row,
+.jobnotebooksview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row
+	.slick-cell._detail_selector.notebook-error-row {
 	opacity: 1;
 }
 
@@ -192,7 +252,7 @@ notebooksview-component {
 
 #jobsDiv .detail,
 #notebooksDiv .detail {
-	padding: 5px
+	padding: 5px;
 }
 
 #jobsDiv .preload,
@@ -202,69 +262,83 @@ notebooksview-component {
 
 #jobsDiv .dynamic-cell-detail > :first-child,
 #notebooksDiv .dynamic-cell-detail > :first-child {
-	vertical-align:     middle;
-	line-height:        13px;
-	padding:            10px;
-	margin-left:		20px;
+	vertical-align: middle;
+	line-height: 13px;
+	padding: 10px;
+	margin-left: 20px;
 }
 
 .jobsview-icon {
-	background-image: url('./job.svg');
+	background-image: url("./job.svg");
 }
 
-
 .vs-dark .jobsview-icon,
 .hc-black .jobsview-icon {
-	background-image: url('./job_inverse.svg');
+	background-image: url("./job_inverse.svg");
 }
 
-
 .notebooksview-icon {
-	background-image: url('./notebook.svg');
+	background-image: url("./notebook.svg");
 }
 
 .vs-dark .notebooksview-icon,
 .hc-black .notebooksview-icon {
-	background-image: url('./notebook_inverse.svg');
+	background-image: url("./notebook_inverse.svg");
 }
 
 .alertsview-icon {
-	background-image: url('./alert.svg');
+	background-image: url("./alert.svg");
 }
 
 .vs-dark .alertsview-icon,
 .hc-black .alertsview-icon {
-	background-image: url('./alert_inverse.svg');
+	background-image: url("./alert_inverse.svg");
 }
 
 .proxiesview-icon {
-	background-image: url('./proxy.svg');
+	background-image: url("./proxy.svg");
 }
 
 .vs-dark .proxiesview-icon,
 .hc-black .proxiesview-icon {
-	background-image: url('./proxy_inverse.svg');
+	background-image: url("./proxy_inverse.svg");
 }
 
 .operatorsview-icon {
-	background-image: url('./operator.svg');
+	background-image: url("./operator.svg");
 }
 
 .vs-dark .operatorsview-icon,
 .hc-black .operatorsview-icon {
-	background-image: url('./operator_inverse.svg');
+	background-image: url("./operator_inverse.svg");
 }
 
-agentview-component .jobview-grid .grid-canvas > .ui-widget-content.slick-row.even > .slick-cell,
-agentview-component .jobnotebooksview-grid .grid-canvas > .ui-widget-content.slick-row.odd > .slick-cell {
+agentview-component
+	.jobview-grid
+	.grid-canvas
+	> .ui-widget-content.slick-row.even
+	> .slick-cell,
+agentview-component
+	.jobnotebooksview-grid
+	.grid-canvas
+	> .ui-widget-content.slick-row.odd
+	> .slick-cell {
 	cursor: pointer;
 }
 
-.vs-dark .jobview-grid > .monaco-table .slick-header-columns .slick-resizable-handle {
+.vs-dark
+	.jobview-grid
+	> .monaco-table
+	.slick-header-columns
+	.slick-resizable-handle {
 	border-left: 1px dotted white;
 }
 
-.hc-black .jobview-grid > .monaco-table .slick-header-columns .slick-resizable-handle {
+.hc-black
+	.jobview-grid
+	> .monaco-table
+	.slick-header-columns
+	.slick-resizable-handle {
 	border-left: 1px dotted #2b56f2;
 }
 
@@ -279,47 +353,188 @@ agentview-component .jobnotebooksview-grid .grid-canvas > .ui-widget-content.sli
 	padding-left: 15px;
 }
 
-#jobsDiv jobsview-component .jobview-grid .slick-cell.l1.r1.error-row td.jobview-jobnameindicatorfailure,
-#notebooksDiv notebooksview-component .jobnotebooksview-grid .slick-cell.l1.r1.error-row td.jobview-jobnameindicatorfailure,
-#notebooksDiv notebooksview-component .jobnotebooksview-grid .slick-cell.l1.r1.notebook-error-row td.jobview-jobnameindicatorfailure {
+#jobsDiv
+	jobsview-component
+	.jobview-grid
+	.slick-cell.l1.r1.error-row
+	td.jobview-jobnameindicatorfailure,
+#notebooksDiv
+	notebooksview-component
+	.jobnotebooksview-grid
+	.slick-cell.l1.r1.error-row
+	td.jobview-jobnameindicatorfailure,
+#notebooksDiv
+	notebooksview-component
+	.jobnotebooksview-grid
+	.slick-cell.l1.r1.notebook-error-row
+	td.jobview-jobnameindicatorfailure {
 	width: 0;
 	background: none;
 }
 
-#jobsDiv .jobview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row:hover > .slick-cell,
-#jobsDiv .jobview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row.hovered > .slick-cell,
-#jobsDiv .jobview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row> .slick-cell.hovered,
-#notebooksDiv .jobnotebooksview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row:hover > .slick-cell,
-#notebooksDiv .jobnotebooksview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row.hovered > .slick-cell,
-#notebooksDiv .jobnotebooksview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row> .slick-cell.hovered {
+#jobsDiv
+	.jobview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row:hover
+	> .slick-cell,
+#jobsDiv
+	.jobview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row.hovered
+	> .slick-cell,
+#jobsDiv
+	.jobview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row
+	> .slick-cell.hovered,
+#notebooksDiv
+	.jobnotebooksview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row:hover
+	> .slick-cell,
+#notebooksDiv
+	.jobnotebooksview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row.hovered
+	> .slick-cell,
+#notebooksDiv
+	.jobnotebooksview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row
+	> .slick-cell.hovered {
 	background: #dcdcdc !important;
 }
 
-.vs-dark #jobsDiv .jobview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row:hover > .slick-cell,
-.vs-dark #jobsDiv .jobview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row > .slick-cell.hovered,
-.vs-dark #jobsDiv .jobview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row.hovered > .slick-cell,
-.vs-dark #notebooksDiv .jobnotebooksview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row:hover > .slick-cell,
-.vs-dark #notebooksDiv .jobnotebooksview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row > .slick-cell.hovered,
-.vs-dark #notebooksDiv .jobnotebooksview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row.hovered > .slick-cell {
+.vs-dark
+	#jobsDiv
+	.jobview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row:hover
+	> .slick-cell,
+.vs-dark
+	#jobsDiv
+	.jobview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row
+	> .slick-cell.hovered,
+.vs-dark
+	#jobsDiv
+	.jobview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row.hovered
+	> .slick-cell,
+.vs-dark
+	#notebooksDiv
+	.jobnotebooksview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row:hover
+	> .slick-cell,
+.vs-dark
+	#notebooksDiv
+	.jobnotebooksview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row
+	> .slick-cell.hovered,
+.vs-dark
+	#notebooksDiv
+	.jobnotebooksview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row.hovered
+	> .slick-cell {
 	background: #444444 !important;
 }
 
-.hc-black #jobsDiv .jobview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row:hover > .slick-cell,
-.hc-black #jobsDiv .jobview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row > .slick-cell.hovered,
-.hc-black #jobsDiv .jobview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row.hovered > .slick-cell,
-.hc-black #notebooksDiv .jobnotebooksview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row:hover > .slick-cell,
-.hc-black #notebooksDiv .jobnotebooksview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row > .slick-cell.hovered,
-.hc-black #notebooksDiv .jobnotebooksview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row.hovered > .slick-cell {
+.hc-black
+	#jobsDiv
+	.jobview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row:hover
+	> .slick-cell,
+.hc-black
+	#jobsDiv
+	.jobview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row
+	> .slick-cell.hovered,
+.hc-black
+	#jobsDiv
+	.jobview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row.hovered
+	> .slick-cell,
+.hc-black
+	#notebooksDiv
+	.jobnotebooksview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row:hover
+	> .slick-cell,
+.hc-black
+	#notebooksDiv
+	.jobnotebooksview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row
+	> .slick-cell.hovered,
+.hc-black
+	#notebooksDiv
+	.jobnotebooksview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row.hovered
+	> .slick-cell {
 	background: none !important;
 }
 
-table.jobprevruns div.bar0, table.jobprevruns div.bar1, table.jobprevruns div.bar2,
-table.jobprevruns div.bar3, table.jobprevruns div.bar4, table.jobprevruns div.bar5 {
+table.jobprevruns div.bar,
+table.jobprevruns div.bar0,
+table.jobprevruns div.bar1,
+table.jobprevruns div.bar2,
+table.jobprevruns div.bar3,
+table.jobprevruns div.bar4,
+table.jobprevruns div.bar5 {
 	padding-top: 3px;
 	padding-left: 5px;
 	width: 10px;
 }
 
+table.jobprevruns div.bar {
+	cursor: pointer;
+}
+
 .jobview-grid .slick-cell.l10.r10,
 .jobnotebooksview-grid .slick-cell.l10.r10 {
 	text-align: center;
@@ -336,51 +551,51 @@ table.jobprevruns > tbody {
 
 #notebooksDiv .jobnotebooksview-grid {
 	height: calc(100% - 75px);
-	width : 100%;
+	width: 100%;
 	display: block;
 }
 
 #alertsDiv .jobalertsview-grid {
 	height: calc(100% - 75px);
-	width : 100%;
+	width: 100%;
 	display: block;
 }
 
 #operatorsDiv .joboperatorsview-grid {
 	height: calc(100% - 75px);
-	width : 100%;
+	width: 100%;
 	display: block;
 	overflow: scroll;
 }
 
 #proxiesDiv .jobproxiesview-grid {
 	height: calc(100% - 75px);
-	width : 100%;
+	width: 100%;
 	display: block;
 }
 
-
-
 .vs .action-label.icon.refreshIcon {
-	background-image: url('refresh.svg');
+	background-image: url("refresh.svg");
 }
 
 .vs-dark .action-label.icon.refreshIcon,
-.hc-black .action-label.icon.refreshIcon  {
-	background-image: url('refresh_inverse.svg');
+.hc-black .action-label.icon.refreshIcon {
+	background-image: url("refresh_inverse.svg");
 }
 
-
 .vs .action-label.icon.openNotebook {
-	background-image: url('open_notebook.svg');
+	background-image: url("open_notebook.svg");
 }
 
 .vs-dark .action-label.icon.openNotebook,
-.hc-black .action-label.icon.openNotebook  {
-	background-image: url('open_notebook_inverse.svg');
+.hc-black .action-label.icon.openNotebook {
+	background-image: url("open_notebook_inverse.svg");
 }
 
-.agent-actionbar-container .monaco-action-bar > ul.actions-container > li.action-item {
+.agent-actionbar-container
+	.monaco-action-bar
+	> ul.actions-container
+	> li.action-item {
 	padding-left: 20px;
 }
 
@@ -390,107 +605,311 @@ notebooksview-component .jobnotebooksview-grid .slick-cell.notebook-error-row {
 	opacity: 0;
 }
 
-#notebooksDiv notebooksview-component .jobnotebooksview-grid .grid-canvas .ui-widget-content.slick-row .slick-cell {
+#notebooksDiv
+	notebooksview-component
+	.jobnotebooksview-grid
+	.grid-canvas
+	.ui-widget-content.slick-row
+	.slick-cell {
 	border-right: transparent !important;
 	border-left: transparent !important;
 	line-height: 33px !important;
 }
 
-#notebooksDiv .jobnotebooksview-grid  > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row:hover > .slick-cell,
-#notebooksDiv .jobnotebooksview-grid  > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row.hovered > .slick-cell,
-#notebooksDiv .jobnotebooksview-grid  > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row> .slick-cell.hovered {
+#notebooksDiv
+	.jobnotebooksview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row:hover
+	> .slick-cell,
+#notebooksDiv
+	.jobnotebooksview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row.hovered
+	> .slick-cell,
+#notebooksDiv
+	.jobnotebooksview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row
+	> .slick-cell.hovered {
 	background: #dcdcdc !important;
 }
 
-.vs-dark #notebooksDiv .jobnotebooksview-grid  > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row:hover > .slick-cell,
-.vs-dark #notebooksDiv .jobnotebooksview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row > .slick-cell.hovered,
-.vs-dark #notebooksDiv .jobnotebooksview-grid  > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row.hovered > .slick-cell {
+.vs-dark
+	#notebooksDiv
+	.jobnotebooksview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row:hover
+	> .slick-cell,
+.vs-dark
+	#notebooksDiv
+	.jobnotebooksview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row
+	> .slick-cell.hovered,
+.vs-dark
+	#notebooksDiv
+	.jobnotebooksview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row.hovered
+	> .slick-cell {
 	background: #444444 !important;
 }
 
-.vs-dark .jobnotebooksview-grid > .monaco-table .slick-header-columns .slick-resizable-handle {
+.vs-dark
+	.jobnotebooksview-grid
+	> .monaco-table
+	.slick-header-columns
+	.slick-resizable-handle {
 	border-left: 1px dotted white;
 }
 
-.jobnotebooksview-grid > .monaco-table .slick-header-columns .slick-resizable-handle {
+.jobnotebooksview-grid
+	> .monaco-table
+	.slick-header-columns
+	.slick-resizable-handle {
 	border-left: 1px dotted #444444;
 }
 
-#alertsDiv jobalertsview-component .jobalertsview-grid .grid-canvas .ui-widget-content.slick-row .slick-cell {
+#alertsDiv
+	jobalertsview-component
+	.jobalertsview-grid
+	.grid-canvas
+	.ui-widget-content.slick-row
+	.slick-cell {
 	border-right: transparent !important;
 	border-left: transparent !important;
 	line-height: 33px !important;
 }
 
-#alertsDiv .jobalertsview-grid  > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row:hover > .slick-cell,
-#alertsDiv .jobalertsview-grid  > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row.hovered > .slick-cell,
-#alertsDiv .jobalertsview-grid  > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row> .slick-cell.hovered {
+#alertsDiv
+	.jobalertsview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row:hover
+	> .slick-cell,
+#alertsDiv
+	.jobalertsview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row.hovered
+	> .slick-cell,
+#alertsDiv
+	.jobalertsview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row
+	> .slick-cell.hovered {
 	background: #dcdcdc !important;
 }
 
-.vs-dark #alertsDiv .jobalertsview-grid  > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row:hover > .slick-cell,
-.vs-dark #alertsDiv .jobalertsview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row > .slick-cell.hovered,
-.vs-dark #alertsDiv .jobalertsview-grid  > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row.hovered > .slick-cell {
+.vs-dark
+	#alertsDiv
+	.jobalertsview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row:hover
+	> .slick-cell,
+.vs-dark
+	#alertsDiv
+	.jobalertsview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row
+	> .slick-cell.hovered,
+.vs-dark
+	#alertsDiv
+	.jobalertsview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row.hovered
+	> .slick-cell {
 	background: #444444 !important;
 }
 
-.vs-dark .jobalertsview-grid > .monaco-table .slick-header-columns .slick-resizable-handle {
+.vs-dark
+	.jobalertsview-grid
+	> .monaco-table
+	.slick-header-columns
+	.slick-resizable-handle {
 	border-left: 1px dotted white;
 }
 
-.jobalertsview-grid > .monaco-table .slick-header-columns .slick-resizable-handle {
+.jobalertsview-grid
+	> .monaco-table
+	.slick-header-columns
+	.slick-resizable-handle {
 	border-left: 1px dotted #444444;
 }
 
-#operatorsDiv joboperatorsview-component .joboperatorsview-grid .grid-canvas .ui-widget-content.slick-row .slick-cell {
+#operatorsDiv
+	joboperatorsview-component
+	.joboperatorsview-grid
+	.grid-canvas
+	.ui-widget-content.slick-row
+	.slick-cell {
 	border-right: transparent !important;
 	border-left: transparent !important;
 	line-height: 33px !important;
 }
 
-#operatorsDiv .joboperatorsview-grid  > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row:hover > .slick-cell,
-#operatorsDiv .joboperatorsview-grid  > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row.hovered > .slick-cell,
-#operatorsDiv .joboperatorsview-grid  > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row> .slick-cell.hovered {
+#operatorsDiv
+	.joboperatorsview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row:hover
+	> .slick-cell,
+#operatorsDiv
+	.joboperatorsview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row.hovered
+	> .slick-cell,
+#operatorsDiv
+	.joboperatorsview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row
+	> .slick-cell.hovered {
 	background: #dcdcdc !important;
 }
 
-.vs-dark #operatorsDiv .joboperatorsview-grid  > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row:hover > .slick-cell,
-.vs-dark #operatorsDiv .joboperatorsview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row > .slick-cell.hovered,
-.vs-dark #operatorsDiv .joboperatorsview-grid  > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row.hovered > .slick-cell {
+.vs-dark
+	#operatorsDiv
+	.joboperatorsview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row:hover
+	> .slick-cell,
+.vs-dark
+	#operatorsDiv
+	.joboperatorsview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row
+	> .slick-cell.hovered,
+.vs-dark
+	#operatorsDiv
+	.joboperatorsview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row.hovered
+	> .slick-cell {
 	background: #444444 !important;
 }
 
-.vs-dark .joboperatorsview-grid > .monaco-table .slick-header-columns .slick-resizable-handle {
+.vs-dark
+	.joboperatorsview-grid
+	> .monaco-table
+	.slick-header-columns
+	.slick-resizable-handle {
 	border-left: 1px dotted white;
 }
 
-.joboperatorsview-grid > .monaco-table .slick-header-columns .slick-resizable-handle {
+.joboperatorsview-grid
+	> .monaco-table
+	.slick-header-columns
+	.slick-resizable-handle {
 	border-left: 1px dotted #444444;
 }
 
-#proxiesDiv jobproxiesview-component .jobproxiesview-grid .grid-canvas .ui-widget-content.slick-row .slick-cell {
+#proxiesDiv
+	jobproxiesview-component
+	.jobproxiesview-grid
+	.grid-canvas
+	.ui-widget-content.slick-row
+	.slick-cell {
 	border-right: transparent !important;
 	border-left: transparent !important;
 	line-height: 33px !important;
 }
 
-#proxiesDiv .jobproxiesview-grid  > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row:hover > .slick-cell,
-#proxiesDiv .jobproxiesview-grid  > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row.hovered > .slick-cell,
-#proxiesDiv .jobproxiesview-grid  > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row> .slick-cell.hovered {
+#proxiesDiv
+	.jobproxiesview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row:hover
+	> .slick-cell,
+#proxiesDiv
+	.jobproxiesview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row.hovered
+	> .slick-cell,
+#proxiesDiv
+	.jobproxiesview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row
+	> .slick-cell.hovered {
 	background: #dcdcdc !important;
 }
 
-.vs-dark #proxiesDiv .jobproxiesview-grid  > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row:hover > .slick-cell,
-.vs-dark #proxiesDiv .jobproxiesview-grid > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row > .slick-cell.hovered,
-.vs-dark #proxiesDiv .jobproxiesview-grid  > .monaco-table .slick-viewport > .grid-canvas > .ui-widget-content.slick-row.hovered > .slick-cell {
+.vs-dark
+	#proxiesDiv
+	.jobproxiesview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row:hover
+	> .slick-cell,
+.vs-dark
+	#proxiesDiv
+	.jobproxiesview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row
+	> .slick-cell.hovered,
+.vs-dark
+	#proxiesDiv
+	.jobproxiesview-grid
+	> .monaco-table
+	.slick-viewport
+	> .grid-canvas
+	> .ui-widget-content.slick-row.hovered
+	> .slick-cell {
 	background: #444444 !important;
 }
 
-.vs-dark .jobproxiesview-grid > .monaco-table .slick-header-columns .slick-resizable-handle {
+.vs-dark
+	.jobproxiesview-grid
+	> .monaco-table
+	.slick-header-columns
+	.slick-resizable-handle {
 	border-left: 1px dotted white;
 }
 
-.jobproxiesview-grid > .monaco-table .slick-header-columns .slick-resizable-handle {
+.jobproxiesview-grid
+	> .monaco-table
+	.slick-header-columns
+	.slick-resizable-handle {
 	border-left: 1px dotted #444444;
 }
 
diff --git a/src/sql/workbench/parts/jobManagement/browser/notebookHistory.component.html b/src/sql/workbench/parts/jobManagement/browser/notebookHistory.component.html
index da2cd2fc3a..df1b07afa8 100644
--- a/src/sql/workbench/parts/jobManagement/browser/notebookHistory.component.html
+++ b/src/sql/workbench/parts/jobManagement/browser/notebookHistory.component.html
@@ -5,7 +5,7 @@
  *--------------------------------------------------------------------------------------------*/
 -->
 <div class="jobhistory-heading-container">
-	<h1 class="job-heading">Notebook | {{ this._agentNotebookInfo?.name }}</h1>
+	<h1 class="job-heading">Notebook Jobs| {{ this._agentNotebookInfo?.name }}</h1>
 	<div class="icon in-progress" *ngIf="showProgressWheel()"></div>
 </div>
 
@@ -29,9 +29,9 @@
 
 <!-- Overview  -->
 <div class="overview-container">
-	<div class="overview-tab" (click)="toggleCollapse()" tabindex="0">
+	<div class="overview-tab" (click)="toggleCollapse()">
 		<input id="accordion" type="checkbox" />
-		<label for="accordion">
+		<label for="accordion" tabindex="0">
 			<div
 				class="resultsViewCollapsible collapsed"
 				(click)="toggleCollapse()"
@@ -48,10 +48,10 @@
 						{{ this._agentNotebookInfo?.targetDatabase }}
 					</td>
 					<td id="col3">
-						Enabled:
+						Has Schedule:
 					</td>
 					<td id="col4">
-						{{ this._agentNotebookInfo?.enabled }}
+						{{ this._agentNotebookInfo?.hasSchedule }}
 					</td>
 				</tr>
 				<tr>
@@ -81,11 +81,10 @@
 		<div
 			class="overview-tab"
 			(click)="toggleGridCollapse(i)"
-			tabindex="{{i}}"
 			*ngIf="grid.histories?.length"
 		>
-			<input id="accordion{{ i }}" type="checkbox" class="grid-arrow" />
-			<label for="accordion{{ i }}">
+			<input id="accordion{{ i }}" type="checkbox" class="grid-arrow"/>
+			<label for="accordion{{ i }}" tabindex="0">
 				<div id= "history-grid-icon{{i}}" (click)="toggleGridCollapse(i)"
 				class="resultsViewCollapsible"></div>
 				{{ grid.title }}
@@ -94,11 +93,13 @@
 				<div
 					*ngFor="let history of grid.histories"
 					class="notebook-grid-item"
+					tabindex="0"
 					(dblclick)="openNotebook(history)"
 					title="{{ createdTooltip(history) }}"
 					(contextmenu)="
 						openHistoryContextMenu($event, history, grid.contextMenuType)
 					"
+					(keydown.enter)="openNotebook(history)"
 				>
 					<div
 						*ngIf="history.materializedNotebookErrorInfo"
diff --git a/src/sql/workbench/parts/jobManagement/browser/notebooksView.component.ts b/src/sql/workbench/parts/jobManagement/browser/notebooksView.component.ts
index 80f0df13af..ab71d572f5 100644
--- a/src/sql/workbench/parts/jobManagement/browser/notebooksView.component.ts
+++ b/src/sql/workbench/parts/jobManagement/browser/notebooksView.component.ts
@@ -14,7 +14,7 @@ import { Table } from 'sql/base/browser/ui/table/table';
 import { AgentViewComponent } from 'sql/workbench/parts/jobManagement/browser/agentView.component';
 import { RowDetailView } from 'sql/base/browser/ui/table/plugins/rowDetailView';
 import { NotebookCacheObject } from 'sql/platform/jobManagement/common/jobManagementService';
-import { EditJobAction, NewNotebookJobAction, RunJobAction, EditNotebookJobAction, JobsRefreshAction, IJobActionInfo, DeleteNotebookAction } from 'sql/platform/jobManagement/browser/jobActions';
+import { EditJobAction, NewNotebookJobAction, RunJobAction, EditNotebookJobAction, JobsRefreshAction, IJobActionInfo, DeleteNotebookAction, OpenLatestRunMaterializedNotebook } from 'sql/platform/jobManagement/browser/jobActions';
 import { JobManagementUtilities } from 'sql/platform/jobManagement/browser/jobManagementUtilities';
 import { HeaderFilter } from 'sql/base/browser/ui/table/plugins/headerFilter.plugin';
 import { IJobManagementService } from 'sql/platform/jobManagement/common/interfaces';
@@ -395,6 +395,22 @@ export class NotebooksViewComponent extends JobManagementView implements OnInit,
 				this.highlightErrorRows(e1), (e2) => this.hightlightNonErrorRows(e2));
 		});
 
+		jQuery('.bar').click((e) => {
+			let clickEventTarget = e.target;
+			let barId = Number(clickEventTarget.id.replace('bar', ''));
+			let jobId = clickEventTarget.parentElement.offsetParent.id.replace('notebook', '');
+			let notebooks = this._notebookCacheObject.notebooks;
+			let targetNotebook: azdata.AgentNotebookInfo;
+			for (let i = 0; i < notebooks.length; i++) {
+				if (jobId === notebooks[i].jobId) {
+					targetNotebook = notebooks[i];
+					break;
+				}
+			}
+			this.openLastNRun(targetNotebook, barId, 5);
+			e.stopPropagation();
+		});
+
 		// cache the dataview for future use
 		this._notebookCacheObject.dataView = this.dataView;
 		this.filterValueMap['start'] = [[], this.dataView.getItems()];
@@ -540,21 +556,21 @@ export class NotebooksViewComponent extends JobManagementView implements OnInit,
 		if (runChart && runChart.length > 0) {
 			return `<table class="jobprevruns" id="${dataContext.id}">
 				<tr>
-				<td>${runChart[0] ? runChart[0] : '<div class="bar0"></div>'}</td>
-				<td>${runChart[1] ? runChart[1] : '<div class="bar1"></div>'}</td>
-				<td>${runChart[2] ? runChart[2] : '<div class="bar2"></div>'}</td>
-				<td>${runChart[3] ? runChart[3] : '<div class="bar3"></div>'}</td>
-				<td>${runChart[4] ? runChart[4] : '<div class="bar4"></div>'}</td>
+				<td>${runChart[0] ? runChart[0] : '<div class="bar" id="bar0"></div>'}</td>
+				<td>${runChart[1] ? runChart[1] : '<div class="bar" id="bar1"></div>'}</td>
+				<td>${runChart[2] ? runChart[2] : '<div class="bar" id="bar2"></div>'}</td>
+				<td>${runChart[3] ? runChart[3] : '<div class="bar" id="bar3"></div>'}</td>
+				<td>${runChart[4] ? runChart[4] : '<div class="bar" id="bar4"></div>'}</td>
 				</tr>
 			</table>`;
 		} else {
 			return `<table class="jobprevruns" id="${dataContext.id}">
 			<tr>
-				<td><div class="bar0"></div></td>
-				<td><div class="bar1"></div></td>
-				<td><div class="bar2"></div></td>
-				<td><div class="bar3"></div></td>
-				<td><div class="bar4"></div></td>
+				<td><div class="bar" id="bar0"></div></td>
+				<td><div class="bar" id="bar1"></div></td>
+				<td><div class="bar" id="bar2"></div></td>
+				<td><div class="bar" id="bar3"></div></td>
+				<td><div class="bar" id="bar4"></div></td>
 			</tr>
 			</table>`;
 		}
@@ -667,7 +683,7 @@ export class NotebooksViewComponent extends JobManagementView implements OnInit,
 			if (jobHistories[i].materializedNotebookErrorInfo !== null && jobHistories[i].materializedNotebookErrorInfo.length > 0) {
 				bgColor = 'orange';
 			}
-			let runGraph = jQuery(`table.jobprevruns#${jobId} > tbody > tr > td > div.bar${i}`);
+			let runGraph = jQuery(`table.jobprevruns#${jobId} > tbody > tr > td > #bar${i}`);
 			if (runGraph.length > 0) {
 
 				runGraph.css('height', chartHeights[i]);
@@ -884,10 +900,11 @@ export class NotebooksViewComponent extends JobManagementView implements OnInit,
 		const editAction = this._instantiationService.createInstance(EditJobAction);
 		const editNotebookAction = this._instantiationService.createInstance(EditNotebookJobAction);
 		const runJobAction = this._instantiationService.createInstance(RunJobAction);
+		const openLatestRunAction = this._instantiationService.createInstance(OpenLatestRunMaterializedNotebook);
 		return [
 			runJobAction,
+			openLatestRunAction,
 			editNotebookAction,
-			editAction,
 			this._instantiationService.createInstance(DeleteNotebookAction)
 		];
 	}
@@ -981,4 +998,31 @@ export class NotebooksViewComponent extends JobManagementView implements OnInit,
 		let ownerUri: string = this._commonService.connectionManagementService.connectionInfo.ownerUri;
 		await this._commandService.executeCommand('agent.openNotebookDialog', ownerUri);
 	}
+
+	public async openLastNRun(notebook: azdata.AgentNotebookInfo, n: number, maxVisibleElements: number) {
+		let notebookHistories = this._notebookCacheObject.getNotebookHistory(notebook.jobId);
+		if (notebookHistories && n < notebookHistories.length) {
+			notebookHistories = notebookHistories.sort((h1, h2) => {
+				return new Date(h2.runDate).getTime() - new Date(h1.runDate).getTime();
+			});
+			if (notebookHistories.length > maxVisibleElements) {
+				n = notebookHistories.length - (maxVisibleElements - n);
+			}
+			n = notebookHistories.length - 1 - n;
+			let history: azdata.AgentNotebookHistoryInfo = notebookHistories[n];
+			// Did Job Fail? if yes, then notebook to return
+			if (history.runStatus === 0) {
+				return;
+			}
+			let ownerUri: string = this._commonService.connectionManagementService.connectionInfo.ownerUri;
+			let targetDatabase = notebook.targetDatabase;
+			const result = await this._jobManagementService.getMaterialziedNotebook(ownerUri, targetDatabase, history.materializedNotebookId);
+			if (result) {
+				let regex = /:|-/gi;
+				let readableDataTimeString = history.runDate.replace(regex, '').replace(' ', '');
+				let tempNotebookFileName = notebook.name + '_' + readableDataTimeString;
+				await this._commandService.executeCommand('agent.openNotebookEditorFromJsonString', tempNotebookFileName, result.notebookMaterialized);
+			}
+		}
+	}
 }