Skip to content

Commit

Permalink
Move settings icon to job list header (#527)
Browse files Browse the repository at this point in the history
  • Loading branch information
@rsasch
rsasch authored Dec 4, 2018
1 parent b0dbf97 commit 224e059
Show file tree
Hide file tree
Showing 10 changed files with 181 additions and 150 deletions.
10 changes: 8 additions & 2 deletions ui/src/app/dashboard/dashboard.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ import {CapabilitiesService} from "../core/capabilities.service";
import {FakeCapabilitiesService} from "../testing/fake-capabilities.service";
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
import {ClrIconModule, ClrTooltipModule} from "@clr/angular";
import {SettingsService} from "../core/settings.service";
import {AuthService} from "../core/auth.service";

const TEST_AGGREGATION_RESPONSE: AggregationResponse =
{
Expand Down Expand Up @@ -124,6 +126,8 @@ describe('DashboardComponent', () => {
let fixture: ComponentFixture<AppComponent>;
let fakeJobService: FakeAggregationService;
let de: DebugElement;
let fakeCapabilitiesService: FakeCapabilitiesService;
let settingsService: SettingsService;

const TEST_PROJECT = 'test-project';

Expand All @@ -136,7 +140,8 @@ describe('DashboardComponent', () => {
{field: 'extensions.userId', display: 'User ID'},
]
};

fakeCapabilitiesService = new FakeCapabilitiesService(capabilities);
settingsService = new SettingsService(new AuthService(null, fakeCapabilitiesService, null), fakeCapabilitiesService, localStorage);
TestBed.configureTestingModule({
declarations: [
AppComponent,
Expand All @@ -163,7 +168,8 @@ describe('DashboardComponent', () => {
],
providers: [
{provide: JobManagerService, useValue: fakeJobService},
{provide: CapabilitiesService, useValue: new FakeCapabilitiesService(capabilities)},
{provide: CapabilitiesService, useValue: fakeCapabilitiesService},
{provide: SettingsService, useValue: settingsService},
DashboardResolver,
RouteReuse
],
Expand Down
75 changes: 0 additions & 75 deletions ui/src/app/job-list/job-list.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,78 +45,3 @@
.mat-spinner {
top: 15%;
}

::ng-deep .mat-menu-panel.settings-menu {
min-width: 11em;
}

.settings-icon-container {
position: absolute;
right: 0;
top: 5px;
}

clr-tooltip-content {
background-color: rgba(0, 0, 0, 0.65);
padding: 0 0.5rem;
line-height: 1.5rem;
font-size: 0.65rem;
color: #fff;
display: block;
margin: -0.6rem 0.5rem 0 0;
}

h2.settings-header {
padding: 0.5rem 1rem 0 1rem;
margin: 0;
font-size: 0.8rem;
line-height: 1rem;
}

::ng-deep .settings-menu .mat-list .mat-list-item {
font-size: 0.75rem;
line-height: 1rem;
margin: 0.5rem 0;
height: auto;
}

::ng-deep .settings-menu .mat-slide-toggle {
margin: 0rem 0.5rem;
}

::ng-deep .settings-menu .mat-slide-toggle .mat-slide-toggle-content {
font-size: 0.75rem;
line-height: 1rem;
margin: 0.5rem 0.25rem;
}

::ng-deep .settings-menu .mat-slide-toggle .mat-slide-toggle-bar {
height: 0.5em;
width: 1.5rem;
}

::ng-deep .settings-menu .mat-slide-toggle .mat-slide-toggle-thumb {
height: 0.8em;
width: 0.8em;
}


.settings-button-container {
display: flex;
justify-content: flex-end;
padding: 5px;
}

button.apply-link {
font-family: Roboto, "Helvetica Neue", sans-serif;
font-size: 12px;
border: none;
display: block;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
}

button.apply-link:hover {
text-decoration: underline;
}
31 changes: 2 additions & 29 deletions ui/src/app/job-list/job-list.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,37 +2,10 @@
class="header"
[jobs]="jobs"
[pageSize]="pageSize"
[showControls]="true"></jm-header>
[showControls]="true"
(onDisplayFieldsChanged)="handleDisplayFieldsChanged($event)"></jm-header>
<mat-divider class="divider"></mat-divider>
<div class="table-container">
<span class="settings-icon-container">
<button mat-icon-button class="shard-icon" [matMenuTriggerFor]="settingsMenu" class="settings-icon">
<clr-tooltip>
<clr-icon clrTooltipTrigger shape="cog" size="18" class="is-solid"></clr-icon>
<clr-tooltip-content clrPosition="left" clrSize="xs" *clrIfOpen>
<span>view settings</span>
</clr-tooltip-content>
</clr-tooltip>
</button>
<mat-menu #settingsMenu="matMenu" class="wide-menu settings-menu" xPosition="before" yPosition="below" [overlapTrigger]="false">
<h2 class="settings-header">Displayed columns</h2>
<mat-list>
<mat-list-item *ngFor="let df of displayFields">
<mat-checkbox [checked]="df.primary"
(change)="toggleDisplayColumn(df)"
(click)="$event.stopPropagation()">{{ df.display }}</mat-checkbox>
</mat-list-item>
</mat-list>
<div *ngIf="getSavedSetting('hideArchived') != null">
<mat-divider></mat-divider>
<mat-slide-toggle #hideArchivedToggle class="hide-archived" [checked]="getSavedSetting('hideArchived')" (click)="$event.stopPropagation()">Hide archived jobs</mat-slide-toggle>
</div>
<mat-divider></mat-divider>
<div class="settings-button-container">
<button class="apply-link" (click)="saveSettings()">Done</button>
</div>
</mat-menu>
</span>
<jm-job-list-table
class="job-list-table"
[ngStyle]="{'opacity': tableOpacity}"
Expand Down
50 changes: 20 additions & 30 deletions ui/src/app/job-list/job-list.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ export class JobListComponent implements OnInit {

@ViewChild(HeaderComponent) header: HeaderComponent;
@ViewChild(JobsTableComponent) jobTable: JobsTableComponent;
@ViewChild('hideArchivedToggle') hideArchivedToggle: HTMLInputElement;
dataSource: DataSource<QueryJobsResult>;

// This Subject is synchronized to a JobStream, which we destroy and recreate
Expand Down Expand Up @@ -70,6 +69,7 @@ export class JobListComponent implements OnInit {
});
const req = URLSearchParamsUtils.unpackURLSearchParams(this.route.snapshot.queryParams['q']);
this.projectId = req.extensions.projectId || '';
this.header.projectId = this.projectId;

this.header.pageSubject.subscribe(resp => this.onClientPaginate(resp));
if (this.settingsService.getSavedSettingValue('pageSize', this.projectId)) {
Expand Down Expand Up @@ -98,6 +98,7 @@ export class JobListComponent implements OnInit {
this.displayFields.forEach((df) => {
df.primary = (savedColumnSettings == null) || savedColumnSettings.includes(df.field);
});
this.header.displayFields = this.displayFields;
}

reloadJobs(query: string, lazy = false): void {
Expand All @@ -117,7 +118,7 @@ export class JobListComponent implements OnInit {
this.router.navigate(['projects']);
return;
}
if (this.hideArchivedToggle != null && this.settingsService.getSavedSettingValue('hideArchived', this.projectId)) {
if (this.header.hideArchivedToggle != null && this.settingsService.getSavedSettingValue('hideArchived', this.projectId)) {
req.extensions.hideArchived = true;
}

Expand Down Expand Up @@ -170,6 +171,23 @@ export class JobListComponent implements OnInit {
}
}

handleDisplayFieldsChanged(displayFields: DisplayField[]) {
let fields: string[] = [];
displayFields.forEach((field) => {
if (field.primary) {
fields.push(field.field);
}
});
if (this.header.hideArchivedToggle && (this.settingsService.getSavedSettingValue('hideArchived', this.projectId) != this.header.hideArchivedToggle.checked)) {
this.settingsService.setSavedSettingValue('hideArchived', this.header.hideArchivedToggle.checked, this.projectId);
this.jobTable.displayedColumns = fields;
this.reloadJobs(this.route.snapshot.queryParams['q'], true);
}
this.settingsService.setSavedSettingValue('displayColumns', fields, this.projectId);
this.jobTable.displayedColumns = fields;
this.jobTable.setUpFieldsAndColumns();
}

private setLoading(loading: boolean, lazy: boolean): void {
if (!lazy) {
this.loading = loading;
Expand All @@ -192,34 +210,6 @@ export class JobListComponent implements OnInit {
this.jobStream.loadAtLeast((e.pageIndex+2) * e.pageSize)
.catch((error) => this.handleError(error));
}

toggleDisplayColumn(field: DisplayField) {
const newValue = !field.primary;
this.displayFields.forEach((df) => {
if (df.field == field.field) {
df.primary = newValue;
}
})
}

getSavedSetting(settingName: string) {
return this.settingsService.getSavedSettingValue(settingName, this.projectId)
}

saveSettings() {
let fields: string[] = [];
this.displayFields.forEach((field) => {
if (field.primary) {
fields.push(field.field);
}
});
if (this.hideArchivedToggle && (this.settingsService.getSavedSettingValue('hideArchived', this.projectId) != this.hideArchivedToggle.checked)) {
this.settingsService.setSavedSettingValue('hideArchived', this.hideArchivedToggle.checked, this.projectId);
this.reloadJobs(this.route.snapshot.queryParams['q'], true);
}
this.settingsService.setSavedSettingValue('displayColumns', fields, this.projectId);
this.jobTable.setUpFieldsAndColumns();
}
}


Expand Down
2 changes: 1 addition & 1 deletion ui/src/app/job-list/table/table.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,8 @@ import {UpdateJobLabelsResponse} from "../../shared/model/UpdateJobLabelsRespons
export class JobsTableComponent implements OnInit {
@Input() dataSource: DataSource<QueryJobsResult>;
@Output() onJobsChanged: EventEmitter<QueryJobsResult[]> = new EventEmitter();
@Input() displayFields: DisplayField[];
@Output() onFiltersChanged: EventEmitter<string[]> = new EventEmitter();
@Input() displayFields: DisplayField[];

private mouseoverJob: QueryJobsResult;

Expand Down
78 changes: 76 additions & 2 deletions ui/src/app/shared/header/header.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,11 +41,85 @@

.search-table-controls {
display: flex;
justify-content: space-between;
align-items: center;
min-width: 60rem;
flex-direction: row;
}

.chipShell {
padding: 0 !important;
}

::ng-deep .mat-menu-panel.settings-menu {
min-width: 11em;
}

.table-paginator-container {
margin-left: auto;
}

.settings-icon-container {
padding-top: 10px;
}

h2.settings-header {
font-family: Roboto, "Helvetica Neue", sans-serif;
padding: 0.5rem 1rem 0 1rem;
margin: 0;
font-size: 0.8rem;
line-height: 1rem;
}

::ng-deep .settings-menu .mat-list .mat-list-item {
font-size: 0.75rem;
line-height: 1rem;
margin: 0.5rem 0;
height: auto;
}

::ng-deep .settings-menu .mat-slide-toggle {
margin: 0rem 0.5rem;
}

::ng-deep .settings-menu .mat-slide-toggle .mat-slide-toggle-content {
font-size: 0.75rem;
line-height: 1rem;
margin: 0.5rem 0.25rem;
}

::ng-deep .settings-menu .mat-slide-toggle .mat-slide-toggle-bar {
height: 0.5em;
width: 1.5rem;
}

::ng-deep .settings-menu .mat-slide-toggle .mat-slide-toggle-thumb {
height: 0.8em;
width: 0.8em;
}

.settings-button-container {
padding: 5px;
}

button.apply-link {
font-family: Roboto, "Helvetica Neue", sans-serif;
font-size: 12px;
border: none;
display: block;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
}

button.apply-link:hover {
text-decoration: underline;
}

clr-tooltip-content {
background-color: rgba(0, 0, 0, 0.65);
padding: 0 0.5rem;
line-height: 1.5rem;
font-size: 0.65rem;
color: #fff;
display: block;
margin: -0.6rem 0.5rem 0 0;
}
33 changes: 31 additions & 2 deletions ui/src/app/shared/header/header.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@

<div *ngIf="showControls" class="search-table-controls">
<!-- Always include child divs, to support flex box style placement. -->
<div>
<div class="status-filter-buttons">
<ng-container *ngIf="shouldDisplayStatusButtons()">
<button class="mat-raised-button status-button {{ status | lowercase }}-button" (click)="showJobsWithStatus(status)" *ngFor="let status of buttonStatuses">
<clr-icon [attr.shape]="getStatusIcon(status)" size="18"></clr-icon>
Expand All @@ -45,13 +45,42 @@
</ng-container>
</div>

<div>
<div class="table-paginator-container">
<mat-paginator #paginator
[length]="jobs.value.results.length"
[pageIndex]="0"
[pageSize]="pageSize"
[pageSizeOptions]="[10, 20, 50, 100]">
</mat-paginator>
</div>

<div class="settings-icon-container">
<button mat-icon-button class="shard-icon" [matMenuTriggerFor]="settingsMenu" class="settings-icon">
<clr-tooltip>
<clr-icon clrTooltipTrigger shape="cog" size="18" class="is-solid"></clr-icon>
<clr-tooltip-content clrPosition="left" clrSize="xs" *clrIfOpen>
<span>view settings</span>
</clr-tooltip-content>
</clr-tooltip>
</button>
<mat-menu #settingsMenu="matMenu" class="wide-menu settings-menu" xPosition="before" yPosition="below" [overlapTrigger]="false">
<h2 class="settings-header">Displayed columns</h2>
<mat-list>
<mat-list-item *ngFor="let df of displayFields">
<mat-checkbox [checked]="df.primary"
(change)="toggleDisplayColumn(df)"
(click)="$event.stopPropagation()">{{ df.display }}</mat-checkbox>
</mat-list-item>
</mat-list>
<div *ngIf="getSavedSetting('hideArchived') != null">
<mat-divider></mat-divider>
<mat-slide-toggle #hideArchivedToggle class="hide-archived" [checked]="getSavedSetting('hideArchived')" (click)="$event.stopPropagation()">Hide archived jobs</mat-slide-toggle>
</div>
<mat-divider></mat-divider>
<div class="settings-button-container">
<button class="apply-link" (click)="saveSettings()">Done</button>
</div>
</mat-menu>
</div>
</div>
</div>
Loading

0 comments on commit 224e059

Please sign in to comment.