Sponsored Content
Top Forums Web Development Oracle JET 4.x - Lesson 1 - Part 9: Oracle JET Cookbook (Gauges and Ints) Post 303024849 by Neo on Thursday 18th of October 2018 02:56:34 AM
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
 

6 More Discussions You Might Find Interesting

1. Solaris

Jet/Jumpstart installation freezing

Hi guys, I have a problem with installing new Solaris servers via jet/jumpstart (tried both). I`ve configured server, created profile for a client, issued {1} boot net -v install and went to get some cofee... After I came back, client was able to load system from server, get IP and,... (4 Replies)
Discussion started by: masloff
4 Replies

2. Solaris

JET and non-global Zone

Hi guys, I would like to install a Jet-Server into a non-global zone and i'm running in the nfs problem (there is no nfs-server implementation for non-global zones) has anyone done this already? or have a workaround? thx ---------- Post updated at 05:03 AM ---------- Previous update... (0 Replies)
Discussion started by: beta17
0 Replies

3. 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

4. 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

5. 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

6. Web Development

Creating a Simple Linux Dashboard with Oracle Jet

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. ... (7 Replies)
Discussion started by: Neo
7 Replies
All times are GMT -4. The time now is 04:43 PM.
Unix & Linux Forums Content Copyright 1993-2022. All Rights Reserved.
Privacy Policy