cpee-model-management 1.0.17 → 1.1.1

data/ui/js/stats.js

@@ -0,0 +1,227 @@
+var value_count = 100
+
+function resource_update(ename) {
+  var iname = ename.replace(/[^a-z0-9A-Z]/g,'-').replace(/-$/,'')
+  $.get('server/dash/stats/',{ engine: ename },function(data){
+    $('#resource_utilization_text_' + iname + ' .total_created').text(data.total_created)
+    $('#resource_utilization_text_' + iname + ' .total_finished').text(data.total_finished)
+    $('#resource_utilization_text_' + iname + ' .total_abandoned').text(data.total_abandoned)
+    $('#resource_utilization_text_' + iname + ' .current_ready').text(data.ready)
+    $('#resource_utilization_text_' + iname + ' .current_running').text(data.running)
+    $('#resource_utilization_text_' + iname + ' .current_stopped').text(data.stopped)
+  });
+}
+
+function resource_add(ename) {
+  let inode = document.importNode($("#stats_engine")[0].content,true);
+  var iname = ename.replace(/[^a-z0-9A-Z]/g,'-').replace(/-$/,'')
+  $('.stats_title',inode).text($('.stats_title',inode).text() + ename)
+  $('.stats_plot',inode).attr('id','resource_utilization_plot_'+iname)
+  $('.stats_text',inode).attr('id','resource_utilization_text_'+iname)
+
+  $('#resources').append(inode)
+
+  resource_update(ename);
+
+  var trace1 = {
+    y: Array(value_count).fill(0),
+    type: 'scatter',
+    name: '% CPU'
+  };
+
+  var trace2 = {
+    y: Array(value_count).fill(0),
+    type: 'scatter',
+    name: '% Mem Used'
+  };
+
+  var layout = {
+    margin: {t:0,r:0,b:0,l:20},
+    height: 200,
+    width: 700,
+    yaxis: {
+      range: [-5, 105]
+    },
+    xaxis: {
+      showticklabels: false,
+      fixedrange: true
+    }
+  };
+
+  var data = [trace1, trace2];
+
+  Plotly.newPlot('resource_utilization_plot_' + iname, data, layout, {displayModeBar: false});
+}
+
+function instance_change(d) {
+  const ename = d.engine
+  const iname = d.engine.replace(/[^a-z0-9A-Z]/g,'-').replace(/-$/,'')
+
+  if (d.state == "ready") {
+    if ($('[data-id=' + d.uuid + ']').length > 0) {
+      if ($('[data-id=' + d.uuid + ']').attr('data-parent') != parent) {
+        $('[data-id=' + d.uuid + ']').remove()
+        instance_add(iname,d.uuid,d.url,d.name,d.state,d.author,0,0,d.parent)
+      } else {
+        instance_upd(d.uuid,d.name,d.state,d.author,0,0,d.parent)
+      }
+    } else {
+      instance_add(iname,d.uuid,d.url,d.name,d.state,d.author,0,0,d.parent)
+    }
+  } else if (d.state == 'abandoned' || d.state == 'finished') {
+    if ($('tr.sub[data-id=' + d.uuid + '] > td > table > tr').length > 0) {
+      $('tr.text[data-id=' + d.uuid + ']').replaceWith($('tr.sub[data-id=' + d.uuid + '] > td > table > tr'))
+    }
+    $('[data-id=' + d.uuid + ']').remove()
+    instances_striping(iname)
+  } else {
+    if ($('tr.sub[data-id=' + d.uuid + ']').attr('data-parent') != d.parent) {
+      $('[data-id=' + d.uuid + ']').remove()
+      instance_add(iname,d.uuid,d.url,d.name,d.state,d.author,0,0,d.parent)
+    } else {
+      instance_upd(d.uuid,d.name,d.state,d.author,0,0,d.parent)
+    }
+  }
+}
+
+function instance_upd(uuid,name,state,author,cpu,mem,parent) {
+  if (name != "") {
+    $('[data-id=' + uuid + '] > .name a').text(name)
+    $('[data-id=' + uuid + '] > .name a').attr('title',name)
+  }
+  $('[data-id=' + uuid + '] > .state span.value').text(state)
+  $('[data-id=' + uuid + '] > .state').attr('data-state',state)
+  if (author != "") {
+    $('[data-id=' + uuid + '] > .author').text(author)
+  }
+  instance_res(uuid,cpu,mem)
+}
+function instance_res(uuid,cpu,mem) {
+  $('[data-id=' + uuid + '] > .cpu').text($.sprintf('%05.2f',cpu))
+  $('[data-id=' + uuid + '] > .mem').text($.sprintf('%05.2f',mem))
+}
+function instance_add(iname,uuid,url,name,state,author,cpu,mem,parent) {
+  let inode = document.importNode($("#stats_instance")[0].content,true);
+  $('.sub',inode).attr('id',uuid)
+  $('.sub',inode).attr('data-id',uuid)
+  $('.sub',inode).attr('data-parent',parent)
+  $('.text',inode).attr('data-id',uuid)
+  $('.text',inode).attr('data-url',url)
+  $('.name a',inode).attr('href','server/dash/show?url=' + url)
+  $('.num span',inode).text(url.split(/[\\/]/).pop())
+  if (name != "") {
+    $('.name a',inode).text(name)
+    $('.name a',inode).attr('title',name)
+  }
+  $('.state span.value',inode).text(state)
+  $('.state',inode).attr('data-state',state)
+  if (author != "") {
+    $('.author',inode).text(author)
+  }
+  $('.cpu',inode).text($.sprintf('%05.2f',cpu))
+  $('.mem',inode).text($.sprintf('%05.2f',mem))
+  if (parent == "") {
+    $('#instances_' + iname).append(inode)
+  } else {
+    $('#' + parent + ' > td > table').append(inode)
+  }
+  instances_striping(iname)
+}
+
+function instances_striping(iname) {
+  let even = true
+  $('#instances_' + iname + ' tr.text').removeClass('even')
+  $('#instances_' + iname + ' tr.text').each((i,e)=>{
+    if (even) {
+      $(e).addClass('even')
+    }
+    even = (even == true ? false : true)
+  })
+}
+
+function timer(ms) { return new Promise(res => setTimeout(res, ms)); }
+
+function instances_init(ename) {
+  const iname = ename.replace(/[^a-z0-9A-Z]/g,'-').replace(/-$/,'')
+  let inode = document.importNode($("#stats_instances")[0].content,true);
+  $('.stats_title',inode).text($('.stats_title',inode).text() + ename)
+  $('table',inode).attr('id','instances_'+iname)
+  $('#instances').append(inode)
+  $.ajax({
+    type: "GET",
+    url: 'server/dash/instances',
+    data: { engine: ename },
+    success: (result) => {
+      $('instance',result).each(async (i,ele)=>{
+        const e = $(ele);
+        setTimeout(()=>{instance_add(iname,e.attr('uuid'),e.attr('url'),e.attr('name'),e.attr('state'),e.attr('author'),e.attr('cpu'),e.attr('mem'),e.attr('parent'))},0)
+      })
+    }
+  })
+}
+
+function resource_paint(iname,data,count) {
+  count[iname]++
+  Plotly.extendTraces('resource_utilization_plot_' + iname, {y: [[data.cpu_usage], [(data.mem_total-data.mem_available)/data.mem_total * 100]]}, [0,1])
+  Plotly.relayout('resource_utilization_plot_' + iname, {
+    xaxis: {
+      range: [count[iname]-value_count,count[iname]],
+      showticklabels: false,
+      fixedrange: true
+    }
+  });
+}
+
+function stats_init() {
+  let es = new EventSource('server/dash/events/');
+  let count = {};
+  es.onopen = function() {
+    console.log('stats open');
+  };
+  es.onmessage = function(e) {
+    let data = JSON.parse(e.data)
+    const iname = data.engine.replace(/[^a-z0-9A-Z]/g,'-').replace(/-$/,'')
+    if ($('#instances').length > 0) {
+      if ($('#instances_' + iname).length == 0) {
+        instances_init(data.engine);
+      }
+    }
+    if (data.topic == "node" && data.event == "resource_utilization") {
+      if ($('#resources').length > 0) {
+        if ($('#resource_utilization_plot_' + iname).length == 0) {
+          resource_add(data.engine);
+          count[iname] = value_count;
+        }
+        resource_paint(iname,data,count)
+      }
+    } else if (data.topic == "state" && data.event == "change") {
+      if ($('#resources').length > 0) {
+        resource_update(data.engine)
+      }
+      if ($('#instances').length > 0) {
+        instance_change(data)
+      }
+    } else if (data.topic == "status" && data.event == "resource_utilization") {
+      if ($('#instances').length > 0) {
+        instance_res(data.uuid,data.cpu,data.mem)
+      }
+    } else {
+      console.log(data);
+    }
+  };
+  es.onerror = function() {
+    console.log('stats error');
+  }
+}
+
+$(document).ready(function() {
+  stats_init();
+  $('#instances').on('click','.abandon',function(e){
+    const par = $(e.target).parents('[data-url]').first()
+    $.ajax({
+      type: "PUT",
+      url: 'server/dash/abandon',
+      data: { url: par.attr('data-url') }
+    })
+  })
+});

