Summary Table
Categories |
Total Count |
PII |
0 |
URL |
0 |
DNS |
0 |
EKL |
0 |
IP |
0 |
PORT |
0 |
VsID |
0 |
CF |
0 |
AI |
0 |
VPD |
0 |
PL |
0 |
Other |
0 |
File Content
import {
Component,
OnInit,
ViewChild,
ElementRef,
Output,
EventEmitter,
OnDestroy
} from '@angular/core';
import { Chart } from 'chart.js';
import { ArsStorageService } from './ars-storage.service';
import { ChartDataDetailModel } from './ars-storage.model';
import { getDates } from './date-util';
import { Subscription } from 'rxjs/Subscription';
@Component({
selector: 'app-ars-storage',
templateUrl: './ars-storage.component.html',
styleUrls: ['./ars-storage.component.scss']
})
export class ArsStorageComponent implements OnInit, OnDestroy {
subscription: Subscription = new Subscription();
attachmentStoragePieChart: Chart;
attachmentStorageComboChart: Chart;
metadataStoragePieChart: Chart;
metadataStorageComboChart: Chart;
metadataDetails$: ChartDataDetailModel = new ChartDataDetailModel();
attachmentDetails$: ChartDataDetailModel = new ChartDataDetailModel();
constructor(private storageService: ArsStorageService) {}
@ViewChild('attachmentStorageCanvasLeft')
attachmentStorageCanvasLeft: ElementRef;
@ViewChild('attachmentStorageCanvasRight')
attachmentStorageCanvasRight: ElementRef;
@ViewChild('metadataStorageCanvasLeft') metadataStorageCanvasLeft: ElementRef;
@ViewChild('metadataStorageCanvasRight')
metadataStorageCanvasRight: ElementRef;
toggleAttachTable = true;
toggleMetaTable= true;
@Output() weeksUntilFullEmitter = new EventEmitter<number>();
ngOnInit() {
// methods to create charts.
this.createAttachmentStoragePieChart();
this.createAttachmentStorageComboChart();
this.createMetadataStoragePieChart();
this.createMetadataStorageComboChart();
// this.subscription.add(forkJoin(
// this.storageService.getAttachmentDetails(),
// this.storageService.getMetadataDetails()
// ).subscribe(([attachmentDetails,metadataDetails]) => {
// // attachmentData Setup
// this.attachmentDetails$ = <ChartDataDetailModel>attachmentDetails;
// this.attachmentStoragePieChart.data.datasets[0].data[0] = this.attachmentDetails$.availableStorage;
// this.attachmentStoragePieChart.data.datasets[0].data[1] = this.attachmentDetails$.usedStorage;
// this.attachmentStorageComboChart.data.datasets[0].data = this.attachmentDetails$.usedStorageStatistic; // usage
// this.attachmentStorageComboChart.data.datasets[1].data = this.attachmentDetails$.totalStorageStatistic; // line
// this.attachmentStorageComboChart.data.labels = getDates(
// this.attachmentDetails$.fromDate,
// this.attachmentDetails$.toDate
// )
// this.weeksUntilFullEmitter.emit(+this.attachmentDetails$.weeksUntilFull);
// this.attachmentStoragePieChart.update();
// this.attachmentStorageComboChart.update();
// // metaData Setup
// this.metadataDetails$ = <ChartDataDetailModel>metadataDetails;
// this.metadataStoragePieChart.data.datasets[0].data[0] = this.metadataDetails$.availableStorage;
// this.metadataStoragePieChart.data.datasets[0].data[1] = this.metadataDetails$.usedStorage;
// // load metadataStorage data into combo chart
// this.metadataStorageComboChart.data.datasets[0].data = this.metadataDetails$.usedStorageStatistic; // usage
// this.metadataStorageComboChart.data.datasets[1].data = this.metadataDetails$.totalStorageStatistic; // line
// this.metadataStorageComboChart.data.labels = getDates(
// this.metadataDetails$.fromDate,
// this.metadataDetails$.toDate
// );
// this.metadataStoragePieChart.update();
// this.metadataStorageComboChart.update();
// }, (error) => {
// console.log(error)
// }));
// initial rest calls to get chart data.
this.subscription.add(
this.storageService.getAttachmentDetails().subscribe(
(attachmentDetails: ChartDataDetailModel) => {
this.attachmentDetails$ = attachmentDetails;
// load attachmentStorage data into pie chart
this.attachmentStoragePieChart.data.datasets[0].data[0] = this.attachmentDetails$.availableStorage;
this.attachmentStoragePieChart.data.datasets[0].data[1] = this.attachmentDetails$.usedStorage;
// load attachmentStorage data into combo chart
this.attachmentStorageComboChart.data.datasets[0].data = this.attachmentDetails$.usedStorageStatistic; // usage
this.attachmentStorageComboChart.data.datasets[1].data = this.attachmentDetails$.totalStorageStatistic; // line
this.attachmentStorageComboChart.data.labels = getDates(
this.attachmentDetails$.fromDate,
this.attachmentDetails$.toDate
);
// console.log('this.attachmentStorageComboChart.data.labels', this.attachmentStorageComboChart.data.labels);
// update charts.
this.weeksUntilFullEmitter.emit(+attachmentDetails.weeksUntilFull);
},
error => {
console.log(error);
},
() => {
this.subscription.add(
this.storageService
.getMetadataDetails()
.subscribe((metadataDetails: ChartDataDetailModel) => {
this.metadataDetails$ = metadataDetails;
// load metadataStorage data into pie chart
this.metadataStoragePieChart.data.datasets[0].data[0] = this.metadataDetails$.availableStorage;
this.metadataStoragePieChart.data.datasets[0].data[1] = this.metadataDetails$.usedStorage;
// load metadataStorage data into combo chart
this.metadataStorageComboChart.data.datasets[0].data = this.metadataDetails$.usedStorageStatistic; // usage
this.metadataStorageComboChart.data.datasets[1].data = this.metadataDetails$.totalStorageStatistic; // line
this.metadataStorageComboChart.data.labels = getDates(
this.metadataDetails$.fromDate,
this.metadataDetails$.toDate
);
// update charts.
this.metadataStoragePieChart.update();
this.metadataStorageComboChart.update();
})
);
}
)
);
}
createAttachmentStoragePieChart() {
this.attachmentStoragePieChart = new Chart(
this.attachmentStorageCanvasLeft.nativeElement,
{
type: 'pie',
data: {
datasets: [
{
data: [100, 0], // [avail, used]
backgroundColor: ['rgba(0,115,167,0.2)', 'rgba(0,115,167,1.0)']
// data: [20, 80]
}
],
labels: ['Available', 'Used']
},
options: {
layout: {
padding: {
bottom: 18
}
},
legend: {
position: 'bottom',
display: false,
labels: {
boxWidth: 24,
fontFamily: 'Roboto',
fontColor: '#000',
fontSize: 12
}
},
tooltips: {
enabled: true,
backgroundColor: 'rgb(0,0,0)',
xPadding: 12,
yPadding: 9,
titleFontSize: 13,
titleFontFamily: 'Roboto',
bodyFontSize: 13,
bodyFontFamily: 'Roboto',
cornerRadius: 0,
displayColors: false,
callbacks: {
label: function(tooltipItem, data) {
const label = data.labels[tooltipItem.index];
const datasetLabel =
data.datasets[tooltipItem.datasetIndex].data[
tooltipItem.index
];
return label + ': ' + datasetLabel + 'mb';
}
}
}
}
}
);
}
createAttachmentStorageComboChart() {
this.attachmentStorageComboChart = new Chart(
this.attachmentStorageCanvasRight.nativeElement,
{
type: 'bar',
data: {
datasets: [
{
backgroundColor: 'rgb(0,115,167)',
label: 'Attachments',
data: [10, 20, 30, 40, 45, 50, 60]
},
{
label: 'Limit',
data: [90, 88, 80, 88, 90, 80, 82],
type: 'line',
borderColor: 'rgb(170,32,39)',
pointRadius: 4,
pointBackgroundColor: 'rgb(255,255,255)',
pointBorderWidth: 3
}
],
labels: ['1/28', '1/29', '1/30', '1/31', '2/1', '2/2', '2/3']
},
options: {
scales: {
yAxes: [
{
gridLines: {
color: 'rgb(204,204,204)'
}
}
],
xAxes: [
{
display: true,
gridLines: {
display: false
}
}
]
},
legend: {
position: 'bottom',
display: false,
labels: {
boxWidth: 24,
fontFamily: 'Roboto',
fontColor: '#000',
fontSize: 12
}
},
tooltips: {
enabled: true,
backgroundColor: 'rgb(0,0,0)',
xPadding: 12,
yPadding: 9,
titleFontSize: 13,
titleFontFamily: 'Roboto',
bodyFontSize: 13,
bodyFontFamily: 'Roboto',
cornerRadius: 0,
displayColors: false,
callbacks: {
label: function(tooltipItem, data) {
const label = data.datasets[tooltipItem.datasetIndex].label;
const datasetLabel =
data.datasets[tooltipItem.datasetIndex].data[
tooltipItem.index
];
return label + ': ' + datasetLabel + 'mb';
}
}
}
}
}
);
}
createMetadataStoragePieChart() {
this.metadataStoragePieChart = new Chart(
this.metadataStorageCanvasLeft.nativeElement,
{
type: 'pie',
data: {
datasets: [
{
backgroundColor: ['rgba(77,124,24,0.3)', 'rgba(77,124,24,1.0)'],
data: [40, 60]
}
],
labels: ['Available', 'Used']
},
options: {
layout: {
padding: {
bottom: 18
}
},
legend: {
position: 'bottom',
display: false,
labels: {
boxWidth: 24,
fontFamily: 'Roboto',
fontColor: '#000',
fontSize: 12
}
},
tooltips: {
enabled: true,
backgroundColor: 'rgb(0,0,0)',
xPadding: 12,
yPadding: 9,
titleFontSize: 13,
titleFontFamily: 'Roboto',
bodyFontSize: 13,
bodyFontFamily: 'Roboto',
cornerRadius: 0,
displayColors: false,
callbacks: {
label: function(tooltipItem, data) {
const label = data.labels[tooltipItem.index];
const datasetLabel =
data.datasets[tooltipItem.datasetIndex].data[
tooltipItem.index
];
return label + ': ' + datasetLabel + 'mb';
}
}
}
}
}
);
}
createMetadataStorageComboChart() {
this.metadataStorageComboChart = new Chart(
this.metadataStorageCanvasRight.nativeElement,
{
type: 'bar',
data: {
datasets: [
{
backgroundColor: 'rgb(77,124,24)',
label: 'Metadata',
data: [10, 20, 30, 40, 45, 50, 55]
},
{
label: 'Limit',
data: [70, 75, 69, 78, 71, 68, 77],
type: 'line',
borderColor: 'rgb(170,32,39)',
pointRadius: 4,
pointBackgroundColor: 'rgb(255,255,255)',
pointBorderWidth: 3
}
],
labels: ['1/28', '1/29', '1/30', '1/31', '2/1', '2/2', '2/3']
},
options: {
scales: {
yAxes: [
{
gridLines: {
color: 'rgb(204,204,204)'
}
}
],
xAxes: [
{
display: true,
gridLines: {
display: false
}
}
]
},
legend: {
position: 'bottom',
display: false,
labels: {
boxWidth: 24,
fontFamily: 'Roboto',
fontColor: '#000',
fontSize: 12
}
},
tooltips: {
enabled: true,
backgroundColor: 'rgb(0,0,0)',
xPadding: 12,
yPadding: 9,
titleFontSize: 13,
titleFontFamily: 'Roboto',
bodyFontSize: 13,
bodyFontFamily: 'Roboto',
cornerRadius: 0,
displayColors: false,
callbacks: {
label: function(tooltipItem, data) {
const label = data.datasets[tooltipItem.datasetIndex].label;
const datasetLabel =
data.datasets[tooltipItem.datasetIndex].data[
tooltipItem.index
];
return label + ': ' + datasetLabel + 'mb';
}
}
}
}
}
);
}
toggleMetaStorageTable() {
this.toggleMetaTable = !this.toggleMetaTable ;
}
toggleAttachStorageTable() {
this.toggleAttachTable = !this.toggleAttachTable;
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}