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

Tags
components, gauges, javascript, knockout.js, oracle, oracle jet, parseint(), web programming

 
Thread Tools Search this Thread
# 1  
Old 10-18-2018
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  
Old 10-18-2018
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

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

More UNIX and Linux Forum Topics You Might Find Helpful
A Quick Web Developers Review of Oracle JET Neo Web Programming 4 11-02-2018 12:22 PM
Creating a Simple Linux Dashboard with Oracle Jet Neo Web Programming 6 10-22-2018 07:49 AM
Oracle Jet - LP: 10. Lesson 1: Oracle JET 4.x - Lesson 1 - Part 4: Data Binding Neo Web Programming 4 10-17-2018 07:22 AM
Excellent Oracle JET Video - "Finally, JavaScript Is Easy!" Neo What is on Your Mind? 0 10-15-2018 12:27 AM
JET and non-global Zone beta17 Solaris 0 07-22-2011 07:03 AM
Jet/Jumpstart installation freezing masloff Solaris 4 11-18-2009 11:54 AM
Solaris 9 JET Build problem. SemperFi Solaris 2 01-26-2005 08:43 AM