ui: more backend search

hashicorp · Jun 11, 2019 · 553d3cc · 553d3cc
1 parent f275e0b
commit 553d3cc
Show file tree

Hide file tree

Showing 24 changed files with 868 additions and 280 deletions.
diff --git a/ui-v2/app/components/consul-node-list.js b/ui-v2/app/components/consul-node-list.js
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import Slotted from 'block-slots';
+
+export default Component.extend(Slotted, {
+  tagName: '',
+  onchange: function() {},
+});
diff --git a/ui-v2/app/components/consul-service-list.js b/ui-v2/app/components/consul-service-list.js
@@ -0,0 +1,66 @@
+import Component from '@ember/component';
+import Slotted from 'block-slots';
+
+import { get, computed } from '@ember/object';
+import { htmlSafe } from '@ember/string';
+const max = function(arr, prop) {
+  return arr.reduce(function(prev, item) {
+    return Math.max(prev, get(item, prop));
+  }, 0);
+};
+const chunk = function(str, size) {
+  const num = Math.ceil(str.length / size);
+  const chunks = new Array(num);
+  for (let i = 0, o = 0; i < num; ++i, o += size) {
+    chunks[i] = str.substr(o, size);
+  }
+  return chunks;
+};
+const width = function(num) {
+  const str = num.toString();
+  const len = str.length;
+  const commas = chunk(str, 3).length - 1;
+  return commas * 4 + len * 10;
+};
+const widthDeclaration = function(num) {
+  return htmlSafe(`width: ${num}px`);
+};
+export default Component.extend(Slotted, {
+  tagName: '',
+  onchange: function() {},
+  maxWidth: computed('{maxPassing,maxWarning,maxCritical}', function() {
+    const PADDING = 32 * 3 + 13;
+    return ['maxPassing', 'maxWarning', 'maxCritical'].reduce((prev, item) => {
+      return prev + width(get(this, item));
+    }, PADDING);
+  }),
+  totalWidth: computed('maxWidth', function() {
+    return widthDeclaration(get(this, 'maxWidth'));
+  }),
+  remainingWidth: computed('maxWidth', function() {
+    // maxWidth is the maximum width of the healthchecks column
+    // there are currently 2 other columns so divide it by 2 and
+    // take that off 50% (100% / number of fluid columns)
+    // also we added a Type column which we've currently fixed to 100px
+    // so again divide that by 2 and take it off each fluid column
+    return htmlSafe(`width: calc(50% - 50px - ${Math.round(get(this, 'maxWidth') / 2)}px)`);
+  }),
+  maxPassing: computed('items.[]', function() {
+    return max(get(this, 'items'), 'ChecksPassing');
+  }),
+  maxWarning: computed('items.[]', function() {
+    return max(get(this, 'items'), 'ChecksWarning');
+  }),
+  maxCritical: computed('items.[]', function() {
+    return max(get(this, 'items'), 'ChecksCritical');
+  }),
+  passingWidth: computed('maxPassing', function() {
+    return widthDeclaration(width(get(this, 'maxPassing')));
+  }),
+  warningWidth: computed('maxWarning', function() {
+    return widthDeclaration(width(get(this, 'maxWarning')));
+  }),
+  criticalWidth: computed('maxCritical', function() {
+    return widthDeclaration(width(get(this, 'maxCritical')));
+  }),
+});
diff --git a/ui-v2/app/components/data-source.js b/ui-v2/app/components/data-source.js
@@ -1,6 +1,6 @@
 import Component from '@ember/component';
 import { inject as service } from '@ember/service';
-import { get, set, computed } from '@ember/object';
+import { get, set } from '@ember/object';
 
 import WithListeners from 'consul-ui/mixins/with-listeners';
 
