[CORD-1947] vEE OAM/CFM delay and jitter stat GUI
Change-Id: I82f364ed89805e9be7936adeefc49337917b57fd
diff --git a/xos/veestat/src/app/components/cfmstat.component.ts b/xos/veestat/src/app/components/cfmstat.component.ts
new file mode 100644
index 0000000..e2b78de
--- /dev/null
+++ b/xos/veestat/src/app/components/cfmstat.component.ts
@@ -0,0 +1,212 @@
+
+/*
+ * Copyright 2017-present Open Networking Foundation
+
+ * Licensed under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+
+ * http://www.apache.org/licenses/LICENSE-2.0
+
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {IMicrosemiStats, IMicrosemiStatsData} from './stats-service';
+import './cfmstat.component.scss';
+
+class CfmStatComponent {
+ static $inject = [
+ '$interval',
+ '$stateParams',
+ 'MicrosemiStats'
+ ];
+
+ public options = {
+ animation: {
+ duration: 0
+ },
+ scales: {
+ yAxes: [{
+ ticks: {
+ beginAtZero: true,
+ fontColor: '#fff',
+ },
+ gridLines: {
+ color: '#555',
+ zeroLineColor: '#888'
+ }
+ }],
+ xAxes: [{
+ ticks: {
+ beginAtZero: true,
+ fontColor: '#fff',
+ },
+ gridLines: {
+ color: '#555'
+ }
+ }]
+ },
+
+ };
+
+ public lineOptions = {
+ animation: {
+ duration: 0
+ },
+ scales: {
+ yAxes: [{
+ ticks: {
+ beginAtZero: true,
+ callback: val => `${(Math.round(val * 1000) / 1000).toFixed(3)} ms`,
+ fontColor: '#fff',
+ },
+ gridLines: {
+ color: '#555',
+ zeroLineColor: '#888'
+ }
+ }],
+ xAxes: [{
+ ticks: {
+ beginAtZero: true,
+ fontColor: '#fff',
+ },
+ gridLines: {
+ color: '#555',
+ }
+ }]
+ },
+ bezierCurve: false
+ };
+
+ public lineChart = {
+ series: ['Jitter Avg', 'Jitter Max', 'Jitter Min', 'Delay Avg', 'Delay Max', 'Delay Min'],
+ labels: [],
+ data: [],
+ dataset: []
+ };
+
+ public delayBin = {
+ series: ['Current Delay Bin'],
+ labels: ['0 - 10 ms', '10 - 20 ms', '20 - 37 ms', '> 37 ms'],
+ data: [],
+ dataset: {
+ backgroundColor: '#6f6db9'
+ }
+ };
+
+ public jitterBin = {
+ series: ['Current Jitter Bin'],
+ labels: ['0 - 3 ms', '3 - 8 ms', '8 - 100 ms', '> 100 ms'],
+ data: [],
+ dataset: {
+ backgroundColor: '#ffa500'
+ }
+ };
+
+ public allLineColors = ['#c55d01', '#ffa500', '#8b0000', '#6f6db9', '#add8e6', '#00008b'];
+ public lineColors = this.allLineColors;
+ public lineFill = [
+ {fill: false, borderColor: '#c55d01'},
+ {fill: false, borderColor: '#ffa500'},
+ {fill: false, borderColor: '#8b0000'},
+ {fill: false, borderColor: '#6f6db9'},
+ {fill: false, borderColor: '#add8e6'},
+ {fill: false, borderColor: '#00008b'}];
+
+ public graphOption = 'both';
+ public graphTitle = 'Delay and Jitter Graph';
+ public linedata = [];
+
+ constructor(
+ private $interval: ng.IIntervalService,
+ private $stateParams: ng.ui.IStateParamsService,
+ private MicrosemiStats: IMicrosemiStats,
+ ) {
+
+ }
+
+ $onInit() {
+ const load = () => {
+ this.MicrosemiStats.get(this.$stateParams.mdName, this.$stateParams.maName, this.$stateParams.mepId, this.$stateParams.dmId || 1)
+ .then((res: IMicrosemiStatsData) => {
+ const data = this.MicrosemiStats.getAllData(res);
+
+ this.linedata = data.line.data;
+ this.lineChart.labels = data.line.labels;
+ this.lineChart.data = data.line.data;
+ this.delayBin.data = data.delay.data;
+ this.jitterBin.data = data.jitter.data;
+
+ });
+ };
+
+ load();
+
+ this.renderGraph();
+
+ this.$interval(() => {
+ load();
+ }, 1000 * 60);
+ }
+
+ renderGraph() : void {
+ this.graphTitle = this.graphTitleRender();
+ this.graphDisplayRender();
+ }
+
+ graphTitleRender() : string {
+ let output;
+ switch (this.graphOption) {
+ default:
+ case 'both':
+ output = 'Delay and Jitter Graph';
+ break;
+ case 'delay':
+ output = 'Delay Graph';
+ break;
+ case 'jitter':
+ output = 'Jitter Graph';
+ break;
+ }
+ return output;
+ }
+
+ graphDisplayRender() : void {
+ switch (this.graphOption) {
+
+ default:
+ case 'both':
+ this.lineChart.series = ['Jitter Avg', 'Jitter Max', 'Jitter Min', 'Delay Avg', 'Delay Max', 'Delay Min'];
+ this.lineChart.data = this.linedata;
+ this.lineChart.dataset = this.lineFill;
+ this.lineColors = this.allLineColors;
+ break;
+
+ case 'delay':
+ this.lineChart.series = ['Delay Avg', 'Delay Max', 'Delay Min'];
+ this.lineChart.data = this.linedata.slice(3);
+ this.lineChart.dataset = this.lineFill.slice(3);
+ this.lineColors = this.allLineColors.slice(3);
+ break;
+
+ case 'jitter':
+ this.lineChart.series = ['Jitter Avg', 'Jitter Max', 'Jitter Min'];
+ this.lineChart.data = this.linedata.slice(0, 3);
+ this.lineChart.dataset = this.lineFill.slice(0, 3);
+ this.lineColors = this.allLineColors.slice(0, 3);
+ break;
+ }
+ }
+
+}
+
+
+export const cfmStatComponent: angular.IComponentOptions = {
+ template: require('./cfmstat.component.html'),
+ controllerAs: 'vm',
+ controller: CfmStatComponent
+};