data/ui/resources.html

@@ -0,0 +1,96 @@
+<!--
+  This file is part of CPEE-MODEL-MANAGEMENT.
+
+  CPEE-MODEL-MANAGEMENT is free software: you can redistribute it and/or
+  modify it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or (at your
+  option) any later version.
+
+  CPEE-MODEL-MANAGEMENT is distributed in the hope that it will be useful, but
+  WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
+  more details.
+
+  You should have received a copy of the GNU General Public License along with
+  CPEE-MODEL-MANAGEMENT (file LICENSE in the main directory).  If not, see
+  <http://www.gnu.org/licenses/>.
+-->
+
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <title>Resources</title>
+
+    <!-- libs, do not modify. When local than load local libs. -->
+    <script type="text/javascript" src="/js_libs/jquery.min.js"></script>
+    <script type="text/javascript" src="/js_libs/jquery.browser.js"></script>
+    <script type="text/javascript" src="/js_libs/jquery.svg.min.js"></script>
+    <script type="text/javascript" src="/js_libs/jquery.svgdom.min.js"></script>
+    <script type="text/javascript" src="/js_libs/vkbeautify.js"></script>
+    <script type="text/javascript" src="/js_libs/util.js"></script>
+    <script type="text/javascript" src="/js_libs/printf.js"></script>
+    <script type="text/javascript" src="/js_libs/strftime.min.js"></script>
+    <script type="text/javascript" src="/js_libs/parsequery.js"></script>
+    <script type="text/javascript" src="/js_libs/underscore.min.js"></script>
+    <script type="text/javascript" src="/js_libs/jquery.caret.min.js"></script>
+    <script type="text/javascript" src="/js_libs/jquery.cookie.js"></script>
+    <script type="text/javascript" src="/js_libs/plotly.min.js"></script>
+
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
+
+    <script type="text/javascript" src="/js_libs/relaxngui.js"></script>
+
+    <script type="text/javascript" src="/js_libs/uidash.js"></script>
+    <script type="text/javascript" src="/js_libs/custommenu.js"></script>
+
+    <link   rel="stylesheet"      href="/js_libs/custommenu.css" type="text/css"/>
+    <link   rel="stylesheet"      href="/js_libs/uidash.css" type="text/css"/>
+
+    <link   rel="stylesheet"      href="/global_ui/ui.css" type="text/css"/>
+
+    <link   rel="stylesheet"      href="/js_libs/relaxngui.css" type="text/css"/>
+
+    <!-- custom stuff, play arround  -->
+    <link   rel="stylesheet"      href="css/stats.css" type="text/css"/>
+    <link   rel="stylesheet"      href="css/stats_standalone.css" type="text/css"/>
+    <script type="text/javascript" src="js/stats.js"></script>
+    <style>
+      [is="x-ui-"] {
+        overflow: scroll;
+      }
+    </style>
+  </head>
+  <body is="x-ui-">
+    <p>
+      Show statistics about instances per server, and metrics about the health of the environment.
+    </p>
+    <template id="stats_engine">
+      <h1 class="stats_title">Engine: </h1>
+      <div class="stats_plot"></div>
+      <div class="stats_text">
+        <table>
+          <tbody>
+            <tr>
+              <td>Total Instances <strong>Created</strong> / <strong>Finished</strong> / <strong>Abandoned</strong>:</td>
+              <td class='total_created'></td>
+              <td>/</td>
+              <td class='total_finished'></td>
+              <td>/</td>
+              <td class='total_abandoned'></td>
+            </tr>
+            <tr>
+              <td>Instances Currently <strong>Ready</strong> / <strong>Running</strong> / <strong>Stopped</strong>:</td>
+              <td class='current_ready'></td>
+              <td>/</td>
+              <td class='current_running'></td>
+              <td>/</td>
+              <td class='current_stopped'></td>
+            </tr>
+          </tbody>
+         </table>
+      </div>
+    </template>
+    <div id='resources'></div>
+  </body>
+</html>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: cpee-model-management
 version: !ruby/object:Gem::Version
