Commit e35b5faa authored by Laura Schlimmer's avatar Laura Schlimmer
Browse files

started metric-explorer-list

parent 954fe9c7

fnord-webcomponents/metric-explorer/fn-metric-explorer.css

0 → 100644
+15 −0
Original line number Diff line number Diff line 
/*

  This file is part of the "FnordMetric" project

    Copyright (c) 2014 Laura Schlimmer

    Copyright (c) 2014 Paul Asmuth, Google Inc.



  FnordMetric is free software: you can redistribute it and/or modify it under

  the terms of the GNU General Public License v3.0. You should have received a

  copy of the GNU General Public License along with this program. If not, see

  <http://www.gnu.org/licenses/>.

*/



metric-explorer-list {

  display: block;

  width: 100%;

}

fnord-webcomponents/metric-explorer/metric-explorer-components/metric-explorer-list.html

0 → 100644
+76 −0
Original line number Diff line number Diff line 
<!--

  This file is part of the "FnordMetric" project

    Copyright (c) 2014 Laura Schlimmer

    Copyright (c) 2014 Paul Asmuth, Google Inc.



  FnordMetric is free software: you can redistribute it and/or modify it under

  the terms of the GNU General Public License v3.0. You should have received a

  copy of the GNU General Public License along with this program. If not, see

  <http://www.gnu.org/licenses/>.

-->



<template id="metric-explorer-list-base-tpl">

  <fn-loader data-loading data-loader-type="loader3">

    <h1 class="page_header"><i>Metrics</i> &rsaquo; All Metrics</h1>

    <fn-table data-per-page="25" data-clickable style="width: 100%;">

      <fn-table-column>Metric</fn-table-column>

      <fn-table-column>Labels</fn-table-column>

      <fn-table-column>Last Insert</fn-table-column>

      <fn-table-column>Total Stored Bytes</fn-table-column>

    </fn-table>

  </fn-loader>

</template>



<script type='text/javascript'>

  var MetricList = function() {



    this.createdCallback = function() {

      var tpl = Fnord.getTemplate("metric-explorer-list", "base");

      this.appendChild(tpl);



      console.log(this)



      this.loadMetricList();

    }



    this.loadMetricList = function() {

      var loader = this.querySelector("fn-loader");

      var table = this.querySelector("fn-table");



      Fnord.httpGet("https://rpc.fnrd.net/cm-stats/metrics/list", function(r) {

        if (r.status === 200) {

          JSON.parse(r.response).metrics.forEach(function(m) {

            var tr_elem = document.createElement("tr");

            tr_elem.setAttribute('metric-key', m.key);

            var cells = [

              m.key,

              m.labels.join(", "),

              m.last_insert,

              m.total_bytes];



            cells.map(function(cell) {

              var td_elem = document.createElement("td");

              td_elem.innerHTML = cell;

              tr_elem.appendChild(td_elem);

            });



            table.appendRow(tr_elem);



          });

          loader.removeAttribute("data-loading")

        }

      });





      table.addEventListener('fn-table-row-click', function(e) {

        var metric_key = e.srcElement.getAttribute('metric-key');

        console.log("clicked" + metric_key)

      }, false);

    }



  }



  window.addEventListener('fn-ready', function() {

    Fnord.registerComponent('metric-explorer-list', MetricList);

  }, false);

</script>

fnord-webcomponents/metric-explorer/metric-explorer-components/metric-explorer-preview.html

0 → 100644
+78 −0
Original line number Diff line number Diff line 
<!--

  This file is part of the "FnordMetric" project

    Copyright (c) 2014 Laura Schlimmer

    Copyright (c) 2014 Paul Asmuth, Google Inc.



  FnordMetric is free software: you can redistribute it and/or modify it under

  the terms of the GNU General Public License v3.0. You should have received a

  copy of the GNU General Public License along with this program. If not, see

  <http://www.gnu.org/licenses/>.

-->



