diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..ea86118 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +device_onboarding/env/ +msp_customer_onboarding/env/ +device_provisioning/env/ \ No newline at end of file diff --git a/README.md b/README.md index 28c5174..5e7b640 100644 --- a/README.md +++ b/README.md @@ -1,47 +1,36 @@ -# central-examples-only +# central-python-workflows -This repository contains code samples for Aruba Central. -- [Custom Dashboard](customized-dashboard/) +This repository contains Python based workflows & code samples that utilize [Aruba Central's automation capabilities](https://developer.arubanetworks.com/aruba-central/docs/aruba-central-extensibility) and the Python SDK [pycentral](https://pypi.org/project/pycentral/) -- [REST API Python Libraries and Scripts](rest-api-python-scripts/) +## Aruba Central REST APIs +- [Device Provisioning](device_provisioning/)\ + ![Device Provisioning Demo Workflow](device_provisioning/media/workflow_overview.png) +- [Device Onboarding](device_onboarding/)\ + ![Device Onboarding Demo Workflow](device_onboarding/media/workflow_overview.png) +- [MSP Customer Onboarding](msp_customer_onboarding/)\ + ![Device Onboarding Demo Workflow](msp_customer_onboarding/media/workflow_overview.png) +- [Inventory to Excel Workflows](inventory_to_excel/)\ + This workflow creates excel files populated with device details from devices currently in inventory. +- [Postman Collections](Postman-Collections/)\ + Postman is a popular tool to test and make HTTP Requests to API endpoints. This folder contains Postman collections in JSON format for Aruba Central REST APIs. -- [Streaming API Websocket Client Application](streaming-api-client/) - -- [Webhook Client application](webhooks/) - -## Aruba Central Custom Dashboard - -This folder contains a sample code for building your own Aruba Central Dashboard using the API Gateways -[Aruba Central Custom Dashboard](customized-dashboard/) - - -### Instructions for using the "customized-dashboard" folder - -1. Clone the repo -2. `cd customized-dashboard/` -3. `npm install` -4. `ng serve`. This should have your web-app up and running -5. Edit the file `vi src/config/service.config.ts` and provide a valid App URL and access token. Save this file. -6. Open 'localhost:4200' in your browser to see the home page - -## Aruba Central REST API Python Sample Scripts - -[rest-api-python-scripts/](rest-api-python-scripts/) - -This folder contains sample python libraries and scripts to make API Requests to Aruba Central. REST APIs are based on request-response model. -Refer to the Aruba Central's API Swagger documentation page (under `ACCOUNT HOME -> GLOBAL SETTINGS -> API GATEWAY -> APIs`) for the list of available APIs. +To manage REST APIs in Aruba Central, go to `MAINTAIN -> ORGANIZATION -> PLATFORM INTEGRATION -> REST API`.\ +Learn more about Aruba Central REST APIs [here](https://developer.arubanetworks.com/aruba-central/docs/api-getting-started). ## Aruba Central Streaming API - -[streaming-api-client/](streaming-api-client/) - -This folder contains sample websocket client application based on python programming language. +- [Streaming API Websocket Client Application](streaming-api-client/)\ +The sample script in this section contains sample websocket client application based on python. The sample python script would establish a websocket connection and decode the google protobuf message to human readable format. +To manage Streaming APIs in Aruba Central, go to `MAINTAIN -> ORGANIZATION -> PLATFORM INTEGRATION -> STREAMING`.\ +Learn more about Aruba Central Streaming APIs [here](https://developer.arubanetworks.com/aruba-central/docs/streaming-api-getting-started). + ## Aruba Central Webhooks -[webhooks/](webhooks/) +- [Webhook Client application](webhooks/)\ +The sample script in this section would start a HTTP(s) client to receive Alerts from Aruba Central via webhooks. -This folder contains sample scripts and documentation for Aruba Central Webhooks and Alerts. The sample script in this section would start a HTTP(s) client to receive Alerts from Aruba Central via webhooks. To manage Webhooks in Aruba Central, go to `ACCOUNT HOME -> GLOBAL SETTINGS -> WEBHOOKS`. +To manage Webhooks in Aruba Central, go to `MAINTAIN -> ORGANIZATION -> PLATFORM INTEGRATION -> WEBHOOKS`.\ +Learn more about Aruba Central Webhooks [here](https://developer.arubanetworks.com/aruba-central/docs/webhooks-getting-started). -For more information about Aruba Central, [refer here](https://help.central.arubanetworks.com/latest/documentation/online_help/content/home.htm) +For more information about Aruba Central, [refer here](https://www.arubanetworks.com/techdocs/central/latest/content/home.htm) diff --git a/customized-dashboard/.editorconfig b/customized-dashboard/.editorconfig deleted file mode 100644 index e89330a..0000000 --- a/customized-dashboard/.editorconfig +++ /dev/null @@ -1,13 +0,0 @@ -# Editor configuration, see https://editorconfig.org -root = true - -[*] -charset = utf-8 -indent_style = space -indent_size = 2 -insert_final_newline = true -trim_trailing_whitespace = true - -[*.md] -max_line_length = off -trim_trailing_whitespace = false diff --git a/customized-dashboard/.gitignore b/customized-dashboard/.gitignore deleted file mode 100644 index f4f46a5..0000000 --- a/customized-dashboard/.gitignore +++ /dev/null @@ -1,46 +0,0 @@ -# See http://help.github.com/ignore-files/ for more about ignoring files. - -# compiled output -/dist -/tmp -/out-tsc -# Only exists if Bazel was run -/bazel-out - -# dependencies -/node_modules - -# profiling files -chrome-profiler-events.json -speed-measure-plugin.json - -# IDEs and editors -/.idea -.project -.classpath -.c9/ -*.launch -.settings/ -*.sublime-workspace - -# IDE - VSCode -.vscode/* -!.vscode/settings.json -!.vscode/tasks.json -!.vscode/launch.json -!.vscode/extensions.json -.history/* - -# misc -/.sass-cache -/connect.lock -/coverage -/libpeerconnection.log -npm-debug.log -yarn-error.log -testem.log -/typings - -# System Files -.DS_Store -Thumbs.db diff --git a/customized-dashboard/README.md b/customized-dashboard/README.md deleted file mode 100644 index 12ce40c..0000000 --- a/customized-dashboard/README.md +++ /dev/null @@ -1,27 +0,0 @@ -# CustomizedDashboard - -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.1.2. - -## Development server - -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. - -## Code scaffolding - -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. - -## Build - -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. - -## Running unit tests - -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). - -## Running end-to-end tests - -Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). - -## Further help - -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). diff --git a/customized-dashboard/angular.json b/customized-dashboard/angular.json deleted file mode 100644 index f7d440a..0000000 --- a/customized-dashboard/angular.json +++ /dev/null @@ -1,127 +0,0 @@ -{ - "$schema": "./node_modules/@angular/cli/lib/config/schema.json", - "version": 1, - "newProjectRoot": "projects", - "projects": { - "customized-dashboard": { - "projectType": "application", - "schematics": { - "@schematics/angular:component": { - "style": "scss" - } - }, - "root": "", - "sourceRoot": "src", - "prefix": "app", - "architect": { - "build": { - "builder": "@angular-devkit/build-angular:browser", - "options": { - "outputPath": "dist/customized-dashboard", - "index": "src/index.html", - "main": "src/main.ts", - "polyfills": "src/polyfills.ts", - "tsConfig": "tsconfig.app.json", - "aot": false, - "assets": [ - "src/favicon.ico", - "src/assets" - ], - "styles": [ - "src/styles.scss", - "node_modules/bootstrap/dist/css/bootstrap.css" - ], - "scripts": [ - "node_modules/lodash/lodash.min.js" - ] - }, - "configurations": { - "production": { - "fileReplacements": [ - { - "replace": "src/environments/environment.ts", - "with": "src/environments/environment.prod.ts" - } - ], - "optimization": true, - "outputHashing": "all", - "sourceMap": false, - "extractCss": true, - "namedChunks": false, - "aot": true, - "extractLicenses": true, - "vendorChunk": false, - "buildOptimizer": true, - "budgets": [ - { - "type": "initial", - "maximumWarning": "2mb", - "maximumError": "5mb" - } - ] - } - } - }, - "serve": { - "builder": "@angular-devkit/build-angular:dev-server", - "options": { - "browserTarget": "customized-dashboard:build" - }, - "configurations": { - "production": { - "browserTarget": "customized-dashboard:build:production" - } - } - }, - "extract-i18n": { - "builder": "@angular-devkit/build-angular:extract-i18n", - "options": { - "browserTarget": "customized-dashboard:build" - } - }, - "test": { - "builder": "@angular-devkit/build-angular:karma", - "options": { - "main": "src/test.ts", - "polyfills": "src/polyfills.ts", - "tsConfig": "tsconfig.spec.json", - "karmaConfig": "karma.conf.js", - "assets": [ - "src/favicon.ico", - "src/assets" - ], - "styles": [ - "src/styles.scss" - ], - "scripts": [] - } - }, - "lint": { - "builder": "@angular-devkit/build-angular:tslint", - "options": { - "tsConfig": [ - "tsconfig.app.json", - "tsconfig.spec.json", - "e2e/tsconfig.json" - ], - "exclude": [ - "**/node_modules/**" - ] - } - }, - "e2e": { - "builder": "@angular-devkit/build-angular:protractor", - "options": { - "protractorConfig": "e2e/protractor.conf.js", - "devServerTarget": "customized-dashboard:serve" - }, - "configurations": { - "production": { - "devServerTarget": "customized-dashboard:serve:production" - } - } - } - } - }}, - "defaultProject": "customized-dashboard" -} \ No newline at end of file diff --git a/customized-dashboard/browserslist b/customized-dashboard/browserslist deleted file mode 100644 index 8084853..0000000 --- a/customized-dashboard/browserslist +++ /dev/null @@ -1,12 +0,0 @@ -# This file is used by the build system to adjust CSS and JS output to support the specified browsers below. -# For additional information regarding the format and rule options, please see: -# https://github.com/browserslist/browserslist#queries - -# You can see what browsers were selected by your queries by running: -# npx browserslist - -> 0.5% -last 2 versions -Firefox ESR -not dead -not IE 9-11 # For IE 9-11 support, remove 'not'. \ No newline at end of file diff --git a/customized-dashboard/e2e/protractor.conf.js b/customized-dashboard/e2e/protractor.conf.js deleted file mode 100644 index 73e4e68..0000000 --- a/customized-dashboard/e2e/protractor.conf.js +++ /dev/null @@ -1,32 +0,0 @@ -// @ts-check -// Protractor configuration file, see link for more information -// https://github.com/angular/protractor/blob/master/lib/config.ts - -const { SpecReporter } = require('jasmine-spec-reporter'); - -/** - * @type { import("protractor").Config } - */ -exports.config = { - allScriptsTimeout: 11000, - specs: [ - './src/**/*.e2e-spec.ts' - ], - capabilities: { - 'browserName': 'chrome' - }, - directConnect: true, - baseUrl: 'http://localhost:4200/', - framework: 'jasmine', - jasmineNodeOpts: { - showColors: true, - defaultTimeoutInterval: 30000, - print: function() {} - }, - onPrepare() { - require('ts-node').register({ - project: require('path').join(__dirname, './tsconfig.json') - }); - jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); - } -}; \ No newline at end of file diff --git a/customized-dashboard/e2e/src/app.e2e-spec.ts b/customized-dashboard/e2e/src/app.e2e-spec.ts deleted file mode 100644 index aef9f66..0000000 --- a/customized-dashboard/e2e/src/app.e2e-spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { AppPage } from './app.po'; -import { browser, logging } from 'protractor'; - -describe('workspace-project App', () => { - let page: AppPage; - - beforeEach(() => { - page = new AppPage(); - }); - - it('should display welcome message', () => { - page.navigateTo(); - expect(page.getTitleText()).toEqual('Welcome to customized-dashboard!'); - }); - - afterEach(async () => { - // Assert that there are no errors emitted from the browser - const logs = await browser.manage().logs().get(logging.Type.BROWSER); - expect(logs).not.toContain(jasmine.objectContaining({ - level: logging.Level.SEVERE, - } as logging.Entry)); - }); -}); diff --git a/customized-dashboard/e2e/src/app.po.ts b/customized-dashboard/e2e/src/app.po.ts deleted file mode 100644 index 5776aa9..0000000 --- a/customized-dashboard/e2e/src/app.po.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { browser, by, element } from 'protractor'; - -export class AppPage { - navigateTo() { - return browser.get(browser.baseUrl) as Promise; - } - - getTitleText() { - return element(by.css('app-root h1')).getText() as Promise; - } -} diff --git a/customized-dashboard/e2e/tsconfig.json b/customized-dashboard/e2e/tsconfig.json deleted file mode 100644 index 39b800f..0000000 --- a/customized-dashboard/e2e/tsconfig.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "extends": "../tsconfig.json", - "compilerOptions": { - "outDir": "../out-tsc/e2e", - "module": "commonjs", - "target": "es5", - "types": [ - "jasmine", - "jasminewd2", - "node" - ] - } -} diff --git a/customized-dashboard/karma.conf.js b/customized-dashboard/karma.conf.js deleted file mode 100644 index 77a7f8b..0000000 --- a/customized-dashboard/karma.conf.js +++ /dev/null @@ -1,32 +0,0 @@ -// Karma configuration file, see link for more information -// https://karma-runner.github.io/1.0/config/configuration-file.html - -module.exports = function (config) { - config.set({ - basePath: '', - frameworks: ['jasmine', '@angular-devkit/build-angular'], - plugins: [ - require('karma-jasmine'), - require('karma-chrome-launcher'), - require('karma-jasmine-html-reporter'), - require('karma-coverage-istanbul-reporter'), - require('@angular-devkit/build-angular/plugins/karma') - ], - client: { - clearContext: false // leave Jasmine Spec Runner output visible in browser - }, - coverageIstanbulReporter: { - dir: require('path').join(__dirname, './coverage/customized-dashboard'), - reports: ['html', 'lcovonly', 'text-summary'], - fixWebpackSourcePaths: true - }, - reporters: ['progress', 'kjhtml'], - port: 9876, - colors: true, - logLevel: config.LOG_INFO, - autoWatch: true, - browsers: ['Chrome'], - singleRun: false, - restartOnFileChange: true - }); -}; diff --git a/customized-dashboard/package.json b/customized-dashboard/package.json deleted file mode 100644 index 0a16740..0000000 --- a/customized-dashboard/package.json +++ /dev/null @@ -1,65 +0,0 @@ -{ - "name": "customized-dashboard", - "version": "0.0.0", - "scripts": { - "ng": "ng", - "start": "ng serve", - "build": "ng build", - "test": "ng test", - "lint": "ng lint", - "e2e": "ng e2e" - }, - "private": true, - "dependencies": { - "@angular/animations": "~8.1.2", - "@angular/cdk": "^8.1.3", - "@angular/common": "~8.1.2", - "@angular/compiler": "~8.1.2", - "@angular/core": "~8.1.2", - "@angular/forms": "~8.1.2", - "@angular/http": "^7.2.11", - "@angular/material": "^8.1.3", - "@angular/platform-browser": "~8.1.2", - "@angular/upgrade": "^5.2.10", - "@angular/platform-browser-dynamic": "~8.1.2", - "ag-grid-community": "20.0.0", - "ag-grid-enterprise": "20.0.0", - "central-ui-component": "file:../central-ui-component/dist/central-ui-component-0.0.0.tgz", - "central-ui-core": "file:../central-ui-core/dist/central-ui-core-0.0.0.tgz", - "@angular/router": "~8.1.2", - "bootstrap": "^4.3.1", - "d3": "^3.5.17", - "ng2-nvd3": "^2.0.0", - "nvd3": "^1.8.6", - "ngx-cookie-service": "^2.1.0", - "node-sass": "^4.12.0", - "rxjs": "^6.4.0", - "rxjs-compat": "^6.4.0", - "tslib": "^1.9.0", - "zone.js": "~0.9.1", - "ngx-perfect-scrollbar": "^5.3.5", - "ag-grid-angular": "20.0.0" - }, - "devDependencies": { - "@angular-devkit/build-angular": "~0.801.2", - "@angular/cli": "~8.1.2", - "@angular/compiler-cli": "~8.1.2", - "@angular/language-service": "~8.1.2", - "@types/node": "~8.9.4", - "@types/jasmine": "~3.3.8", - "@types/jasminewd2": "~2.0.3", - "codelyzer": "^5.0.0", - "jasmine-core": "~3.4.0", - "jasmine-spec-reporter": "~4.2.1", - "karma": "~4.1.0", - "karma-chrome-launcher": "~2.2.0", - "karma-coverage-istanbul-reporter": "~2.0.1", - "karma-jasmine": "~2.0.1", - "karma-jasmine-html-reporter": "^1.4.0", - "protractor": "~5.4.0", - "ts-node": "~7.0.0", - "tslint": "~5.15.0", - "typescript": "~3.4.3", - "lodash": "^4.17.15" - } -} diff --git a/customized-dashboard/src/app/app-routing.module.ts b/customized-dashboard/src/app/app-routing.module.ts deleted file mode 100644 index 5750bc7..0000000 --- a/customized-dashboard/src/app/app-routing.module.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; -import { HomeComponent } from './home/home.component'; -import { WidgetComponent } from './widget-preview/widget.component'; -import { TestChartComponent } from './test-chart/test-chart.component'; -import { MultiColumnComponent } from './multi-column/multi-column.component'; - -const routes: Routes = [ - { path: '', redirectTo: '/home', pathMatch: 'full' }, - { path: 'home', pathMatch: 'full', component: HomeComponent}, - { path: 'selectWidgets', pathMatch: 'full', component: WidgetComponent}, - { path: 'dashboard', pathMatch: 'full', component: WidgetComponent}, - { path: 'charts', pathMatch: 'full', component: TestChartComponent}, - { path: 'multiColumn', pathMatch: 'full', component: MultiColumnComponent} -]; - -@NgModule({ - imports: [RouterModule.forRoot(routes)], - exports: [RouterModule] -}) -export class AppRoutingModule { } diff --git a/customized-dashboard/src/app/app.component.html b/customized-dashboard/src/app/app.component.html deleted file mode 100644 index 1d808ae..0000000 --- a/customized-dashboard/src/app/app.component.html +++ /dev/null @@ -1,13 +0,0 @@ -
- -
- -
-
- -
-
- -
-
- diff --git a/customized-dashboard/src/app/app.component.scss b/customized-dashboard/src/app/app.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/customized-dashboard/src/app/app.component.spec.ts b/customized-dashboard/src/app/app.component.spec.ts deleted file mode 100644 index 0ac7cae..0000000 --- a/customized-dashboard/src/app/app.component.spec.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { TestBed, async } from '@angular/core/testing'; -import { RouterTestingModule } from '@angular/router/testing'; -import { AppComponent } from './app.component'; - -describe('AppComponent', () => { - beforeEach(async(() => { - TestBed.configureTestingModule({ - imports: [ - RouterTestingModule - ], - declarations: [ - AppComponent - ], - }).compileComponents(); - })); - - it('should create the app', () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; - expect(app).toBeTruthy(); - }); - - it(`should have as title 'customized-dashboard'`, () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; - expect(app.title).toEqual('customized-dashboard'); - }); - - it('should render title in a h1 tag', () => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.debugElement.nativeElement; - expect(compiled.querySelector('h1').textContent).toContain('Welcome to customized-dashboard!'); - }); -}); diff --git a/customized-dashboard/src/app/app.component.ts b/customized-dashboard/src/app/app.component.ts deleted file mode 100644 index 10364d6..0000000 --- a/customized-dashboard/src/app/app.component.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { Component, OnInit, ViewEncapsulation } from '@angular/core'; -import { AppService } from './app.service'; -import { Router } from '@angular/router'; -import { HttpManager } from 'central-ui-core'; - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.scss'], - encapsulation: ViewEncapsulation.None -}) - -export class AppComponent implements OnInit { - title = 'customized-dashboard'; - - constructor(private appService: AppService, private _router: Router, private _httpManager: HttpManager) {} - ngOnInit() { - setInterval(()=> { - this._httpManager.get('refresh_token').subscribe(resp => {}) - }, 15 * 60 * 1000) - } - - showDashboard() { - if (this.appService.getStoredJson()) - this._router.navigate(['dashboard']); - else - this._router.navigate(['home']); - } - - logout() { - this._httpManager.get('logout').subscribe(resp => { - window.location.href = '/'; - }, error => { - window.location.href = '/'; - }) - } -} diff --git a/customized-dashboard/src/app/app.module.ts b/customized-dashboard/src/app/app.module.ts deleted file mode 100644 index b0e9004..0000000 --- a/customized-dashboard/src/app/app.module.ts +++ /dev/null @@ -1,106 +0,0 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { CommonModule } from '@angular/common'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { NgModule } from '@angular/core'; -import { MatButtonToggleModule } from '@angular/material/button-toggle'; -import { MatButtonModule, MatSnackBarModule, MatDialogModule, MatSidenavModule, MatCheckboxModule, MatCardModule, MatDividerModule, MatInputModule, MatIconModule } from '@angular/material'; -import { AppRoutingModule } from './app-routing.module'; -import { AppComponent } from './app.component'; -import { HomeComponent } from './home/home.component'; -import { WidgetComponent } from './widget-preview/widget.component'; -import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { AppService } from './app.service'; -import { DragDropModule } from '@angular/cdk/drag-drop'; -import { PieChartComponent } from './widgets/pie-chart/pie-chart.component'; -import { LineChartComponent } from './widgets/line-chart/line-chart.component'; -import { ScatterChartComponent } from './widgets/scatter-chart/scatter-chart.component'; -import { GridWrapperComponent } from './widgets/grid-wrapper/grid-wrapper.component'; -import { BandwidthUsageComponent } from './widgets/bandwidth/bandwidth.component'; -import { ClientCountComponent } from './widgets/client-count/client-count.component'; -import { EventsComponent } from './widgets/events/events.component'; -import { GuestPortalAnalyticsComponent } from './widgets/guest-portal-analytics/guest-portal-analytics.component'; -import { OnboardingAnalyticsComponent } from './widgets/onboarding-analytics/onboarding-analytics.component'; -import { PresenceAnalyticsComponent } from './widgets/presence-analytics/presence-analytics.component'; -import { SecurityInfoComponent } from './widgets/security-info/security-info.component'; -import { FirmwareComponent } from './widgets/firmware/firmware.component'; -import { EventPopupComponent } from './widgets/events/event-popup.component'; -import { EventsMessagePopup } from './widgets/events/event-popup.component'; -import { PortalPopupComponent } from './widgets/guest-portal-analytics/portal-popup.component'; -import { PortalMessagePopup } from './widgets/guest-portal-analytics/portal-popup.component'; -import { SnackBarComponent } from './widget-preview/snack-bar.component'; -import { CentralUiComponentAppModule } from 'central-ui-component'; -import { AgGridModule } from 'ag-grid-angular'; -import { HttpManager } from 'central-ui-core'; -import { HttpModule } from '@angular/http'; -import { MultiColumnComponent } from './multi-column/multi-column.component'; -import { TestChartComponent } from './test-chart/test-chart.component'; -import { MultiBarChartComponent } from './widgets/multi-bar-chart/multi-bar-chart.component'; -import { StackedAreaChartComponent } from './widgets/stacked-area-chart/stacked-area-chart.component'; -import { NvD3Module } from 'ng2-nvd3'; -import 'd3'; -import 'nvd3'; - -@NgModule({ - declarations: [ - AppComponent, - HomeComponent, - WidgetComponent, - PieChartComponent, - SnackBarComponent, - LineChartComponent, - ScatterChartComponent, - GridWrapperComponent, - MultiColumnComponent, - TestChartComponent, - MultiBarChartComponent, - StackedAreaChartComponent, - BandwidthUsageComponent, - ClientCountComponent, - EventsComponent, - FirmwareComponent, - EventPopupComponent, - EventsMessagePopup, - GuestPortalAnalyticsComponent, - OnboardingAnalyticsComponent, - PresenceAnalyticsComponent, - SecurityInfoComponent, - PortalMessagePopup, - PortalPopupComponent - ], - imports: [ - HttpModule, - BrowserModule, - AppRoutingModule, - MatButtonModule, - MatSidenavModule, - MatSnackBarModule, - MatButtonToggleModule, - BrowserAnimationsModule, - FormsModule, - ReactiveFormsModule, - MatCheckboxModule, - MatDividerModule, - MatInputModule, - MatIconModule, - DragDropModule, - MatCardModule, - CommonModule, - CentralUiComponentAppModule, - AgGridModule, - NvD3Module, - MatDialogModule - ], - providers: [ - AppService, - HttpManager - ], - bootstrap: [AppComponent], - entryComponents: [ - SnackBarComponent, - EventPopupComponent, - EventsMessagePopup, - PortalMessagePopup, - PortalPopupComponent - ] -}) -export class AppModule { } diff --git a/customized-dashboard/src/app/app.service.ts b/customized-dashboard/src/app/app.service.ts deleted file mode 100644 index 9aa2d18..0000000 --- a/customized-dashboard/src/app/app.service.ts +++ /dev/null @@ -1,249 +0,0 @@ -import { Injectable } from '@angular/core'; -import { HttpManager } from 'central-ui-core'; -import { RequestOptions, Headers } from '@angular/http'; -import { EnvironmentConfig } from '../config/service.config'; - -const from = Math.round((new Date().getTime()-(7 * 24 * 60 * 60 * 1000))/1000); -const to = Math.round(new Date().getTime()/1000); - -@Injectable() -export class AppService { - private baseUrl; - private access_token; - - - private storedJson; - - private id = '_' + Date.now(); - - constructor(private _http: HttpManager) { - let cookie = document.cookie.split(';'); - this.baseUrl = cookie[2] && cookie[2].indexOf('apigw_url') > -1 ? 'https://' + cookie[2].split("apigw_url=")[1] + '/': - EnvironmentConfig.appUrl; - this.setAccessToken(); - } - - setAccessToken() { - let cookie = document.cookie.split(';'); - this.access_token = cookie[3] && cookie[3].indexOf('access_token') > -1 ? cookie[3].split("access_token=")[1] : - EnvironmentConfig.accessToken; - } - - public getHeaders() { - let headers = new Headers(); - //headers.set('Access-Control-Allow-Origin', '*'); - headers.set('Authorization: Bearer', this.access_token); - return new RequestOptions({ headers: headers }); - } - - public setJson(json) { - this.storedJson = json; - } - - public getEventsData(limit, offset) { - this.setAccessToken(); - return this._http.get(this.baseUrl+'auditlogs/v1/events?limit='+limit+'&offset='+offset+'&access_token='+this.access_token) - } - - public getDeviceCount() { - this.setAccessToken(); - return this._http.getBulk([this.baseUrl+'monitoring/v1/aps?calculate_total=true&access_token='+this.access_token, this.baseUrl+'monitoring/v1/switches?calculate_total=true&access_token='+this.access_token, this.baseUrl+'monitoring/v1/mobility_controllers?calculate_total=true&access_token='+this.access_token]); - } - - public getEventDetails(id) { - this.setAccessToken(); - return this._http.get(this.baseUrl+'auditlogs/v1/event_details/'+id+'?access_token='+this.access_token) - } - - getTimeStr(ts) { - var date = new Date(ts*1000); - let monthArr = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] - let dateStr = monthArr[date.getMonth()] + ' ' + this.validateLength(date.getDate()) + ', ' + date.getFullYear() - + ', ' + this.validateLength(date.getHours()) + ':' + this.validateLength(date.getMinutes()) + ':' + this.validateLength(date.getSeconds()) - return dateStr - } - - validateLength(val) { - return val < 10 ? ('0'+val) : val; - } - - public getClientCount() { - this.setAccessToken(); - return this._http.getBulk([this.baseUrl+'monitoring/v1/clients/count?calculate_total=true&access_token='+this.access_token, this.baseUrl+'monitoring/v1/clients/wireless?calculate_total=true&access_token='+this.access_token/*, this.baseUrl+'monitoring/v1/clients/wired?calculate_total=true&access_token='+this.access_token*/]); - } - - public getConnections() { - this.setAccessToken(); - return this._http.get(this.baseUrl+'monitoring/v1/networks?calculate_client_count=true&access_token='+this.access_token); - } - - public getBW(type, network?) { - this.setAccessToken(); - let url = type === 'WIRELESS' ? this.baseUrl+'monitoring/v1/networks/bandwidth_usage?network='+network : this.baseUrl+'monitoring/v1/switches/bandwidth_usage'; - return this._http.get(url + '&from_timestamp=' + from + '&to_timestamp=' + to + '&access_token='+this.access_token); - } - - public getRoguAps() { - this.setAccessToken(); - return this._http.get(this.baseUrl+'rapids/v1/rogue_aps?limit=100&access_token='+this.access_token) - } - - public getGuestPortalData(limit, offset, type) { - this.setAccessToken(); - if (type === 'SSIDS') - return this._http.get(this.baseUrl+'guest/v1/wlans?offset=' + offset + '&limit=' + limit + '&access_token='+this.access_token); - else - return this._http.get(this.baseUrl+'guest/v1/portals?sort=%2Bname&offset=' + offset + '&limit=' + limit + '&access_token='+this.access_token) - } - - public getSecurityInfo(limit, offset, type) { - this.setAccessToken(); - if (type === 'ROGUEAPS') - return this._http.get(this.baseUrl+'rapids/v1/rogue_aps?offset=' + offset + '&limit=' + limit + '&access_token='+this.access_token); - else - return this._http.get(this.baseUrl+'rapids/v1/interfering_aps?offset=' + offset + '&limit=' + limit + '&access_token='+this.access_token) - } - - public getPresenceAnalytics(limit, offset, type) { - this.setAccessToken(); - if (type === 'AGGREGATES') { - return this._http.get(this.baseUrl+'presence/v1/analytics/aggregates&start_time=' + from + '&end_time=' + to + '&access_token='+this.access_token) - } - else { - return this._http.get(this.baseUrl+'presence/v1/analytics/trends&start_time=' + from + '&end_time=' + to + '&access_token='+this.access_token) - } - } - - public getOnboardingAnalyticsDetails() { - this.setAccessToken(); - return this._http.getBulk([this.baseUrl+'clarity/v1/overview/healthscore?start_time=' + from + '&end_time=' + to + '&access_token='+this.access_token, this.baseUrl+'clarity/v1/overview/network_stats&access_token='+this.access_token]); - } - - public getClientGraph(queryParam) { - this.setAccessToken(); - let to = new Date(); - var hours_3 = 3 * 60 * 60 * 1000; - let from = new Date(new Date().getTime() - hours_3); - return this._http.get(this.baseUrl+'monitoring/v1/clients/count?calculate_client_count=true' + (queryParam ? '&' + queryParam : '') + '&access_token='+this.access_token) - } - - public getAps() { - this.setAccessToken(); - return this._http.get(this.baseUrl+'monitoring/v1/aps?access_token='+this.access_token); - } - - public getFirmwareCompliance(device) { - this.setAccessToken(); - return this._http.get(this.baseUrl+'firmware/v1/upgrade/compliance_version?device_type=' + device + '&access_token='+this.access_token); - } - - public getStoredJson() { - let storedJson = window.localStorage.getItem('dashboardJson'); - if (!this.storedJson && storedJson) { - this.storedJson = JSON.parse(storedJson); - } - return this.storedJson; - } - - public clearCachedJson() { - window.localStorage.removeItem('dashboardJson'); - this.storedJson = ''; - } - - public getJson(name) { - return { - "name": name, - "id": this.id, - "color": "", - "rowCount": 1, - "columSize": 2, - "timePeriod": "3 Hours", - /*"rows": [{ - "name": "Row 1", - "id": 0, - "columns": [{ - "name": "Column 1", - "id": 0, - "widget": { - "name": "", - "key": "", - "type": "" - } - }] - }]*/ - widgets: [{}] - }; - } - - public getWidget(){ - return [ - { - name: 'Device Count', - key: 'device_count', - description: 'This widget shows the total device count of all devices - Instant Access Points, Switches, Gateways - managed through Central', - type: 'DonutChart', - typeStr: 'Donut Chart' - }, { - name: 'Client Count Summary', - key: 'total_client_count', - description: 'This widget shows the total count of all devices - Wired, Wireless connecting to the network', - type: 'PieChart', - typeStr: 'Pie Chart' - }, { - name: 'Total Connections', - key: 'connection_count', - description: 'This widget shows the total count of all connections on the network', - type: 'PieChart', - typeStr: 'Pie Chart' - }, { - name: 'Bandwidth Usage', - key: 'bandwidth_usage', - description: 'This widget captures the Bandwidth usage on the network - Wired and Wireless', - type: 'AreaChart', - typeStr: 'Area Chart' - }, { - name: 'Client Count Filterable Summary', - key: 'client_count_filter_summary', - description: 'This widget details the clients on the network by Band, Device Type, Label, Network etc.', - type: 'LineChart', - typeStr: 'Line Chart' - }, { - name: 'Security Info', - key: 'security_info', - description: 'This widget offers a summarized representation of the security information on the wireless network', - type: 'Grid', - typeStr: 'Grid' - }, { - name: 'Event Count', - key: 'events', - description: 'This widget offers a tabular listing of the various events ocuring on the network', - type: 'Grid', - typeStr: 'Grid' - }, { - name: 'Firmware Version', - key: 'firmware_version', - description: 'This widget offers details on the firmware compliance version for all the devices on the network', - type: 'Grid', - typeStr: 'Grid' - }, { - name: 'Guest Portal Analytics', - key: 'guest-portal-analytics', - description: 'This widget provides a aggregated view of Guest Portal Visitors', - type: 'Grid', - typeStr: 'Grid' - }, /*{ - name: 'Presence Analytics', - key: 'presence-analytics', - description: 'This widget offers details and anayltics into the Client presence around the network', - type: 'BubbleChart', - typeStr: 'Bubble Chart' - },*/ { - name: 'Client Onboarding Analytics (Clarity)', - key: 'onboarding-analytics', - description: 'This widget summarizes client onboarding statistics', - type: 'Grid', - typeStr: 'Grid' - } - ]; - } -} \ No newline at end of file diff --git a/customized-dashboard/src/app/home/home.component.html b/customized-dashboard/src/app/home/home.component.html deleted file mode 100644 index 14d6c8c..0000000 --- a/customized-dashboard/src/app/home/home.component.html +++ /dev/null @@ -1,5 +0,0 @@ -
-
-
- -
\ No newline at end of file diff --git a/customized-dashboard/src/app/home/home.component.ts b/customized-dashboard/src/app/home/home.component.ts deleted file mode 100644 index e3edd46..0000000 --- a/customized-dashboard/src/app/home/home.component.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; -import { AppService } from '../app.service'; - -@Component({ - selector: 'home', - templateUrl: './home.component.html' -}) -export class HomeComponent implements OnInit { - - constructor(private router: Router, private appService: AppService) {} - - ngOnInit() { - if (this.appService.getStoredJson()) - this.router.navigate(['dashboard']); - } - - customizeDashboard() { - this.router.navigate(['selectWidgets']); - } -} diff --git a/customized-dashboard/src/app/multi-column/multi-column.component.css b/customized-dashboard/src/app/multi-column/multi-column.component.css deleted file mode 100644 index 3e691d9..0000000 --- a/customized-dashboard/src/app/multi-column/multi-column.component.css +++ /dev/null @@ -1,71 +0,0 @@ -.example-list { - list-style-type: none; - padding: 0; -} - -.example-list li { - display: table-cell; - padding: 4px; -} - -.example-container { - display: flex; - flex-wrap: wrap; - min-width: 600px; - max-width: 900px; -} - -.example-box { - width: 200px; - height: 200px; - border: solid 1px #ccc; - font-size: 30pt; - font-weight: bold; - color: rgba(0, 0, 0, 0.87); - cursor: move; - display: flex; - justify-content: center; - align-items: center; - text-align: center; - background: #fff; - border-radius: 4px; - position: relative; - z-index: 1; - transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1); - box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), - 0 2px 2px 0 rgba(0, 0, 0, 0.14), - 0 1px 5px 0 rgba(0, 0, 0, 0.12); -} - -.example-box:active { - box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), - 0 8px 10px 1px rgba(0, 0, 0, 0.14), - 0 3px 14px 2px rgba(0, 0, 0, 0.12); - opacity: .6; -} - -.cdk-drop-list { - display: flex; - padding-right: 10px; - padding-bottom: 10px; -} - -.cdk-drag-preview { - box-sizing: border-box; - border-radius: 4px; - box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), - 0 8px 10px 1px rgba(0, 0, 0, 0.14), - 0 3px 14px 2px rgba(0, 0, 0, 0.12); -} - -.cdk-drag-placeholder { - opacity: .3; -} - -.cdk-drag-animating { - transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); -} - -button { - margin-right: 4px; -} \ No newline at end of file diff --git a/customized-dashboard/src/app/multi-column/multi-column.component.html b/customized-dashboard/src/app/multi-column/multi-column.component.html deleted file mode 100644 index 45ae871..0000000 --- a/customized-dashboard/src/app/multi-column/multi-column.component.html +++ /dev/null @@ -1,12 +0,0 @@ -

Drag&Drop with a flex-wrap

- -
- - -
-
-
-
{{item}}
-
-
\ No newline at end of file diff --git a/customized-dashboard/src/app/multi-column/multi-column.component.ts b/customized-dashboard/src/app/multi-column/multi-column.component.ts deleted file mode 100644 index be45037..0000000 --- a/customized-dashboard/src/app/multi-column/multi-column.component.ts +++ /dev/null @@ -1,142 +0,0 @@ -import { Component, NgModule, ViewChild } from '@angular/core'; -import { - CdkDrag, - CdkDragStart, - CdkDropList, CdkDropListGroup, CdkDragMove, CdkDragEnter, - moveItemInArray -} from "@angular/cdk/drag-drop"; -import {ViewportRuler} from "@angular/cdk/overlay"; - -@Component({ - selector: 'multi-column', - templateUrl: './multi-column.component.html', - styleUrls: ['./multi-column.component.css'] -}) - -export class MultiColumnComponent { - @ViewChild(CdkDropListGroup, {static: false}) listGroup: CdkDropListGroup; - @ViewChild(CdkDropList, {static: false}) placeholder: CdkDropList; - - public items: Array = [1, 2, 3, 4, 5, 6, 7, 8, 9]; - - public target: CdkDropList; - public targetIndex: number; - public source: CdkDropList; - public sourceIndex: number; - public dragIndex: number; - public activeContainer; - - constructor(private viewportRuler: ViewportRuler) { - this.target = null; - this.source = null; - } - - ngAfterViewInit() { - let phElement = this.placeholder.element.nativeElement; - - phElement.style.display = 'none'; - phElement.parentElement.removeChild(phElement); - } - - add() { - this.items.push(this.items.length + 1); - } - - shuffle() { - this.items.sort(function() { - return .5 - Math.random(); - }); - } - - dragMoved(e: CdkDragMove) { - let point = this.getPointerPositionOnPage(e.event); - - this.listGroup._items.forEach(dropList => { - if (__isInsideDropListClientRect(dropList, point.x, point.y)) { - this.activeContainer = dropList; - return; - } - }); - } - - dropListDropped() { - if (!this.target) - return; - - let phElement = this.placeholder.element.nativeElement; - let parent = phElement.parentElement; - - phElement.style.display = 'none'; - - parent.removeChild(phElement); - parent.appendChild(phElement); - parent.insertBefore(this.source.element.nativeElement, parent.children[this.sourceIndex]); - - this.target = null; - this.source = null; - - if (this.sourceIndex != this.targetIndex) - moveItemInArray(this.items, this.sourceIndex, this.targetIndex); - } - - dropListEnterPredicate = (drag: CdkDrag, drop: CdkDropList) => { - if (drop == this.placeholder) - return true; - - if (drop != this.activeContainer) - return false; - - let phElement = this.placeholder.element.nativeElement; - let sourceElement = drag.dropContainer.element.nativeElement; - let dropElement = drop.element.nativeElement; - - let dragIndex = __indexOf(dropElement.parentElement.children, (this.source ? phElement : sourceElement)); - let dropIndex = __indexOf(dropElement.parentElement.children, dropElement); - - if (!this.source) { - this.sourceIndex = dragIndex; - this.source = drag.dropContainer; - - phElement.style.width = sourceElement.clientWidth + 'px'; - phElement.style.height = sourceElement.clientHeight + 'px'; - - sourceElement.parentElement.removeChild(sourceElement); - } - - this.targetIndex = dropIndex; - this.target = drop; - - phElement.style.display = ''; - dropElement.parentElement.insertBefore(phElement, (dropIndex > dragIndex - ? dropElement.nextSibling : dropElement)); - - this.placeholder.enter(drag, drag.element.nativeElement.offsetLeft, drag.element.nativeElement.offsetTop); - return false; - } - - /** Determines the point of the page that was touched by the user. */ - getPointerPositionOnPage(event: MouseEvent | TouchEvent) { - // `touches` will be empty for start/end events so we have to fall back to `changedTouches`. - const point = __isTouchEvent(event) ? (event.touches[0] || event.changedTouches[0]) : event; - const scrollPosition = this.viewportRuler.getViewportScrollPosition(); - - return { - x: point.pageX - scrollPosition.left, - y: point.pageY - scrollPosition.top - }; - } -} - -function __indexOf(collection, node) { - return Array.prototype.indexOf.call(collection, node); -}; - -/** Determines whether an event is a touch event. */ -function __isTouchEvent(event: MouseEvent | TouchEvent): event is TouchEvent { - return event.type.startsWith('touch'); -} - -function __isInsideDropListClientRect(dropList: CdkDropList, x: number, y: number) { - const {top, bottom, left, right} = dropList.element.nativeElement.getBoundingClientRect(); - return y >= top && y <= bottom && x >= left && x <= right; -} \ No newline at end of file diff --git a/customized-dashboard/src/app/test-chart/test-chart.component.html b/customized-dashboard/src/app/test-chart/test-chart.component.html deleted file mode 100644 index 6e8a008..0000000 --- a/customized-dashboard/src/app/test-chart/test-chart.component.html +++ /dev/null @@ -1,3 +0,0 @@ -
- -
\ No newline at end of file diff --git a/customized-dashboard/src/app/test-chart/test-chart.component.scss b/customized-dashboard/src/app/test-chart/test-chart.component.scss deleted file mode 100644 index dff94e4..0000000 --- a/customized-dashboard/src/app/test-chart/test-chart.component.scss +++ /dev/null @@ -1,5 +0,0 @@ -.chart-wrapper { - background: #ffffff; - height: 700px; - padding: 10px; -} \ No newline at end of file diff --git a/customized-dashboard/src/app/test-chart/test-chart.component.ts b/customized-dashboard/src/app/test-chart/test-chart.component.ts deleted file mode 100644 index 59be605..0000000 --- a/customized-dashboard/src/app/test-chart/test-chart.component.ts +++ /dev/null @@ -1,228 +0,0 @@ -import { Component, OnInit, ViewEncapsulation } from '@angular/core'; - - -@Component({ - selector: 'test-chart', - templateUrl: './test-chart.component.html', - styleUrls: ['./test-chart.component.scss'], - encapsulation: ViewEncapsulation.None -}) - -export class TestChartComponent implements OnInit { - /*public options: any; - public data: any; - - constructor() { } - - ngOnInit() { - this.setLineWithFocusChartOptions(); - this.fetchData(); - } - - setLineWithFocusChartOptions() { - this.options = { - chart: { - type: 'lineWithFocusChart', - height: 450, - margin: { - top: 20, - right: 20, - bottom: 60, - left: 40 - }, - duration: 500, - useInteractiveGuideline: true, - xAxis: { - axisLabel: 'X Axis', - tickFormat: function (d) { - return d3.format(',f')(d); - } - }, - x2Axis: { - tickFormat: function (d) { - return d3.format(',f')(d); - } - }, - yAxis: { - axisLabel: 'Y Axis', - tickFormat: function (d) { - return d3.format(',.2f')(d); - }, - rotateYLabel: false - }, - y2Axis: { - tickFormat: function (d) { - return d3.format(',.2f')(d); - } - } - } - }; - } - - streamLayers(n, m, o) { - if (arguments.length < 3) {o = 0;} - function bump(a) { - let x = 1 / (.1 + Math.random()); - let y = 2 * Math.random() - .5; - let z = 10 / (.1 + Math.random()); - for (let i = 0; i < m; i++) { - let w = (i / m - y) * z; - a[i] += x * Math.exp(-w * w); - } - } - return d3.range(n).map(function() { - const a = []; - let i; - for (i = 0; i < m; i++) a[i] = o + o * Math.random(); - for (i = 0; i < 5; i++) bump(a); - return a.map(function(val, idx) { - return {x: idx, y: Math.max(0, val)}; - }); - }); - } - - fetchData() { - this.data = this.streamLayers(3, 10 + Math.random() * 200, .1).map(function(data, i) { - return { - key: 'Stream' + i, - values: data - }; - }); - }*/ - /*public options: any; - public data: any; - - constructor() { } - - ngOnInit() { - this.setMultibarChartOptions(); - this.fetchData(); - } - - setMultibarChartOptions() { - this.options = { - chart: { - type: 'multiBarChart', - height: 450, - margin : { - top: 20, - right: 20, - bottom: 45, - left: 45 - }, - clipEdge: true, - duration: 500, - stacked: true, - xAxis: { - axisLabel: 'Time (ms)', - showMaxMin: false, - tickFormat: function(d){ - return d3.format(',f')(d); - } - }, - yAxis: { - axisLabel: 'Y Axis', - axisLabelDistance: -20, - tickFormat: function(d){ - return d3.format(',.1f')(d); - } - } - } - }; - } - - streamLayers(n, m, o) { - if (arguments.length < 3) { o = 0; } - function bump(a) { - let x = 1 / (.1 + Math.random()); - let y = 2 * Math.random() - .5; - let z = 10 / (.1 + Math.random()); - for (var i = 0; i < m; i++) { - var w = (i / m - y) * z; - a[i] += x * Math.exp(-w * w); - } - } - return d3.range(n).map(function() { - let a = []; - let i; - for (i = 0; i < m; i++) a[i] = o + o * Math.random(); - for (i = 0; i < 5; i++) bump(a); - return a.map(function(val, idx){ - return {x: idx, y: Math.max(0, val)}; - }); - }); - } - - - fetchData() { - this.data = this.streamLayers(3, 50 + Math.random() * 50, .1).map(function(data, i) { - return { - key: 'Stream' + i, - values: data - }; - }); - }*/ - public options = { - chart: { - type: 'pieChart', - height: 500, - x: function(d){return d.key;}, - y: function(d){return d.y;}, - showLabels: true, - duration: 500, - labelThreshold: 0.01, - labelSunbeamLayout: false, - donutLabelsOutside: true, - //donut: true, - legend: { - margin: { - top: 10, - right: 35, - bottom: 35, - left: 0 - } - }, - tooltip: { - contentGenerator: function (d) { - var html = "dsjghjhasgjhsagdjhsagdhas" - return html; - } - } - } - }; - - public data = [ - { - key: "One", - y: 5 - }, - { - key: "Two", - y: 2 - }, - { - key: "Three", - y: 9 - }, - { - key: "Four", - y: 7 - }, - { - key: "Five", - y: 4 - }, - { - key: "Six", - y: 3 - }, - { - key: "Seven", - y: .5 - } - ]; - - ngOnInit() {} - - constructor() {} -} \ No newline at end of file diff --git a/customized-dashboard/src/app/widget-preview/snack-bar.component.html b/customized-dashboard/src/app/widget-preview/snack-bar.component.html deleted file mode 100644 index 110c13a..0000000 --- a/customized-dashboard/src/app/widget-preview/snack-bar.component.html +++ /dev/null @@ -1,8 +0,0 @@ - -
Add, move or modify your widgets
- -
- -
-
-
\ No newline at end of file diff --git a/customized-dashboard/src/app/widget-preview/snack-bar.component.ts b/customized-dashboard/src/app/widget-preview/snack-bar.component.ts deleted file mode 100644 index a5e1852..0000000 --- a/customized-dashboard/src/app/widget-preview/snack-bar.component.ts +++ /dev/null @@ -1,19 +0,0 @@ -import {Component, Inject} from '@angular/core'; -import {MAT_SNACK_BAR_DATA} from '@angular/material/snack-bar'; - -@Component({ - selector: 'snack-bar', - templateUrl: './snack-bar.component.html', -}) -export class SnackBarComponent { - constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any) { - - } - - saveChanges(flag?) { - if (!this.data.isWidgetRendered) - this.data.renderWidgets(this.data.__this); - if (this.data.isWidgetRendered) - this.data.saveWidgets(this.data.__this, flag); - } -} \ No newline at end of file diff --git a/customized-dashboard/src/app/widget-preview/widget.component.html b/customized-dashboard/src/app/widget-preview/widget.component.html deleted file mode 100644 index 6cb85ed..0000000 --- a/customized-dashboard/src/app/widget-preview/widget.component.html +++ /dev/null @@ -1,128 +0,0 @@ -
-
- -
Do you want to clear the saved dashboard?
- - -
- -
-
-
- - - -

- Widget Gallery -

-
- {{widgets.length}} widgets -  You can add any widget to the dashboard -
- -
-
- -
- - Add -
- -
-
-
-
- -
- -
- - {{widget.description}} -
- -
- -
-
-
- -
-
-
- - - - - - - -
-
{{dashboardJson.name}}
- - - -
-
-
- -
- - - - - - - - - - - - - {{column.name}} -
-
-
-
-
-
- {{column.name}} - - -
-
- - - - - - - - - - - -
-
-
-
-
Drag your widget here or add a new widget
-
-
- -
-
-
-
-
\ No newline at end of file diff --git a/customized-dashboard/src/app/widget-preview/widget.component.scss b/customized-dashboard/src/app/widget-preview/widget.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/customized-dashboard/src/app/widget-preview/widget.component.ts b/customized-dashboard/src/app/widget-preview/widget.component.ts deleted file mode 100644 index f8043f7..0000000 --- a/customized-dashboard/src/app/widget-preview/widget.component.ts +++ /dev/null @@ -1,398 +0,0 @@ -import { Component, AfterViewInit, OnDestroy, ViewChild } from '@angular/core'; -import { AppService } from '../app.service'; -import { CdkDragDrop, transferArrayItem } from '@angular/cdk/drag-drop'; -import { MatSnackBar } from '@angular/material/snack-bar'; -import { SnackBarComponent } from './snack-bar.component'; -import { ViewportRuler } from "@angular/cdk/overlay"; -import { HttpManager } from 'central-ui-core'; - -import { - CdkDrag, - CdkDragStart, - CdkDropList, CdkDropListGroup, CdkDragMove, CdkDragEnter, - moveItemInArray - } from "@angular/cdk/drag-drop"; -declare var require; - -@Component({ - selector: 'select-widget', - templateUrl: './widget.component.html', - styleUrls: ['./widget.component.scss'], -}) -export class WidgetComponent implements AfterViewInit, OnDestroy { - - @ViewChild(CdkDropListGroup, {static: false}) listGroup: CdkDropListGroup; - @ViewChild(CdkDropList, {static: false}) placeholder: CdkDropList; - - refreshCounter = '_' + Date.now(); - public opened = true; - public isWidgetRendered = false; - private snackBarRef; - public areWidgetsSaved; - public langLabels; - private isSnackBarOpen; - widgetWidth; - public target: CdkDropList; - public targetIndex: number; - public source: CdkDropList; - public sourceIndex: number; - public dragIndex: number; - public activeContainer; - public closeConfirmClearSection = false; - public isSwitchEnabled; - dashboardList; - widgetList; - private lang = require('../../assets/language_ui/monitoring_en_US.json'); - public widgets = []; - public dashboardJson; - logIn = ''; - constructor(private appService: AppService, private httpManager: HttpManager, private _snackBar: MatSnackBar, private viewportRuler: ViewportRuler) { - this.widgets = this.appService.getWidget(); - let storedJson = this.appService.getStoredJson(); - if (storedJson && storedJson.hasOwnProperty('name')) { - this.dashboardJson = storedJson; - this.isWidgetRendered = true; - this.opened = false; - this.areWidgetsSaved = true; - } else - this.dashboardJson = this.appService.getJson('My Dashboard'); - for (var labelObj in this.lang.custom_db) { - this.lang.custom_db[labelObj] = this.lang.custom_db[labelObj]['label']; - } - this.langLabels = this.lang.custom_db; - this.target = null; - this.source = null; - this.getLoginCreds(); - } - - syncManually() { - this.httpManager.get('refresh_token').subscribe(resp => { - this.refreshCounter = '_' + Date.now(); - }) - } - - drop(event: CdkDragDrop) { - if (event.previousContainer === event.container) { - moveItemInArray(event.container.data, event.previousIndex, event.currentIndex); - } else { - if (!this.dashboardJson.widgets[0]['name']) this.dashboardJson.widgets.splice(0, 1); - transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex); - if (!this.dashboardJson.widgets.length) this.dashboardJson.widgets.push({}); - else if (!this.isSnackBarOpen) { - this.snackBarRef = this._snackBar.openFromComponent(SnackBarComponent, {data: {isWidgetRendered: this.isWidgetRendered, renderWidgets: this.renderWidgets, saveWidgets: this.saveWidgets, __this: this}}); - this.isSnackBarOpen = true - } - } - } - - switchToTwoColumn(flag) { - if ((flag && this.dashboardJson.columSize == 2) || (!flag && this.dashboardJson.columSize == 1)) - return; - if (flag) { - this.dashboardJson.columSize = 2; - //this.dashboardJson.widgets.shift(); - this.dashboardJson.widgets = [{}]; - } else { - this.dashboardJson.columSize = 1; - this.dashboardJson.widgets = [{}]; - this.isSwitchEnabled = true; - } - this.widgets = this.appService.getWidget(); - } - - renderWidgets(__this) { - __this.opened = false; - __this.isWidgetRendered = true; - __this.snackBarRef = __this._snackBar.openFromComponent(SnackBarComponent, {data: {isWidgetRendered: __this.isWidgetRendered, renderWidgets: __this.renderWidgets, saveWidgets: __this.saveWidgets, __this: this}}); - __this.isSnackBarOpen = true; - setTimeout(() => {__this.setColumnConfig();}, 1000) - } - - setColumnConfig() { - let widthRef = this.dashboardJson.columSize === 1 ? document.getElementsByClassName('widget-list-container')[0] : document.getElementsByClassName('example-box')[0]; - this.widgetWidth = widthRef['offsetWidth']; - this.dashboardJson.widgets.forEach((widget) => { - if (widget.key == 'device_count') { - widget.config = { - name: widget.name, - key: widget.key, - isDonut: true, - width: this.widgetWidth - } - } - if (widget.key == 'total_client_count') { - widget.config = { - name: widget.name, - key: widget.key, - //isDonut: true, - width: this.widgetWidth - } - } - if (widget.key == 'connection_count') { - widget.config = { - name: widget.name, - isDonut: true, - key: 'connection_count', - width: this.widgetWidth - } - } - if (widget.key === 'bandwidth_usage') { - widget.config = { - name: widget.name, - width: this.widgetWidth - } - } - if (widget.key === 'client_count_filter_summary') { - // var response = [{"key": 'client 1', values: [], color: '#9FDCF6'}]; - // let resp = {"count":36,"interval":"5minutes","samples":[{"client_count":5,"timestamp":1566801300},{"client_count":12,"timestamp":1566801600},{"client_count":10,"timestamp":1566801900},{"client_count":15,"timestamp":1566802200},{"client_count":5,"timestamp":1566802500},{"client_count":15,"timestamp":1566802800},{"client_count":2,"timestamp":1566803100},{"client_count":15,"timestamp":1566803400},{"client_count":1,"timestamp":1566803700},{"client_count":15,"timestamp":1566804000},{"client_count":15,"timestamp":1566804300},{"client_count":15,"timestamp":1566804600},{"client_count":15,"timestamp":1566804900},{"client_count":15,"timestamp":1566805200},{"client_count":15,"timestamp":1566805500},{"client_count":15,"timestamp":1566805800},{"client_count":15,"timestamp":1566806100},{"client_count":15,"timestamp":1566806400},{"client_count":15,"timestamp":1566806700},{"client_count":7,"timestamp":1566807000},{"client_count":40,"timestamp":1566807300},{"client_count":15,"timestamp":1566807600},{"client_count":15,"timestamp":1566807900},{"client_count":3,"timestamp":1566808200},{"client_count":15,"timestamp":1566808500},{"client_count":15,"timestamp":1566808800},{"client_count":15,"timestamp":1566809100},{"client_count":15,"timestamp":1566809400},{"client_count":15,"timestamp":1566809700},{"client_count":15,"timestamp":1566810000},{"client_count":15,"timestamp":1566810300},{"client_count":15,"timestamp":1566810600},{"client_count":15,"timestamp":1566810900},{"client_count":15,"timestamp":1566811200},{"client_count":15,"timestamp":1566811500},{"client_count":15,"timestamp":1566811800}]}; - // resp.samples.forEach(sample => { - // response[0].values.push({'x': new Date(sample.timestamp*1000), 'y': sample.client_count}) - // }); - widget.config = { - name: widget.name, - width: this.widgetWidth, - yAxisLabel: 'Count' - } - } - if (widget.key === 'security_info') { - widget.config = { - name: widget.name, - //title: 'events', - key: 'security_info', - gridStyle: { height: '240px', width: (this.widgetWidth-30)+'px'} - } - } - if (widget.key === 'guest-portal-analytics') { - widget.config = { - name: widget.name, - //title: 'events', - key: 'guest_portal_visitors', - gridStyle: { height: '240px', width: (this.widgetWidth-30)+'px'} - } - } - if (widget.key === 'onboarding-analytics') { - widget.config = { - name: widget.name, - //title: 'events', - key: 'guest_portal_visitors', - gridStyle: { height: '240px', width: (this.widgetWidth-30)+'px'} - } - } - if (widget.key === 'events') { - widget.config = { - name: widget.name, - title: 'events', - key: 'events', - gridStyle: { height: '240px', width: (this.widgetWidth-30)+'px'} - } - } - if (widget.key === 'presence-analytics') { - widget.config = { - name: widget.name, - width: this.widgetWidth, - key: 'presence-analytics' - } - } - if (widget.key === 'firmware_version') { - widget.config = { - name: widget.name, - key: 'firmware_version', - gridStyle: { height: '240px', width: (this.widgetWidth-30)+'px'} - } - } - }); - } - - - clearStorage(flag) { - if (flag) { - this.isWidgetRendered = false; - this.opened = true; - this.appService.clearCachedJson(); - this.dashboardJson = this.appService.getJson('My Dashboard'); - this.widgets = this.appService.getWidget(); - this.areWidgetsSaved = false; - } else { - this.closeConfirmClearSection = true; - } - } - - editDB() { - this.isWidgetRendered = false; - this.opened = true; - this.dashboardJson = this.appService.getStoredJson(); - this.widgets = this.widgets.filter(widget => { - let hasWidget = this.dashboardJson.widgets.filter(storedWidget => { - return storedWidget.name === widget.name; - }) - return !hasWidget || !hasWidget.length; - }) - this.appService.clearCachedJson(); - this.areWidgetsSaved = false; - this.snackBarRef = this._snackBar.openFromComponent(SnackBarComponent, {data: {isWidgetRendered: this.isWidgetRendered, renderWidgets: this.renderWidgets, saveWidgets: this.saveWidgets, __this: this}}); - this.isSnackBarOpen = true - } - - getLoginCreds() { - let cookie = document.cookie.split(';'); - this.logIn = cookie[1] && cookie[1].indexOf('email') > -1 ? cookie[1].split('email=')[1] : ''; - } - - getTime(ts) { - var hours:any; - let dateVal = new Date(ts*1000); - hours = dateVal.getHours(); - var timeZone = 'AM'; - if (hours > 12) { - hours -= 12; - timeZone = 'PM'; - } else if (hours === 0) { - hours = 12; - } - let minutes = dateVal.getMinutes(); - return hours + ':' + (minutes<10?'0'+minutes:minutes) + timeZone; - } - - saveWidgets(__this, flag) { - var _this = __this.__this; - if (!flag) { - _this.isWidgetRendered = false; - _this.opened = true; - _this.snackBarRef = _this._snackBar.openFromComponent(SnackBarComponent, {data: {isWidgetRendered: _this.isWidgetRendered, renderWidgets: _this.renderWidgets, saveWidgets: _this.saveWidgets, __this: _this}}); - _this.isSnackBarOpen = true - } - else { - window.localStorage.setItem('dashboardJson', JSON.stringify(_this.dashboardJson)); - _this.snackBarRef.dismiss(); - _this.isSnackBarOpen = false; - _this.areWidgetsSaved = true; - _this.closeConfirmClearSection = false; - } - console.log('save widgets called', flag); - } - - addWidget(index) { - if (this.dashboardJson.widgets[0] && !this.dashboardJson.widgets[0]['name']) this.dashboardJson.widgets.splice(0, 1); - let widget = this.widgets.splice(index, 1); - this.dashboardJson.widgets = this.dashboardJson.widgets.concat(widget); - if (!this.isSnackBarOpen) { - this.snackBarRef = this._snackBar.openFromComponent(SnackBarComponent, {data: {isWidgetRendered: this.isWidgetRendered, renderWidgets: this.renderWidgets, saveWidgets: this.saveWidgets, __this: this}}); - this.isSnackBarOpen = true; - } - } - - removeWidget(index) { - let widget = this.dashboardJson.widgets.splice(index, 1); - if (!this.dashboardJson.widgets.length) { - this.dashboardJson.widgets.push({}); - this.snackBarRef.dismiss(); - this.isSnackBarOpen = false - } - this.widgets = this.widgets.concat(widget); - } - - ngAfterViewInit() { - let phElement = this.placeholder.element.nativeElement; - phElement.style.display = 'none'; - phElement.parentElement.removeChild(phElement); - } - - ngOnDestroy() { - if (this.isSnackBarOpen) { - this.snackBarRef.dismiss(); - this.isSnackBarOpen = false; - } - } - - dragMoved(e: CdkDragMove) { - let point = this.getPointerPositionOnPage(e.event); - - this.listGroup._items.forEach(dropList => { - if (__isInsideDropListClientRect(dropList, point.x, point.y)) { - this.activeContainer = dropList; - return; - } - }); - } - - dropListDropped(e) { - if (!this.target) - return; - - let phElement = this.placeholder.element.nativeElement; - let parent = phElement.parentElement; - - phElement.style.display = 'none'; - - parent.removeChild(phElement); - parent.appendChild(phElement); - parent.insertBefore(this.source.element.nativeElement, parent.children[this.sourceIndex]); - - this.target = null; - this.source = null; - - if (this.sourceIndex != this.targetIndex) - moveItemInArray(this.dashboardJson.widgets, this.sourceIndex, this.targetIndex); - } - - dropListEnterPredicate = (drag: CdkDrag, drop: CdkDropList) => { - if (drop == this.placeholder) - return true; - - if (drop != this.activeContainer) - return false; - - let phElement = this.placeholder.element.nativeElement; - let sourceElement = drag.dropContainer.element.nativeElement; - let dropElement = drop.element.nativeElement; - - let dragIndex = __indexOf(dropElement.parentElement.children, (this.source ? phElement : sourceElement)); - let dropIndex = __indexOf(dropElement.parentElement.children, dropElement); - - if (!this.source) { - this.sourceIndex = dragIndex; - this.source = drag.dropContainer; - - phElement.style.width = sourceElement.clientWidth + 'px'; - phElement.style.height = sourceElement.clientHeight + 'px'; - - sourceElement.parentElement.removeChild(sourceElement); - } - - this.targetIndex = dropIndex; - this.target = drop; - - phElement.style.display = ''; - dropElement.parentElement.insertBefore(phElement, (dropIndex > dragIndex - ? dropElement.nextSibling : dropElement)); - - this.placeholder.enter(drag, drag.element.nativeElement.offsetLeft, drag.element.nativeElement.offsetTop); - return false; - } - - /** Determines the point of the page that was touched by the user. */ - getPointerPositionOnPage(event: MouseEvent | TouchEvent) { - // `touches` will be empty for start/end events so we have to fall back to `changedTouches`. - const point = __isTouchEvent(event) ? (event.touches[0] || event.changedTouches[0]) : event; - const scrollPosition = this.viewportRuler.getViewportScrollPosition(); - - return { - x: point.pageX - scrollPosition.left, - y: point.pageY - scrollPosition.top - }; - } -} - -function __indexOf(collection, node) { - return Array.prototype.indexOf.call(collection, node); - }; - - /** Determines whether an event is a touch event. */ - function __isTouchEvent(event: MouseEvent | TouchEvent): event is TouchEvent { - return event.type.startsWith('touch'); - } - - function __isInsideDropListClientRect(dropList: CdkDropList, x: number, y: number) { - const {top, bottom, left, right} = dropList.element.nativeElement.getBoundingClientRect(); - return y >= top && y <= bottom && x >= left && x <= right; - } \ No newline at end of file diff --git a/customized-dashboard/src/app/widgets/bandwidth/bandwidth.component.html b/customized-dashboard/src/app/widgets/bandwidth/bandwidth.component.html deleted file mode 100644 index ab4f942..0000000 --- a/customized-dashboard/src/app/widgets/bandwidth/bandwidth.component.html +++ /dev/null @@ -1,13 +0,0 @@ -
- - - {{item.name}} - - - - Wired - Wireless - -
- -Loading...
Loading...
\ No newline at end of file diff --git a/customized-dashboard/src/app/widgets/bandwidth/bandwidth.component.ts b/customized-dashboard/src/app/widgets/bandwidth/bandwidth.component.ts deleted file mode 100644 index d1c470d..0000000 --- a/customized-dashboard/src/app/widgets/bandwidth/bandwidth.component.ts +++ /dev/null @@ -1,67 +0,0 @@ -import { Component, ViewEncapsulation, Input, OnInit, ViewChild, OnChanges } from '@angular/core'; -import { AppService } from '../../app.service'; -import { REFERENCE_PREFIX } from '@angular/compiler/src/render3/view/util'; - -@Component({ - selector: 'bandwidth-usage', - encapsulation: ViewEncapsulation.None, - templateUrl: './bandwidth.component.html' -}) -export class BandwidthUsageComponent implements OnInit, OnChanges { - - @Input() config; - @Input() refresh; - public chartConfig; - selectedFilter = 'WIRED'; - allNetworks = [{name: 'Select Network'}]; - selectedNetwork = "Select Network"; - - constructor(private appService: AppService) {} - - ngOnChanges(changes) { - if (changes.refresh && !changes.refresh.firstChange) { - this.ngOnInit(); - } - } - - ngOnInit() { - this.chartConfig = undefined; - this.getBWUsage(this.selectedFilter); - this.getAllNetworks(); - } - - getAllNetworks() { - this.selectedNetwork = this.allNetworks.length ? this.allNetworks[0].name : '' - this.appService.getConnections().subscribe((resp:any) => { - resp.networks.forEach(network => { - this.allNetworks.push({name: network.essid}); - }) - this.selectedNetwork = this.allNetworks.length ? this.allNetworks[0].name : '' - }) - } - - getBWUsage(filter) { - var response = [{"key": 'Received', values: [], color: '#9FDCF6'}, {"key": "Sent", values: [], color: '#FD9A69'}]; - this.appService.getBW(this.selectedFilter, this.selectedNetwork ? this.selectedNetwork : '').subscribe((resp:any) => { - resp.samples.forEach(sample => { - response[0].values.push([new Date(sample.timestamp*1000), sample.rx_data_bytes]) - response[1].values.push([new Date(sample.timestamp*1000), sample.tx_data_bytes]); - }); - this.chartConfig = Object.assign({}, this.config, {data: response}) - }, error => { - let resp = {"count":36,"interval":"5minutes","samples":[{"rx_data_bytes":184625880,"timestamp":1566870900,"tx_data_bytes":318585520},{"rx_data_bytes":184625880,"timestamp":1566871200,"tx_data_bytes":318585520},{"rx_data_bytes":165698520,"timestamp":1566871500,"tx_data_bytes":303877380},{"rx_data_bytes":39754278,"timestamp":1566871800,"tx_data_bytes":33885076},{"rx_data_bytes":33885076,"timestamp":1566872100,"tx_data_bytes":290815798},{"rx_data_bytes":51085856,"timestamp":1566872400,"tx_data_bytes":104221078},{"rx_data_bytes":144701366,"timestamp":1566872700,"tx_data_bytes":254826164},{"rx_data_bytes":184625880,"timestamp":1566873000,"tx_data_bytes":318585520},{"rx_data_bytes":184625880,"timestamp":1566873300,"tx_data_bytes":318585520},{"rx_data_bytes":184625880,"timestamp":1566873600,"tx_data_bytes":318585520},{"rx_data_bytes":184625880,"timestamp":1566873900,"tx_data_bytes":318585520},{"rx_data_bytes":275370180,"timestamp":1566874200,"tx_data_bytes":493758658},{"rx_data_bytes":184625880,"timestamp":1566874500,"tx_data_bytes":318585520},{"rx_data_bytes":184625880,"timestamp":1566874800,"tx_data_bytes":318585520},{"rx_data_bytes":184625880,"timestamp":1566875100,"tx_data_bytes":318585520},{"rx_data_bytes":184625880,"timestamp":1566875400,"tx_data_bytes":318585520},{"rx_data_bytes":184625880,"timestamp":1566875700,"tx_data_bytes":318585520},{"rx_data_bytes":184625880,"timestamp":1566876000,"tx_data_bytes":318585520},{"rx_data_bytes":181257618,"timestamp":1566876300,"tx_data_bytes":317915314},{"rx_data_bytes":184625880,"timestamp":1566876600,"tx_data_bytes":318585520},{"rx_data_bytes":318585520,"timestamp":1566876900,"tx_data_bytes":275267818},{"rx_data_bytes":184625880,"timestamp":1566877200,"tx_data_bytes":318585520},{"rx_data_bytes":183709254,"timestamp":1566877500,"tx_data_bytes":314918998},{"rx_data_bytes":104776854,"timestamp":1566877800,"tx_data_bytes":191066812},{"rx_data_bytes":184625880,"timestamp":1566878100,"tx_data_bytes":318585520},{"rx_data_bytes":184625880,"timestamp":1566878400,"tx_data_bytes":318585520},{"rx_data_bytes":184625880,"timestamp":1566878700,"tx_data_bytes":318585520},{"rx_data_bytes":52455720,"timestamp":1566879000,"tx_data_bytes":106416350},{"rx_data_bytes":184625880,"timestamp":1566879300,"tx_data_bytes":318585520},{"rx_data_bytes":184625880,"timestamp":1566879600,"tx_data_bytes":318585520},{"rx_data_bytes":184625880,"timestamp":1566879900,"tx_data_bytes":318585520},{"rx_data_bytes":184625880,"timestamp":1566880200,"tx_data_bytes":318585520},{"rx_data_bytes":184625880,"timestamp":1566880500,"tx_data_bytes":318585520},{"rx_data_bytes":184625880,"timestamp":1566880800,"tx_data_bytes":318585520},{"rx_data_bytes":184625880,"timestamp":1566881100,"tx_data_bytes":318585520},{"rx_data_bytes":184625880,"timestamp":1566881400,"tx_data_bytes":318585520}]}; - resp.samples.forEach(sample => { - response[0].values.push([new Date(sample.timestamp*1000), sample.rx_data_bytes]) - response[1].values.push([new Date(sample.timestamp*1000), sample.tx_data_bytes]); - }); - this.chartConfig = Object.assign({}, this.config, {data: response}) - }) - } - - onFilterChange(val) { - this.selectedFilter = val; - this.config.data = []; - if (this.selectedFilter === 'WIRELESS' && this.selectedNetwork === 'Select Network') return - this.getBWUsage(val); - } -} \ No newline at end of file diff --git a/customized-dashboard/src/app/widgets/client-count/client-count.component.html b/customized-dashboard/src/app/widgets/client-count/client-count.component.html deleted file mode 100644 index 25d398f..0000000 --- a/customized-dashboard/src/app/widgets/client-count/client-count.component.html +++ /dev/null @@ -1,22 +0,0 @@ -
- - - {{item.name}} - - - - - {{item.name}} - - - - - {{item.name}} - - - - - -
- -Loading...
Loading...
\ No newline at end of file diff --git a/customized-dashboard/src/app/widgets/client-count/client-count.component.ts b/customized-dashboard/src/app/widgets/client-count/client-count.component.ts deleted file mode 100644 index 84eb6ba..0000000 --- a/customized-dashboard/src/app/widgets/client-count/client-count.component.ts +++ /dev/null @@ -1,86 +0,0 @@ -import { Component, ViewEncapsulation, Input, OnInit, ViewChild, OnChanges } from '@angular/core'; -import { AppService } from '../../app.service'; - -@Component({ - selector: 'client-count', - encapsulation: ViewEncapsulation.None, - templateUrl: './client-count.component.html' -}) -export class ClientCountComponent implements OnInit, OnChanges { - - @Input() config; - @Input() refresh; - chartConfig; - filterBy = [{name: 'Select Filter', value: ''}, {name: 'By Band', value: 'band'}, {name: 'By Device Type', value: 'device_type'}, {name: 'By Label', value: 'label'}, {name: 'By Network', value: 'network'}, {name: 'By Config Group', value: 'group'}]; - bandTypes = []; - aps = [{name: 'AP', value: ''}]; - filterValue = ""; - filterByValue = ""; - bandTypeValue = '2.4'; - apSerial; - - - constructor(private appService: AppService) {} - - ngOnChanges(changes) { - if (changes.refresh && !changes.refresh.firstChange) { - this.ngOnInit(); - } - } - ngOnInit() { - this.chartConfig = ''; - this.filterByValue = ""; - this.getClientCount(); - this.getAps(); - } - - getAps() { - this.appService.getAps().subscribe((resp:any) => { - resp.aps.forEach(ap => { - this.aps.push({name: ap.name, value: ap.serial}); - }); - this.apSerial = this.aps[1] ? this.aps[1].value : ''; - }); - } - - getClientCount() { - let queryParam = ""; - if (this.filterByValue) { - if (this.filterByValue === 'band') { - queryParam = this.filterByValue + '=' + this.bandTypeValue + '&serial=' + this.apSerial; - } - else if (this.filterByValue === 'device_type') { - queryParam = this.filterByValue + '=' + this.bandTypeValue; - } - else { - queryParam = this.filterValue && this.filterValue.length ? this.filterByValue + '=' + this.filterValue : ''; - } - } - this.appService.getClientGraph(queryParam).subscribe((resp:any) => { - var response = [{"key": 'Clients', values: [], color: '#9FDCF6'}]; - resp.samples.forEach(sample => { - response[0].values.push({'x': new Date(sample.timestamp*1000), 'y': sample.client_count}) - }); - this.chartConfig = Object.assign({}, this.config, {data: response}); - }, error => { - this.chartConfig = Object.assign({}, this.config, {data: []}); - }) - } - - onFilterChange(val) { - if (val === 'band') { - this.bandTypes = [{name: '2.4', value: '2.4'}, {name: '5', value: '5'}] - this.bandTypeValue = this.bandTypes[0].value; - this.apSerial = this.aps[1] ? this.aps[1].value : ''; - this.getClientCount(); - } - else if (val === 'device_type') { - this.bandTypes = [{name: 'AP', value: 'AP'}, {name: 'Switch', value: 'Switch'}] - this.bandTypeValue = this.bandTypes[0].value; - this.getClientCount(); - } - else { - this.filterValue = ''; - } - } -} \ No newline at end of file diff --git a/customized-dashboard/src/app/widgets/events/event-popup.component.html b/customized-dashboard/src/app/widgets/events/event-popup.component.html deleted file mode 100644 index 8f56827..0000000 --- a/customized-dashboard/src/app/widgets/events/event-popup.component.html +++ /dev/null @@ -1,2 +0,0 @@ -{{params.value}} -{{params.value}} \ No newline at end of file diff --git a/customized-dashboard/src/app/widgets/events/event-popup.component.ts b/customized-dashboard/src/app/widgets/events/event-popup.component.ts deleted file mode 100644 index acb7e7b..0000000 --- a/customized-dashboard/src/app/widgets/events/event-popup.component.ts +++ /dev/null @@ -1,66 +0,0 @@ -import { Component, OnInit, Inject, ViewChild, ViewEncapsulation } from '@angular/core'; -import { ICellRendererAngularComp } from 'ag-grid-angular'; -import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'; -import { AppService } from '../../app.service'; - -@Component({ - selector: 'event-popup', - templateUrl: './event-popup.component.html' -}) -export class EventPopupComponent implements ICellRendererAngularComp { - public params: any; - - constructor(public dialog: MatDialog) { } - - agInit(params: any): void { - this.params = params; - } - - refresh(): boolean { - return false; - } - - openDetailsPopup() { - let dialogRef = this.dialog.open(EventsMessagePopup, { - width: '600px', - disableClose : true, - data: this.params.data, - autoFocus: false - }); - } -} - -@Component({ - selector: 'events-message-popup', - template: ` -