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

moved search logic to metric-list

parent e7c034a4

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

+95 −21
Original line number Diff line number Diff line
@@ -10,18 +10,36 @@ 
-->



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

  <style type='text/css'>

    fn-table {

      width: 100%;

    }



    fn-table /deep/ table > thead > tr > td,

    fn-table /deep/ table > thead > tr > th,

    fn-table /deep/ table > tbody > tr > td,

    fn-table /deep/ table > tbody > tr > th {

      font-size: 92%;

    }



    fn-pager {

      float:right;

      margin: 5px 5px 5px 0;

    }

  </style>

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

    <div class="navigation">

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

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

      <fn-search data-placeholder="Search...">

        <fn-search-icon><i class="fa fa-search"></i></fn-search-icon>

      </fn-search>

    </div>

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

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

    <fn-pager data-for data-first-item="1" data-per-page="25" data-circling></fn-pager>

    <fn-table data-per-page="25" data-page-"0" data-clickable>

      <fn-table-column data-sortable>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-column data-sortable>Last Insert</fn-table-column>

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

    </fn-table>

  </fn-loader>

</template>
@@ -33,10 +51,44 @@ 
      var tpl = Fnord.getTemplate("fn-metric-explorer-list", "base");

      this.appendChild(tpl);



      this.loadMetricList();

      if (this.hasAttribute('data-url')) {

        this.init();

      }

    };





    this.attributeChangedCallback = function(attr, new_val, old_val) {

      if (attr == 'data-url') {

        this.init();

      }

    };



      var base = this;



    this.init = function() {

      var params = parseUrlQueryString(this.getAttribute('data-url'));

      var metric_url = "";

      var header = "All Metrics";



      if (params.path == "search" &&

          params.query_params &&

          params.query_params.innerViewValue) {

            metric_url = "?filter=" + params.query_params.innerViewValue;

            header = "Search " + params.query_params.innerViewValue;

      }



      this.loadMetricList(metric_url);

      this.setHeader(header);

      this.initSearch();

    };





    this.setHeader = function(title) {

      this.querySelector(".navigation h1").innerHTML += " " + title;

    };





    this.initSearch = function() {

      var base = this;

      var onSearchSubmit = (function(base) {

        return function(e) {

          var url = "search?q=" + encodeURIComponent(e.srcElement.getValue());
@@ -65,19 +117,25 @@ 
      var search = this.querySelector("fn-search");

      search.addEventListener("fn-search-submit", onSearchSubmit);

      search.addEventListener("fn-search-autocomplete", onSearchAutocomplete);

    };



    }







    this.loadMetricList = function() {

    this.loadMetricList = function(url_query) {

      var base = this;

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

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

      var url = baseUrl + "/list";

      var url = baseUrl + "/list" + url_query;



      Fnord.httpGet(url, function(r) {

        if (r.status === 200) {

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

          var metrics = JSON.parse(r.response).metrics;



          if (metrics.length == 1) {

            base.openMetricPreview(metrics[0].key);

            return;

          }



          metrics.forEach(function(m) {

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

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

            var cells = [
@@ -96,12 +154,29 @@ 


          });

          loader.removeAttribute("data-loading")

          base.initTablePager(metrics.length);

        }

      });





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

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

        var end = Math.round(Date.now() / 1000);

        var start = end - 3600;

        base.openMetricPreview(metric_key);

      }, false);

    };





    this.initTablePager = function(list_size) {

      console.log("init", list_size);

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

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

      pager.setAttribute('data-last-item', list_size);

      pager.forElement(table);

    };





    this.openMetricPreview = function(metric_key) {

      var end = Math.round(Date.now() / 1000);

      var start = end - 3600;

      var raw_url =
@@ -109,10 +184,9 @@ 
        "&view=value&start_time=" + start +

        "&end_time=" + end;

      openUrl(raw_url, true)

      }, false);

    }



  }

    };

  };



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

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

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

+19 −2
Original line number Diff line number Diff line
@@ -10,6 +10,23 @@ 
-->



<template id="fn-metric-explorer-search-base-tpl">

  <style type='text/css'>

    fn-table {

      width: 100%;

    }



    fn-table /deep/ table > thead > tr > td,

    fn-table /deep/ table > thead > tr > th,

    fn-table /deep/ table > tbody > tr > td,

    fn-table /deep/ table > tbody > tr > th {

      font-size: 92%;

    }



    fn-pager {

      float:right;

      margin: 5px 5px 5px 0;

    }

  </style>

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

    <div class="navigation">

      <h1 class="page_header"><i>Metrics</i> &rsaquo; Search</h1>
@@ -50,7 +67,7 @@ 
        return function(e) {

          var term = e.srcElement.getValue();

          var res = [];

          var url = "https://rpc.fnrd.net/cm-stats/metrics/list?filter=" + term;

          var url = baseUrl + "/list?filter=" + term;

          Fnord.httpGet(url, function(r) {

            if (r.status == 200) {

              var json = JSON.parse(r.response);
@@ -91,7 +108,7 @@ 
    this.loadMetricList = function(key) {

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

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

      var url = "https://rpc.fnrd.net/cm-stats/metrics/list?filter=" + key;

      var url = baseUrl + "/list?filter=" + key;

      var base = this;



      Fnord.httpGet(url, function(r) {

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

+7 −3
Original line number Diff line number Diff line
@@ -18,6 +18,7 @@ 
    <link rel="stylesheet" href="../components/fn-button.css" type="text/css">

    <link rel="stylesheet" href="../components/fn-input.css" type="text/css">

    <link rel="stylesheet" href="../components/fn-table.css" type="text/css">

    <link rel="stylesheet" href="../components/fn-pager.css" type="text/css">

  </head>

  <body>

    <link rel="import" href="metric-explorer-components/metric-explorer-list.html" data-component="fn-metric-explorer-list">
@@ -37,6 +38,7 @@ 
    <link rel="import" href="../components/fn-input.html" data-component="fn-input">

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

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

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

    <link rel="stylesheet" href="../themes/midnight-blue.css" type="text/css">
@@ -48,18 +50,19 @@ 
</html>



<script type='text/javascript'>

  var baseUrl = "https://rpc.fnrd.net/cm-stats/metrics";

  //var baseUrl = "https://rpc.fnrd.net/cm-stats/metrics";

  var baseUrl = "http://127.0.0.1:8000/metrics/";

  var views = {

    "metrics" : "<fn-metric-explorer-list></fn-metric-explorer-list>",

    "metric" : "<fn-metric-explorer-preview></fn-metric-explorer-preview>",

    "search" : "<fn-metric-explorer-search></fn-metric-explorer-search>"

    "search" : "<fn-metric-explorer-list></fn-metric-explorer-list>"

  }





  var routes = {

    "metrics": "fn-metric-explorer-list",

    "metric": "fn-metric-explorer-preview",

    "search": "fn-metric-explorer-search"

    "search": "fn-metric-explorer-list"

  };



  var default_route = "metrics";
@@ -70,6 +73,7 @@ 
    var query_params = url["query_params"];



    var view_name = routes[url["path"]];



    if (view_name == undefined) {

      alert("no route found for: " + url["path"]);

      return;

CRA Git | Maintained and supported by SUSTech CRA and CCSE