ngx-dynamic-dashboard
Version:
an dashboard lib for angular 10
794 lines (788 loc) • 272 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@angular/common/http'), require('@angular/animations'), require('@angular/common'), require('@angular/forms'), require('@angular/material/slide-toggle'), require('@angular/material/chips'), require('@angular/material/button'), require('@angular/material/icon'), require('@angular/material/checkbox'), require('@angular/material/select'), require('@angular/material/core'), require('@angular/material/input'), require('@angular/platform-browser/animations'), require('rxjs/operators'), require('lodash'), require('@angular/cdk/drag-drop'), require('@angular/material/progress-bar'), require('@angular/router')) :
typeof define === 'function' && define.amd ? define('ngx-dynamic-dashboard', ['exports', '@angular/core', 'rxjs', '@angular/common/http', '@angular/animations', '@angular/common', '@angular/forms', '@angular/material/slide-toggle', '@angular/material/chips', '@angular/material/button', '@angular/material/icon', '@angular/material/checkbox', '@angular/material/select', '@angular/material/core', '@angular/material/input', '@angular/platform-browser/animations', 'rxjs/operators', 'lodash', '@angular/cdk/drag-drop', '@angular/material/progress-bar', '@angular/router'], factory) :
(global = global || self, factory(global['ngx-dynamic-dashboard'] = {}, global.ng.core, global.rxjs, global.ng.common.http, global.ng.animations, global.ng.common, global.ng.forms, global.ng.material.slideToggle, global.ng.material.chips, global.ng.material.button, global.ng.material.icon, global.ng.material.checkbox, global.ng.material.select, global.ng.material.core, global.ng.material.input, global.ng.platformBrowser.animations, global.rxjs.operators, global.lodash, global.ng.cdk.dragDrop, global.ng.material.progressBar, global.ng.router));
}(this, (function (exports, i0, rxjs, i1, animations, common, forms, slideToggle, chips, button, icon, checkbox, select, core, input, animations$1, operators, lodash, dragDrop, progressBar, router) { 'use strict';
var OptionsService = /** @class */ (function () {
function OptionsService() {
this.optionsCollectionName = 'dashboardOptions';
this.defaultOptions = {
'enableHover': false,
'displayGadgetOptionsInSideBar': false
};
this.globalOptionsChangeEventSubject = new rxjs.Subject();
}
OptionsService.prototype.getBoardOptions = function () {
var databaseOptions = JSON.parse(localStorage.getItem(this.optionsCollectionName));
if (databaseOptions == null) {
this.persistDefautBoardOptions();
return this.defaultOptions;
}
else {
return databaseOptions;
}
};
OptionsService.prototype.setBoardOptions = function (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.
*/
OptionsService.prototype.listenForGlobalOptionsChanges = function () {
return this.globalOptionsChangeEventSubject.asObservable();
};
OptionsService.prototype.persistDefautBoardOptions = function () {
localStorage.setItem(this.optionsCollectionName, JSON.stringify(this.defaultOptions));
};
return OptionsService;
}());
OptionsService.decorators = [
{ type: i0.Injectable }
];
OptionsService.ctorParameters = function () { return []; };
var Message = /** @class */ (function () {
function Message(content, id, style) {
this.dismissed = false;
this.content = content;
this.style = style || 'info';
this.id = id;
}
return Message;
}());
var ToastService = /** @class */ (function () {
function ToastService() {
this.messages = [];
}
ToastService.prototype.getMessages = function () {
return this.messages;
};
ToastService.prototype.sendMessage = function (content, style) {
var message = new Message(content, this.messages.length + 1, style);
this.messages.push(message);
};
ToastService.prototype.dismissMessage = function (messageKey) {
this.purgeDismissedMessages();
this.messages.forEach(function (message) {
if (message.id === messageKey) {
message.dismissed = true;
}
});
};
ToastService.prototype.purgeDismissedMessages = function () {
this.messages.forEach(function (message, index, object) {
if (message.dismissed) {
object.splice(index, 1);
}
});
};
return ToastService;
}());
ToastService.decorators = [
{ type: i0.Injectable }
];
ToastService.ctorParameters = function () { return []; };
/**
* Created by jayhamilton on 1/24/17.
*/
var OptionsConfigurationTabComponent = /** @class */ (function () {
function OptionsConfigurationTabComponent(_optionsService, _toastService) {
this._optionsService = _optionsService;
this._toastService = _toastService;
this.enableHover = this._optionsService.getBoardOptions()['enableHover'];
this.displayGadgetOptionsInSideBar = this._optionsService.getBoardOptions()['displayGadgetOptionsInSideBar'];
}
OptionsConfigurationTabComponent.prototype.onHooverOptionChange = function (value) {
this._optionsService.setBoardOptions({
'enableHover': value['checked'],
'displayGadgetOptionsInSideBar': this.displayGadgetOptionsInSideBar
});
this._toastService.sendMessage('The board configuration has changed!', null);
};
OptionsConfigurationTabComponent.prototype.onDisplayGadgetOptionsInSideBarChange = function (value) {
this._optionsService.setBoardOptions({
'enableHover': this.enableHover,
'displayGadgetOptionsInSideBar': value['checked']
});
this._toastService.sendMessage('The board configuration has changed!', null);
};
return OptionsConfigurationTabComponent;
}());
OptionsConfigurationTabComponent.decorators = [
{ type: i0.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 = function () { return [
{ type: OptionsService },
{ type: ToastService }
]; };
var defaultBoard = {
title: 'Dashboard',
structure: '6-6',
id: 5,
boardInstanceId: 0,
rows: [
{
columns: [
{
styleClass: 'six wide',
gadgets: []
},
{
styleClass: 'six wide',
gadgets: []
}
]
}
]
};
var 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,
'