job.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Jobinfo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/vue-nav-tabs@0.5.7/themes/vue-tabs.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bulma@0.7.5/css/bulma.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/datatables-bulma@1.0.1/css/dataTables.bulma.min.css"
    />

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-nav-tabs@0.5.7/dist/vue-tabs.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.16.2/dist/axios.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-axios@2.1.4/dist/vue-axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment-duration-format@2.3.2/lib/moment-duration-format.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/datatables-bulma@1.0.1/js/dataTables.bulma.min.js"></script>
    <script src="https://cdn.datatables.net/plug-ins/1.10.16/sorting/any-number.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mousetrap@1.6.3/mousetrap.min.js"></script>
    <script src="./utils.js"></script>
  </head>
  <body>
    <nav class="navbar is-transparent">
      <div class="navbar-brand">
        <p class="navbar-item">
          <strong class="is-size-3">SLURM web interface</strong>
        </p>
        <a class="navbar-item" href="./squeue.html">SQUEUE</a>
        <a class="navbar-item" href="./nodeinfo.html">NODEINFO</a>
      </div>
    </nav>
    <div id="app">
      <table class="table">
        <tr valign="top">
          <td v-for="l in jobinfoitems">
            <table class="table is-narrow">
              <tr v-for="j in l" v-if="job[j]">
                <td style="text-align:right">{{ j }}</td>
                <td>=</td>
                <td style="text-align:left; white-space:nowrap;">
                  {{ job[j] }}
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>

      <p v-if="job.NodeList">Nodelist: {{ job.NodeList }}</p>
      <p v-else-if="job.Nodes">Nodelist: {{ job.Nodes }}</p>

      <hr />

      <vue-tabs @tab-change="handleTabChange" type="tabs">
        <v-tab title="Nodeinfo">
          <table v-if="job.nodeinfo" class="table">
            <thead>
              <td v-for="h in nodeinfoitems">
                {{ h }}
              </td>
            </thead>
            <tr v-for="node in job.nodeinfo">
              <td
                v-for="i in nodeinfoitems"
                style="text-align:left; white-space:nowrap;"
              >
                {{ node[i] }}
              </td>
            </tr>
          </table>

          <template v-else="">
            <p>No nodeinfo available</p>
          </template>
        </v-tab>

        <v-tab title="Job details">
          <table>
            <tr v-for="v,k in job" v-if="(k !== 'nodeinfo' && k !== 'procs')">
              <td style="text-align:right">{{ k }}</td>
              <td>=</td>
              <td style="text-align:left;">
                {{ v }}
              </td>
            </tr>
          </table>
        </v-tab>

        <v-tab title="Processes">
          <p v-if="!job.GANGLIA">Process info not available</p>
          <p v-else-if="job.JobState === 'PENDING' || job.State">
            No processes to show for job in
            {{ job.JobState || job.State }} state.
          </p>
          <p v-else-if="!job.procs">
            Fetching ganglia job graphs...
          </p>
          <div v-else="">
            <input type="checkbox" v-model="fullprocinfo" /> Show all procs
            <input type="checkbox" v-model="showsysprocs" /> Show system procs
            <div v-show="fullprocinfo">
              <h2>Detailed process info</h2>
              <table id="processtable">
                <thead>
                  <th
                    v-for="h in ['NODE','USER', '%CPU', '%MEM', 'TIME', 'ELAPSED', 'VSZ', 'RSS', 'COMMAND']"
                  >
                    {{ h }}
                  </th>
                </thead>
                <tbody></tbody>
              </table>
            </div>
            <div v-show="!fullprocinfo">
              <h2>Average proc utilization and resources</h2>
              <table id="aggregatedprocesstable">
                <thead>
                  <th
                    v-for="h in ['Count','USER', '%CPU', '%MEM', 'TIME', 'ELAPSED', 'VSZ', 'RSS', 'COMMAND']"
                  >
                    {{ h }}
                  </th>
                </thead>
                <tbody></tbody>
              </table>
            </div>
          </div>
        </v-tab>

        <v-tab title="Load graphs">
          <p v-if="!job.GANGLIA">Load graphs not available</p>
          <p v-else-if="job.JobState === 'PENDING'">
            No load graphs to show yet (pending job)
          </p>
          <div v-else="">
            <div  v-if="showloadgraphs">
              <!-- Remark: due to hyperthreading the load and cpu graphs shows
              misleading stats. Full load is 32 in load_report and full cpu
              utilization in cpu_report is 50% (we're working on it...)   -->
              <table>
                <thead>
                  <tr>
                    <td v-for="h in loadgraphs">
                      {{ h }}
                    </td>
                  </tr>
                </thead>
                <tr v-for="node in job.expanded_nodelist">
                  <td
                    v-for="graphname in loadgraphs"
                    v-html="graph( graphname, node, job.Start || job.StartTime, job.End || job.EndTime )"
                  ></td>
                </tr>
              </table>
            </div>
            <p v-else="">Ganglia load graphs here</p>
          </div>
        </v-tab>
      </vue-tabs>
      <footer class="footer">
        <div class="containar">
          <div class="content has-text-centered">
            Credits: Developed by
            <a href="mailto:roy.dragseth@uit.no">Roy Dragseth</a> using
            <a href="https://bottlepy.org">Bottle</a> for the server side and
            <a href="https://vuejs.org">Vue</a>,
            <a href="https://datatables.net/">Datatables</a>
            and <a href="https://craig.is/killing/mice/">Mousetrap</a> for the
            client side.<br />
            Source and docs:
            <a href="https://github.com/dragz/slurmbrowser/">On GitHub.</a>
          </div>
        </div>
      </footer>
    </div>
    <script>
      var router = new VueRouter({
        mode: "history",
        routes: []
      });

      new Vue({
        router,
        el: "#app",
        data: {
          job: {},
          jobinfoitems: [
            [
              "JobId",
              "JobID", //inconsistent naming in slurm, its one or the other
              "ArrayJobId",
              "ArrayTaskId",
              "JobName",
              "UserId",
              "User", //same
              "Account",
              "QOS",
              "Partition",
              "Shared"
            ],
            [
              "JobState",
              "State",
              "NumCPUs",
              "NCPUS",
              "NumNodes",
              "NNodes",
              "MinMemoryCPU"
            ],
            [
              "SubmitTime",
              "Submit",
              "StartTime",
              "Start",
              "EndTime",
              "End",
              "TimeLimit",
              "RunTime",
              "Elapsed"
            ]
          ],
          nodeinfoitems: [
            "NodeName",
            "CPUTot",
            "CPULoad",
            "AllocMem",
            "FreeMem",
            "State",
            "Reason"
          ],
          loadgraphs: [
            "phys_load_report",
            "phys_cpu_report",
            "mem_report",
            "infiniband_report",
            "infinibandpkt_report",
            // "lustre_report",
            "packet_report",
            "network_report"
          ],
          showloadgraphs: false,
          processDataTable: null,
          aggregatedProcessDataTable: null,
          fullprocinfo: false,
          showsysprocs: true // is toggled when table is filled with data to trigger the watcher
        },
        mounted() {
          console.log("I am mounted!");
          // get hold of the jobid from the url variable
          var jobid = this.$route.query.jobid;
          console.log("My jobid is", jobid);
          //this.processDataTable = $('#processtable').DataTable({});
          axios
            .get("../data/job/" + jobid)
            .then(response => (this.job = response.data))
            .finally(() => this.fillProcessTable());
        },
        methods: {
          handleTabChange(tabIndex, newTab, oldTab) {
            if (tabIndex == 1) {
              // Processes
            } else if (tabIndex == 3) {
              // Load graphs
              this.showloadgraphs = true;
            } else {
            }
          },
          graph(name, node, start, end) {
            const base_graph_url =
              "<IMG SRC='../graph/?name=GRAPH_NAME&hostname=HOSTNAME&start=STARTTIME&end=ENDTIME'>";
            const stime = new Date(start).getTime() / 1000;
            const etime = Math.floor(
              Math.min(
                new Date(end).getTime() / 1000,
                new Date().getTime() / 1000
              )
            );

            return base_graph_url
              .replace("GRAPH_NAME", name)
              .replace("HOSTNAME", node)
              .replace("STARTTIME", stime)
              .replace("ENDTIME", etime);
          },
          fillProcessTable() {
            const procs = this.job.procs;
            const procinfo = [];
            const psheaders = [];
            for (const i in procs) {
              const hostname = procs[i][0];
              const nodeps = procs[i][1];
              for (const j in nodeps) {
                const psinfo = nodeps[j]["val"];
                psinfo["hostname"] = hostname;
                procinfo.push(psinfo);
              }
            }
            // averages based on username and commandname
            var avg_procstats = {};
            for (var i in procinfo) {
              var ps = procinfo[i];
              var usercmd = ps["USER"] + ps["COMMAND"];
              if (!(usercmd in avg_procstats)) {
                avg_procstats[usercmd] = {
                  count: 0,
                  USER: ps["USER"],
                  COMMAND: ps["COMMAND"],
                  "%CPU": 0.0,
                  "%MEM": 0.0,
                  VSZ: 0.0,
                  RSS: 0.0,
                  TIME: 0,
                  ELAPSED: 0
                };
              }
              avg_procstats[usercmd]["count"] += 1;
              avg_procstats[usercmd]["%CPU"] += ps["%CPU"] * 1.0;
              avg_procstats[usercmd]["%MEM"] += ps["%MEM"] * 1.0;
              avg_procstats[usercmd]["VSZ"] += ps["VSZ"] * 1.0;
              avg_procstats[usercmd]["RSS"] += ps["RSS"] * 1.0;
              avg_procstats[usercmd]["TIME"] += timespec_to_seconds(ps["TIME"]);
              avg_procstats[usercmd]["ELAPSED"] += timespec_to_seconds(
                ps["ELAPSED"]
              );
            }

            for (var i in avg_procstats) {
              var count = avg_procstats[i]["count"];
              avg_procstats[i]["%CPU"] = (
                avg_procstats[i]["%CPU"] / count
              ).toFixed(2);
              avg_procstats[i]["%MEM"] = (
                avg_procstats[i]["%MEM"] / count
              ).toFixed(2);
              avg_procstats[i]["VSZ"] = (
                avg_procstats[i]["VSZ"] /
                (count * 1024)
              ).toFixed(2);
              avg_procstats[i]["RSS"] = (
                avg_procstats[i]["RSS"] /
                (count * 1024)
              ).toFixed(2);
              avg_procstats[i]["TIME"] = moment
                .duration(avg_procstats[i]["TIME"] / count, "seconds")
                .format("d-hh:mm:ss");
              avg_procstats[i]["ELAPSED"] = moment
                .duration(avg_procstats[i]["ELAPSED"] / count, "seconds")
                .format("d-hh:mm:ss");
            }

            this.processDataTable = $("#processtable").DataTable({
              processing: true,
              data: procinfo,
              columns: [
                { title: "Node", data: "hostname" },
                { title: "User", data: "USER" },
                { title: "%CPU", data: "%CPU" },
                { title: "%mem", data: "%MEM" },
                { title: "VM", data: "VSZ" },
                { title: "RSS", data: "RSS" },
                { title: "TIME", data: "TIME" },
                { title: "ELAPSED", data: "ELAPSED" },
                { title: "Command", data: "COMMAND" }
              ],
              columnDefs: [
                { type: "mem-size", targets: [3, 4, 5] },
                { type: "any-number", targets: [] },
                { type: "timespec", targets: [6, 7] }
              ],
              order: [[2, "desc"]] // sort by %cpu
            });
            this.aggregatedProcessDataTable = $(
              "#aggregatedprocesstable"
            ).DataTable({
              processing: true,
              data: _.values(avg_procstats),
              columns: [
                { title: "Count", data: "count" },
                { title: "User", data: "USER" },
                { title: "%CPU", data: "%CPU" },
                { title: "%mem", data: "%MEM" },
                { title: "VM(MB)", data: "VSZ" },
                { title: "RSS(MB)", data: "RSS" },
                { title: "TIME", data: "TIME" },
                { title: "ELAPSED", data: "ELAPSED" },
                { title: "Command", data: "COMMAND" }
              ],
              columnDefs: [
                {
                  className: "dt-body-right",
                  targets: [0, 1, 2, 3, 4, 5, 6, 7]
                },
                { type: "any-number", targets: [2, 3, 4, 5] },
                { type: "mem-size", targets: [] },
                { type: "timespec", targets: [6, 7] }
              ],
              order: [[2, "desc"]] // sort by %cpu
            });
            this.showsysprocs = false;
          }
        },
        watch: {
          showsysprocs() {
            let sysusers = "^(?!root)(?!ganglia).*"; //regexp101.com to the rescue
            if (this.showsysprocs) {
              sysusers = ".";
            }
            this.processDataTable
              .column(1)
              .search(sysusers, true, false, false)
              .draw();
            this.aggregatedProcessDataTable
              .column(1)
              .search(sysusers, true, false, false)
              .draw();
            console.log("filter sysproc");
          }
        }
      });

      // DataTables sort functions
      function timespec_to_seconds(data) {
        var days = 0,
          hours = 0,
          minutes = 0,
          seconds = 0;
        var s;
        if (data.includes("-")) {
          days = data.split("-")[0];
          s = data.split("-")[1];
        } else {
          s = data;
        }
        return (
          days * 24 * 3600 +
          s.split(":").reduce((acc, time) => 60 * acc + +time)
        );
      }
      $.fn.dataTable.ext.type.order["timespec-pre"] = function(d) {
        return timespec_to_seconds(d);
      };

      $.fn.dataTable.ext.type.order["mem-size-pre"] = function(data) {
        if (!data.hasOwnProperty("match")) {
          //probably a number then
          return data;
        }
        var matches = data.match(/^(\d+(?:\.\d+)?)([a-z]+)/i);
        var multipliers = {
          b: 1,
          bytes: 1,
          kb: 1000,
          kib: 1024,
          k: 1024,
          mb: 1000000,
          mib: 1048576,
          m: 1048576,
          gb: 1000000000,
          gib: 1073741824,
          g: 1073741824,
          tb: 1000000000000,
          tib: 1099511627776,
          t: 1099511627776,
          pb: 1000000000000000,
          pib: 1125899906842624,
          p: 1125899906842624
        };

        if (matches) {
          var multiplier = multipliers[matches[2].toLowerCase()];
          return parseFloat(matches[1]) * multiplier;
        } else {
          return -1;
        }
      };
    </script>
  </body>
</html>