Change plugin setup, use kibana context

src/legacy/core_plugins/timelion/public/components/timelion_expression_input.tsx

@@ -22,34 +22,22 @@ import { EuiFormRow } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api';
 
-import { IUiSettingsClient, HttpSetup } from 'kibana/public';
-import { CodeEditor, KibanaContextProvider } from '../../../../../plugins/kibana_react/public';
+import { CodeEditor, useKibana } from '../../../../../plugins/kibana_react/public';
 import { suggest, getSuggestion } from './timelion_expression_input_helpers';
-import { ArgValueSuggestions } from '../services/arg_value_suggestions';
 import { ITimelionFunction, TimelionFunctionArgs } from '../../common/types';
+import { TimelionServices } from '../services/types';
 
 const LANGUAGE_ID = 'timelion_expression';
 monacoEditor.languages.register({ id: LANGUAGE_ID });
 
-export interface TimelionExpressionInputDependencies {
-  argValueSuggestions: ArgValueSuggestions;
-  http: HttpSetup;
-  uiSettings: IUiSettingsClient;
-}
-
 interface TimelionExpressionInputProps {
   value: string;
   setValue(value: string): void;
 }
 
-function TimelionExpressionInput({
-  argValueSuggestions,
-  http,
-  uiSettings,
-  value,
-  setValue,
-}: TimelionExpressionInputProps & TimelionExpressionInputDependencies) {
+function TimelionExpressionInput({ value, setValue }: TimelionExpressionInputProps) {
   const functionList = useRef([]);
+  const kibana = useKibana<TimelionServices>();
 
   const provideCompletionItems = useCallback(
     async (model: monacoEditor.editor.ITextModel, position: monacoEditor.Position) => {
@@ -68,7 +56,7 @@ function TimelionExpressionInput({
         // it's important to offset the cursor position on 1 point left
         // because of PEG parser starts the line with 0, but monaco with 1
         position.column - 1,
-        argValueSuggestions
+        kibana.services.argValueSuggestions
       );
 
       return {
@@ -79,7 +67,7 @@ function TimelionExpressionInput({
           : [],
       };
     },
-    [argValueSuggestions]
+    [kibana.services.argValueSuggestions]
   );
 
   const provideHover = useCallback(
@@ -90,7 +78,7 @@ function TimelionExpressionInput({
         // it's important to offset the cursor position on 1 point left
         // because of PEG parser starts the line with 0, but monaco with 1
         position.column - 1,
-        argValueSuggestions
+        kibana.services.argValueSuggestions
       );
 
       return {
@@ -101,59 +89,58 @@ function TimelionExpressionInput({
           : [],
       };
     },
-    [argValueSuggestions]
+    [kibana.services.argValueSuggestions]
   );
 
   useEffect(() => {
-    http.get('../api/timelion/functions').then(data => {
-      functionList.current = data;
-    });
-  }, [http]);
+    if (kibana.services.http) {
+      kibana.services.http.get('../api/timelion/functions').then(data => {
+        functionList.current = data;
+      });
+    }
+  }, [kibana.services.http]);
 
   return (
-    <KibanaContextProvider services={{ uiSettings }}>
-      <EuiFormRow
-        className="visEditor__timelionExpressionInput"
-        fullWidth
-        label={i18n.translate('timelion.vis.expressionLabel', {
-          defaultMessage: 'Timelion expression',
-        })}
-      >
-        <div className="timelionExpressionInput__editor">
-          <CodeEditor
-            languageId={LANGUAGE_ID}
-            value={value}
-            onChange={setValue}
-            suggestionProvider={{
-              triggerCharacters: ['.', '(', '=', ':'],
-              provideCompletionItems,
-            }}
-            hoverProvider={{ provideHover }}
-            options={{
-              automaticLayout: true,
-              fixedOverflowWidgets: true,
-              fontSize: 16,
-              scrollBeyondLastLine: false,
-              quickSuggestions: true,
-              minimap: {
-                enabled: false,
+    <EuiFormRow
+      className="visEditor__timelionExpressionInput"
+      fullWidth
+      label={i18n.translate('timelion.vis.expressionLabel', {
+        defaultMessage: 'Timelion expression',
+      })}
+    >
+      <div className="timelionExpressionInput__editor">
+        <CodeEditor
+          languageId={LANGUAGE_ID}
+          value={value}
+          onChange={setValue}
+          suggestionProvider={{
+            triggerCharacters: ['.', ',', '(', '=', ':'],
+            provideCompletionItems,
+          }}
+          hoverProvider={{ provideHover }}
+          options={{
+            automaticLayout: true,
+            fixedOverflowWidgets: true,
+            fontSize: 16,
+            scrollBeyondLastLine: false,
+            minimap: {
+              enabled: false,
+            },
+            wordBasedSuggestions: false,
+            wordWrap: 'on',
+            wrappingIndent: 'indent',
+          }}
+          languageConfiguration={{
+            autoClosingPairs: [
+              {
+                open: '(',
+                close: ')',
               },
-              wordBasedSuggestions: false,
-              wordWrap: 'on',
-              wrappingIndent: 'indent',
-            }}
-            languageConfiguration={{
-              autoClosingPairs: [
-                {
-                  open: '(',
-                  close: ')',
-                },
-              ],
-            }}
-          />
-        </div>
-      </EuiFormRow>
-    </KibanaContextProvider>
+            ],
+          }}
+        />
+      </div>
+    </EuiFormRow>
   );
 }
 

src/legacy/core_plugins/timelion/public/components/timelion_expression_input_helpers.ts

@@ -214,14 +214,20 @@ export function getSuggestion(
   suggestion: ITimelionFunction | TimelionFunctionArgs,
   type: SUGGESTION_TYPE,
   range: monacoEditor.Range
-) {
+): monacoEditor.languages.CompletionItem {
   let kind: monacoEditor.languages.CompletionItemKind =
     monacoEditor.languages.CompletionItemKind.Method;
   let insertText: string = suggestion.name;
+  let insertTextRules: monacoEditor.languages.CompletionItem['insertTextRules'];
   let detail: string = '';
+  let command: monacoEditor.languages.CompletionItem['command'];
 
   switch (type) {
     case SUGGESTION_TYPE.ARGUMENTS:
+      command = {
+        title: 'Trigger Suggestion Dialog',
+        id: 'editor.action.triggerSuggest',
+      };
       kind = monacoEditor.languages.CompletionItemKind.Property;
       insertText = `${insertText}=`;
       detail = `${i18n.translate(
@@ -233,7 +239,13 @@ export function getSuggestion(
 
       break;
     case SUGGESTION_TYPE.FUNCTIONS:
+      command = {
+        title: 'Trigger Suggestion Dialog',
+        id: 'editor.action.triggerSuggest',
+      };
       kind = monacoEditor.languages.CompletionItemKind.Function;
+      insertText = `${insertText}($0)`;
+      insertTextRules = monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet;
       detail = `(${
         (suggestion as ITimelionFunction).chainable
           ? i18n.translate('timelion.expressionSuggestions.func.description.chainableHelpText', {
@@ -246,8 +258,17 @@ export function getSuggestion(
 
       break;
     case SUGGESTION_TYPE.ARGUMENT_VALUE:
+      const param = suggestion.name.split(':');
+
+      if (param.length === 1 || param[1]) {
+        insertText = `${param.length === 1 ? insertText : param[1]},`;
+      }
+
+      command = {
+        title: 'Trigger Suggestion Dialog',
+        id: 'editor.action.triggerSuggest',
+      };
       kind = monacoEditor.languages.CompletionItemKind.Property;
-      insertText = suggestion.name.split(':')[1] || suggestion.name;
       detail = suggestion.help || '';
 
       break;
@@ -256,13 +277,11 @@ export function getSuggestion(
   return {
     detail,
     insertText,
+    insertTextRules,
     kind,
     label: suggestion.name,
     documentation: suggestion.help,
-    command: {
-      title: 'Trigger Suggestion Dialog',
-      id: 'editor.action.triggerSuggest',
-    },
+    command,
     range,
   };
 }

src/legacy/core_plugins/timelion/public/components/timelion_interval.tsx

@@ -47,6 +47,12 @@ const intervalOptions = [
     }),
     value: '1h',
   },
+  {
+    label: i18n.translate('timelion.vis.interval.day', {
+      defaultMessage: '1 day',
+    }),
+    value: '1d',
+  },
   {
     label: i18n.translate('timelion.vis.interval.week', {
       defaultMessage: '1 week',

src/legacy/core_plugins/timelion/public/panels/timechart/schema.ts

@@ -34,7 +34,12 @@ import { generateTicksProvider } from './tick_generator';
 const DEBOUNCE_DELAY = 50;
 
 export function timechartFn(dependencies: TimelionVisualizationDependencies) {
-  const { $rootScope, $compile, uiSettings } = dependencies;
+  const {
+    $rootScope,
+    $compile,
+    core: { uiSettings },
+  } = dependencies;
+
   return function() {
     return {
       help: 'Draw a timeseries chart',

src/legacy/core_plugins/timelion/public/plugin.ts

@@ -16,16 +16,10 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import {
-  CoreSetup,
-  CoreStart,
-  Plugin,
-  PluginInitializerContext,
-  IUiSettingsClient,
-  HttpSetup,
-} from 'kibana/public';
+import { CoreSetup, CoreStart, Plugin, PluginInitializerContext } from 'kibana/public';
 import { Plugin as ExpressionsPlugin } from 'src/plugins/expressions/public';
 import { DataPublicPluginSetup, TimefilterContract } from 'src/plugins/data/public';
+import { PluginsStart } from 'ui/new_platform/new_platform';
 import { VisualizationsSetup } from '../../visualizations/public/np_ready/public';
 import { getTimelionVisualizationConfig } from './timelion_vis_fn';
 import { getTimelionVisualization } from './vis';
@@ -35,8 +29,7 @@ import { LegacyDependenciesPlugin, LegacyDependenciesPluginSetup } from './shim'
 
 /** @internal */
 export interface TimelionVisualizationDependencies extends LegacyDependenciesPluginSetup {
-  uiSettings: IUiSettingsClient;
-  http: HttpSetup;
+  core: CoreSetup<PluginsStart>;
   timelionPanels: Map<string, Panel>;
   timefilter: TimefilterContract;
 }
@@ -60,14 +53,13 @@ export class TimelionPlugin implements Plugin<Promise<void>, void> {
   }
 
   public async setup(
-    core: CoreSetup,
+    core: CoreSetup<PluginsStart>,
     { __LEGACY, expressions, visualizations, data }: TimelionPluginSetupDependencies
   ) {
     const timelionPanels: Map<string, Panel> = new Map();
 
     const dependencies: TimelionVisualizationDependencies = {
-      uiSettings: core.uiSettings,
-      http: core.http,
+      core,
       timelionPanels,
       timefilter: data.query.timefilter.timefilter,
       ...(await __LEGACY.setup(core, timelionPanels)),
@@ -76,7 +68,7 @@ export class TimelionPlugin implements Plugin<Promise<void>, void> {
     this.registerPanels(dependencies);
 
     expressions.registerFunction(() => getTimelionVisualizationConfig(dependencies));
-    visualizations.types.createBaseVisualization(getTimelionVisualization(dependencies));
+    visualizations.types.createBaseVisualization(await getTimelionVisualization(dependencies));
   }
 
   private registerPanels(dependencies: TimelionVisualizationDependencies) {

src/legacy/core_plugins/timelion/public/services/types.ts

@@ -0,0 +1,24 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { ArgValueSuggestions } from './arg_value_suggestions';
+
+export interface TimelionServices {
+  argValueSuggestions: ArgValueSuggestions;
+}

src/legacy/core_plugins/timelion/public/vis/_timelion_editor.scss

@@ -1,16 +1,12 @@
-.visEditor--timelion{
+.visEditor--timelion {
 
   vis-options-react-wrapper,
   .visEditorSidebar__options,
   .visEditorSidebar__timelionOptions,
   .visEditor__timelionExpressionInput {
-    @include flex-parent(1, 1, auto, column);
-
-    height: 100%;
-
-    > * {
-      flex-shrink: 1;
-    }
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
   }
 }
 
@@ -21,11 +17,11 @@
 }
 
 .timelionExpressionInput__editor {
-  height: 100%;
-  padding-top: $euiSize;
-
   @include euiBreakpoint('xs', 's', 'm') {
     height: $euiSize * 15;
     max-height: $euiSize * 15;
   }
+
+  height: 100%;
+  padding-top: $euiSize;
 }