Agent - UI changes (#1859)

* fixed regressions, added separator

* finished operator dialog UI

extensions/agent/src/dialogs/jobStepDialog.ts

@@ -368,7 +368,7 @@ export class JobStepDialog {
 		this.fileBrowserDialog.content =  [fileBrowserTab];
 		fileBrowserTab.registerContent(async (view) => {
 			this.fileBrowserTree = view.modelBuilder.fileBrowserTree()
-				.withProperties({ ownerUri: this.ownerUri })
+				.withProperties({ ownerUri: this.ownerUri, width: 420, height: 700 })
 				.component();
 			this.selectedPathTextBox = view.modelBuilder.inputBox()
 				.withProperties({ inputType: 'text'})

extensions/agent/src/dialogs/operatorDialog.ts

@@ -25,16 +25,16 @@ export class OperatorDialog extends AgentDialog<OperatorData> {
 	private static readonly EnabledCheckboxLabel: string = localize('createOperator.Enabled', 'Enabled');
 	private static readonly EmailNameTextLabel: string = localize('createOperator.EmailName', 'E-mail Name');
 	private static readonly PagerEmailNameTextLabel: string = localize('createOperator.PagerEmailName', 'Pager E-mail Name');
-	private static readonly PagerMondayCheckBoxLabel: string = localize('createOperator.PagerMondayCheckBox', 'Pager on duty Monday');
+	private static readonly PagerMondayCheckBoxLabel: string = localize('createOperator.PagerMondayCheckBox', 'Monday');
-	private static readonly PagerTuesdayCheckBoxLabel: string = localize('createOperator.PagerTuesdayCheckBox', 'Pager on duty Tuesday');
+	private static readonly PagerTuesdayCheckBoxLabel: string = localize('createOperator.PagerTuesdayCheckBox', 'Tuesday');
-	private static readonly PagerWednesdayCheckBoxLabel: string = localize('createOperator.PagerWednesdayCheckBox', 'Pager on duty Wednesday');
+	private static readonly PagerWednesdayCheckBoxLabel: string = localize('createOperator.PagerWednesdayCheckBox', 'Wednesday');
-	private static readonly PagerThursdayCheckBoxLabel: string = localize('createOperator.PagerThursdayCheckBox', 'Pager on duty Thursday');
+	private static readonly PagerThursdayCheckBoxLabel: string = localize('createOperator.PagerThursdayCheckBox', 'Thursday');
-	private static readonly PagerFridayCheckBoxLabel: string = localize('createOperator.PagerFridayCheckBox', 'Pager on duty Friday');
+	private static readonly PagerFridayCheckBoxLabel: string = localize('createOperator.PagerFridayCheckBox', 'Friday  ');
-	private static readonly PagerSaturdayCheckBoxLabel: string = localize('createOperator.PagerSaturdayCheckBox', 'Pager on duty Saturday');
+	private static readonly PagerSaturdayCheckBoxLabel: string = localize('createOperator.PagerSaturdayCheckBox', 'Saturday');
-	private static readonly PagerSundayCheckBoxLabel: string = localize('createOperator.PagerSundayCheckBox', 'Pager on duty Sunday');
+	private static readonly PagerSundayCheckBoxLabel: string = localize('createOperator.PagerSundayCheckBox', 'Sunday');
 
 	// Notifications tab strings
-	private static readonly AlertsTableLabel: string = localize('createOperator.PagerSundayCheckBox', 'Pager on duty Sunday');
+	private static readonly AlertsTableLabel: string = localize('createOperator.AlertListHeading', 'Alert list');
 	private static readonly AlertNameColumnLabel: string = localize('createOperator.AlertNameColumnLabel', 'Alert name');
 	private static readonly AlertEmailColumnLabel: string = localize('createOperator.AlertEmailColumnLabel', 'E-mail');
 	private static readonly AlertPagerColumnLabel: string = localize('createOperator.AlertPagerColumnLabel', 'Pager');
@@ -55,6 +55,12 @@ export class OperatorDialog extends AgentDialog<OperatorData> {
 	private pagerFridayCheckBox: sqlops.CheckBoxComponent;
 	private pagerSaturdayCheckBox: sqlops.CheckBoxComponent;
 	private pagerSundayCheckBox: sqlops.CheckBoxComponent;
+	private weekdayPagerStartTimeInput: sqlops.InputBoxComponent;
+	private weekdayPagerEndTimeInput: sqlops.InputBoxComponent;
+	private saturdayPagerStartTimeInput: sqlops.InputBoxComponent;
+	private saturdayPagerEndTimeInput: sqlops.InputBoxComponent;
+	private sundayPagerStartTimeInput: sqlops.InputBoxComponent;
+	private sundayPagerEndTimeInput: sqlops.InputBoxComponent;
 
 	// Notification tab controls
 	private alertsTable: sqlops.TableComponent;
@@ -75,13 +81,14 @@ export class OperatorDialog extends AgentDialog<OperatorData> {
 
 	private initializeGeneralTab() {
 		this.generalTab.registerContent(async view => {
-			this.nameTextBox = view.modelBuilder.inputBox().component();
+			this.nameTextBox = view.modelBuilder.inputBox()
-
+				.withProperties({ width: '100%' })
+				.component();
 			this.enabledCheckBox = view.modelBuilder.checkBox()
 				.withProperties({
 					label: OperatorDialog.EnabledCheckboxLabel
 				}).component();
-
+			this.enabledCheckBox.checked = true;
 			this.emailNameTextBox = view.modelBuilder.inputBox().component();
 
 			this.pagerEmailNameTextBox = view.modelBuilder.inputBox().component();
@@ -96,36 +103,247 @@ export class OperatorDialog extends AgentDialog<OperatorData> {
 					label: OperatorDialog.PagerMondayCheckBoxLabel
 				}).component();
 
+			this.pagerMondayCheckBox.onChanged(() => {
+				if (this.pagerMondayCheckBox.checked) {
+					this.weekdayPagerStartTimeInput.enabled = true;
+					this.weekdayPagerEndTimeInput.enabled = true;
+				} else {
+					if (!this.pagerTuesdayCheckBox.checked && !this.pagerWednesdayCheckBox.checked &&
+						!this.pagerThursdayCheckBox.checked && !this.pagerFridayCheckBox.checked) {
+						this.weekdayPagerStartTimeInput.enabled = false;
+						this.weekdayPagerEndTimeInput.enabled = false;
+					}
+				}
+			});
+
 			this.pagerTuesdayCheckBox = view.modelBuilder.checkBox()
 				.withProperties({
 					label: OperatorDialog.PagerTuesdayCheckBoxLabel
 				}).component();
 
+
+			this.pagerTuesdayCheckBox.onChanged(() => {
+				if (this.pagerTuesdayCheckBox .checked) {
+					this.weekdayPagerStartTimeInput.enabled = true;
+					this.weekdayPagerEndTimeInput.enabled = true;
+				} else {
+					if (!this.pagerMondayCheckBox.checked && !this.pagerWednesdayCheckBox.checked &&
+						!this.pagerThursdayCheckBox.checked && !this.pagerFridayCheckBox.checked) {
+						this.weekdayPagerStartTimeInput.enabled = false;
+						this.weekdayPagerEndTimeInput.enabled = false;
+					}
+				}
+			});
+
 			this.pagerWednesdayCheckBox = view.modelBuilder.checkBox()
 				.withProperties({
 					label: OperatorDialog.PagerWednesdayCheckBoxLabel
 				}).component();
 
+			this.pagerWednesdayCheckBox.onChanged(() => {
+				if (this.pagerWednesdayCheckBox .checked) {
+					this.weekdayPagerStartTimeInput.enabled = true;
+					this.weekdayPagerEndTimeInput.enabled = true;
+				} else {
+					if (!this.pagerMondayCheckBox.checked && !this.pagerTuesdayCheckBox.checked &&
+						!this.pagerThursdayCheckBox.checked && !this.pagerFridayCheckBox.checked) {
+						this.weekdayPagerStartTimeInput.enabled = false;
+						this.weekdayPagerEndTimeInput.enabled = false;
+					}
+				}
+			});
+
 			this.pagerThursdayCheckBox = view.modelBuilder.checkBox()
 				.withProperties({
 					label: OperatorDialog.PagerThursdayCheckBoxLabel
 				}).component();
 
+			this.pagerThursdayCheckBox.onChanged(() => {
+				if (this.pagerThursdayCheckBox .checked) {
+					this.weekdayPagerStartTimeInput.enabled = true;
+					this.weekdayPagerEndTimeInput.enabled = true;
+				} else {
+					if (!this.pagerMondayCheckBox.checked && !this.pagerWednesdayCheckBox.checked &&
+						!this.pagerTuesdayCheckBox.checked && !this.pagerFridayCheckBox.checked) {
+						this.weekdayPagerStartTimeInput.enabled = false;
+						this.weekdayPagerEndTimeInput.enabled = false;
+					}
+				}
+			});
+
+			this.weekdayPagerStartTimeInput = view.modelBuilder.inputBox()
+				.withProperties({
+					inputType: 'time',
+					placeHolder: '08:00:00'
+				}).component();
+			this.weekdayPagerStartTimeInput.enabled = false;
+			let weekdayStartInputContainer = view.modelBuilder.formContainer()
+				.withFormItems([{
+					component: this.weekdayPagerStartTimeInput,
+					title: 'Workday begin'
+				}]).component();
+
+			this.weekdayPagerEndTimeInput = view.modelBuilder.inputBox()
+				.withProperties({
+					inputType: 'time',
+					placeHolder: '06:00:00'
+				}).component();
+			this.weekdayPagerEndTimeInput.enabled = false;
+			let weekdayEndInputContainer = view.modelBuilder.formContainer()
+				.withFormItems([{
+					component: this.weekdayPagerEndTimeInput,
+					title: 'Workday end'
+				}]).component();
+
 			this.pagerFridayCheckBox = view.modelBuilder.checkBox()
 				.withProperties({
-					label: OperatorDialog.PagerFridayCheckBoxLabel
+					label: OperatorDialog.PagerFridayCheckBoxLabel,
+					width: 80
 				}).component();
+			this.pagerFridayCheckBox.onChanged(() => {
+				if (this.pagerFridayCheckBox.checked) {
+					this.weekdayPagerStartTimeInput.enabled = true;
+					this.weekdayPagerEndTimeInput.enabled = true;
+				} else {
+					if (!this.pagerMondayCheckBox.checked && !this.pagerWednesdayCheckBox.checked &&
+						!this.pagerThursdayCheckBox.checked && !this.pagerTuesdayCheckBox.checked) {
+						this.weekdayPagerStartTimeInput.enabled = false;
+						this.weekdayPagerEndTimeInput.enabled = false;
+					}
+				}
+			});
+
+			let pagerFridayCheckboxContainer = view.modelBuilder.flexContainer()
+				.withLayout({
+					flexFlow: 'row',
+					alignItems: 'baseline'
+				}).withItems([this.pagerFridayCheckBox, weekdayStartInputContainer, weekdayEndInputContainer])
+				.component();
 
 			this.pagerSaturdayCheckBox = view.modelBuilder.checkBox()
 				.withProperties({
-					label: OperatorDialog.PagerSaturdayCheckBoxLabel
+					label: OperatorDialog.PagerSaturdayCheckBoxLabel,
+					width: 80
 				}).component();
 
+			this.pagerSaturdayCheckBox.onChanged(() => {
+				if (this.pagerSaturdayCheckBox.checked) {
+					this.saturdayPagerStartTimeInput.enabled = true;
+					this.saturdayPagerEndTimeInput.enabled = true;
+				} else {
+					this.saturdayPagerStartTimeInput.enabled = false;
+					this.saturdayPagerEndTimeInput.enabled = false;
+				}
+			});
+
+			this.saturdayPagerStartTimeInput = view.modelBuilder.inputBox()
+				.withProperties({
+					inputType: 'time',
+					placeHolder: '08:00:00'
+				}).component();
+			this.saturdayPagerStartTimeInput.enabled = false;
+			let saturdayStartInputContainer = view.modelBuilder.formContainer()
+				.withFormItems([{
+					component: this.saturdayPagerStartTimeInput,
+					title: 'Workday begin'
+				}]).component();
+
+			this.saturdayPagerEndTimeInput = view.modelBuilder.inputBox()
+				.withProperties({
+					inputType: 'time',
+					placeHolder: '06:00:00'
+				}).component();
+			this.saturdayPagerEndTimeInput.enabled = false;
+			let saturdayEndInputContainer = view.modelBuilder.formContainer()
+				.withFormItems([{
+					component: this.saturdayPagerEndTimeInput,
+					title: 'Workday end'
+				}]).component();
+
+			let pagerSaturdayCheckboxContainer = view.modelBuilder.flexContainer()
+				.withLayout({
+					flexFlow: 'row',
+					alignItems: 'baseline'
+				}).withItems([this.pagerSaturdayCheckBox, saturdayStartInputContainer, saturdayEndInputContainer])
+				.component();
+
 			this.pagerSundayCheckBox = view.modelBuilder.checkBox()
 				.withProperties({
-					label: OperatorDialog.PagerSundayCheckBoxLabel
+					label: OperatorDialog.PagerSundayCheckBoxLabel,
+					width: 80
 				}).component();
 
+			this.pagerSundayCheckBox.onChanged(() => {
+				if (this.pagerSundayCheckBox.checked) {
+					this.sundayPagerStartTimeInput.enabled = true;
+					this.sundayPagerEndTimeInput.enabled = true;
+				} else {
+					this.sundayPagerStartTimeInput.enabled = false;
+					this.sundayPagerEndTimeInput.enabled = false;
+				}
+			});
+
+			this.sundayPagerStartTimeInput = view.modelBuilder.inputBox()
+				.withProperties({
+					inputType: 'time',
+					placeHolder: '08:00:00'
+				}).component();
+			this.sundayPagerStartTimeInput.enabled = false;
+			let sundayStartInputContainer = view.modelBuilder.formContainer()
+				.withFormItems([{
+					component: this.sundayPagerStartTimeInput,
+					title: 'Workday begin'
+				}]).component();
+
+			this.sundayPagerEndTimeInput = view.modelBuilder.inputBox()
+				.withProperties({
+					inputType: 'time',
+					placeHolder: '06:00:00'
+				}).component();
+			this.sundayPagerEndTimeInput.enabled = false;
+			let sundayEndInputContainer = view.modelBuilder.formContainer()
+				.withFormItems([{
+					component: this.sundayPagerEndTimeInput,
+					title: 'Workday end'
+				}]).component();
+
+			let pagerSundayCheckboxContainer = view.modelBuilder.flexContainer()
+				.withLayout({
+					flexFlow: 'row',
+					alignItems: 'baseline'
+				}).withItems([this.pagerSundayCheckBox, sundayStartInputContainer, sundayEndInputContainer])
+				.component();
+
+			let checkBoxContainer = view.modelBuilder.formContainer()
+				.withFormItems([{
+					component: this.pagerMondayCheckBox,
+					title: ''
+				}, {
+					component: this.pagerTuesdayCheckBox,
+					title: ''
+				}, {
+					component: this.pagerWednesdayCheckBox,
+					title: ''
+				}, {
+					component: this.pagerThursdayCheckBox,
+					title: ''
+				}, {
+					component: pagerFridayCheckboxContainer,
+					title: ''
+				}, {
+					component: pagerSaturdayCheckboxContainer,
+					title: ''
+				}, {
+					component: pagerSundayCheckboxContainer,
+					title: ''
+				}]).component();
+
+			let pagerContainer = view.modelBuilder.flexContainer()
+				.withLayout({
+					flexFlow: 'row'
+				}).withItems([checkBoxContainer])
+				.component();
+
 			let formModel = view.modelBuilder.formContainer()
 				.withFormItems([{
 					component: this.nameTextBox,
@@ -140,22 +358,7 @@ export class OperatorDialog extends AgentDialog<OperatorData> {
 					component: this.pagerEmailNameTextBox,
 					title: OperatorDialog.PagerEmailNameTextLabel
 				}, {
-					component: this.pagerTuesdayCheckBox,
+					component: pagerContainer,
-					title: ''
-				}, {
-					component: this.pagerWednesdayCheckBox,
-					title: ''
-				}, {
-					component: this.pagerThursdayCheckBox,
-					title: ''
-				}, {
-					component: this.pagerFridayCheckBox,
-					title: ''
-				}, {
-					component: this.pagerSaturdayCheckBox,
-					title: ''
-				}, {
-					component: this.pagerSundayCheckBox,
 					title: ''
 				}]).withLayout({ width: '100%' }).component();
 
@@ -191,5 +394,12 @@ export class OperatorDialog extends AgentDialog<OperatorData> {
 		this.model.name = this.nameTextBox.value;
 		this.model.enabled = this.enabledCheckBox.checked;
 		this.model.emailAddress = this.emailNameTextBox.value;
+		this.model.pagerAddress = this.pagerEmailNameTextBox.value;
+		this.model.weekdayPagerStartTime = this.weekdayPagerStartTimeInput.value;
+		this.model.weekdayPagerEndTime = this.weekdayPagerEndTimeInput.value;
+		this.model.saturdayPagerStartTime = this.saturdayPagerStartTimeInput.value;
+		this.model.saturdayPagerEndTime = this.saturdayPagerEndTimeInput.value;
+		this.model.sundayPagerStartTime = this.sundayPagerStartTimeInput.value;
+		this.model.sundayPagerEndTime = this.sundayPagerEndTimeInput.value;
 	}
 }

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

@@ -335,4 +335,8 @@ jobsview-component .actionbar-container {
 
 .actionbar-container .monaco-action-bar > ul.actions-container > li.action-item {
 	padding-left: 20px;
+}
+
+jobsview-component .jobview-grid .slick-cell.error-row {
+    opacity: 0;
 }

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

@@ -15,7 +15,7 @@ import 'vs/css!sql/base/browser/ui/table/media/table';
 import * as sqlops from 'sqlops';
 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 { Component, Inject, forwardRef, ElementRef, ChangeDetectorRef, ViewChild, OnInit } from '@angular/core';
 import { TabChild } from 'sql/base/browser/ui/panel/tab.component';
 import { Table } from 'sql/base/browser/ui/table/table';
 import { AgentViewComponent } from 'sql/parts/jobManagement/agent/agentView.component';
@@ -342,7 +342,7 @@ export class JobsViewComponent extends JobManagementView implements OnInit  {
 
 		const self = this;
 		$(window).resize(() => {
-			let jobsViewToolbar = $('jobsview-component .jobs-view-toolbar').get(0);
+			let jobsViewToolbar = $('jobsview-component .actionbar-container').get(0);
 			let statusBar = $('.part.statusbar').get(0);
 			if (jobsViewToolbar && statusBar) {
 				let toolbarBottom = jobsViewToolbar.getBoundingClientRect().bottom;

src/sql/parts/modelComponents/checkbox.component.ts

@@ -4,18 +4,16 @@
  *--------------------------------------------------------------------------------------------*/
 
 import {
-	Component, Input, Inject, ChangeDetectorRef, forwardRef, ComponentFactoryResolver,
+	Component, Input, Inject, ChangeDetectorRef, forwardRef,
-	ViewChild, ViewChildren, ElementRef, Injector, OnDestroy, QueryList, AfterViewInit
+	ViewChild, ElementRef, OnDestroy, AfterViewInit
 } from '@angular/core';
 
 import * as sqlops from 'sqlops';
-import { Event, Emitter } from 'vs/base/common/event';
 
 import { ComponentBase } from 'sql/parts/modelComponents/componentBase';
 import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/parts/modelComponents/interfaces';
 import { Checkbox, ICheckboxOptions } from 'sql/base/browser/ui/checkbox/checkbox';
 import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
-import { attachInputBoxStyler, attachListStyler } from 'vs/platform/theme/common/styler';
 
 @Component({
 	selector: 'modelview-checkbox',

src/sql/parts/modelComponents/fileBrowserTree.component.ts

@@ -19,7 +19,7 @@ import { FileBrowserTreeView } from '../fileBrowser/fileBrowserTreeView';
 @Component({
 	selector: 'modelview-fileBrowserTree',
 	template: `
-		<div #fileBrowserTree style="width:420px;height:700px"></div>
+		<div #fileBrowserTree [style.width]="getWidth()" [style.height]="getHeight()"></div>
 	`
 })
 export default class FileBrowserTreeComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit {

src/sql/parts/modelComponents/text.component.ts

@@ -5,15 +5,14 @@
 
 import 'vs/css!./radioButton';
 import {
-	Component, Input, Inject, ChangeDetectorRef, forwardRef, ComponentFactoryResolver,
+	Component, Input, Inject, ChangeDetectorRef, forwardRef,
-	ViewChild, ViewChildren, ElementRef, Injector, OnDestroy, QueryList, AfterViewInit
+	OnDestroy, AfterViewInit
 } from '@angular/core';
 
 import * as sqlops from 'sqlops';
-import { Event, Emitter } from 'vs/base/common/event';
 
 import { ComponentBase } from 'sql/parts/modelComponents/componentBase';
-import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/parts/modelComponents/interfaces';
+import { IComponent, IComponentDescriptor, IModelStore } from 'sql/parts/modelComponents/interfaces';
 import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
 
 @Component({

src/sql/workbench/api/node/extHostModelView.ts

@@ -7,7 +7,6 @@
 import { IMainContext } from 'vs/workbench/api/node/extHost.protocol';
 import { Emitter } from 'vs/base/common/event';
 import { deepClone } from 'vs/base/common/objects';
-import { IActionDescriptor } from 'vs/editor/standalone/browser/standaloneCodeEditor';
 import URI from 'vs/base/common/uri';
 import * as nls from 'vs/nls';
 
@@ -15,7 +14,7 @@ import * as vscode from 'vscode';
 import * as sqlops from 'sqlops';
 
 import { SqlMainContext, ExtHostModelViewShape, MainThreadModelViewShape } from 'sql/workbench/api/node/sqlExtHost.protocol';
-import { IItemConfig, ModelComponentTypes, IComponentShape, IComponentEventArgs, ComponentEventType, CardType } from 'sql/workbench/api/common/sqlExtHostTypes';
+import { IItemConfig, ModelComponentTypes, IComponentShape, IComponentEventArgs, ComponentEventType} from 'sql/workbench/api/common/sqlExtHostTypes';
 
 class ModelBuilderImpl implements sqlops.ModelBuilder {
 	private nextComponentId: number;