ngx-dynamic-dashboard
Version:
an dashboard lib for angular 10
879 lines (872 loc) • 218 kB
JavaScript
import { Injectable, Component, EventEmitter, Output, Input, ViewChild, NgModule, ɵɵdefineInjectable, ɵɵinject, Pipe, ElementRef, ContentChild, TemplateRef, ComponentFactoryResolver, ViewContainerRef, ANALYZE_FOR_ENTRY_COMPONENTS, ChangeDetectorRef } from '@angular/core';
import { Subject, Observable, EMPTY, throwError, timer } from 'rxjs';
import { HttpHeaders, HttpClient, HttpClientModule, HttpParams } from '@angular/common/http';
import { trigger, state, style, transition, animate } from '@angular/animations';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule, FormControl, Validators, FormGroup } from '@angular/forms';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatChipsModule } from '@angular/material/chips';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatSelectModule } from '@angular/material/select';
import { MatOptionModule } from '@angular/material/core';
import { MatInputModule } from '@angular/material/input';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { catchError } from 'rxjs/operators';
import { filter, reverse } from 'lodash';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { NavigationEnd, Router, ActivatedRoute } from '@angular/router';
class OptionsService {
constructor() {
this.optionsCollectionName = 'dashboardOptions';
this.defaultOptions = {
'enableHover': false,
'displayGadgetOptionsInSideBar': false
};
this.globalOptionsChangeEventSubject = new Subject();
}
getBoardOptions() {
let databaseOptions = JSON.parse(localStorage.getItem(this.optionsCollectionName));
if (databaseOptions == null) {
this.persistDefautBoardOptions();
return this.defaultOptions;
}
else {
return databaseOptions;
}
}
setBoardOptions(options) {
/**
* Todo this will need to change to support the update to individual options. Currently there is only one
* option but once there is more than one this method must change to take the input and update just that
* property of the options object.
*/
localStorage.removeItem(this.optionsCollectionName);
/**
* Raise an event to listeners, primarily the gadgets, when the global options change. The listeners can use
* the event to change their behavior
*/
this.globalOptionsChangeEventSubject.next(options);
return localStorage.setItem(this.optionsCollectionName, JSON.stringify(options));
}
/**
* The gadget-base can use this method to subscribe to events that are created when the global options change.
*/
listenForGlobalOptionsChanges() {
return this.globalOptionsChangeEventSubject.asObservable();
}
persistDefautBoardOptions() {
localStorage.setItem(this.optionsCollectionName, JSON.stringify(this.defaultOptions));
}
}
OptionsService.decorators = [
{ type: Injectable }
];
OptionsService.ctorParameters = () => [];
class Message {
constructor(content, id, style) {
this.dismissed = false;
this.content = content;
this.style = style || 'info';
this.id = id;
}
}
class ToastService {
constructor() {
this.messages = [];
}
getMessages() {
return this.messages;
}
sendMessage(content, style) {
const message = new Message(content, this.messages.length + 1, style);
this.messages.push(message);
}
dismissMessage(messageKey) {
this.purgeDismissedMessages();
this.messages.forEach(message => {
if (message.id === messageKey) {
message.dismissed = true;
}
});
}
purgeDismissedMessages() {
this.messages.forEach(function (message, index, object) {
if (message.dismissed) {
object.splice(index, 1);
}
});
}
}
ToastService.decorators = [
{ type: Injectable }
];
ToastService.ctorParameters = () => [];
/**
* Created by jayhamilton on 1/24/17.
*/
class OptionsConfigurationTabComponent {
constructor(_optionsService, _toastService) {
this._optionsService = _optionsService;
this._toastService = _toastService;
this.enableHover = this._optionsService.getBoardOptions()['enableHover'];
this.displayGadgetOptionsInSideBar = this._optionsService.getBoardOptions()['displayGadgetOptionsInSideBar'];
}
onHooverOptionChange(value) {
this._optionsService.setBoardOptions({
'enableHover': value['checked'],
'displayGadgetOptionsInSideBar': this.displayGadgetOptionsInSideBar
});
this._toastService.sendMessage('The board configuration has changed!', null);
}
onDisplayGadgetOptionsInSideBarChange(value) {
this._optionsService.setBoardOptions({
'enableHover': this.enableHover,
'displayGadgetOptionsInSideBar': value['checked']
});
this._toastService.sendMessage('The board configuration has changed!', null);
}
}
OptionsConfigurationTabComponent.decorators = [
{ type: Component, args: [{
selector: 'dashboard-options-config-tab',
moduleId: module.id,
template: "<br>\nThe following options control various aspects of the board's and gadget's behavior. Changes take effect immediately.\n<br>\n<br>\n\n<mat-slide-toggle\n (change)=\"onHooverOptionChange($event)\"\n [checked]=\"enableHover\">\n Always show the gadget buttons in the title. By default buttons show/hide when you hover over the title.\n</mat-slide-toggle>\n<br>\n<br>\n<mat-slide-toggle\n (change)=\"onDisplayGadgetOptionsInSideBarChange($event)\"\n [checked]=\"displayGadgetOptionsInSideBar\">\n (Experimental) When set the options are displayed in the side bar. Otherwise it is displayed within the gadget.\n</mat-slide-toggle>\n",
styles: [""]
},] }
];
OptionsConfigurationTabComponent.ctorParameters = () => [
{ type: OptionsService },
{ type: ToastService }
];
const defaultBoard = {
title: 'Dashboard',
structure: '6-6',
id: 5,
boardInstanceId: 0,
rows: [
{
columns: [
{
styleClass: 'six wide',
gadgets: []
},
{
styleClass: 'six wide',
gadgets: []
}
]
}
]
};
const sampleBoardCollection = {
'board': [{
'title': 'Board Sample 1',
'structure': '3-6-3',
'id': 9,
'boardInstanceId': 1,
'rows': [
{
'columns': [
{
'styleClass': 'three wide',
'gadgets': [
{
'componentType': 'NewsGadgetComponent',
'name': 'News',
'description': 'What\'s new',
'icon': 'images/news.png',
'instanceId': 1500253814523,
'tags': [
{
'facet': 'Informational',
'name': 'news'
},
{
'facet': 'List',
'name': 'news'
}
],
'config': {
'propertyPages': [
{
'displayName': 'Run',
'groupId': 'run',
'position': 10,
'properties': [
{
'value': 'news',
'key': 'endpoint',
'label': 'News URL',
'required': false,
'order': 3,
'controlType': 'dynamicdropdown'
},
{
'value': 'News',
'key': 'title',
'label': 'Title',
'required': false,
'order': 1,
'controlType': 'textbox'
},
{
'value': 2,
'key': 'instanceId',
'required': false,
'order': -1,
'controlType': 'hidden'
}
]
}
]
}
}
]
},
{
'styleClass': 'six wide',
'gadgets': [
{
'componentType': 'CPUGadgetComponent',
'name': 'CPU Chart',
'description': 'Monitors CPU utilization for CDM.',
'icon': 'images/cpu.png',
'instanceId': 1499912922910,
'tags': [
{
'facet': 'Performance',
'name': 'real-time'
},
{
'facet': 'Chart',
'name': 'bar'
}
],
'config': {
'propertyPages': [
{
'displayName': 'Run',
'groupId': 'run',
'position': 10,
'properties': [
{
'value': 'CPU Utilization',
'key': 'title',
'label': 'Title',
'required': false,
'order': 1,
'controlType': 'textbox'
},
{
'value': 'Carlosappliance - Process Monitor',
'key': 'endpoint',
'label': 'API Endpoints',
'required': false,
'order': 3,
'controlType': 'dynamicdropdown'
},
{
'value': 999,
'key': 'instanceId',
'required': false,
'order': -1,
'controlType': 'hidden'
}
]
},
{
'displayName': 'Chart',
'groupId': 'chart',
'position': 11,
'properties': [
{
'value': true,
'key': 'chart_properties',
'label': 'Show chart details',
'required': false,
'order': 3,
'controlType': 'checkbox'
}
]
}
]
}
},
{
'componentType': 'TrendGadgetComponent',
'name': 'Trend',
'description': 'General trends.',
'icon': 'images/trend.png',
'instanceId': 1499912901569,
'tags': [
{
'facet': 'Performance',
'name': 'trend'
},
{
'facet': 'Chart',
'name': 'area'
}
],
'config': {
'propertyPages': [
{
'displayName': 'Run',
'groupId': 'run',
'position': 10,
'properties': [
{
'value': 'Devappliance - ECX',
'key': 'endpoint',
'label': 'API Endpoints',
'required': false,
'order': 2,
'controlType': 'dynamicdropdown'
},
{
'value': 'Trend',
'key': 'title',
'label': 'Title',
'required': false,
'order': 1,
'controlType': 'textbox'
},
{
'value': 2,
'key': 'instanceId',
'required': false,
'order': -1,
'controlType': 'hidden'
}
]
},
{
'displayName': 'Chart',
'groupId': 'chart',
'position': 11,
'properties': [
{
'value': true,
'key': 'chart_properties',
'label': 'Show chart details',
'required': false,
'order': 3,
'controlType': 'checkbox'
}
]
}
]
}
}
]
},
{
'styleClass': 'three wide',
'gadgets': []
}
]
}
]
}, {
'title': 'Board Sample 2',
'structure': '4-4-4-4/8-4-4',
'id': 8,
'boardInstanceId': 2,
'rows': [
{
'columns': [
{
'styleClass': 'four wide',
'gadgets': [
{
'componentType': 'StatisticGadgetComponent',
'name': 'Statistic',
'description': 'General statistic.',
'icon': 'images/statistic.png',
'instanceId': 1499912861630,
'tags': [
{
'facet': 'Statistic',
'name': 'counter'
}
],
'config': {
'propertyPages': [
{
'displayName': 'Run',
'groupId': 'run',
'position': 10,
'properties': [
{
'value': 'database',
'key': 'resource',
'label': 'Resource',
'required': false,
'order': 2,
'controlType': 'dropdown',
'options': [
{
'key': 'vm',
'value': 'vm'
},
{
'key': 'database',
'value': 'database'
},
{
'key': 'volume',
'value': 'volume'
},
{
'key': 'job',
'value': 'job'
}
]
},
{
'value': 'Devappliance - ECX',
'key': 'endpoint',
'label': 'API Endpoints',
'required': false,
'order': 3,
'controlType': 'dynamicdropdown'
},
{
'value': 'Statistic',
'key': 'title',
'label': 'Title',
'required': false,
'order': 1,
'controlType': 'textbox'
},
{
'value': 2,
'key': 'instanceId',
'required': true,
'order': -1,
'controlType': 'hidden'
}
]
}
]
}
}
]
},
{
'styleClass': 'four wide',
'gadgets': [
{
'componentType': 'StatisticGadgetComponent',
'name': 'Statistic',
'description': 'General statistic.',
'icon': 'images/statistic.png',
'instanceId': 1499912845375,
'tags': [
{
'facet': 'Statistic',
'name': 'counter'
}
],
'config': {
'propertyPages': [
{
'displayName': 'Run',
'groupId': 'run',
'position': 10,
'properties': [
{
'value': 'vm',
'key': 'resource',
'label': 'Resource',
'required': false,
'order': 2,
'controlType': 'dropdown',
'options': [
{
'key': 'vm',
'value': 'vm'
},
{
'key': 'database',
'value': 'database'
},
{
'key': 'volume',
'value': 'volume'
},
{
'key': 'job',
'value': 'job'
}
]
},
{
'value': 'Carlosappliance - Process Monitor',
'key': 'endpoint',
'label': 'API Endpoints',
'required': false,
'order': 3,
'controlType': 'dynamicdropdown'
},
{
'value': 'Statistic',
'key': 'title',
'label': 'Title',
'required': false,
'order': 1,
'controlType': 'textbox'
},
{
'value': 2,
'key': 'instanceId',
'required': true,
'order': -1,
'controlType': 'hidden'
}
]
}
]
}
}
]
},
{
'styleClass': 'four wide',
'gadgets': [
{
'componentType': 'StatisticGadgetComponent',
'name': 'Statistic',
'description': 'General statistic.',
'icon': 'images/statistic.png',
'instanceId': 1500251223835,
'tags': [
{
'facet': 'Statistic',
'name': 'counter'
}
],
'config': {
'propertyPages': [
{
'displayName': 'Run',
'groupId': 'run',
'position': 10,
'properties': [
{
'value': 'volume',
'key': 'resource',
'label': 'Resource',
'required': false,
'order': 2,
'controlType': 'dropdown',
'options': [
{
'key': 'vm',
'value': 'vm'
},
{
'key': 'database',
'value': 'database'
},
{
'key': 'volume',
'value': 'volume'
},
{
'key': 'job',
'value': 'job'
}
]
},
{
'value': 'Carlosappliance - Process Monitor',
'key': 'endpoint',
'label': 'API Endpoints',
'required': false,
'order': 3,
'controlType': 'dynamicdropdown'
},
{
'value': 'Statistic',
'key': 'title',
'label': 'Title',
'required': false,
'order': 1,
'controlType': 'textbox'
},
{
'value': 2,
'key': 'instanceId',
'required': true,
'order': -1,
'controlType': 'hidden'
}
]
}
]
}
}
]
},
{
'styleClass': 'four wide',
'gadgets': [
{
'componentType': 'StatisticGadgetComponent',
'name': 'Statistic',
'description': 'General statistic.',
'icon': 'images/statistic.png',
'instanceId': 1500251241829,
'tags': [
{
'facet': 'Statistic',
'name': 'counter'
}
],
'config': {
'propertyPages': [
{
'displayName': 'Run',
'groupId': 'run',
'position': 10,
'properties': [
{
'value': 'job',
'key': 'resource',
'label': 'Resource',
'required': false,
'order': 2,
'controlType': 'dropdown',
'options': [
{
'key': 'vm',
'value': 'vm'
},
{
'key': 'database',
'value': 'database'
},
{
'key': 'volume',
'value': 'volume'
},
{
'key': 'job',
'value': 'job'
}
]
},
{
'value': 'Carlosappliance - Process Monitor',
'key': 'endpoint',
'label': 'API Endpoints',
'required': false,
'order': 3,
'controlType': 'dynamicdropdown'
},
{
'value': 'Statistic',
'key': 'title',
'label': 'Title',
'required': false,
'order': 1,
'controlType': 'textbox'
},
{
'value': 2,
'key': 'instanceId',
'required': true,
'order': -1,
'controlType': 'hidden'
}
]
}
]
}
}
]
}
]
},
{
'columns': [
{
'styleClass': 'eight wide',
'gadgets': [
{
'componentType': 'TrendLineGadgetComponent',
'name': 'Realtime Performance',
'description': 'IOPs and Network Bandwidth.',
'icon': 'images/trend-line.png',
'instanceId': 1500251340757,
'tags': [
{
'facet': 'Performance',
'name': 'trend'
},
{
'facet': 'Chart',
'name': 'line'
}
],
'config': {
'propertyPages': [
{
'displayName': 'Run',
'groupId': 'run',
'position': 10,
'properties': [
{
'value': 'Devappliance - ECX',
'key': 'endpoint',
'label': 'API Endpoints',
'required': false,
'order': 2,
'controlType': 'dynamicdropdown'
},
{
'value': 'Performance',
'key': 'title',
'label': 'Title',
'required': false,
'order': 1,
'controlType': 'textbox'
},
{
'value': 2,
'key': 'instanceId',
'required': false,
'order': -1,
'controlType': 'hidden'
}
]
},
{
'displayName': 'Chart',
'groupId': 'chart',
'position': 11,
'properties': [
{
'value': true,
'key': 'chart_properties',
'label': 'Show chart details',
'required': false,
'order': 3,
'controlType': 'checkbox'
}
]
}
]
}
},
{
'componentType': 'ServiceListGadgetComponent',
'name': 'Service Status',
'description': 'Monitors Service Status',
'icon': 'images/service.png',
'instanceId': 1500343727872,
'tags': [
{
'facet': 'List',
'name': 'health'
}
],
'config': {
'propertyPages': [
{
'displayName': 'Run',
'groupId': 'run',
'position': 10,
'properties': [
{
'value': 'Devappliance - Process Monitor',
'key': 'endpoint',
'label': 'API Endpoints',
'required': false,
'order': 2,
'controlType': 'dynamicdropdown'
},
{
'value': 'Service Status',
'key': 'title',
'label': 'Title',
'required': false,
'order': 1,
'controlType': 'textbox'
},
{
'value': 999,
'key': 'instanceId',
'required': false,
'order': -1,
'controlType': 'hidden'
}
]
},
{
'displayName': 'List',
'groupId': 'chart',
'position': 11,
'properties': [
{
'value': true,
'key': 'chart_properties',
'label': 'Show chart details',
'required': false,
'order': 3,
'controlType': 'checkbox'
}
]
}
]
}
}
]
},
{
'styleClass': 'four wide',
'gadgets': [
{
'componentType': 'DiskGadgetComponent',
'name': 'Disk Utilization',
'description': 'Disk consumption information for ECX.',
'icon': 'images/donut.png',
'instanceId': 1500253741130,
'tags': [
{
'facet': 'Chart',
'name': 'pie'
},
{
'facet': 'Performance',
'name': 'storage'
}
],
'config': {
'propertyPages': [
{
'displayName': 'Run',
'groupId': 'run',
'position': 10,
'properties': [
{
'value': 'Carlosappliance - Process Monitor',
'key': 'endpoint',
'label': 'API Endpoints',
'required': false,
'order': 4,
'controlType': 'dynamicdropdown'
},
{
'value': 'Disk Consumption',
'key': 'title',
'label': 'Title',
'required': false,
'order': 1,
'controlType': 'textbox'
},
{