Sponsored Content
Top Forums Web Development Creating a Simple Linux Dashboard with Oracle Jet Post 303024978 by Neo on Monday 22nd of October 2018 06:33:32 AM
Old 10-22-2018
Creating a Simple Linux Dashboard with Oracle Jet - Part 2 the Oracle Jet JS Module Code


Here is the loadavg.js part of my simple Linux dashboard module, situated in the Oracle JET viewModels folder of my project:

Code:
/*
 * loadavg.js
 */
$(function() {
  //$(".neo-box").hide();
});
define([
  "ojs/ojcore",
  "knockout",
  "jquery",
  "text!data/data.json",
  "ojs/ojknockout",
  "ojs/ojvalidation-number",
  "ojs/ojgauge",
  "ojs/ojchart"
], function(oj, ko, $, file) {
  function UnixViewModel() {
    var self = this;
    var release = true;

   // the following code is an quick and easy way to play around with the $.getJSON timers:

    if (localStorage.getItem("loadTimer") !== null) {
      if (localStorage.getItem("loadTimer") < 1000)
        localStorage.setItem("loadTimer", "1000");
      loadTimer = localStorage.getItem("loadTimer");
    } else {
      if (release == false) {
        var loadTimer = 1000;
      } else {
        var loadTimer = 5000;
      }
      localStorage.setItem("loadTimer", loadTimer);
    }
    if (localStorage.getItem("wolTimer") !== null) {
      if (localStorage.getItem("wolTimer") < 1000)
        localStorage.setItem("wolTimer", "1000");
      wolTimer = localStorage.getItem("wolTimer");
    } else {
      if (release == false) {
        var wolTimer = 5000;
      } else {
        var wolTimer = 10000;
      }
      localStorage.setItem("wolTimer", wolTimer);
    }

    // TODO:  setup vars should be moved to a JSON config file 

    var serverForum = "https://www.yourserver.com/forumvars.php";
    var serverMain = "https://www.yourserver.com/ojetcallback.php";

    // in no particular order

    self.wolval = ko.observable(0);
    self.load1 = ko.observable(0);
    self.load5 = ko.observable(0);
    self.load15 = ko.observable(0);
    self.diskusage = ko.observable(0);
    self.cachedmem = ko.observable(0);
    self.all = ko.observable(0);
    self.apache2 = ko.observable(0);
    self.mysqld = ko.observable(0);
    self.rsync = ko.observable(0);
    self.apache2count = ko.observable(0);
    self.alltheprocs = ko.observable(0);
    self.activeprocs = ko.observable(0);
    self.mysqldump = ko.observable(0);
    self.gzip = ko.observable(0);
    self.find = ko.observable(0);
    self.lastpid = ko.observable(0);
    self.freemem = ko.observable(0);
    self.allprocs = ko.observable(0);

    self.customMetricLabel = ko.observable({
      rendered: "on",
      textType: "percent",
      style: { fontWeight: "bold", color: "black" }
    });

    self.lable1 = { text: "1min" };
    self.lable5 = { text: "5min" };
    self.lable15 = { text: "15min" };
    self.percent = { text: "percent" };
    self.kb = { text: "kB" };
    self.cpu = { text: "cpu" };
    self.processes = { text: "processes" };
    self.users = { text: "users" };
    self.diskname = { text: "/dev/md2" };
    self.customSvgStyle = { fill: "url(" + document.URL + "#pattern)" };

    // this code is used to get the specific number of online users from the forum
    // and is specific to our forum application (PHP code not provided for the serverForum
    // URL in the next few lines, but post back in this thread if you want me to post it.

    setInterval(function() {
      $.getJSON(serverForum, function(wol) {
        $.each(wol, function(wolkey, wolval) {
          self.wolval(parseFloat(wolval));
          if (parseFloat(wolval) < 400) {
            $("#wolval").attr({ color: "orange" });
          } else if (parseFloat(wolval) > 3000) {
            $("#wolval").attr({ color: "red" });
          } else {
            $("#wolval").attr({ color: "green" });
          }
        });
        // console.log(JSON.stringify(wol));
      });
    }, wolTimer);

    // here is the main part of the module that refreshes most of the indicators in the dash:

    setInterval(function() {
      $.getJSON(serverMain, function(json) {
        // console.log(JSON.stringify(json));

        $.each(json, function(key, val) {
          switch (key) {
            case "load0":
              self.load1(parseFloat(val));
              if (parseFloat(val) > 0.99) {
                $("#load1").attr({ color: "red" });
              } else {
                $("#load1").attr({ color: "green" });
              }
              break;
            case "load1":
              self.load5(parseFloat(val));
              if (parseFloat(val) > 0.75) {
                $("#load5").attr({ color: "red" });
              } else {
                $("#load5").attr({ color: "green" });
              }
              break;
            case "load2":
              self.load15(parseFloat(val));
              if (parseFloat(val) > 0.65) {
                $("#load15").attr({ color: "red" });
              } else {
                $("#load15").attr({ color: "green" });
              }
              break;
            case "load3":
              var vals = val.split("/");
              var active = Math.round(parseInt(vals[0]));
              var all = Math.round(parseInt(vals[1]));
              self.allprocs(val);
              self.activeprocs(active);
              self.alltheprocs(all);
              if (active > 6) {
                $("#activeprocs").attr({ color: "red" });
              } else {
                $("#activeprocs").attr({ color: "green" });
              }
              if (all > 400) {
                $("#alltheprocs").attr({ color: "red" });
              } else {
                $("#alltheprocs").attr({ color: "green" });
              }
              break;
            case "load4":
              self.lastpid(parseInt(val));
              break;
            case "apache2count":
              self.apache2count(parseInt(val));
              if (val > 100) {
                $("#apache2count").attr({ color: "red" });
              } else {
                $("#apache2count").attr({ color: "green" });
              }
              break;
            case "mysqldump":
              self.mysqldump(parseInt(val));
              if (val == 0) $("#mysqldump").attr({ color: "green" });
              else $("#mysqldump").attr({ color: "red" });
              break;
            case "gzip":
              self.gzip(parseInt(val));
              if (val == 0) $("#gzip").attr({ color: "green" });
              else $("#gzip").attr({ color: "red" });
              break;
            case "find":
              self.find(parseInt(val));
              if (val == 0) $("#find").attr({ color: "green" });
              else $("#find").attr({ color: "red" });
              break;
            case "md2":
              self.diskusage(parseInt(val));
              if (val > 60) {
                $("#diskusage").attr({ color: "red" });
                self.customMetricLabel = {
                  rendered: "on",
                  textType: "percent",
                  style: { fontWeight: "bold", color: "red" }
                };
              } else {
                $("#diskusage").attr({ color: "green" });
              }

              break;
            case "memfree":
              self.freemem(parseInt(val));
              if (parseInt(val) < 10000000) {
                $("#freemem").attr({ color: "red" });
              } else {
                $("#freemem").attr({ color: "green" });
              }
              break;
            case "cached":
              self.cachedmem(parseFloat(val));
              if (parseInt(val) > 50000000) {
                $("#cachedmem").attr({ color: "red" });
              } else {
                $("#cachedmem").attr({ color: "green" });
              }
              break;
            case "all":
              self.all(parseFloat(val));
              if (parseFloat(val) > 75) {
                $("#allcpus").attr({ color: "red" });
              } else {
                $("#allcpus").attr({ color: "green" });
              }
              break;
            case "apache2":
              self.apache2(parseInt(val));
              if (parseFloat(val) > 75) {
                $("#apache2").attr({ color: "red" });
              } else {
                $("#apache2").attr({ color: "green" });
              }
              break;
            case "mysqld":
              self.mysqld(parseFloat(val));
              if (parseFloat(val) > 75) {
                $("#mysqld").attr({ color: "red" });
              } else {
                $("#mysqld").attr({ color: "green" });
              }
              break;
            case "rsynccount":
              self.rsync(parseInt(val));
              if (val == 0) $("#rsync").attr({ color: "green" });
              else $("#rsync").attr({ color: "red" });
              break;
            default:
          }
          $(".neo-netdown").css({ color: "black" });
          // console.log("success items " + items.length + " " + val);
        });
      })

        //  self.datasource = ko.observableArray(items);
        .done(function() {
          //console.log("second success");
        })
        .fail(function() {

         // this code simply turns the indicators all red when the network is down or there is some
         // other connectivity or server issue which caused the call to the server to fail:

          var netFail = true;
          $(".neo-netdown").css({ color: "red" });
          $(
            "#load1,#load5,#load15, #activeprocs, #alltheprocs, #lastpid, #wolval,#allcpus, #apache2,#mysqld, #apache2count, #rsync, #diskusage, #cachedmem, #freemem"
          ).attr({
            color: "red"
          });
          console.log("error");
        })
        .always(function() {
          //console.log("complete");
        });
    }, loadTimer);

    // Below are a set of the ViewModel methods invoked by the oj-module component.
    // Please reference the oj-module jsDoc for additional information.

    /**
     * Optional ViewModel method invoked after the View is inserted into the
     * document DOM.  The application can put logic that requires the DOM being
     * attached here.
     * This method might be called multiple times - after the View is created
     * and inserted into the DOM and after the View is reconnected
     * after being disconnected.
     */
    self.connected = function() {
      // Implement if needed
    };

    /**
     * Optional ViewModel method invoked after the View is disconnected from the DOM.
     */
    self.disconnected = function() {
      //console.log(" self.disconnected = function()");
      // Implement if needed
    };

    /**
     * Optional ViewModel method invoked after transition to the new View is complete.
     * That includes any possible animation between the old and the new View.
     */
    self.transitionCompleted = function() {
      // Implement if needed
    };
  }

  /*
       * Returns a constructor for the ViewModel so that the ViewModel is constructed
       * each time the view is displayed.  Return an instance of the ViewModel if
       * only one instance of the ViewModel is needed.
       */

  return new UnixViewModel();
});

 

