<!DOCTYPE html>
<html>

<head>
  <title>alert-config-sk</title>
  <meta charset='utf-8' />
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <style type='text/css' media='screen'>
    alert-config-sk {
      display: block;
      width: 40em;
    }
  </style>
</head>

<body>
  <h1>alert-config-sk</h1>
  <alert-config-sk></alert-config-sk>
  <h2>State</h2>
  <pre id=state></pre>

  <script type='text/javascript' charset='utf-8'>
    const e = document.querySelector('alert-config-sk');
    const state = document.querySelector('#state');

    const paramset = {
      'config': ['565', '8888'],
      'type': ['CPU', 'GPU'],
      'units': ['ms', 'bytes'],
      'test': [
        'DeferredSurfaceCopy_discardable',
        'DeferredSurfaceCopy_nonDiscardable',
        'GLInstancedArraysBench_instance',
        'GLInstancedArraysBench_one_0',
        'GLInstancedArraysBench_one_1',
        'GLInstancedArraysBench_one_2',
        'GLInstancedArraysBench_one_4',
        'GLInstancedArraysBench_one_8',
        'GLInstancedArraysBench_two_0',
        'GLInstancedArraysBench_two_1',
        'GLInstancedArraysBench_two_2',
        'GLInstancedArraysBench_two_4',
        'GLInstancedArraysBench_two_8',
        'GLVec4ScalarBench_scalar_1_stage',
        'GLVec4ScalarBench_scalar_2_stage',
      ],
    };
    const config = {
      display_name: 'A name',
      direction: 'BOTH',
      query: 'config=565',
      alert: 'alerts@example.com',
      interesting: 25,
      step: 'cohen',
      bug_uri_template: 'http://example.com/{description}/{url}',
      algo: 'stepfit',
      owner: 'somebody@example.org',
      minimum_num: 2,
      category: 'experimental',
      state: 'DELETED',
      group_by: 'config,units',
      radius: 7,
      k: 50,
    };

    const key_order = ['test', 'units'];

    e.paramset = paramset;
    e.config = config;
    e.key_order = key_order;

    window.setInterval(() => {
      state.textContent = JSON.stringify(e.config, null, '  ');
    }, 100);

    window.sk = window.sk || {}
    window.sk.perf = window.sk.perf || {}
    window.sk.perf.key_order = [];

  </script>
</body>

</html>