Skip to content
This repository has been archived by the owner on Mar 6, 2020. It is now read-only.

Commit

Permalink
#68 use new native accordion component in flow logs.
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexthewilde
alexthewilde committed Dec 5, 2017
1 parent 14a944d commit 0a08bc2
Show file tree
Hide file tree
Showing 4 changed files with 32 additions and 84 deletions.
9 changes: 6 additions & 3 deletions src/app/dkt-material.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ import {
MatCardModule,
MatListModule,
MatDialogModule,
MatProgressSpinnerModule
MatProgressSpinnerModule,
MatExpansionModule
} from '@angular/material';

@NgModule({
Expand All @@ -37,7 +38,8 @@ import {
MatCardModule,
MatListModule,
MatDialogModule,
MatProgressSpinnerModule
MatProgressSpinnerModule,
MatExpansionModule
],
exports: [
MatButtonModule,
Expand All @@ -56,7 +58,8 @@ import {
MatCardModule,
MatListModule,
MatDialogModule,
MatProgressSpinnerModule
MatProgressSpinnerModule,
MatExpansionModule
]
})
export class DktMaterialModule {}
32 changes: 15 additions & 17 deletions src/app/flows/containers/flow-logs/flow-logs.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,21 +19,19 @@ <h4>Logs</h4>
<p *ngIf="state.select('loadingFlowLogs') | async" class="info">Loading logs ...</p>
<div *ngIf="!(state.select('loadingFlowLogs') | async)">
<div *ngIf="runs && runs.length; else noRuns">
<div class="runs">
<div *ngFor="let run of runs; let last = last" class="run" [class.last]="last" [class.show-details]="showDetails == run"
[ngSwitch]="getRunStatusType(run)">
<div class="run-header" (click)="toggleRunDetails(run)" fxLayout="row" fxLayoutAlign="start center">
<mat-icon *ngSwitchCase="'running'" class="status running" mat-list-icon>autorenew</mat-icon>
<mat-icon *ngSwitchCase="'task'" class="status task" mat-list-icon>assignment</mat-icon>
<mat-icon *ngSwitchCase="'success'" class="status success" mat-list-icon>check</mat-icon>
<mat-icon *ngSwitchCase="'error'" class="status error" mat-list-icon>error</mat-icon>

<h6 class="date" fxFlex mat-line>{{run.startedAt | date:'dd.MM.yy HH:mm'}}</h6>

<mat-icon class="toggle show-more">expand_more</mat-icon>
<mat-icon class="toggle show-less">expand_less</mat-icon>
</div>
<div class="run-details" [class.slide-in]="show" [class.slide-out]="!show">
<mat-accordion class="runs">
<mat-expansion-panel *ngFor="let run of runs; let last = last" class="run" [ngSwitch]="getRunStatusType(run)">
<mat-expansion-panel-header (click)="toggleRunDetails(run)">
<div class="run-header" fxLayout="row" fxLayoutAlign="start center">
<mat-icon *ngSwitchCase="'running'" class="status running" mat-list-icon>autorenew</mat-icon>
<mat-icon *ngSwitchCase="'task'" class="status task" mat-list-icon>assignment</mat-icon>
<mat-icon *ngSwitchCase="'success'" class="status success" mat-list-icon>check</mat-icon>
<mat-icon *ngSwitchCase="'error'" class="status error" mat-list-icon>error</mat-icon>

<h6 class="date" fxFlex mat-line>{{run.startedAt | date:'dd.MM.yy HH:mm'}}</h6>
</div>
</mat-expansion-panel-header>
<div class="run-details">
<div class="step-service" fxLayout="row" fxLayoutAlign="start center">
<mat-icon>{{run.currentStep.service.provider.icon}}</mat-icon>
<h6>{{run.currentStep.service.provider.name}}: {{run.currentStep.service.name}}</h6>
Expand All @@ -42,8 +40,8 @@ <h6>{{run.currentStep.service.provider.name}}: {{run.currentStep.service.name}}<
<p class="last-log-msg">Last log message: {{getLastLogMsg(run)}}</p>
<dkt-step-config-summary [schema]="run.currentStep.service.configSchema" [values]="run.currentStep.configParams"></dkt-step-config-summary>
</div>
</div>
</div>
</mat-expansion-panel>
</mat-accordion>
<div class="nav" fxLayout="row" fxLayoutAlign="center center">
<button [style.visibility]="offset > 0 ? 'visible' : 'hidden'" mat-raised-button (click)="fetchMoreLogs(offset - limit)">
<mat-icon>keyboard_arrow_left</mat-icon>
Expand Down
74 changes: 11 additions & 63 deletions src/app/flows/containers/flow-logs/flow-logs.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,52 +46,20 @@ https://github.com/jtangelder/sass-loader/issues/211 */
}
}

div.runs {
mat-accordion.runs {
padding-top: 0;
margin: 1rem 0;
border: 1px solid $list-item-border-color;
border-radius: 3px;
cursor:default;
background-color: white;
margin: 1rem;
cursor: default;
// background-color: white;
animation: FadeIn 0.2s;

div.run {
border-bottom: 1px solid $list-item-border-color;

&.last {
border-bottom: none;
}

mat-icon.show-less {
display: none;
}

&.show-details {
mat-icon.show-more {
display: none;
}

mat-icon.show-less {
display: flex;
}

div.run-header {
background-color: $light-blue;
}

div.run-details {
max-height: 400px;
}
}

mat-expansion-panel.run {
div.run-header {
cursor: pointer;

& > * {
margin: 1rem;
}

mat-icon.status {
margin-right: 1rem;

&.running {
animation: Spin 1.2s infinite linear;
color: $blue;
Expand All @@ -109,39 +77,19 @@ https://github.com/jtangelder/sass-loader/issues/211 */
color: $error-bg-color;
}
}

mat-icon.toggle {
color: $dark-grey;
}

&:hover {
background-color: $list-item-hover-bg-color;

mat-icon.toggle {
color: $dark-blue;
}
}
}

div.run-details {
overflow-y: hidden;
transition: max-height 0.3s ease-in;
max-height: 0px;

// &.slide-in {
// max-height: 400px;
// }

// &.slide-out {
// max-height: 0px;
// }

div.step-service,
p.last-log-msg {
margin: 1rem;
}

div.step-service {
mat-icon {
margin-right: 1rem;
}

mat-icon,
h6 {
color: $dark-grey;
Expand Down
1 change: 0 additions & 1 deletion src/app/flows/containers/flow-logs/flow-logs.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ export class FlowLogsComponent implements OnInit, OnDestroy {
requestedOffset: number = 0;
limit: number = 5;
status: LogStatus;
showDetails: Run = null;

constructor(
private cd: ChangeDetectorRef,
Expand Down

0 comments on commit 0a08bc2

Please sign in to comment.