Agent/loading icon (#1263)

* added progress wheel to show jobs loading

* added loading wheel to jobs view page too

src/sql/parts/jobManagement/common/media/jobs.css

@@ -22,8 +22,9 @@ jobhistory-component {
 }
 
 .vs-dark .job-heading-container {
-    height: 32px;
+    height: 49px;
     border-bottom: 3px solid #444444;
+    display: -webkit-box;
 }
 
 #jobsDiv .jobview-grid {
@@ -183,3 +184,10 @@ jobsview-component .jobview-grid > .monaco-table .slick-viewport > .grid-canvas
 .vs-dark .jobview-grid > .monaco-table .slick-header-columns .slick-resizable-handle {
     border-left: 1px dotted white;
 }
+
+.job-heading-container > .icon.in-progress {
+    height: 20px;
+    width: 20px;
+    padding-top: 16px;
+    padding-left: 15px;
+}

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

@@ -4,8 +4,10 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 -->
-
+<div class="jobhistory-heading-container">
  <h1 class="job-heading">Jobs | {{this._agentJobInfo?.name}} </h1>
+ <div class="icon in-progress" *ngIf="showProgressWheel()"></div>
+</div>
 
  <!-- Back -->
  <div class="all-jobs">

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

@@ -4,6 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import 'vs/css!./jobHistory';
+import 'vs/css!sql/media/icons/common-icons';
 import { OnInit, OnChanges, Component, Inject, Input, forwardRef, ElementRef, ChangeDetectorRef, ViewChild, ChangeDetectionStrategy, Injectable } from '@angular/core';
 import { AgentJobHistoryInfo, AgentJobInfo } from 'sqlops';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
@@ -60,6 +61,7 @@ export class JobHistoryComponent extends Disposable implements OnInit {
 	private _jobCacheObject: JobCacheObject;
 	private _notificationService: INotificationService;
 	private _agentJobInfo: AgentJobInfo;
+	private _noJobsAvailable: boolean = false;
 
 	constructor(
 		@Inject(BOOTSTRAP_SERVICE_ID) private bootstrapService: IBootstrapService,
@@ -146,7 +148,10 @@ export class JobHistoryComponent extends Disposable implements OnInit {
 			} else if (jobHistories && jobHistories.length === 0 ){
 				this._showPreviousRuns = false;
 				this._showSteps = false;
+				this._noJobsAvailable = true;
 				this._cd.detectChanges();
+			} else {
+				this.loadHistory();
 			}
 			this._jobCacheObject.prevJobID = this._agentViewComponent.jobId;
 		} else if (this._isVisible === true && this._agentViewComponent.refresh) {
@@ -274,6 +279,10 @@ export class JobHistoryComponent extends Disposable implements OnInit {
 		return time.replace('T', ' ');
 	}
 
+	private showProgressWheel(): boolean {
+		return this._showPreviousRuns !== true && this._noJobsAvailable === false;
+	}
+
 	private setActions(): void {
 		let startIcon: HTMLElement = $('.icon-start').get(0);
 		let stopIcon: HTMLElement = $('.icon-stop').get(0);

src/sql/parts/jobManagement/views/jobHistory.css

@@ -252,3 +252,14 @@ table.step-list tr.step-row td {
 jobhistory-component .history-details .step-table.prev-run-list .monaco-scrollable-element {
 	overflow-y: scroll !important;
 }
+
+jobhistory-component .jobhistory-heading-container {
+	display: -webkit-box;
+}
+
+jobhistory-component > .jobhistory-heading-container > .icon.in-progress {
+	width: 20px;
+	height: 20px;
+	padding-top: 16px;
+	padding-left: 20px;
+}

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

@@ -7,6 +7,7 @@
 <div class="job-heading-container">
 	<h1 class="job-heading" *ngIf="_isCloud === false">Jobs</h1>
 	<h1 class="job-heading" *ngIf="_isCloud === true">No Jobs Available</h1>
+	<div class="icon in-progress" *ngIf="_showProgressWheel === true"></div>
 </div>
 
 <div #jobsgrid class="jobview-grid"></div>

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

@@ -9,6 +9,7 @@ import 'vs/css!sql/parts/grid/media/styles';
 import 'vs/css!sql/parts/grid/media/slick.grid';
 import 'vs/css!sql/parts/grid/media/slickGrid';
 import 'vs/css!../common/media/jobs';
+import 'vs/css!sql/media/icons/common-icons';
 
 import { Component, Inject, forwardRef, ElementRef, ChangeDetectorRef, ViewChild, AfterContentChecked } from '@angular/core';
 import * as Utils from 'sql/parts/connection/common/utils';
@@ -72,6 +73,7 @@ export class JobsViewComponent implements AfterContentChecked {
 	public jobHistories: { [jobId: string]: sqlops.AgentJobHistoryInfo[]; } = Object.create(null);
 	private _serverName: string;
 	private _isCloud: boolean;
+	private _showProgressWheel: boolean;
 
 	constructor(
 		@Inject(BOOTSTRAP_SERVICE_ID) private bootstrapService: IBootstrapService,
@@ -99,18 +101,22 @@ export class JobsViewComponent implements AfterContentChecked {
 			this.isVisible = true;
 			if (!this.isInitialized) {
 				if (this._jobCacheObject.serverName === this._serverName && this._jobCacheObject.jobs.length > 0) {
+					this._showProgressWheel = 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._agentViewComponent.refresh = false;
 		} else if (this.isVisible === true && this._agentViewComponent.refresh === false) {
+			this._showProgressWheel = true;
 			this.onFirstVisible(true);
 		} else if (this.isVisible === true && this._gridEl.nativeElement.offsetParent === null) {
 			this.isVisible = false;
@@ -219,6 +225,8 @@ export class JobsViewComponent implements AfterContentChecked {
 			let currentTarget = e.currentTarget;
 			currentTarget.title = currentTarget.innerText;
 		});
+		this._showProgressWheel = false;
+		this._cd.detectChanges();
 		this.loadJobHistories();
 	}