Using javascript in the info.html.erb file of an interactive app

Get Help
1

image
image955×568 28.3 KB

I have written a SLURM accounting script to pull data in a given date range and plot it using google charts embedded within the info.html.erb file. It works great, but when more than one card is present in the interactive sessions app, it hides everything other the last app I have ran… This only happens when the job status is ‘complete’ and the app session has closed.

For instance…
I run a second instance of this app:

image
image1290×805 47.3 KB

It completes and shows 2 cards in the sessions as completed:

image
image1282×872 57.8 KB

I refresh the page and the previous job card disappears as there is some conflict.

image
image1272×657 32.7 KB

The records still exist in $HOME/ondemand/data/sys/dashboard/batch_connect/dev/HPC_Accounting/output

Could someone help me understand why this is?

2

What is the behavior when you remove your additional info.html.erb?

3

It works as it should when the info.html.erb file is removed. Here’s a video capture to show the behavior.

It sems it due to the app running in pun but having different data sources associated with each job staging dir. It cannot handle multiple sources and that trips it up.

The simplest workaround I can think of is to just delete the session when done, but if there’s another option I would like to entertain that first.

4

I imagine it’s got something to do with how you attach those change handlers. I couldn’t see the javascript a lot, but you seem to have static ids in #1 and #2 and so on.

Each card has a unique Id - you should also be using unique ids or javascript that can attach handlers to the specific div and or handlers that can figure out what to do based on the event that’s been passed to them (specifically event.target).

image
image2087×766 107 KB

If you want to share the info.html.erb I can take a look at it.

5

I have 2 weeks of javascript experience, so I by no means know what I should be doing… So thank you!

Ultimately I want to build dashboard tools, so this is a good learning experience for me. Any “Mr. Miyagi” wisdom you can impart is appreciated =)


<%-
      filesapp = "https://portal.corvidhpc.com/pun/sys/dashboard/files/fs/"
      
      filename = Dir.glob("#{staged_root}/Corvid*.csv").first
      

      
%>      

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>



<script>
    // Visualization API with the 'corechart' package.
    google.charts.load('visualization', { packages: ['corechart'] });


    $(document).ready(function() {
      $("#1").on("click", function() {
        drawChart(datafile1, "4f6367");
      });
    });
    
    $(document).ready(function() {
      $("#2").on("click", function() {
        drawChart(datafile2, "b57104");
      });
    });
    
    $(document).ready(function() {
      $("#3").on("click", function() {
        drawChart(datafile3, "182a6b");
      });
    });    
    
    var datafile1 = { name:'partitions.json' , focus: 'Partition' };
    var datafile2 = { name:'users.json' , focus: 'User'} ;
    var datafile3 = { name:'comment.json' , focus: 'Comment'} ;
    
    function drawChart(datafile, color) {

        $.ajax({
            url: `https://portal.corvidhpc.com/pun/sys/dashboard/files/fs/<%= "#{staged_root}" %>/${datafile.name}`,
            dataType: "json",
            type: "GET",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
 
                var usage = [[ `${datafile.name}` , 'CPU-hrs Consumed']];    // Define an array and assign columns for the chart.
                
                
                // Loop through each data and populate the array.
                $.each(data, function (index, value) {
                    usage.push([value[`${datafile.focus}`], value.CPUTimeRAW]);
                });
                
				// set a padding value to cover the height of title and axis values
                var paddingHeight = 50;
                
                // the natural height of all rows combined
                var rowHeight = usage.length * 21;

                // set the total chart height
                var chartHeight = rowHeight + paddingHeight;                

                if (usage.length==1) { usage.push([ 'no data', 0 ])}
                
                // Set chart Options.
                var options = {
                    title: `CorvidHPC Usage per ${datafile.focus}`,
                    curveType: 'function',
                    legend: { position: "none" },
                    height: chartHeight,
                    hAxis: { scaleType: 'log'},
                    bar: { groupWidth: "75%" },
                    chartArea: { width: "75%"},
                    colors: [color]
                };

                // Create DataTable and add the array to it.
                var figures = google.visualization.arrayToDataTable(usage)

                // Define the chart type and the container.
                var chart = new google.visualization.BarChart(document.getElementById('chart'));
                chart.draw(figures, options);      // Draw the chart with Options.
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert('\n\n Plotting Error Within Corvid HPC Accounting App\n\n Refresh your browser, or contact support@corvidhpc.com');
            }
        });
    }
    
</script>






<body>
  





<%- 
      logfilename = Dir.glob("#{staged_root}/*.log").first

      if Dir.glob("#{staged_root}/*.csv").length()==0
          link=''
      else
          link="#{filesapp}#{filename}?download=1" 
%>

<h5> Displaying Corvid HPC Usage from <%= "#{filename}".split("/").last %> </h5>



<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="1" autocomplete="off"> Plot Usage Per Partition
  </label>
  <label class="btn btn-warning">
    <input type="radio" name="options" id="2" autocomplete="off"> Plot Usage Per User
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="3" autocomplete="off"> Plot Usage Per Comment
  </label>
</div>



<div id = "chart" style = "margin: 0 auto"></div>




<h3> <a href=<%=link%>>Download Accounting CSV File</a> </h3>



<details class="abstract">
<summary>Script Log (Debug)</summary>
<div class="highlight"><pre><span></span><iframe src=<%= "#{filesapp}#{logfilename}" %> width="600" height="300" frameBorder="0"></pre></div>
</details>

<%
 
      end

%>

</body>
6

Here’s a git diff that may help. I didn’t set it all up to pull actual files, so there could be something missing, but <%= id %> is unique. It’s likely better than adding logic to figure out where you are based off of event.target.

info_diff.txt (3.3 KB)

1 Like
7

That’s brilliant! Thank you so much!

8

Nailed it! You’re the man, thanks Jeff.
I had to figure out the hard way here that the function gets overwritten with each call of the script, so I needed to feed it the unique ids to grab the correct data and plot it where it belongs.

image
image1134×950 60.2 KB

1 Like
9

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.