4 More Discussions You Might Find Interesting

1. What is on Your Mind?

Excellent Oracle JET Video - "Finally, JavaScript Is Easy!"

This is a video well worth watching if you have any interests at all in the future of web development, web development frameworks and Javascript. https://www.youtube.com/watch?v=V8mhIEeTMCc . Fixed typo in Oracle Jet URL (oraclejet.org) (0 Replies)
Discussion started by: Neo
0 Replies

2. Web Development

Oracle Jet - LP: 10. Lesson 1: Oracle JET 4.x - Lesson 1 - Part 4: Data Binding

Working on LP: 10. Lesson 1: Oracle JET 4.x - Lesson 1 - Part 4: Data Binding in this Oracle JET online course - Soar higher with Oracle JavaScript Extension Toolkit (JET), I have created this code for incidents.js I cannot get the load average data in this Oracle JET test to update the... (4 Replies)
Discussion started by: Neo
4 Replies

3. Web Development

Oracle JET 4.x - Lesson 1 - Part 9: Oracle JET Cookbook (Gauges and Ints)

Working on: 10. Lesson 1: Oracle JET 4.x - Lesson 1 - Part 9: Oracle JET Cookbook (which I highly recommend) and using the server loadavg code I wrote and have been adding gauges. All is great so far, and I'm loving JET, but have ran into an issue. Here is the loadavg.js code: /** ... (1 Reply)
Discussion started by: Neo
1 Replies

4. Web Development

A Quick Web Developers Review of Oracle JET

Oracle JET is marketed as a kind of "anti-framework" approach to web development but from my experience Oracle JET is just another type of framework. So, I would describe JET as "a meta-framework" because JET is a framework that is built to import and use other frameworks and Javascript... (4 Replies)
Discussion started by: Neo
4 Replies
All times are GMT -4. The time now is 09:35 AM.
Unix & Linux Forums Content Copyright 1993-2022. All Rights Reserved.
Privacy Policy