<!DOCTYPE html><html><head><title>Φορτίο v{{.Version}}</title>
<script src="{{.ChartJSPath}}"></script>
<link rel="icon" href="../favicon.ico" />
<style>
a:link {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
h1 {
  font-size: 120%;
}
</style>
</head>
<body style="background: linear-gradient(to right, #d8aa20 , #c75228);">
<a href="http://fortio.org/"><img src="{{.LogoPath}}" alt="." height="69" width="45" align="right" /></a>
<img src="{{.LogoPath}}" alt="." height="92" width="60" align="right" />
<img src="{{.LogoPath}}" alt="istio logo" height="123" width="80" align="right" />
<h1>Φορτίο (fortio) v{{.Version}}{{.Extra}}</h1>
<script src="{{.Version}}/static/js/fortio_chart.js"></script>
<script>
var res
var data
function fortio_load(url) {
  var multi = document.getElementById("files")
  var list = [url]
  if (multi && multi.selectedOptions !== undefined) {
    list = multi.selectedOptions
  }
  if (list.length == 0) {
    return
  }
  if (list.length == 1) {
    fetch("data/"+url).then(doc => doc.json()).then((out) => {
      res = out
      data = fortioResultToJsChartData(res)
      showChart(data)
      var urldiv = document.getElementById('url')
      urldiv.innerHTML = "<a href='browse?url=" + url + "'>" + url + "</a> (<a href='data/" + url +"'>json</a>)"
    }).catch(err => { throw err })
  } else {
    var urldiv = document.getElementById('url')
    urldiv.innerHTML = "Multiple runs (URL is a permalink)..."
    if (list.length == 2) {
      var urlA = list[0].value
      var dataPromiseA = fetch("data/"+urlA)
          .then(response => response.json())
          .then(fortioResult => fortioResultToJsChartData(fortioResult))

      var urlB = list[1].value
      var dataPromiseB = fetch("data/"+urlB)
          .then(response => response.json())
          .then(fortioResult => fortioResultToJsChartData(fortioResult))

      Promise.all([dataPromiseA, dataPromiseB]).then(dataArray => {
        var dataA = dataArray[0]
        var dataB = dataArray[1]
        makeOverlayChart(dataA, dataB)
      })
    } else {
      makeMultiChart()
      var promises = []
      for (var i = 0, len = list.length; i < len; i++) {
        var v = list[len-i-1].value;
        (function (idx, u) {
          promises.push(fetch("data/"+u).then(doc => doc.json()).then((out) => {
            fortioAddToMultiResult(idx, out)
          }))
        })(i, v)
      }
      Promise.all(promises).then( () => {
        endMultiChart(list.length)
      }).catch(err => { throw err })
    }
  }
}
</script>
{{if .DoRender}}
<p><div id="url">Loading {{.URL}}...</div></p>
<p /><!-- TODO: find a way to flush/not need two p to get the form visible! -->
<br />
<p />
<br />
<script>
fortio_load('{{.URL}}')
</script>
{{else}}
<table><tr><td valign="top">
List of saved results:<br />
<br />
Filter:<form><input id="searchinp" name="s" type="text" size=20 value="{{.Search}}" /></form>
</td><td>
<select id="files" size=7 onchange="fortio_load(value);" multiple>
{{range .PreselectedDataList}}
  <option value="{{.Value}}.json" {{if .Selected}} selected {{end}}>{{.Value}}</option>
{{end}}
</select>
</td><td valign="top">
Graph link: <div id="url">...</div>
</tr></table>
<script>
const files = document.getElementById('files');
const allFiles = Array.from(files.options);
const search = document.getElementById('searchinp');
function findMatches (search, allFiles) {
  const regex = new RegExp(search, 'gi');
  return allFiles.filter(fileOption => {
    return fileOption.text.match(regex);
  });
}
function filterFiles () {
  allFiles.forEach(fileOption => {
    fileOption.remove();
    fileOption.selected = false;
  });
  const filteredFiles = findMatches(this.value, allFiles);
  files.append(...filteredFiles);
}
search.addEventListener('change', filterFiles);
search.addEventListener('keyup', filterFiles);
</script>
{{end}}
<div class="chart-container" id="cc1" style="position: relative; height:75vh; width:98vw; visibility: hidden">
<canvas style="background-color: #fff" id="chart1"></canvas>
</div>
<div id="running">
<br/>
Select or multi select to graph...
</div>
<div id="update">
<form id="updtForm" action="javascript:updateChart()">
<input type="submit" value="Update:" />
Time axis min <input type="text" name="xmin" value="{{.ChartOptions.XMin}}" size="5" /> ms,
max <input type="text" name="xmax" value="{{.ChartOptions.XMax}}" size="5" /> ms,
logarithmic: <input name="xlog" type="checkbox" onclick="updateChart()" {{if .ChartOptions.XIsLog}} checked {{end}} /> -
Count axis logarithmic: <input name="ylog" type="checkbox" onclick="updateChart()" {{if .ChartOptions.YIsLog}} checked {{end}} />
</form>
</div>
{{if .DoSearch}}
<script>
filterFiles.call(search)
for (var i = 0; i < files.options.length; i++) {
  files.options[i].selected = true;
}
</script>
{{end}}
{{if .DoLoadSelected}}
<script>
fortio_load(files.value)
</script>
{{end}}
<p>Go to <a href='./'>Top</a>.</p>
</body>
</html>
