added taskbar instead of custom action bar (#1288)

* added taskbar instead of custom action bar

* set actions buttons based on context

* cr comments
This commit is contained in:
Aditya Bist
2018-05-01 17:19:54 -07:00
committed by GitHub
parent c2381424bc
commit 46fb68214f
6 changed files with 164 additions and 96 deletions

View File

@@ -9,8 +9,8 @@ import * as nls from 'vs/nls';
export class AgentJobUtilities {
public static startIconClass: string = 'icon-start';
public static stopIconClass: string = 'icon-stop';
public static startIconClass: string = 'action-label icon runJobIcon';
public static stopIconClass: string = 'action-label icon stopJobIcon';
public static convertToStatusString(status: number): string {
switch(status) {

View File

@@ -21,12 +21,16 @@ jobhistory-component {
display: block;
}
.vs-dark .job-heading-container {
.job-heading-container {
height: 49px;
border-bottom: 3px solid #444444;
border-bottom: 3px solid #f4f4f4;
display: -webkit-box;
}
.vs-dark .job-heading-container {
border-bottom: 3px solid #444444;
}
#jobsDiv .jobview-grid {
height: 96%;
width : 100%;
@@ -179,12 +183,14 @@ agentview-component .jobview-grid .grid-canvas > .ui-widget-content.slick-row.od
cursor: pointer;
}
jobsview-component .jobview-grid > .monaco-table .slick-viewport > .grid-canvas
.vs-dark .jobview-grid > .monaco-table .slick-header-columns .slick-resizable-handle {
border-left: 1px dotted white;
}
.jobview-grid > .monaco-table .slick-header-columns .slick-resizable-handle {
border-left: 1px dotted #444444;
}
.job-heading-container > .icon.in-progress {
height: 20px;
width: 20px;

View File

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

View File

@@ -29,6 +29,8 @@ import { JobCacheObject } from 'sql/parts/jobManagement/common/jobManagementServ
import { AgentJobUtilities } from '../common/agentJobUtilities';
import { ITreeOptions } from 'vs/base/parts/tree/browser/tree';
import { ScrollbarVisibility } from 'vs/base/common/scrollable';
import { Taskbar, ITaskbarContent } from 'sql/base/browser/ui/taskbar/taskbar';
import { RunJobAction, StopJobAction } from 'sql/parts/jobManagement/views/jobHistoryActions';
export const DASHBOARD_SELECTOR: string = 'jobhistory-component';
@@ -46,8 +48,10 @@ export class JobHistoryComponent extends Disposable implements OnInit {
private _treeDataSource: JobHistoryDataSource;
private _treeRenderer: JobHistoryRenderer;
private _treeFilter: JobHistoryFilter;
private _actionBar: Taskbar;
@ViewChild('table') private _tableContainer: ElementRef;
@ViewChild('actionbarContainer') private _actionbarContainer: ElementRef;
@Input() public agentJobInfo: AgentJobInfo = undefined;
@Input() public agentJobHistories: AgentJobHistoryInfo[] = undefined;
@@ -127,6 +131,7 @@ export class JobHistoryComponent extends Disposable implements OnInit {
}, {verticalScrollMode: ScrollbarVisibility.Visible});
this._register(attachListStyler(this._tree, this.bootstrapService.themeService));
this._tree.layout(1024);
this._initActionBar();
}
ngAfterContentChecked() {
@@ -200,7 +205,7 @@ export class JobHistoryComponent extends Disposable implements OnInit {
stepViewRow.stepID = step.stepId.toString();
return stepViewRow;
});
this._showSteps = true;
this._showSteps = self._stepRows.length > 0;
} else {
this._showSteps = false;
}
@@ -230,38 +235,6 @@ export class JobHistoryComponent extends Disposable implements OnInit {
}
}
private jobAction(action: string, jobName: string): void {
let ownerUri: string = this._dashboardService.connectionManagementService.connectionInfo.ownerUri;
const self = this;
this._jobManagementService.jobAction(ownerUri, jobName, action).then(result => {
if (result.succeeded) {
switch (action) {
case ('run'):
var startMsg = localize('jobSuccessfullyStarted', 'The job was successfully started.');
self._notificationService.notify({
severity: Severity.Info,
message: startMsg
});
break;
case ('stop'):
var stopMsg = localize('jobSuccessfullyStopped', 'The job was successfully stopped.');
self._notificationService.notify({
severity: Severity.Info,
message: stopMsg
});
break;
default:
break;
}
} else {
self._notificationService.notify({
severity: Severity.Error,
message: result.errorMessage
});
}
});
}
private goToJobs(): void {
this._isVisible = false;
this._agentViewComponent.showHistory = false;
@@ -284,22 +257,45 @@ export class JobHistoryComponent extends Disposable implements OnInit {
}
private setActions(): void {
let startIcon: HTMLElement = $('.icon-start').get(0);
let stopIcon: HTMLElement = $('.icon-stop').get(0);
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);
}
private _initActionBar() {
let runJobAction = this.bootstrapService.instantiationService.createInstance(RunJobAction);
let stopJobAction = this.bootstrapService.instantiationService.createInstance(StopJobAction);
let taskbar = <HTMLElement>this._actionbarContainer.nativeElement;
this._actionBar = new Taskbar(taskbar, this.bootstrapService.contextMenuService);
this._actionBar.context = this;
this._actionBar.setContent([
{ action: runJobAction },
{ action: stopJobAction }
]);
}
/** GETTERS */
public get showSteps(): boolean {
return this._showSteps;
}
public get stepRows() {
return this._stepRows;
}
public get ownerUri(): string {
return this._dashboardService.connectionManagementService.connectionInfo.ownerUri;
}
/** SETTERS */
public set showSteps(value: boolean) {
this._showSteps = value;
this._cd.detectChanges();
}
public get stepRows() {
return this._stepRows;
}
}

View File

@@ -10,27 +10,6 @@
padding-bottom: 15px;
}
.vs-dark ul.action-buttons {
border-top: 3px solid #444444;
}
.action-buttons {
padding-top: 15px;
padding-left: 10px;
border-top: 3px solid #f4f4f4;
list-style-type: none;
}
ul.action-buttons .icon-start, .icon-stop {
padding-left: 25px;
}
ul.action-buttons li {
padding-right: 25px;
display: inline-block;
width: 50px;
}
.overview-container .overview-tab .resultsViewCollapsible {
padding: 15px;
display: inline;
@@ -41,6 +20,10 @@ ul.action-buttons li {
padding-left: 13px;
}
.overview-container {
padding-top: 10px;
}
.vs-dark .overview-container .overview-tab {
color: #fff;
}
@@ -119,40 +102,32 @@ input#accordion:checked ~ .accordion-content {
float: left;
cursor: pointer;
padding-left: 13px;
padding-bottom: 10px;
}
.vs-dark.monaco-shell .all-jobs >.back-button-icon {
content: url('../common/media/back_inverse.svg');
}
.vs ul.action-buttons div.icon-start,
.vs-dark ul.action-buttons div.icon-start,
.hc-black ul.action-buttons div.icon-start {
display: inline-block;
height: 20px;
width: 20px;
.vs .action-label.icon.runJobIcon,
.vs-dark .action-label.icon.runJobIcon,
.hc-black .action-label.icon.runJobIcon {
background-image: url('../common/media/start.svg');
background-repeat: no-repeat;
cursor: pointer;
padding-right: 5px;
}
.vs ul.action-buttons .icon-stop,
.vs-dark ul.action-buttons .icon-stop,
.hc-black ul.action-buttons .icon-stop {
display: inline-block;
.vs .action-label.icon.stopJobIcon,
.vs-dark .action-label.icon.stopJobIcon,
.hc-black .action-label.icon.stopJobIcon {
background-image: url('../common/media/stop.svg');
background-repeat: no-repeat;
height: 20px;
width: 20px;
cursor: pointer;
}
ul.action-buttons div.icon-start.non-runnable {
a.action-label.icon.runJobIcon.non-runnable {
opacity: 0.4;
cursor: default;
}
ul.action-buttons div.icon-stop.non-runnable {
a.action-label.icon.stopJobIcon.non-runnable {
opacity: 0.4;
cursor: default;
}
@@ -202,12 +177,9 @@ table.step-list tr.step-row td {
padding-bottom: 10px;
}
.vs-dark .step-table .monaco-tree .monaco-tree-rows.show-twisties > .monaco-tree-row.has-children > .content:before {
background-image: none;
}
.step-table .monaco-tree .monaco-tree-rows.show-twisties > .monaco-tree-row.has-children > .content:before {
background: none;
background-image: none;
}
.step-table .monaco-tree.focused .monaco-tree-rows.show-twisties > .monaco-tree-row.has-children.selected:not(.loading) > .content:before {
@@ -262,4 +234,17 @@ jobhistory-component > .jobhistory-heading-container > .icon.in-progress {
height: 20px;
padding-top: 16px;
padding-left: 20px;
}
}
jobhistory-component > .actionbar-container .monaco-action-bar > ul.actions-container {
border-top: 3px solid #f4f4f4;
padding-top: 10px;
}
.vs-dark jobhistory-component > .actionbar-container .monaco-action-bar > ul.actions-container {
border-top: 3px solid #444444;
}

View File

@@ -0,0 +1,88 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import { TPromise } from 'vs/base/common/winjs.base';
import { Action } from 'vs/base/common/actions';
import * as nls from 'vs/nls';
import { INotificationService } from 'vs/platform/notification/common/notification';
import Severity from 'vs/base/common/severity';
import { BaseActionContext } from '../../../workbench/common/actions';
import { JobHistoryComponent } from 'sql/parts/jobManagement/views/jobHistory.component';
import { JobManagementService } from '../common/jobManagementService';
import { IJobManagementService } from '../common/interfaces';
export enum JobHistoryActions {
Run = 'run',
Stop = 'stop',
}
export class RunJobAction extends Action {
public static ID = 'jobaction.runJob';
public static LABEL = nls.localize('jobaction.run', "Run");
constructor(
@INotificationService private notificationService: INotificationService,
@IJobManagementService private jobManagementService: IJobManagementService
) {
super(RunJobAction.ID, RunJobAction.LABEL, 'runJobIcon');
}
public run(context: JobHistoryComponent): TPromise<boolean> {
let jobName = context.agentJobInfo.name;
let ownerUri = context.ownerUri;
return new TPromise<boolean>((resolve, reject) => {
this.jobManagementService.jobAction(ownerUri, jobName, JobHistoryActions.Run).then(result => {
if (result.succeeded) {
var startMsg = nls.localize('jobSuccessfullyStarted', ': The job was successfully started.');
this.notificationService.notify({
severity: Severity.Info,
message: jobName+ startMsg
});
resolve(true);
} else {
this.notificationService.notify({
severity: Severity.Error,
message: result.errorMessage
});
resolve(false);
}
});
});
}
}
export class StopJobAction extends Action {
public static ID = 'jobaction.stopJob';
public static LABEL = nls.localize('jobaction.stop', "Stop");
constructor(
@INotificationService private notificationService: INotificationService,
@IJobManagementService private jobManagementService: IJobManagementService
) {
super(StopJobAction.ID, StopJobAction.LABEL, 'stopJobIcon');
}
public run(context: JobHistoryComponent): TPromise<boolean> {
let jobName = context.agentJobInfo.name;
let ownerUri = context.ownerUri;
return new TPromise<boolean>((resolve, reject) => {
this.jobManagementService.jobAction(ownerUri, jobName, JobHistoryActions.Stop).then(result => {
if (result.succeeded) {
var stopMsg = nls.localize('jobSuccessfullyStopped', ': The job was successfully stopped.');
this.notificationService.notify({
severity: Severity.Info,
message: jobName+ stopMsg
});
resolve(true);
} else {
this.notificationService.notify({
severity: Severity.Error,
message: result.errorMessage
});
resolve(false);
}
});
});
}
}