@@ -19,48 +19,14 @@ const replace = function(
 
 export default Component.extend(WithListeners, {
   tagName: 'span',
-  // TODO: Temporary repo list here
-  service: service('repository/service'),
-  node: service('repository/node'),
-  session: service('repository/session'),
 
-  blocking: service('blocking'),
+  data: service('blocking'),
   settings: service('settings'),
-  onmessage: function() {},
+
+  onchange: function() {},
   onerror: function() {},
   onprogress: function() {},
-  // TODO: Temporary finder
-  finder: function(src, filter) {
-    const temp = src.split('/');
-    temp.shift();
-    const slug = temp.pop();
-    const model = temp.pop();
-    const dc = temp.shift();
 
-    switch (slug) {
-      case '*':
-        switch (model) {
-          default:
-            return configuration => {
-              return get(this, model).findAllByDatacenter(dc, {
-                cursor: configuration.cursor,
-                filter: filter,
-              });
-            };
-        }
-      default:
-        switch (model) {
-          case 'session':
-            return configuration => {
-              return get(this, model).findByNode(slug, dc, { cursor: configuration.cursor });
-            };
-          default:
-            return configuration => {
-              return get(this, model).findBySlug(slug, dc, { cursor: configuration.cursor });
-            };
-        }
-    }
-  },
   didInsertElement: function() {
     this._super(...arguments);
     const options = {
@@ -97,32 +63,31 @@ export default Component.extend(WithListeners, {
       const src = get(this, 'src');
       const filter = get(this, 'filter');
 
-      replace(
+      const source = replace(
         this,
         'source',
-        get(this, 'blocking').open(this.finder(src, filter), {
-          id: `${src}${filter ? `?filter=${filter}` : ``}`,
-        }),
+        get(this, 'data').open(`${src}${filter ? `?filter=${filter}` : ``}`, this),
         (prev, source) => {
-          get(this, 'blocking').close(prev);
-          const remove = this.listen(source, {
-            message: e => this.onmessage(e),
-            error: e => {
-              remove();
-              this.onerror(e);
-            },
-          });
-          replace(this, '_remove', remove);
-          const previousEvent = source.getPreviousEvent();
-          if (previousEvent) {
-            source.dispatchEvent(previousEvent);
-          }
+          // Makes sure any previous source (if different) is ALWAYS closed
+          get(this, 'data').close(prev, this);
         }
       );
+      const remove = this.listen(source, {
+        message: e => this.onchange(e),
+        error: e => {
+          remove();
+          this.onerror(e);
+        },
+      });
+      replace(this, '_remove', remove);
+      const currentEvent = source.getCurrentEvent();
+      if (currentEvent) {
+        this.onchange(currentEvent);
+      }
     },
     close: function() {
       // keep this argumentless
-      get(this, 'blocking').close(get(this, 'source'));
+      get(this, 'data').close(get(this, 'source'), this);
       replace(this, '_remove', null);
       set(this, 'source', undefined);
     },

diff --git a/ui-v2/app/components/event-source.js b/ui-v2/app/components/event-source.js
@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import { get, set, computed } from '@ember/object';
+import { get, set } from '@ember/object';
 import { inject as service } from '@ember/service';
 
 import { CallableEventSource as EventSource } from 'consul-ui/utils/dom/event-source';
@@ -36,14 +36,12 @@ export default Component.extend(WithListeners, {
       $placeholder.remove();
       this.listen(source, 'message', e => {
         const type = e.data.type;
-        const event = e.data.data;
         if (get(this, 'type') == type) {
           set(this, `on${type}`, get(this, 'handler'));
         }
         get(this, 'dom').dispatch(get(this, 'target'), { type: type, target: this });
       });
       this.listen(source, 'error', e => this.onerror(e));
-    } else {
     }
   },
   actions: {

diff --git a/ui-v2/app/components/phrase-editor.js b/ui-v2/app/components/phrase-editor.js
@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import { get, set, computed } from '@ember/object';
+import { get, set } from '@ember/object';
 import { inject as service } from '@ember/service';
 
 export default Component.extend({

diff --git a/ui-v2/app/controllers/dc/nodes/index.js b/ui-v2/app/controllers/dc/nodes/index.js
@@ -1,8 +1,13 @@
 import Controller from '@ember/controller';
 import { set } from '@ember/object';
-import { get } from '@ember/object';
+
 let s;
 export default Controller.extend({
+  queryParams: {
+    s: {
+      as: 'filter',
+    },
+  },
   setProperties: function(model) {
     s = model.s = typeof model.s === 'undefined' ? s : model.s;
     if (s) {

diff --git a/ui-v2/app/controllers/dc/services/index.js b/ui-v2/app/controllers/dc/services/index.js
@@ -1,28 +1,5 @@
 import Controller from '@ember/controller';
-import { get, set, computed } from '@ember/object';
-import { htmlSafe } from '@ember/string';
-const max = function(arr, prop) {
-  return arr.reduce(function(prev, item) {
-    return Math.max(prev, get(item, prop));
-  }, 0);
-};
-const chunk = function(str, size) {
-  const num = Math.ceil(str.length / size);
-  const chunks = new Array(num);
-  for (let i = 0, o = 0; i < num; ++i, o += size) {
-    chunks[i] = str.substr(o, size);
-  }
-  return chunks;
-};
-const width = function(num) {
-  const str = num.toString();
-  const len = str.length;
-  const commas = chunk(str, 3).length - 1;
-  return commas * 4 + len * 10;
-};
-const widthDeclaration = function(num) {
-  return htmlSafe(`width: ${num}px`);
-};
+import { set } from '@ember/object';
 let s;
 export default Controller.extend({
   queryParams: {
@@ -39,41 +16,6 @@ export default Controller.extend({
     }
     return this._super(model);
   },
-  maxWidth: computed('{maxPassing,maxWarning,maxCritical}', function() {
-    const PADDING = 32 * 3 + 13;
-    return ['maxPassing', 'maxWarning', 'maxCritical'].reduce((prev, item) => {
-      return prev + width(get(this, item));
-    }, PADDING);
-  }),
-  totalWidth: computed('maxWidth', function() {
-    return widthDeclaration(get(this, 'maxWidth'));
-  }),
-  remainingWidth: computed('maxWidth', function() {
-    // maxWidth is the maximum width of the healthchecks column
-    // there are currently 2 other columns so divide it by 2 and
-    // take that off 50% (100% / number of fluid columns)
-    // also we added a Type column which we've currently fixed to 100px
-    // so again divide that by 2 and take it off each fluid column
-    return htmlSafe(`width: calc(50% - 50px - ${Math.round(get(this, 'maxWidth') / 2)}px)`);
-  }),
-  maxPassing: computed('items.[]', function() {
-    return max(get(this, 'items'), 'ChecksPassing');
-  }),
-  maxWarning: computed('items.[]', function() {
-    return max(get(this, 'items'), 'ChecksWarning');
-  }),
-  maxCritical: computed('items.[]', function() {
-    return max(get(this, 'items'), 'ChecksCritical');
-  }),
-  passingWidth: computed('maxPassing', function() {
-    return widthDeclaration(width(get(this, 'maxPassing')));
-  }),
-  warningWidth: computed('maxWarning', function() {
-    return widthDeclaration(width(get(this, 'maxWarning')));
-  }),
-  criticalWidth: computed('maxCritical', function() {
-    return widthDeclaration(width(get(this, 'maxCritical')));
-  }),
   actions: {
     query: function(args) {
       s = args.length > 0 ? args.join('\n') : null;

diff --git a/ui-v2/app/helpers/to-filter.js b/ui-v2/app/helpers/to-filter.js
@@ -3,7 +3,6 @@ import ucfirst from 'consul-ui/utils/ucfirst';
 const convert = function(str, map) {
   const replacement = map.find(function(arr) {
     const key = arr[0];
-    const val = arr[1];
     return str.startsWith(key);
   });
   const replaced = str.replace(replacement[0], '');

diff --git a/ui-v2/app/routes/dc/nodes/index.js b/ui-v2/app/routes/dc/nodes/index.js
@@ -1,17 +1,24 @@
 import Route from '@ember/routing/route';
+import convertStatus from 'consul-ui/utils/routing/convert-status';
 
 export default Route.extend({
   queryParams: {
     s: {
       as: 'filter',
       replace: true,
     },
+    // temporary support of old style status
+    status: {
+      as: 'status',
+    },
   },
   model: function(params) {
     return {
-      s: params.s,
-      dc: this.modelFor('dc').dc.Name,
+      // we check for the old style `status` variable here
+      // and convert it to the new style filter=status:critical
+      s: convertStatus(params.s, params.status),
       slug: '*',
+      dc: this.modelFor('dc').dc.Name,
     };
   },
   setupController: function(controller, model) {

diff --git a/ui-v2/app/routes/dc/services/index.js b/ui-v2/app/routes/dc/services/index.js
@@ -1,5 +1,5 @@
 import Route from '@ember/routing/route';
-import { get } from '@ember/object';
+import convertStatus from 'consul-ui/utils/routing/convert-status';
 
 export default Route.extend({
   queryParams: {
@@ -13,23 +13,10 @@ export default Route.extend({
     },
   },
   model: function(params) {
-    const repo = get(this, 'repo');
-    let s = params.s;
-    // we check for the old style `status` variable here
-    // and convert it to the new style filter=status:critical
-    let status = params.status;
-    if (status) {
-      status = `status:${status}`;
-      if (s && s.indexOf(status) === -1) {
-        s = s
-          .split('\n')
-          .concat(status)
-          .join('\n')
-          .trim();
-      }
-    }
     return {
-      s: s,
+      // we check for the old style `status` variable here
+      // and convert it to the new style filter=status:critical
+      s: convertStatus(params.s, params.status),
       slug: '*',
       dc: this.modelFor('dc').dc.Name,
     };