Skip to content

Commit

Permalink
Interface tables and iframe styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@tjohnson-bah
tjohnson-bah committed Mar 6, 2019
1 parent a49ff3a commit 9c25252
Show file tree
Hide file tree
Showing 12 changed files with 122 additions and 101 deletions.
2 changes: 1 addition & 1 deletion walkoff/client/dist/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,5 @@
<link rel="stylesheet" href="client/dist/styles.633b66e9d66cbebac26f.css"></head>
<body>
<main-component>Loading...</main-component>
<script type="text/javascript" src="client/dist/runtime.0cd64862052be0d1bb28.js"></script><script type="text/javascript" src="client/dist/polyfills.f6ae3e8b63939c618130.js"></script><script type="text/javascript" src="client/dist/scripts.7d79358aed8c810f6a21.js"></script><script type="text/javascript" src="client/dist/main.5d69adbff2a8082b48d4.js"></script></body>
<script type="text/javascript" src="client/dist/runtime.0cd64862052be0d1bb28.js"></script><script type="text/javascript" src="client/dist/polyfills.f6ae3e8b63939c618130.js"></script><script type="text/javascript" src="client/dist/scripts.7d79358aed8c810f6a21.js"></script><script type="text/javascript" src="client/dist/main.ce42c410f5bf50c1f210.js"></script></body>
</html>
2 changes: 1 addition & 1 deletion .../client/dist/main.5d69adbff2a8082b48d4.js → .../client/dist/main.ce42c410f5bf50c1f210.js
View file

Large diffs are not rendered by default.

17 changes: 2 additions & 15 deletions walkoff/client/src/app/interfaces/interfaces.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, ElementRef, ViewChild, ViewEncapsulation, OnInit, OnChanges } from '@angular/core';
import { Component, ElementRef, ViewChild, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ToastrService } from 'ngx-toastr';

Expand All @@ -10,15 +10,11 @@ import { HttpClient } from '@angular/common/http';
import { InterfaceService } from './interface.service';
import { GridsterConfig, GridType, CompactType } from 'angular-gridster2';
import { Interface } from '../models/interface/interface';
import { InterfaceWidget } from '../models/interface/interfaceWidget';

import { DomSanitizer } from '@angular/platform-browser';