-  version: 1.0.17
+  version: 1.1.1
 platform: ruby
 authors:
 - Juergen eTM Mangler
 autorequire:
 bindir: tools
 cert_chain: []
-date: 2021-10-28 00:00:00.000000000 Z
+date: 2022-06-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: riddl
@@ -73,6 +73,7 @@ files:
 - cpee-model-management.gemspec
 - lib/cpee-model-management/commit.rb
 - lib/cpee-model-management/implementation.rb
+- lib/cpee-model-management/implementation.xml
 - lib/cpee-model-management/moma.xml
 - lib/cpee-model-management/stages
 - server/model.xml
@@ -81,9 +82,14 @@ files:
 - server/testset.xml
 - tools/cpee-moma
 - ui/css/design.css
-- ui/design.js
+- ui/css/stats.css
+- ui/css/stats_standalone.css
 - ui/index.html
+- ui/instances.html
+- ui/instances_view.html
 - ui/js/design.js
+- ui/js/stats.js
+- ui/resources.html
 homepage: http://cpee.org/
 licenses:
 - LGPL-3.0
@@ -103,7 +109,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.2.22
+rubygems_version: 3.3.7
 signing_key:
 specification_version: 4
 summary: "(Lifecycle) manage your process models in a directory or git repo."

data/ui/design.js

