Add filters help

ui/autocomplete-compnent.ts

@@ -20,7 +20,7 @@
 export default class Autocomplete {
   private callback: (
     value: string,
-    callback: (suggestions: string[]) => void
+    callback: (suggestions: { value: string; tip?: string }[]) => void
   ) => void;
   private element: HTMLInputElement;
   private hideTimeout: NodeJS.Timeout;
@@ -137,25 +137,26 @@ export default class Autocomplete {
         this.selection =
           ((this.selection % suggestions.length) + suggestions.length) %
           suggestions.length;
-        this.default = suggestions[this.selection];
+        this.default = suggestions[this.selection].value;
       } else {
-        this.default = suggestions[0];
+        this.default = suggestions[0].value;
       }
 
       let selectedElement;
       for (const [idx, suggestion] of suggestions.entries()) {
         const e = document.createElement("div");
+        if (suggestion.tip) e.title = suggestion.tip;
         e.classList.add("suggestion");
         if (idx === this.selection) {
           e.classList.add("selected");
           selectedElement = e;
         }
 
-        const t = document.createTextNode(suggestion);
+        const t = document.createTextNode(suggestion.value);
         e.appendChild(t);
         e.addEventListener("mousedown", ev => {
           ev.preventDefault();
-          el.value = suggestion;
+          el.value = suggestion.value;
           if (this.element === el) this.update();
         });
         this.container.appendChild(e);

ui/filter-component.ts

@@ -29,7 +29,14 @@ const getAutocomplete = memoize(resource => {
   const labels = smartQuery.getLabels(resource);
   const autocomplete = new Autocomplete("autocomplete", (txt, cb) => {
     txt = txt.toLowerCase();
-    cb(labels.filter(s => s.toLowerCase().includes(txt)).map(s => `${s}: `));
+    cb(
+      labels
+        .filter(s => s.toLowerCase().includes(txt))
+        .map(s => ({
+          value: `${s}: `,
+          tip: smartQuery.getTip(resource, s)
+        }))
+    );
   });
   return autocomplete;
 });

ui/smart-query.ts

@@ -132,6 +132,38 @@ function queryMac(param, value): Expression {
   ];
 }
 
+export function getTip(resource, label): string {
+  let tip;
+  if (resources[resource] && resources[resource][label]) {
+    const param = resources[resource][label];
+    const types =
+      resource === "devices" ? param["type"] : param["type"].split(",");
+
+    const tips = [];
+    for (const type of types) {
+      switch (type.trim()) {
+        case "string":
+          tips.push("case insensitive string pattern");
+          break;
+        case "number":
+          tips.push("numeric value");
+          break;
+        case "timestamp":
+          tips.push(
+            "Unix timestamp or string in the form YYYY-MM-DDTHH:mm:ss.sssZ"
+          );
+          break;
+        case "mac":
+          tips.push("partial case insensitive MAC address");
+          break;
+      }
+    }
+
+    if (tips.length) tip = `${label}: ${tips.join(", ")}`;
+  }
+  return tip;
+}
+
 export function unpack(resource, label, value): Expression {
   if (!resources[resource]) return null;
   const type = resources[resource][label].type;