Adds UI for tags api

openzipkin · Dec 16, 2018 · 9451f7b · 9451f7b
1 parent cc09c54
commit 9451f7b
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 6 deletions.
diff --git a/zipkin-ui/js/component_data/autocompleteKeys.js b/zipkin-ui/js/component_data/autocompleteKeys.js
@@ -0,0 +1,33 @@
+import {component} from 'flightjs';
+import {getError} from '../../js/component_ui/error';
+import $ from 'jquery';
+
+export default component(
+  function autocompleteKeysAndValues() {
+    this.autocompleteKeys = function() {
+      $.ajax('api/v2/autocompleteKeys', {
+        type: 'GET',
+        dataType: 'json'
+      }).done(keys => {
+        this.trigger('updateKey', {keys: keys.sort()});
+      }).fail(e => {
+        this.trigger('uiServerError', getError('cannot load service names', e));
+      });
+    };
+
+    this.autocompleteValues = function(ev, autocompleteKey) {
+      $.ajax(`api/v2/autocompleteValues?key=${autocompleteKey}`, {
+        type: 'GET',
+        dataType: 'json'
+      }).done(values => {
+        this.trigger('updateValue', {values: values.sort()});
+      }).fail(e => {
+        this.trigger('uiServerError', getError('cannot load service names', e));
+      });
+    };
+
+    this.after('initialize', function() {
+      this.on('uiautocompletekeys', this.autocompleteKeys);
+      this.on('uiautocompletevalues', this.autocompleteValues);
+    });
+  });
diff --git a/zipkin-ui/js/component_ui/autocompleteKey.js b/zipkin-ui/js/component_ui/autocompleteKey.js
@@ -0,0 +1,53 @@
+/* eslint-disable prefer-template */
+import {component} from 'flightjs';
+import 'chosen-js';
+import $ from 'jquery';
+import queryString from 'query-string';
+
+export default component(function autocompleteKeys() {
+  this.updateKey = function(ev, data) {
+    this.renderKey(data.keys);
+    this.trigger('chosen:updated');
+  };
+
+  this.renderKey = function(keys) {
+    this.$node.empty();
+    const selectedKey = queryString.parse(window.location.search).key;
+    $.each(keys, (i, key) => {
+      const option = $($.parseHTML('<option/>'));
+      option.val(key);
+      option.text(key);
+      if (key === selectedKey) {
+        option.prop('selected', true);
+      }
+      this.$node.append(option);
+    });
+  };
+
+  this.updateValue = function(ev, data) {
+    this.renderValue(data.values);
+    this.trigger('chosen:updated');
+  };
+
+  this.renderValue = function(values) {
+    this.$node.empty();
+    const selectedValue = queryString.parse(window.location.search).value;
+    $.each(values, (i, value) => {
+      const option = $($.parseHTML('<option/>'));
+      option.val(value);
+      option.text(value);
+      if (value === selectedValue) {
+        option.prop('selected', true);
+      }
+      this.$node.append(option);
+    });
+  };
+
+  this.after('initialize', function() {
+    this.$node.chosen({search_contains: true});
+    this.$node.trigger('uiautocompletekeys');
+    this.$node.next('.chosen-container');
+    this.on(document, 'updateKey', this.updateKey);
+    this.on(document, 'updateValue', this.updateValue);
+  });
+});
diff --git a/zipkin-ui/js/page/default.js b/zipkin-ui/js/page/default.js
@@ -5,8 +5,10 @@ import queryString from 'query-string';
 import DefaultData from '../component_data/default';
 import SpanNamesData from '../component_data/spanNames';
 import ServiceNamesData from '../component_data/serviceNames';
+import AutocompleteKeysData from '../component_data/autocompleteKeys';
 import ServiceNameUI from '../component_ui/serviceName';
 import SpanNameUI from '../component_ui/spanName';
+import AutocompleteKeysUI from '../component_ui/autocompleteKey';
 import LookbackUI from '../component_ui/lookback';
 import InfoPanelUI from '../component_ui/infoPanel';
 import InfoButtonUI from '../component_ui/infoButton';
@@ -79,6 +81,7 @@ const DefaultPageComponent = component(function DefaultPage() {
 
       SpanNamesData.attachTo(document);
       ServiceNamesData.attachTo(document);
+      AutocompleteKeysData.attachTo(document);
       ServiceNameUI.attachTo('#serviceName');
       SpanNameUI.attachTo('#spanName');
       LookbackUI.attachTo('#lookback');
@@ -90,6 +93,8 @@ const DefaultPageComponent = component(function DefaultPage() {
       TimeStampUI.attachTo('#end-ts');
       TimeStampUI.attachTo('#start-ts');
       BackToTop.attachTo('#backToTop');
+      AutocompleteKeysUI.attachTo('#tagkey');
+      AutocompleteKeysUI.attachTo('#tagValue');
       i18nInit('traces');
       $('.timeago').timeago();
       // Need to initialize the datepicker when the UI refershes. Can be optimized

diff --git a/zipkin-ui/templates/index.mustache b/zipkin-ui/templates/index.mustache
@@ -16,7 +16,6 @@
           </select>
         </div>
       </div>
-
       <div class="form-group col-md-6">
         <label for="lookback" data-i18n="traces.lookback">Lookback</label>
         <div class="clearfix">
@@ -72,21 +71,35 @@
                placeholder="Ex: 100ms or 5s">
       </div>
 
-      <div class="form-group col-md-2">
-        <label for="limit" data-i18n="traces.limit">Limit</label>
-        <input class="form-control input-sm" id="limit" name="limit" type="text" value="{{limit}}">
-      </div>
       <div class="form-group col-md-2">
         <label for="sortOrder" data-i18n="traces.sort">Sort</label>
         <select class="sort-order js-sort-order form-control" form="submitForm" name="sortOrder" id="sortOrder">
           {{#sortOrderOptions}}
             <option value="{{value}}" {{sortOrderSelected}} data-i18n="{{value}}">{{text}}</option>{{/sortOrderOptions}}
         </select>
       </div>
+      <div class="form-group col-md-2">
+        <label for="limit" data-i18n="traces.limit">Limit</label>
+        <input class="form-control input-sm" id="limit" name="limit" type="text" value="{{limit}}">
+      </div>
     </div>
 
     <div class="form-row">
-      <div class="col-md-12">
+      <div class="form-group col-md-4">
+        <label for="tagkey" data-i18n="traces.tagkey">Tag Key</label>
+        <div class="clearfix">
+          <select data-placeholder="choose key" class="form-control form-control-chosen" name="tagkey" id="tagkey" multiple>
+          </select>
+        </div>
+      </div>
+      <div class="form-group col-md-4">
+        <label for="tagValue" data-i18n="traces.tagValue">Tag Value</label>
+        <div class="clearfix">
+          <select data-placeholder="choose value" class="form-control form-control-chosen" name="tagValue" id="tagValue" multiple>
+          </select>
+        </div>
+      </div>
+      <div class="col-md-4">
         <button type="submit" class="btn btn-primary btn-lg" data-i18n="traces.findBtn">Find Traces</button>
         <button type="button" class="btn btn-outline-info info-request">
           <span class="fas fa-question-circle"></span>