update dataset choices #20

Zipexpo · Zipexpo · commit 9b14f138b230 · 2019-04-08T19:50:42.000-05:00
diff --git a/HiperView/css/main.css b/HiperView/css/main.css
@@ -673,34 +673,6 @@ p.divider {
 	margin-left: 1em !important;
 }
 
-.cover {
-	position: fixed;
-	margin: 0;
-	width:100%;
-	height:100%;
-	background: #485563;  /* fallback for old browsers */
-	background: -webkit-linear-gradient(to top, #29323cc4, #485563);  /* Chrome 10-25, Safari 5.1-6 */
-	background: linear-gradient(to top, #29323cc4, #485563); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-	z-index: 10;
-}
-
-.light  .cover {
-	background:  #f3f3f3;  /* fallback for old browsers */
-	background: -webkit-linear-gradient(to right, #f3f3f3c4, #ececec);  /* Chrome 10-25, Safari 5.1-6 */
-	background: linear-gradient(to right, #f3f3f3c4, #ececec); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-}
-.cover .spinnerC {
-	position: fixed;
-	margin: 0;
-	/* position: absolute; */
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-}
-
-.cover.hidden {
-	display: none;
-}
 
 #datasetsSelectTrigger img{
 	width: 30px;
diff --git a/HiperView/css/theme.css b/HiperView/css/theme.css
@@ -103,4 +103,33 @@
     }
 }
 
+
+.cover {
+    position: fixed;
+    margin: 0;
+    width:100%;
+    height:100%;
+    background: #485563;  /* fallback for old browsers */
+    background: -webkit-linear-gradient(to top, #29323cc4, #485563);  /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to top, #29323cc4, #485563); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+    z-index: 10;
+}
+
+.light  .cover {
+    background:  #f3f3f3;  /* fallback for old browsers */
+    background: -webkit-linear-gradient(to right, #f3f3f3c4, #ececec);  /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to right, #f3f3f3c4, #ececec); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+}
+.cover .spinnerC {
+    position: fixed;
+    margin: 0;
+    /* position: absolute; */
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.cover.hidden {
+    display: none;
+}
 /*
diff --git a/HiperView/myscripts/main.js b/HiperView/myscripts/main.js
@@ -1674,7 +1674,7 @@ $( document ).ready(function() {
                     drawsummary(i);
                 }
                 break;
-        }
+        }ta
     });
     d3.select('#datacom').on("change", function () {
         d3.select('.cover').classed('hidden', false);
diff --git a/HiperView/myscripts/setting.js b/HiperView/myscripts/setting.js
@@ -244,4 +244,57 @@ function processData_old(str, serviceName) {
         }
         return a;
     }
+}
+
+function simulateResults2(hostname,iter, s){
+    var newService;
+    if (s == serviceList[0])
+        newService = sampleS[hostname].arrTemperature[iter];
+    else if (s == serviceList[1])
+        newService = sampleS[hostname].arrCPU_load[iter];
+    else if (s == serviceList[2])
+        newService = sampleS[hostname].arrMemory_usage[iter];
+    else if (s == serviceList[3])
+        newService = sampleS[hostname].arrFans_health[iter];
+    else if (s == serviceList[4]) {
+        if (sampleS[hostname]["arrPower_usage"]== undefined && db!="influxdb") {
+            var simisval = handlemissingdata(hostname,iter);
+            sampleS[hostname]["arrPower_usage"] = [simisval];
+        }else if (sampleS[hostname]["arrPower_usage"][iter]== undefined  && db!="influxdb"){
+            var simisval = handlemissingdata(hostname,iter);
+            sampleS[hostname]["arrPower_usage"][iter] = simisval;
+        }
+        newService = sampleS[hostname]["arrPower_usage"][iter];
+    }
+    if (newService === undefined){
+        newService ={}
+        newService.result = {};
+        newService.result.query_time = query_time;
+        newService.data = {};
+        newService.data.service={};
+        newService.data.service.host_name = hostname;
+        newService.data.service.plugin_output = undefined;
+    }else {
+        if (db == "influxdb")
+            try {
+                newService.result.query_time = d3.timeParse("%Y-%m-%dT%H:%M:%S.%LZ")(newService.result.query_time).getTime();
+            }catch(e){
+
+            }
+    }
+    return newService;
+}
+
+function handlemissingdata(hostname,iter){
+    var simisval = jQuery.extend(true, {}, sampleS[hostname]["arrTemperature"][iter]);
+    var simval = processData(simisval.data.service.plugin_output, serviceList[0]);
+    // simval = (simval[0]+simval[1])/2;
+    simval = (simval[0]+simval[1]+20);
+    var tempscale = d3.scaleLinear().domain([thresholds[0][0],thresholds[0][1]]).range([thresholds[4][0],thresholds[4][1]]);
+    if (simval!==undefinedValue && !isNaN(simval) )
+    //simisval.data.service.plugin_output = "OK - The average power consumed in the last one minute = "+Math.round(tempscale(simval)*3.2)+" W";
+        simisval.data.service.plugin_output = "OK - The average power consumed in the last one minute = "+Math.floor(simval*3.2)+" W";
+    else
+        simisval.data.service.plugin_output = "UNKNOWN";
+    return simisval;
 }
diff --git a/ParallelCoordinates/index.html b/ParallelCoordinates/index.html
@@ -15,15 +15,22 @@
 
 
     <link rel="stylesheet" type="text/css" href="parallel.css" />
+    <link rel="stylesheet" type="text/css" href="../HiperView/css/theme.css" />
     <link rel="stylesheet" type="text/css" href="theme.css" />
     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
     <script src="src/lib/d3.v5.min.js"></script>
     <script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
     <script src="src/lib/underscore-min.js"></script>
-</head>
-<body>
+    <script src='https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.0.1/spin.min.js'></script> <!-- Spinner when loading -->
 
+</head>
+<body text="black" id="mainBody">
+<div class="cover">
+    <h5 class="spinnerC center" style="top: 60%;" >loading data...</h5>
+    <div class="spinnerC center" id="loadingSpinner" >
+    </div>
+</div>
 <nav class="pushpin-demo-nav" data-target="blue">
 
     <div class="nav-wrapper" id="header">
@@ -78,8 +85,9 @@ <h5></h5>
                             <option value="serviceWed04Oct" >04 Oct 2018</option>
                             <option value="service15Oct">15 Oct 2018</option>
                             <option value="service17Oct">17 Oct 2018</option>
-                            <option value="influxdb">Real-time Influxdb</option>
-                            <option value="nagios">Real-time Nagios</option>
+                            <option value="influxdbThus21Mar_1520">21 Mar 2019</option>
+                            <!--<option value="influxdb">Real-time Influxdb</option>-->
+                            <!--<option value="nagios">Real-time Nagios</option>-->
                         </select>
                     </div>
                         <table class="table table-striped table-hover row s12" id = "axisSetting">
@@ -193,7 +201,8 @@ <h5>Credits &amp; License</h5>
 
 </body>
 <!--data load-->
-<script src="src/data/serviceWed26Sep.js"></script>
+<script src="../HiperView/myscripts/setting.js"></script>
+<!--<script src="src/data/serviceWed26Sep.js"></script>-->
 <!--<script src="http://mbostock.github.com/d3/d3.v2.js"></script>-->
 <script src="src/js/ulti.js"></script>
 <script src="src/js/readData.js"></script>
diff --git a/ParallelCoordinates/src/js/main.js b/ParallelCoordinates/src/js/main.js
@@ -56,10 +56,26 @@ function Loadtostore() {
     checkConf('serviceListattr');
     checkConf('serviceListattrnest');
 }
+let processData = processData_old;
 
 //***********************
 Loadtostore();
 //***********************
+// START: loader spinner settings ****************************
+var opts = {
+    lines: 25, // The number of lines to draw
+    length: 15, // The length of each line
+    width: 5, // The line thickness
+    radius: 25, // The radius of the inner circle
+    color: '#f00', // #rgb or #rrggbb or array of colors
+    speed: 2, // Rounds per second
+    trail: 50, // Afterglow percentage
+    className: 'spinner', // The CSS class to assign to the spinner
+};
+var target = document.getElementById('loadingSpinner');
+var spinner;
+// END: loader spinner settings ****************************
+
 var undefinedValue = undefined;
 var undefinedColor = "#666";
 var colorscale = d3.scaleOrdinal(d3.schemeCategory10);
@@ -70,7 +86,7 @@ let legendw= 80;
 let legendh= 20;
 let barw = 300;
 let barScale = d3.scaleLinear();
-
+let db = 'nagios';
 const collator = new Intl.Collator(undefined, {numeric: true, sensitivity: 'base'});
 Array.prototype.naturalSort= function(_){
     if (arguments.length) {
@@ -125,7 +141,6 @@ $( document ).ready(function() {
                 }).on('change',function (d){
                     const pdata = d3.select(this.parentElement.parentElement).datum();
                     d.value = this.checked;
-                    console.log(pdata.arr)
                     if(this.checked) {
                         add_axis(pdata.arr, g);
                         d3.select(this.parentElement.parentElement).classed('disable', false);
@@ -221,8 +236,74 @@ $( document ).ready(function() {
     //         _.bind(dragged,chosenAxis.node(),chosenAxis.datum(),'table')();
     //     }));
     d3.select("#DarkTheme").on("click",switchTheme);
-    init();
+
+    // data
+    d3.select('#datacom').on("change", function () {
+        d3.select('.cover').classed('hidden', false);
+        spinner.spin(target);
+        const choice = this.value;
+        const choicetext = d3.select('#datacom').node().selectedOptions[0].text;
+        setTimeout(() => {
+            if (choice !== "nagios" && choice !== "influxdb")
+                d3.json("../HiperView/data/" + choice + ".json").then( function (data) {
+                    sampleS = data;
+                    if (choice.includes('influxdb')){
+                        // processResult = processResult_influxdb;
+                        db = "influxdb";
+                        realTimesetting(false,"influxdb");
+                    }else {
+                        // processResult = processResult_old;
+                        realTimesetting(false);
+                    }
+                    d3.select(".currentDate")
+                        .text("" + d3.timeParse("%d %b %Y")(choicetext).toDateString());
+                    resetRequest();
+                    d3.select('.cover').classed('hidden', true);
+                    spinner.stop();
+                });
+            else {
+                realTimesetting(true,choice);
+                db = choice;
+                requestService = eval('requestService'+choice);
+                processResult = eval('processResult_'+choice);
+                d3.select('.cover').classed('hidden', true);
+                spinner.stop();
+            }
+        },0);
+    });
+    spinner = new Spinner(opts).spin(target);
+
+
+    setTimeout(() => {
+        d3.json("../HiperView/data/" + d3.select('#datacom').node().value  + ".json").then(function (data) {
+            d3.select(".cover").select('h5').text('drawLegend...');
+            d3.select(".currentDate")
+                .text("" + d3.timeParse("%d %b %Y")(d3.select('#datacom').select('[selected="selected"]').text()).toDateString());
+            // drawLegend(initialService, arrThresholds, arrColor, dif);
+            sampleS = data;
+            init();
+            d3.select(".cover").select('h5').text('loading data...');
+            // addDatasetsOptions(); // Add these dataset to the select dropdown, at the end of this files
+            d3.select('.cover').classed('hidden',true);
+            spinner.stop();
+        });
+    },0);
+    // Spinner Stop ********************************************************************
+
+    // init();
 });
+
+function realTimesetting (option,db){
+    isRealtime = option;
+    // getDataWorker.postMessage({action:'isRealtime',value:option,db: db});
+    if (option){
+        processData = eval('processData_'+db);
+    }else{
+        processData = db?eval('processData_'+db):processData_old;
+    }
+    resetRequest();
+}
+
 function getBrush(d) {
     return d3.brushY(yscale[d])
         .extent([[-10, 0], [10, h]])
@@ -287,7 +368,6 @@ function dragend(d) {
         var extent = d3.brushSelection(this);
         if (extent)
             extent = extent.map(yscale[d].invert).sort((a,b)=>a-b);
-        console.log(extent)
     }
 
     // remove axis if dragged all the way left
@@ -444,6 +524,22 @@ function init() {
     brush();
 }
 
+function resetRequest() {
+    // Convert quantitative scales to floats
+    data = object2DataPrallel(readData());
+    d3.keys(data[0]).filter(function (k) {
+        return (((_.isDate(data[0][k])) && (yscale[k] = d3.scaleTime()
+            .domain(d3.extent(data, function (d) {
+                return d[k];
+            }))
+            .range([h, 0])) || (_.isNumber(data[0][k])) && (yscale[k] = d3.scaleLinear()
+            .domain(d3.extent(data, function (d) {
+                return +d[k];
+            }))
+            .range([h, 0]))));
+    });
+    brush();
+}
 function setColorsAndThresholds(s) {
     for (var i=0; i<serviceList.length;i++){
         if (s == serviceList[i]){
@@ -660,8 +756,6 @@ function highlight(d) {
         const val = d[selectedService];
         const gourpBeloing = orderLegend.find(dv=>val>=dv.minvalue && val<dv.value)||{text:undefined};
 
-        console.log(val);
-        console.log(gourpBeloing);
         d3.select("#colorContinuos").selectAll(".row").style("opacity", function(p) { return (gourpBeloing.text === p) ? null : "0.3" });
     }else {
         d3.select("#legend").selectAll(".row").style("opacity", function (p) {
@@ -696,7 +790,8 @@ function invert_axis(d) {
             // Get extents of brush along each active selection axis (the Y axes)
             extent = d3.brushSelection(this).map(yscale[d].invert);
         });
-    console.log(extent)
+
+
     if (yscale[d].inverted == true) {
         yscale[d].range([h, 0]);
         d3.selectAll('.label')
@@ -743,7 +838,6 @@ function path(d, ctx, color) {
         var x = xscale(p),
             y = yscale[p](d[p]);
         if (y===undefined) {
-            console.log(p)
             if (valid) {
                 ctx.stroke();
                 ctx.beginPath();
diff --git a/ParallelCoordinates/src/js/readData.js b/ParallelCoordinates/src/js/readData.js

Original file line number	Diff line number	Diff line change
`@@ -1674,7 +1674,7 @@ $( document ).ready(function() {`
`1674`	`1674`	`drawsummary(i);`
`1675`	`1675`	`}`
`1676`	`1676`	`break;`
`1677`		`- }`
	`1677`	`+ }ta`
`1678`	`1678`	`});`
`1679`	`1679`	`d3.select('#datacom').on("change", function () {`
`1680`	`1680`	`d3.select('.cover').classed('hidden', false);`