Timelion typeahead for argument names and values

[tbragin]

Currently only function names are auto-completable, ideally argument name and argument values could be auto completed as well.

Migrated from elastic/timelion#130

[rashidkpc]

Copied from #11285 (comment).

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.

[cjcenizal]

As part of #11164, I'm planning on removing the code stub which partially implements this goal. The code might be useful for when we move forward with this issue, so here it is for future reference: https://github.com/elastic/kibana/blob/5.5/src/core_plugins/timelion/public/directives/expression_directive_helpers.js#L51

[cjcenizal]

Additionally here's the original comment which outlined the desired autocomplete behavior:

/*
 Autocomplete proposal, this file doesn't actually work like this
 
 function names
 Do not auto complete .sometext(, rather insert a closing ) whenever a ( is typed.
 
 .| (single dot)
 .func|
 
 argument names
 We’ll need to sort out which function we’re inside, must be inside a function though
 
 .function(|) // Suggest the first name aka most important arg, e.g. foo=
 .function(fo|) // Suggest foo=
 .function(foo=|) // Suggest [bar,baz]
 
 .function(arg=bar, |) Suggest 2nd arg name, and so on
 
 argument values
 Only named arguments, necessarily provided optional by a plugin.
 Must be inside a function, and start must be adjacent to the argument name
 
 .function(arg=b|)
 */

[nreese]

Closed by
94b2b32
8b57e4a