<!doctype html>
<html>
<head>
    <title>/metrics_html</title>
</head>
<script type="text/javascript" src="static/DataTables/jQuery-3.7.0/jquery-3.7.0.min.js"></script>
<link href="static/DataTables/datatables.min.css" rel="stylesheet">
<script src="static/DataTables/datatables.min.js"></script>

<style type="text/css" media="screen">
body {
  font-size: 140%;
}
h2 {
  text-align: center;
  padding: 20px 0;
}
table caption {
	padding: .5em 0;
}
table.dataTable th,
table.dataTable td {
  white-space: nowrap;
}
.p {
  text-align: center;
  padding-top: 140px;
  font-size: 14px;
}
</style>

<body style="padding: 30px">
<div class="container" style="max-width: 1200px;margin:auto">
  <div class="row">
    <div class="col-xs-12">
      <table class="table table-bordered table-hover dt-responsive">
        <caption class="text-center"><text id="curr_time"></text></caption>
        <thead>
          <tr>
            <th>#</th>
            <th>name</th>
            <th>input</th>
            <th>output</th>
            <th>duration_mean_ms</th>
            <th>duration_std_ms</th>
            <th>ratio</th>
          </tr>
        </thead>
        <tbody>

        </tbody>
        <tfoot>
          <tr>
            <td colspan="5" class="text-center"></td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
</div>
</body>

<script>
  $('table').DataTable(
          {
    paging: false,
    scrollCollapse: true,
    scrollY: '600px',
            columns: [
        {
            data: '#'
        },
        {
            data: 'name',
        },
        {
            data: 'input',
        },
        {
            data: 'output',
        },
        {
            data: 'duration_mean_ms'
        },
        {
            data: 'duration_std_ms'
        },
        {
            data: 'ratio',
          render: function (data, type, row, meta) {
                return type === 'display'
                    ? '<progress value="' + data + '" max="0"></progress>'
                    : data;
            }
        }
    ]
        }
          );

function ratio_val(text){
    max_prog=0
    for (i=0;i<text.metrics.length;i++)
        max_prog=parseFloat(max_prog)+parseFloat(text.metrics[i].duration_mean_ms);
    return max_prog
}

function catch_date_init(){
    fetch('/metrics_json')
            .then(response => response.json()).then(function (text)
    {
            var table_ =$('table').DataTable();
            var max_prog=ratio_val(text);
            for (i=0;i<text.metrics.length;i++)
            {
                  table_.row.add({
                    '#': i + 1,
                    'name': text.metrics[i].name,
                    'input': text.metrics[i].input,
                    'output': text.metrics[i].output,
                    'duration_mean_ms': text.metrics[i].duration_mean_ms,
                    'duration_std_ms': text.metrics[i].duration_std_ms,
                    'ratio': text.metrics[i].duration_mean_ms,
                  }).draw();
            }
            for(k=0; k<$('progress').length;k++){
              document.getElementsByTagName('progress')[k].setAttribute('max', max_prog);
              document.getElementsByTagName('progress')[k].setAttribute('title', parseFloat(parseFloat(document.getElementsByTagName('progress')[k].getAttribute('value'))/parseFloat(max_prog)*100).toFixed(2) + '%' )

            }
            document.getElementById('curr_time').textContent = text.current_time;
        });
}
function catch_date(){
    fetch('/metrics_json')
            .then(response => response.json()).then(function (text)
    {
            var table_ =$('table').DataTable();
            var max_prog=ratio_val(text);
            for (i=0;i<text.metrics.length;i++)
            {
                  var temp={
                          '#': i + 1,
                          'name': text.metrics[i].name,
                          'input': text.metrics[i].input,
                          'output': text.metrics[i].output,
                          'duration_mean_ms': text.metrics[i].duration_mean_ms,
                          'duration_std_ms': text.metrics[i].duration_std_ms,
                          'ratio': text.metrics[i].duration_mean_ms,
                  }
                  table_.row(i).data(temp).draw();
                  for(k=0; k<$('progress').length;k++){
                      document.getElementsByTagName('progress')[k].setAttribute('max', max_prog)
                  }
                  document.getElementById('curr_time').textContent = text.current_time;
            }
        })
    }
catch_date_init()
var i = 1;

function myLoop() {
  setTimeout(function() {
    catch_date();//  your code here
    //i++;                 //  increment the counter
    if (true) {           //  if the counter < 10, call the loop function
      myLoop();
    }
  }, 1000)
}

myLoop();

</script>
</html>
