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


Login or Register to Reply

 
Thread Tools Search this Thread
# 1  
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:

Code:
/**
 * @license
 * Copyright (c) 2014, 2018, Oracle and/or its affiliates.
 * The Universal Permissive License (UPL), Version 1.0
 */
/*
 * Your incidents ViewModel code goes here
 */
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;
    self.load1 = ko.observable(0);
    self.load5 = ko.observable(0);
    self.load15 = ko.observable(0);
    self.lable1 = { text: "1min" };
    self.lable5 = { text: "5min" };
    self.lable15 = { text: "15min" };
    self.allprocs = ko.observable(0);
    self.alltheprocs = ko.observable(0);
    self.activeprocs = ko.observable(0);
    self.lastpid = ko.observable(0);
    self.customSvgStyle = { fill: "url(" + document.URL + "#pattern)" };
    self.val = ko.observable("pie");
    self.select = ko.observable("bar");
    setInterval(function() {
      var query = { loadavg: "1" };

      $.getJSON("https://www.unix.com/ojet.php", query, function(json) {
        // console.log(JSON.stringify(json));
        var n = 0;
        $.each(json, function(key, val) {
          n++;
          switch (n) {
            case 1:
              self.load1(parseFloat(val));
              break;
            case 2:
              self.load5(parseFloat(val));
              break;
            case 3:
              self.load15(parseFloat(val));
              break;
            case 4:
              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);
              break;
            case 5:
              self.lastpid(parseInt(val));
              break;
            default:
          }
          // console.log("success items " + items.length + " " + val);
        });
      })

        //  self.datasource = ko.observableArray(items);
        .done(function() {
          //console.log("second success");
        })
        .fail(function() {
          console.log("error");
        })
        .always(function() {
          //console.log("complete");
        });
    }, 1000);
    var data = JSON.parse(file);
    self.datasource = ko.observableArray(data);
    // 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();
});

Here is the HTML loadavg.html

Code:
<!--
 Copyright (c) 2014, 2018, Oracle and/or its affiliates.
 The Universal Permissive License (UPL), Version 1.0
 -->
<style>
    .circular-status-meter-common {
        text-align: center;
        margin-top: 5px;
        margin-bottom: 5px;
        width: 45%;
    }

    .circular-status-meter-large {
        height: 100px;
    }

    .circular-status-meter-small {
        height: 50px;
    }
</style>
<div class="oj-hybrid-padding" style="width:500px;background-color:rgb(234, 255, 235);margin:20px 0px 50px 110px;border-style:solid; border-width:1px;border-color:rgb(147, 226, 160);">
    <h2>UNIX.COM Load Averages</h2>
    <div><span>Load 1: </span><span data-bind="text: load1" style="float:right"></span></div>
    <div><span>Load 5: </span><span data-bind="text: load5" style="float:right"></span></div>
    <div><span>Load 15: </span><span data-bind="text: load15" style="float:right"></span></div>
    <div><span>Active/All Processes: </span><span data-bind="text: allprocs" style="float:right"></span></div>
    <div><span>Active Processes: </span><span data-bind="text: activeprocs" style="float:right"></span></div>
    <div><span>All Processes: </span><span data-bind="text: alltheprocs" style="float:right"></span></div>
    <div><span>Last PID: </span><span data-bind="text: lastpid" style="float:right"></span></div>
</div>

<div>
    <div style="display:inline-block">
        <oj-status-meter-gauge id="rogauge" step="1" label="[[lable1]]" min="0" max="2" value="{{load1}}" orientation="circular"
            readonly class="circular-status-meter-common circular-status-meter-large">
        </oj-status-meter-gauge>
        <h5 class="circular-status-meter-common">UNIX.COM Load Avg 1m</h5>
    </div>
    <div style="display:inline-block">
        <oj-status-meter-gauge id="rogauge" step="1" label="[[lable5]]" min="0" max="2" value="{{load5}}" orientation="circular"
            readonly class="circular-status-meter-common circular-status-meter-large">
        </oj-status-meter-gauge>
        <h5 class="circular-status-meter-common">UNIX.COM Load Avg 5m</h5>
    </div>
    <div style="display:inline-block">
        <oj-status-meter-gauge id="rogauge" step="1" label="[[lable15]]" min="0" max="2" value="{{load15}}" orientation="circular"
            readonly class="circular-status-meter-common circular-status-meter-large">
        </oj-status-meter-gauge>
        <h5 class="circular-status-meter-common">UNIX.COM Load Avg 15m</h5>
    </div>

</div>
<div>
    <div style="display:inline-block">
        <oj-status-meter-gauge id="gauge3" min="0" max="5" value="[[activeprocs]]" orientation="circular" readonly
            class="circular-status-meter-common circular-status-meter-large">
        </oj-status-meter-gauge>
        <h5 class="circular-status-meter-common">UNIX.COM Active Processes</h5>
    </div>
    <div style="display:inline-block">
        <oj-status-meter-gauge id="rogauge" min="0" max="1000" value="{{alltheprocs}}" orientation="circular" readonly
            class="circular-status-meter-common circular-status-meter-large">
        </oj-status-meter-gauge>
        <h5 class="circular-status-meter-common">UNIX.COM All Processes</h5>
    </div>
    <div style="display:inline-block">
        <oj-status-meter-gauge id="rogauge" min="0" max="100000" value="{{lastpid}}" orientation="circular" readonly
            class="circular-status-meter-common circular-status-meter-large">
        </oj-status-meter-gauge>
        <h5 class="circular-status-meter-common">UNIX.COM Last PID</h5>
    </div>

</div>

Seems no matter how I use Javascript to try to parse the strings or floats to ints, the bottom three gauges self-format to floats (somehow), etc.

Any clues or help:

Ref: LP: 10. Lesson 1: Oracle JET 4.x - Lesson 1 - ... | Oracle Community
# 2  
Still cannot get the Oracle JET number values to render as integers (the ones I want to render as ints like number of active processes, etc), but I did manage to write some more server-side PHP/JSON to get the total number of users online in my little Oracle JET homework project. Plus was easily able to write some JS to add color indicators (orange, green, red, etc). So far, having a lot of fun learning Oracle JET:

Image
Login or Register to Reply

|
Thread Tools Search this Thread
Search this Thread:
Advanced Search

More UNIX and Linux Forum Topics You Might Find Helpful
Creating a Simple Linux Dashboard with Oracle Jet
Neo
Creating a Simple Linux Dashboard with Oracle Jet - Part 1 the Server Side PHP Code Creating a simple Linux dashboard with Oracle Jet is easy and fun. It's simple to create a dashboard to monitor your Linux server using Oracle JET. The sky is the limit with indicators and gauges. ...... Web Development
7
Web Development
A Quick Web Developers Review of Oracle JET
Neo
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...... Web Development
4
Web Development
Oracle Jet - LP: 10. Lesson 1: Oracle JET 4.x - Lesson 1 - Part 4: Data Binding
Neo
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...... Web Development
4
Web Development