Refactor Timelion expression suggestion logic for clarity.

[cjcenizal]

Extracts some work from #11164.

Overview

The current version of this logic involves DOM manipulation from within a directive. We can simplify this by leveraging Angular's directives.

Changes

• Create timelionExpressionInput directive.
• Create timelionExpressionSuggestions directive.
• Create expression_directive_helpers service (which can be unit tested).

[rashidkpc]

This comment isn't a review of this pull, just a good place to leave some notes about suggestions.

Timelion's autocomplete has always been one of those "Well, its better than nothing" sort of things. There's a quick digest of how I'd like to see autocompletion work here: https://github.com/cjcenizal/kibana/blob/ed3862e0abb35a2e7e69355d6993a0af166de3ea/src/core_plugins/timelion/public/directives/expression_directive.js#L14-L37

This pull should help with that process as it breaks out the logic for finding and inserting into the helpers file. Just needs someone to sit down and sort it out. Its probably not that hard to implement, the AST already has all of the lookup objects to make determining context for caret position simple.

{
   "tree": [...],
   "functions": [
      {
         "type": "function",
         "function": "es",
         "arguments": [...],
         "location": { // Encompasses the name of the function and all arguments names, and values passed to it.
            "min": 1,
            "max": 15
         },
         "text": ".es(index=bar)"
      }
   ],
   "args": [
      {
         "type": "namedArg",
         "name": "index",
         "value": {
            "type": "literal",
            "value": "bar",
            "location": { // Contains only the range of chars representing the argument value
               "min": 11,
               "max": 14
            },
            "text": "bar"
         },
         "location": { // Both the argument value, and its name, and the = sign.
            "min": 5,
            "max": 14
         },
         "text": "index=bar",
         "function": "es"
      }
   ],
   "variables": {}
}

Basically we just need to take the caret position and compare it to the location.min and location.max in each object in functions and args. That should give you an idea of if the user is typing a new function, new argument or an argument value. Once you know that you could use one of 3 suggester method to know what to pass to insertAtLocation. The only method currently implemented is for functions, but it would be trivial to add the user 2 once the caret context thing is sorted.

[rashidkpc]

It looks like some other CSS changes at some point had partial broken the intended behavior of the interval select. This used to just appear as an editable drop down, it looks like some CSS changed at some point that made it look like a bad implementation of that intention.

In any case, the behavior of this pull isn't correct. This makes it look like there are 2 inputs that do 2 things. We want it to look like 1 input that can be customized if needed. You could probably use some library for this, we opted to implement it in our code to avoid pulling in another dependency.

[rashidkpc]

This changes the behavior of the "other" selection in the interval chooser, it now opens a 2nd dropdown instead of making the existing dropdown appear to be editable

[cjcenizal]

@rashidkpc Thanks for catching that. Fixed:

[ppisljar]

with other dropdown selection (and second field appearing) ... still doens't look completely OK ... you can see that the dropdown gets super narrow, hardly fitting the values, where before selecting other there is 'the right amount' of padding around the values.

[ppisljar]

should we /> as there is nothing inside the timelion-interval element ?

[cjcenizal]

Angular requires you to actually use a closing tag for custom directives.

[ppisljar]

how/where is this used ?

[cjcenizal]

This is used to differentiate between this UI in the context of the Timelion app and the Visualize app (when you create a Timelion vis). I can add a comment about this.

[ppisljar]

i for i (leaves everyone blind) ... you can probably drop one i

[cjcenizal]

I think this is the syntax ng-options expects. Is there a different expression we should use?

[ppisljar]

no you are right, maybe just rename to intervalOption ?

[cjcenizal]

@ppisljar Thanks for the review! I addressed your comments. Which browser did you use when you found that select bug? I can't repro in Chrome on OS X. Would you mind checking out 3e53525 and letting me know if the select bug exists in that commit? If so, then it's a pre-existing bug and I think we should mark it in an issue and address it in another PR.

[rashidkpc]

Here's what I was going for:

Here's the CSS I used:

select.timelion-interval {
  width: 80px;
}

input.timelion-interval {
  width: 50px;
}

select.timelion-interval-compact {
  width: 10px;
  padding-left: 0;
  border-left: none;
}

[cjcenizal]

Thanks @rashidkpc. I tweaked your suggestion a bit and landed on this:

I don't want to remove the border from the select because it makes the focus state look funky, and also makes the hit area harder to see. Could you take another look?

[rashidkpc]

That works for me

[cjcenizal]

jenkins test this

[ppisljar]

@cjcenizal the dropdown issue is not present in 3e53525 (it works ok there). it happens in latest chrome, looks better in firefox.

also another small issue i found: when you click the dropdown (in firefox) you can see the "focus border" on the input that you don't really see ....