@@ -1,239 +0,0 @@
-var gstage;
-var gdir;
-
-function move_it(name,todir) {
-  $.ajax({
-    type: "PUT",
-    url: "server/" + gdir + name,
-    data: { dir: todir }
-  });
-}
-function shift_it(name,to) {
-  $.ajax({
-    type: "PUT",
-    url: "server/" + gdir + name,
-    data: { stage: to }
-  });
-}
-function rename_it(name) {
-  var newname;
-  if (newname = prompt('New name please!',name.replace(/\.xml$/,'').replace(/\.dir$/,''))) {
-    $.ajax({
-      type: "PUT",
-      url: "server/" + gdir + name,
-      data: { new: newname }
-    });
-  }
-}
-function duplicate_it(name) {
-  var newname;
-  if (newname = prompt('New name please!',name.replace(/\.xml$/,'').replace(/\.dir$/,''))) {
-    $.ajax({
-      type: "POST",
-      url: "server/" + gdir,
-      data: { new: newname, old: name }
-    });
-  }
-}
-function delete_it(name) {
-  if (confirm('Are you really, really, REALLY sure!')) {
-    $.ajax({
-      type: "DELETE",
-      url: "server/" + gdir + name
-    });
-  }
-}
-
-function es_init(gdir,gstage) {
-  var es = new EventSource('server/');
-  es.onopen = function() {
-    console.log('es open');
-  };
-  es.onmessage = function(e) {
-    paint(gdir,gstage);
-  };
-  es.onerror = function() {
-    console.log('es error');
-    // es_init();
-  };
-}
-
-function paint(gdir,gstage) {
-  $('#models tbody').empty();
-  if (gdir && gdir != '') {
-    var clone = document.importNode(document.querySelector('#up').content,true);
-    $('[data-class=name] a',clone).text('..');
-    $('[data-class=name] a',clone).attr('href',window.location.pathname + '?stage=' + gstage + '&dir=');
-    $('#models tbody').append(clone);
-  }
-  $.ajax({
-    type: "GET",
-    url: "server/" + gdir,
-    data: { stage: gstage },
-    success: function(res) {
-      $(res).each(function(k,data) {
-        if (data.type == 'dir') {
-          var clone = document.importNode(document.querySelector('#folder').content,true);
-          $('[data-class=name] a',clone).text(data['name'].replace(/\.dir$/,''));
-          $('[data-class=name]',clone).attr('data-full-name',data['name']);
-          $('[data-class=name] a',clone).attr('href',window.location.pathname + '?stage=' + gstage + '&dir=' + data['name']);
-        } else {
-          var clone = document.importNode(document.querySelector('#model').content,true);
-          $('[data-class=name] a',clone).text(data['name']);
-          $('[data-class=name]',clone).attr('data-full-name',data['name']);
-          $('[data-class=name] a',clone).attr('href','server/' + gdir + data['name'] + '/open?stage=' + gstage);
-          $('[data-class=force] a',clone).attr('href','server/' + gdir + data['name'] + '/open-new?stage=' + gstage);
-          $('[data-class=raw] a',clone).attr('href','server/' + gdir + data['name']);
-
-          $('[data-class=guarded] abbr',clone).attr('title',data['guarded'] || '');
-          $('[data-class=guarded] abbr',clone).text((data['guarded'] || '').match(/none/i) ? '' : (data['guarded'] || '').charAt(0).toUpperCase());
-          $('[data-class=resource]',clone).text(data['guarded_id'] || '');
-        }
-        $('[data-class=author]',clone).text(data['author']);
-        $('[data-class=date]',clone).text(new Date(data['date']).strftime('%Y-%m-%d, %H:%M:%S'));
-        $('#models tbody').append(clone);
-      });
-    }
-  });
-}
-
-function change_it(gdir,gstage) {
-  window.location.href = window.location.pathname + '?stage=' + gstage + '&dir=' + gdir;
-}
-
-$(document).ready(function() {
-  const queryString = window.location.search;
-  const urlParams = new URLSearchParams(queryString);
-
-  gstage = urlParams.get('stage') || 'draft';
-  gdir = urlParams.get('dir') ? (urlParams.get('dir') + '/').replace(/\/+/,'/') : '';
-
-  es_init(gdir,gstage);
-
-  var shifts = []
-  $.ajax({
-    type: "GET",
-    url: "server/",
-    data: { stages: 'stages' },
-    success: (r) => {
-      shifts = shifts.concat(r);
-      shifts = shifts.filter(item => item !== gstage);
-    }
-  });
-
-  $('input[name=stage]').val(gstage);
-  $('input[name=dir]').val(gdir);
-  $('ui-behind span').text(gstage);
-  $('ui-behind span').click((e) => {
-    if (shifts.length > 0) {
-      var menu = {};
-      menu['Change to'] = [];
-      shifts.forEach(ele => {
-        menu['Change to'].push(
-          {
-            'label': ele,
-            'function_call': change_it,
-            'text_icon': '➔',
-            'type': undefined,
-            'class': 'capitalized',
-            'params': [gdir,ele]
-          }
-        );
-      });
-      new CustomMenu(e).contextmenu(menu);
-    }
-  });
-
-  var dragged;
-  $('#models').on('drag','td[data-class=model]',false);
-  $('#models').on('dragstart','td[data-class=model]',(e) => {
-    dragged = $(e.currentTarget).parents('tr').find('td[data-class=name]').text();
-  });
-  $('#models').on('dragover','td[data-class=folder]',false);
-  $('#models').on('drop','td[data-class=folder]',(e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (dragged) {
-      var todir = $(e.currentTarget).parents('tr').find('td[data-class=name]').text();
-      todir = todir.replace(/\./g,'');
-      if (todir != '') {
-        todir += '.dir';
-      }
-      move_it(dragged,todir);
-      dragged = undefined;
-    }
-  });
-  $('#models').on('click','td[data-class=ops]',(e) => {
-    var menu = {};
-    var name = $(e.currentTarget).parents('tr').find('td[data-class=name]').attr('data-full-name');
-    menu['Operations'] = [
-      {
-        'label': 'Delete',
-        'function_call': delete_it,
-        'text_icon': '❌',
-        'type': undefined,
-        'params': [name]
-      },
-      {
-        'label': 'Rename',
-        'function_call': rename_it,
-        'type': undefined,
-        'text_icon': '📛',
-        'params': [name]
-      }
-    ];
-    if (name.match(/\.xml$/)) {
-      menu['Operations'].unshift(
-        {
-          'label': 'Duplicate',
-          'function_call': duplicate_it,
-          'text_icon': '➕',
-          'type': undefined,
-          'params': [name]
-        }
-      );
-    }
-    if (shifts.length > 0) {
-      menu['Shifting'] = [];
-      shifts.forEach(ele => {
-        menu['Shifting'].push(
-          {
-            'label': 'Shift to ' + ele,
-            'function_call': shift_it,
-            'text_icon': '➔',
-            'type': undefined,
-            'params': [name,ele]
-          }
-        );
-      });
-    }
-    new CustomMenu(e).contextmenu(menu);
-  });
-
-  history.pushState({}, document.title, window.location.pathname + '?stage=' + gstage + '&dir=' + gdir);
-  paint(gdir,gstage);
-
-  $('#newmod').on('submit',(e) => {
-    $.ajax({
-      type: "POST",
-      url: "server/" + gdir,
-      data: { stage: gstage, new: $("#newmod input[name=new]").val() },
-      success: (r) => {
-        uidash_activate_tab($('ui-tab').first());
-      }
-    });
-    return false;
-  });
-
-  $('#newdir').on('submit',(e) => {
-    $.ajax({
-      type: "POST",
-      url: "server/",
-      data: { dir: $("#newdir input[name=newdir]").val() },
-      success: (r) => {
-        uidash_activate_tab($('ui-tab').first());
-      }
-    });
-    return false;
-  });
-});