<template id="fnordmetric-metric-preview-base-tpl">

  <fn-loader>

    <h1 class="page_header">

      <fn-button id="metric-list">

        <i>Metric</i>

      </fn-button>

      &rsaquo;

      <span></span>

    </h1>

    <fnordmetric-controls type='primary'>

      <fnordmetric-controls-section data-position='left'>

        <div class='group aggregation_type'>

          <b>Rollup</b>

          <fn-dropdown id='rollup'>

          </fn-dropdown>

        </div>

        <div class='group aggregation_time_window'>

          <b>Time Window / Step</b>

          <fn-dropdown id='time_window'>

          </fn-dropdown>

          <fn-dropdown id='time_step'>

          </fn-dropdown>

        </div>

        <div class="group group_by">

          <b>Group by</b>

        </div>

      </fnordmetric-controls-section>

      <fnordmetric-controls-section data-position='right'>

        <div class='group timerange'>

          <b>Show The Last...</b>

          <fn-dropdown id='timerange'>

          </fn-dropdown>

        </div>

        <div class='group date'>

          <b>End Time</b>

          <fn-datepicker time-select='input'>

          </fn-datepicker>

        </div>

      </fnordmetric-controls-section>

    </fnordmetric-controls>

    <fnordmetric-controls type='secondary'>

      <fnordmetric-controls-section data-position='left'>

        <fn-button id="embed_btn">

          <i class='fa fa-share'></i>

          Embed

        </fn-button>

        <fn-button id="auto_refresh">

          <i class='fa fa-refresh'></i>

          Auto Refresh

        </fn-button>

      </fnordmetric-controls-section>

      <fnordmetric-controls-section data-position='right'>

        <fn-daterangepicker past-selectable='selectable'>

        </fn-daterangepicker>

      <fnordmetric-controls-section>

    </fnordmetric-controls>

    <fn-loader id="result_pane" data-transparent>

      <div id="result_pane_chart">

      </div>

      <fn-table data-per-page='25' style="width:100%;">

      </fn-table>

    </fn-loader>

  </fn-loader>

  <fnordmetric-metric-preview-popup id="embed">

  </fnordmetric-metric-preview-popup>

</template>

fnord-webcomponents/metric-explorer/metric-explorer.html

0 → 100644
+49 −0
Original line number Diff line number Diff line 
<!--

  This file is part of the "FnordMetric" project

    Copyright (c) 2014 Laura Schlimmer

    Copyright (c) 2014 Paul Asmuth, Google Inc.



  FnordMetric is free software: you can redistribute it and/or modify it under

  the terms of the GNU General Public License v3.0. You should have received a

  copy of the GNU General Public License along with this program. If not, see

  <http://www.gnu.org/licenses/>.

-->

<html>

  <head>

    <title>Metric Explorer</title>

    <link rel="stylesheet" href="../fnord.css" type="text/css">

    <link rel="stylesheet" href="../3rdparty/fontawesome.css" type="text/css">

    <link rel="stylesheet" href="fn-metric-explorer.css" type="text/css">

  </head>

  <body>

    <link rel="import" href="metric-explorer-components/metric-explorer-list.html" data-component="metric-explorer-list">

    <link rel="import" href="../components/fn-appbar.html" data-component="fn-appbar">

    <link rel="import" href="../components/fn-button.html" data-component="fn-button">

    <link rel="import" href="../components/fn-loader.html" data-component="fn-loader">

    <link rel="import" href="../components/fn-menu.html" data-component="fn-menu">

    <link rel="import" href="../components/fn-search.html" data-component="fn-search">

    <link rel="import" href="../components/fn-table.html" data-component="fn-table">

    <link rel="import" href="../components/fn-progressbar.html" data-component="fn-progressbar">

    <link rel="import" href="../components/fn-dropdown.html" data-component="fn-dropdown">

    <link rel="stylesheet" href="../themes/midnight-blue.css" type="text/css">





    <div id="metric-explorer-viewport">

    </div>





  </body>

</html>



<script type='text/javascript'>



  function open(name) {

    var viewport = document.querySelector("#metric-explorer-viewport");

    viewport.innerHTML = "<metric-explorer-list></metric-explorer-list>";

  }



  window.addEventListener('fn-ready' ,function() {

    open("metric-explorer-list");

  }, false)

</script>

<script type='text/javascript' src='../fnord.js'></script>

CRA Git | Maintained and supported by SUSTech CRA and CCSE