Admin UI

Co-Authored-By: Sangam Kumar Jain <[email protected]>
flipkart-incubator · Apr 13, 2022 · 6732482 · 6732482
1 parent 468cf90
commit 6732482
Show file tree

Hide file tree

Showing 11 changed files with 456 additions and 0 deletions.
diff --git a/internal/www/css/main.css b/internal/www/css/main.css
@@ -0,0 +1,9 @@
+.chart.c3{
+    width:33%;
+    float: left;
+}
+
+.font-bold {
+    font-weight: bold;
+    font-size: 14px;
+}
diff --git a/internal/www/header-nav.html b/internal/www/header-nav.html
@@ -0,0 +1,7 @@
+<nav class="navbar navbar-default">
+    <div class="container-fluid">
+        <div class="navbar-header">
+            <a class="navbar-brand">DKV Dashboard</a>
+        </div>
+    </div>
+</nav>
diff --git a/internal/www/home.html b/internal/www/home.html
@@ -0,0 +1,66 @@
+<header-nav></header-nav>
+
+<div class="container ">
+    <div class="container">
+        <div class="col-lg-1" ></div>
+        <div class="col-lg-10 text-center">
+            <h1>{{througputParser(getMapValSum(stat["dkv_req_count"]))}}</h1>
+        </div>
+        <div class="col-lg-1" ></div>
+    </div>
+</div>
+<hr>
+<div class="container col-lg-12">
+    <div class="container col-lg-6">
+    <div class=" text-center col-lg-3" ng-repeat="(index,op) in ops1">
+        <div> <h5> {{op}} </h5> <hr></div>
+        <div><h2> {{ througputParser(stat["dkv_req_count"][op]) }} <span style="font-size: 12px">rps</span> </h2></div>
+        <div>
+            <table class="table">
+                <tbody>
+                <tr ><td > p50 </td> <td class="text-danger"> {{latencyParser(stat["dkv_latency"][op].p50)}}  </td> </tr>
+                <tr ><td > p90 </td> <td class="text-info">  {{latencyParser(stat["dkv_latency"][op].p90)}} </td> </tr>
+                <tr ><td > p99 </td> <td class="text-default">  {{latencyParser(stat["dkv_latency"][op].p99)}} </td> </tr>
+
+                </tbody>
+            </table>
+        </div>
+    </div>
+    </div>
+    <div class="container col-lg-6">
+        <div class=" text-center col-lg-3" ng-repeat="(index,op) in ops2">
+            <div> <h5> {{op}} </h5> <hr></div>
+            <div><h2> {{ througputParser(stat["dkv_req_count"][op]) }} <span style="font-size: 12px">rps</span> </h2></div>
+            <div>
+                <table class="table">
+                    <tbody>
+                    <tr ><td > p50 </td> <td class="text-danger"> {{latencyParser(stat["dkv_latency"][op].p50)}}  </td> </tr>
+                    <tr ><td > p90 </td> <td class="text-info">  {{latencyParser(stat["dkv_latency"][op].p90)}} </td> </tr>
+                    <tr ><td > p99 </td> <td class="text-default">  {{latencyParser(stat["dkv_latency"][op].p99)}} </td> </tr>
+
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="col-lg-12">
+    <hr>
+    <div class="col-lg-12">
+        <div class="col-lg-3 canvas-wrapper">
+            <canvas class="chart chart-line" chart-data="ts.rrate.data" chart-labels="ts.rrate.label" chart-options="ts.rrate.options" chart-series="ts.rrate.series"  chart-colors="ts.rrate.colors"></canvas>
+        </div>
+        <div class="col-lg-3 canvas-wrapper">
+            <canvas class="chart chart-line" chart-data="ts.error.data" chart-labels="ts.error.label" chart-options="ts.error.options" chart-series="ts.error.series"  chart-colors="ts.error.colors"></canvas>
+        </div>
+        <div class="col-lg-3 canvas-wrapper">
+            <canvas class="chart chart-line" chart-data="ts.p50.data" chart-labels="ts.p50.label" chart-options="ts.p50.options" chart-series="ts.p50.series"  chart-colors="ts.p50.colors"></canvas>
+        </div>
+        <div class="col-lg-3 canvas-wrapper">
+            <canvas class="chart chart-line" chart-data="ts.p99.data" chart-labels="ts.p99.label" chart-options="ts.p99.options" chart-series="ts.p99.series"  chart-colors="ts.p99.colors"></canvas>
+        </div>
+    </div>
+    <div class="col-lg-12">
+        <h5> <span class="label" ng-repeat="(i,j) in series" style="background-color: {{colors[i].backgroundColor}}">{{j}}</span></h5>
+    </div>
+</div>
diff --git a/internal/www/index.html b/internal/www/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en-IN" ng-app="DKV.Dashboard">
+<head>
+    <title>DKV Dashboard</title>
+    <base href="/">
+
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+
+    <!-- angular -->
+    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
+    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.min.js"></script>
+    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-cookies.js"></script>
+
+    <!-- graphing -->
+    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.0/d3.js"></script>
+    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.15/c3.min.js"></script>
+
+    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
+    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
+    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.1.1/angular-chart.min.js"></script>
+
+    <script type="text/javascript" src="//angular-data-grid.github.io/dist/pagination.js"></script>
+    <script type="text/javascript" src="//angular-data-grid.github.io/dist/JSONToCSVConvertor.js"></script>
+    <script type="text/javascript" src="//angular-data-grid.github.io/dist/dataGrid.js"></script>
+
+    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.1/clipboard.min.js"></script>
+    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/ngclipboard/2.0.0/ngclipboard.min.js"></script>
+
+    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.3.12/angular-strap.min.js"></script>
+    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.3.12/angular-strap.tpl.min.js"></script>
+
+    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.5/angular-sanitize.min.js"></script>
+
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+    <link href="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.15/c3.css" rel="stylesheet" type="text/css">
+
+    <!-- monitoring -->
+    <link rel="stylesheet" href="/css/main.css">
+    <script type="text/javascript" src="/js/main.js"></script>
+    <script type="text/javascript" src="/js/config.js"></script>
+    <script type="text/javascript" src="/js/controllers.js"></script>
+    <script type="text/javascript" src="/js/services.js"></script>
+    <script type="text/javascript" src="/js/directives.js"></script>
+    <script type="text/javascript" src="/js/lib.js"></script>
+
+    <!-- css-->
+    <style>
+        .chart {
+            width:25%;
+            float: left;
+        }
+        .fronted {
+            height: 300px;
+        }
+    </style>
+
+</head>
+
+<body>
+<div ng-view></div>
+</body>
+
+</html>
diff --git a/internal/www/js/config.js b/internal/www/js/config.js
@@ -0,0 +1,9 @@
+CONFIG={
+    "router": {
+        "Home":{
+            "path":"/",
+            "controller":"HomeCtrl",
+            "templateUrl": "home.html",
+        },
+    },
+};
diff --git a/internal/www/js/controllers.js b/internal/www/js/controllers.js
@@ -0,0 +1,170 @@
+(function() {
+
+
+    angular.module("DKV.Dashboard.Controllers", ['DKV.Dashboard.Services','chart.js', 'dataGrid', 'pagination', 'ngCookies' ,'ngclipboard','mgcrea.ngStrap','ngSanitize'])
+
+        .config(['ChartJsProvider', function (ChartJsProvider) {
+            ChartJsProvider.setOptions({
+                responsive: false
+            });
+            ChartJsProvider.setOptions('line', {
+                showLines: true,
+                animation: {
+                	duration:0
+                },
+                legend: {
+                    display: true,
+                    position: 'bottom',
+                    labels:{
+                        boxWidth:20
+                    }
+                },
+                scales: {
+                    yAxes: [{
+                        ticks: {
+                            beginAtZero:true
+                        },
+                        gridLines: {
+                            display:false
+                        }
+                    }],
+                    xAxes: [{
+                        type: 'time',
+                        ticks: {
+                            maxRotation: 0,
+                            minRotation: 0,
+                            autoSkip: true,
+                            maxTickLimit: 3
+                        },
+                        gridLines: {
+                            display:false
+                        }
+                    }]
+                },
+                tooltips: {
+                    intersect:false,
+                    callbacks : {
+                        title: function(tooltipItems, data) {
+                            return tooltipItems[0].xLabel.toLocaleTimeString();
+                        }
+                    }
+                },
+                elements: {
+                        line: {
+                            fill: false,
+                            borderWidth: 1
+                        },
+                        point: {
+                            radius: 1
+                        }
+
+                    }
+            });
+        }])
+
+
+        .controller("HomeCtrl", [ '$location', '$scope', '$rootScope','$timeout','$sce','DKVService',
+            function($location, $scope, $rootScope ,$timeout, $sce, DKVService) {
+            /* discover master nodes from here*/
+                $scope.masters = {
+                    "m1":"http://127.0.0.1:7081",
+                    "m2":"http://127.0.0.1:7082",
+                    "m3":"http://127.0.0.1:7083",
+                }
+
+                $scope.througputParser = througputParser
+                $scope.latencyParser = latencyParser
+                $scope.getMapValSum = getMapValSum
+
+                $scope.ops1 = ["getLin","getSeq","mgetLin","mgetSeq",]
+                $scope.ops2 = ["put","mput","cas","del"]
+
+                $scope.source = new EventSource(DKVService.GetClusterData($scope.masters.m1));
+                $scope.source.addEventListener('message', function(e) {
+                    data = JSON.parse(e.data)
+                    $scope.stat = data["global"]
+                    delete data["global"]
+                    $scope.stats = data
+                    /* initialize after the first population */
+                    if ( $scope.series === undefined ) {
+                        initMetric()
+                    }
+
+                    console.log(new Date($scope.stat.ts))
+                    console.log(new Date())
+                    $scope.tsEvent.push(new Date($scope.stat.ts));
+
+                    for ( i = 0 ; i < $scope.series.length; i++ ) {
+                        $scope.ts.rrate.data[i].push(getMapValSum($scope.stats[$scope.series[i]]["dkv_req_count"]))
+                        $scope.ts.error.data[i].push(getMapValSum($scope.stats[$scope.series[i]]["dkv_req_count"]) / 100)
+                        avgLatency = getAvgLatency($scope.stats[$scope.series[i]]["dkv_latency"])
+                        $scope.ts.p50.data[i].push(avgLatency.p50)
+                        $scope.ts.p99.data[i].push(avgLatency.p99)
+                    }
+
+                    if ( $scope.tsEvent.length > 60 ) {
+                        $scope.tsEvent.splice(0,1);
+                        for ( i = 0 ; i < $scope.series.length; i++ ) {
+                            $scope.ts.rrate.data[i].splice(0,1);
+                            $scope.ts.error.data[i].splice(0,1);
+                            $scope.ts.p50.data[i].splice(0,1);
+                            $scope.ts.p99.data[i].splice(0,1);
+                        }
+                    }
+
+                });
+
+                function createStat(parser,titleText) {
+                    var stat = { series : $scope.series, colors: $scope.colors, label: $scope.tsEvent, data : getEmptyArray($scope.series.length),
+                        options: {
+                            responsive: true,
+                            maintainAspectRatio: false,
+                            scales: {
+                                yAxes: [{
+                                    ticks: {
+                                        callback: function (value, index, values) {
+                                            return parser(value)
+                                        }
+                                    },
+                                }]
+                            },
+                            title: {
+                                display: true, text: titleText,
+                                fontSize: 13, fontColor: "#000000"
+                            },
+                            legend: {
+                                display: false
+                            },
+                            elements: {
+                                line: {
+                                    fill: false,
+                                    borderWidth: 1.7
+                                },
+                                point: {
+                                    radius: 0
+                                }
+
+                            }
+                        }
+                    };
+                    return stat
+                }
+                function initMetric() {
+                    $scope.ts = {}
+                    $scope.tsEvent = []
+                    $scope.series = Object.keys($scope.stats)
+                    $scope.colors = [colorGreen,colorOrange,colorBlue,colorRed,colorViolet,colorDeepBlue]
+
+                    $scope.ts.rrate = createStat(througputParser,"request rate")
+                    $scope.ts.error = createStat(percentageParser,"error rate")
+                    $scope.ts.p50 = createStat(latencyParser,"50th percentile")
+                    $scope.ts.p99 = createStat(latencyParser,"99th percentile")
+                }
+
+                window.setInterval(function(){
+                    $scope.$apply(function () {
+                    });
+                }, 1000);
+            }
+        ])
+}());
diff --git a/internal/www/js/directives.js b/internal/www/js/directives.js
@@ -0,0 +1,13 @@
+(function() {
+
+    angular.module("DKV.Dashboard.Directives", ["DKV.Dashboard.Controllers"])
+        .directive("headerNav", function() {
+            return {
+                restrict: "E",
+                templateUrl: "header-nav.html",
+                controller: function($scope, $rootScope, $location, $sce) {
+                    $scope.config = CONFIG;
+                }
+            };
+        })
+}());