@Component({
selector: 'interfaces-component',
templateUrl: './interfaces.html',
styleUrls: ['./interfaces.scss'],
encapsulation: ViewEncapsulation.None,
providers: [AuthService],
})
export class InterfacesComponent implements OnInit {
Expand All @@ -38,8 +34,7 @@ export class InterfacesComponent implements OnInit {

constructor(
private route: ActivatedRoute, private toastrService: ToastrService,
private http: HttpClient, private interfaceService: InterfaceService,
private sanitizer: DomSanitizer
private http: HttpClient, private interfaceService: InterfaceService
) { }

/**
Expand Down Expand Up @@ -128,10 +123,6 @@ export class InterfacesComponent implements OnInit {
return this.gridRows * Math.ceil(this.gridColSize * 3 / 4 + this.gridGutterSize) + this.gridGutterSize + 'px';
}

getItemHeight(item: InterfaceWidget) {
return item.rows * Math.ceil(this.gridColSize * 3/4 + this.gridGutterSize) - 80;
}

savePDF() {
return window.print();
var el = $('#main');//document.getElementById('grid');
Expand Down Expand Up @@ -233,8 +224,4 @@ export class InterfacesComponent implements OnInit {
// pdf.save('Test.pdf');
//});
}

sanitizeEmbedUrl(url) {
return this.sanitizer.bypassSecurityTrustResourceUrl(url)
}
}
56 changes: 30 additions & 26 deletions walkoff/client/src/app/interfaces/interfaces.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,40 +16,44 @@ <h1 class="mb-0">
<gridster class="displayGrid" [options]="options">
<gridster-item [item]="item" *ngFor="let item of interface.widgets" class="p-3">
<!-- your content here -->
<h3 class="text-center">{{ item.title }}</h3>
<div class="widget">
<div *ngIf="item.title" class="widget-header">
<h3 class="text-center">{{ item.title }}</h3>
</div>

<div *ngIf="item.metadata; let metadata">
<div class="widget-content" *ngIf="item.metadata; let metadata">

<div *ngIf="item.type == 'bar'">
<canvas baseChart [datasets]="metadata.chartData" [labels]="metadata.chartLabels" [options]="item.chartOptions" [legend]="item.showLegend"
[chartType]="'bar'">
</canvas>
</div>
<ng-container *ngIf="item.type == 'bar'">
<canvas baseChart [datasets]="metadata.chartData" [labels]="metadata.chartLabels" [options]="item.chartOptions" [legend]="item.showLegend"
[chartType]="'bar'">
</canvas>
</ng-container>

<div *ngIf="item.type == 'line'">
<canvas baseChart [datasets]="metadata.chartData" [labels]="metadata.chartLabels" [options]="item.chartOptions" [legend]="item.showLegend"
[chartType]="'line'">
</canvas>
</div>
<ng-container *ngIf="item.type == 'line'">
<canvas baseChart [datasets]="metadata.chartData" [labels]="metadata.chartLabels" [options]="item.chartOptions" [legend]="item.showLegend"
[chartType]="'line'">
</canvas>
</ng-container>

<div *ngIf="item.type == 'pie'">
<canvas baseChart [data]="metadata.chartData" [labels]="metadata.chartLabels" [chartType]="'pie'" [legend]="item.showLegend">
</canvas>
</div>
<ng-container *ngIf="item.type == 'pie'">
<canvas baseChart [data]="metadata.chartData" [labels]="metadata.chartLabels" [chartType]="'pie'" [legend]="item.showLegend">
</canvas>
</ng-container>

<div *ngIf="item.type == 'text'">
<p *ngIf="item.text">{{ item.text }}</p>
</div>
<ng-container *ngIf="item.type == 'text'">
<p *ngIf="item.text">{{ item.text }}</p>
</ng-container>

<div *ngIf="item.type == 'table'">
<ngx-datatable [style.height.px]="getItemHeight(item)" class="material" [scrollbarV]="true" [columnMode]="'force'" [rows]="metadata.rows" [columns]="metadata.columns"></ngx-datatable>
</div>
<ng-container *ngIf="item.type == 'table'">
<ngx-datatable class="material widget-fullscreen" headerHeight="45" rowHeight="45" [columnMode]="'force'" [rows]="metadata.rows" [columns]="metadata.columns"></ngx-datatable>
</ng-container>

<div *ngIf="item.type == 'kibana'">
<iframe class="kibana" [src]="sanitizeEmbedUrl(item.options.embedUrl)"></iframe>
</div>
<ng-container *ngIf="item.type == 'kibana'">
<iframe class="widget-fullscreen" [src]="item.options.embedUrl | safeEmbed"></iframe>
</ng-container>

</div>
</div>
</div>
</gridster-item>
</gridster>
</div>
Expand Down
23 changes: 19 additions & 4 deletions walkoff/client/src/app/interfaces/interfaces.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,26 @@ gridster.displayGrid {
background: none;
}

#grid iframe.kibana {
.widget {
display: flex;
flex-direction: column;
height: 100%;
}

.widget-header {
flex-basis: content;
}

.widget-content {
flex: 1;
position: relative;
}

.widget-fullscreen {
overflow-y: scroll !important;
width: 100%;
height: 100%;
position: absolute;
display: block;
bottom: 0;
left: 0;
left:0;
bottom:0;
}
65 changes: 33 additions & 32 deletions walkoff/client/src/app/interfaces/manage.interfaces.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,47 +31,48 @@ <h1>{{ (existingInterface) ? 'Edit' : 'New' }} Interface
<gridster class="rounded" [options]="options">
<gridster-item [item]="item" *ngFor="let item of interface.widgets" class="p-3 rounded">
<!-- your content here -->
<a class="text-secondary float-left" href="#" (click)="editWidget($event, item)"><i class="fa fa-gear"></i></a>
<div class="widget">
<div class="widget-header">
<a class="text-secondary float-left" href="#" (click)="editWidget($event, item)"><i class="fa fa-gear"></i></a>

<button type="button" class="close" (click)="removeWidget($event, item)" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>

<h5 *ngIf="item.title" class="text-center">{{ item.title }}</h5>

<div *ngIf="item.metadata; let metadata">

<div *ngIf="item.type == 'bar'">
<canvas baseChart [datasets]="metadata.chartData" [labels]="metadata.chartLabels" [options]="item.chartOptions" [legend]="item.showLegend"
[chartType]="'bar'">
</canvas>
<button type="button" class="close" (click)="removeWidget($event, item)" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>

<h5 *ngIf="item.title" class="text-center">{{ item.title }}</h5>
</div>

<div *ngIf="item.type == 'line'">
<canvas baseChart [datasets]="metadata.chartData" [labels]="metadata.chartLabels" [options]="item.chartOptions" [legend]="item.showLegend"
[chartType]="'line'">
</canvas>
</div>
<div class="widget-content" *ngIf="item.metadata; let metadata">
<div *ngIf="item.type == 'bar'">
<canvas baseChart [datasets]="metadata.chartData" [labels]="metadata.chartLabels" [options]="item.chartOptions" [legend]="item.showLegend"
[chartType]="'bar'">
</canvas>
</div>

<div *ngIf="item.type == 'pie'">
<canvas baseChart [data]="metadata.chartData" [labels]="metadata.chartLabels" [chartType]="'pie'" [legend]="item.showLegend">
</canvas>
</div>
<div *ngIf="item.type == 'line'">
<canvas baseChart [datasets]="metadata.chartData" [labels]="metadata.chartLabels" [options]="item.chartOptions" [legend]="item.showLegend"
[chartType]="'line'">
</canvas>
</div>

<div *ngIf="item.type == 'text'">
<p *ngIf="item.text">{{ item.text }}</p>
</div>
<div *ngIf="item.type == 'pie'">
<canvas baseChart [data]="metadata.chartData" [labels]="metadata.chartLabels" [chartType]="'pie'" [legend]="item.showLegend">
</canvas>
</div>

<div *ngIf="item.type == 'table'">
<ngx-datatable [style.height.px]="getItemHeight(item)" class="material" [scrollbarV]="true" [columnMode]="'force'" [rows]="metadata.rows" [columns]="metadata.columns"></ngx-datatable>
</div>
<div *ngIf="item.type == 'text'">
<p *ngIf="item.text">{{ item.text }}</p>
</div>

<div *ngIf="item.type == 'kibana'">
<iframe class="kibana" [src]="sanitizeEmbedUrl(item.options.embedUrl)"></iframe>
</div>
<div *ngIf="item.type == 'table'">
<ngx-datatable class="material widget-fullscreen" headerHeight="45" rowHeight="45" [columnMode]="'force'" [rows]="metadata.rows" [columns]="metadata.columns"></ngx-datatable>
</div>

<div *ngIf="item.type == 'kibana'">
<iframe class="widget-fullscreen" [src]="item.options.embedUrl | safeEmbed"></iframe>
</div>
</div>
</div>

</gridster-item>
</gridster>
</div>
Expand Down
25 changes: 20 additions & 5 deletions walkoff/client/src/app/interfaces/manage.interfaces.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,26 @@
margin: auto;
}

#grid iframe.kibana {
.widget {
display: flex;
flex-direction: column;
height: 100%;
}

.widget-header {
flex-basis: content;
}

.widget-content {
flex: 1;
position: relative;
}

.widget-fullscreen {
overflow-y: scroll;
width: 100%;
height: 85%;
height: 100%;
position: absolute;
display: block;
left: 0;
bottom: 0;
left:0;
bottom:0;
}
16 changes: 2 additions & 14 deletions walkoff/client/src/app/interfaces/manage.interfaces.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,12 @@
import { Component, OnInit } from '@angular/core';
import { GridsterConfig, GridsterItem, GridType, CompactType } from 'angular-gridster2';
import { GridsterConfig, GridType, CompactType } from 'angular-gridster2';
import { InterfaceWidget, BarChartWidget, PieChartWidget, LineChartWidget, TextWidget, KibanaWidget, TableWidget } from '../models/interface/interfaceWidget';
import { Interface } from '../models/interface/interface';
import { InterfaceService } from './interface.service';
import { ToastrService } from 'ngx-toastr';
import { ActivatedRoute, Router } from '@angular/router';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { WidgetModalComponent } from './widget.modal.component';
import { DomSanitizer } from '@angular/platform-browser';



@Component({
selector: 'manage-interfaces-component',
Expand All @@ -34,8 +31,7 @@ export class ManageInterfacesComponent implements OnInit {
private toastrService: ToastrService,
private activeRoute: ActivatedRoute,
private router: Router,
private modalService: NgbModal,
private sanitizer: DomSanitizer
private modalService: NgbModal
) {}

ngOnInit() {
Expand Down Expand Up @@ -85,10 +81,6 @@ export class ManageInterfacesComponent implements OnInit {
return this.gridRows * Math.ceil(this.gridColSize * 3/4 + this.gridGutterSize) + this.gridGutterSize + 'px';
}

getItemHeight(item: InterfaceWidget) {
return item.rows * Math.ceil(this.gridColSize * 3/4 + this.gridGutterSize) - 80;
}

changedOptions() {
this.options.api.optionsChanged();
}
Expand Down Expand Up @@ -152,8 +144,4 @@ export class ManageInterfacesComponent implements OnInit {
this.router.navigate(['/new-interface']);
}
}

sanitizeEmbedUrl(url) {
return this.sanitizer.bypassSecurityTrustResourceUrl(url)
}
}
2 changes: 1 addition & 1 deletion walkoff/client/src/app/interfaces/widget.modal.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ <h4 class="modal-title">Configure Widget</h4>
<div class="col-12">
<div class="form-group">
<label for="title">Title</label>
<input label="title" type="text" [(ngModel)]="widget.title" class="form-control">
<input label="title" type="text" [(ngModel)]="widget.title" class="form-control" placeholder="Title (Optional)">
</div>
</div>
<div *ngIf="!['text', 'kibana'].includes(widget.type)" class="col-12">
Expand Down
2 changes: 2 additions & 0 deletions walkoff/client/src/app/main.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ import { KeysPipe } from './pipes/keys.pipe';
import { UtilitiesService } from './utilities.service';
import { ManageInterfacesComponent } from './interfaces/manage.interfaces.component';
import { WidgetModalComponent } from './interfaces/widget.modal.component';
import { SafeEmbedPipe } from './pipes/safeEmbed.pipe';

@NgModule({
imports: [
Expand Down Expand Up @@ -102,6 +103,7 @@ import { WidgetModalComponent } from './interfaces/widget.modal.component';
SettingsRolesComponent,
// Pipes
KeysPipe,
SafeEmbedPipe,
ManageInterfacesComponent,
WidgetModalComponent,
],
Expand Down
3 changes: 1 addition & 2 deletions walkoff/client/src/app/models/interface/interfaceWidget.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export abstract class InterfaceWidget {
metadata: any = {};

constructor(
public title: string = 'Widget',
public title: string = '',
public x = 0,
public y = 0,
public cols = 4,
Expand Down Expand Up @@ -61,7 +61,6 @@ export class PieChartWidget extends ChartWidget {
chartData: number[] = [1881, 1408, 2];

setMetadata(results: any) {
console.log(results);
this.metadata = {
chartLabels: results.headers,
chartData: results.rows[0]
Expand Down
10 changes: 10 additions & 0 deletions walkoff/client/src/app/pipes/safeEmbed.pipe.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { PipeTransform, Pipe } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({ name: 'safeEmbed' })
export class SafeEmbedPipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer) {}
transform(url) {
return this.sanitizer.bypassSecurityTrustResourceUrl(url);
}
}

0 comments on commit 9c25252

Please sign in to comment.