Integración del Editor de Monaco con Lenguaje de consulta Kusto soporte técnico en la aplicación

Puedes integrar monaco Editor con Lenguaje de consulta Kusto compatibilidad (monaco-kusto) en tu aplicación. La integración de monaco-kusto en tu aplicación te ofrece una experiencia de edición como la finalización, la coloración, la refactorización, el cambio de nombre y la definición. Requiere que cree una solución para la autenticación, la ejecución de consultas, la visualización de resultados y la exploración del esquema. Le ofrece una flexibilidad completa para modar la experiencia del usuario que se adapte a sus necesidades.

En este artículo, aprenderás a agregar monaco-kusto al Editor de Monaco e integrarlo en tu aplicación. El paquete está disponible en GitHub y en npm.

Siga estos pasos para integrar monaco-kusto en la aplicación mediante npm.

Paso 1: Instalar el paquete monaco-kusto

Paso 2: Configurar la aplicación para usar el paquete monaco-kusto

Paso 3: Agregar el esquema de base de datos al editor

Pruebe la integración con nuestro proyecto de ejemplo.

Requisitos previos

• Node.js (v6.10.3 o posterior)

Instalación del paquete monaco-kusto

1. Instale el paquete npm de Monaco Editor:

   npm i monaco-editor
   

   Nota:

   Para personalizar el editor nativo de Monaco, consulte repositorio de GitHub editor de Monaco.

2. Instale el paquete monaco-kusto npm:

   npm i @kusto/monaco-kusto
   

Configurar la aplicación para usar el paquete monaco-kusto

Puedes configurar la aplicación para usar monaco-kusto mediante uno de los métodos siguientes:

Sistema de módulos AMD

1. Agregue el código HTML siguiente a las páginas donde se usa el Editor de Monaco, como el archivo index.html . Son necesarios debido a una dependencia que tiene el paquete en kusto-language-service.

   <script src="%PUBLIC_URL%/monaco-editor/min/vs/language/kusto/bridge.min.js"></script>
   <script src="%PUBLIC_URL%/monaco-editor/min/vs/language/kusto/kusto.javascript.client.min.js"></script>
   <script src="%PUBLIC_URL%/monaco-editor/min/vs/language/kusto/newtonsoft.json.min.js"></script>
   <script src="%PUBLIC_URL%/monaco-editor/min/vs/language/kusto/Kusto.Language.Bridge.min.js"></script>
   

2. Copie los archivos estáticos de los paquetes monaco y monaco-kusto en la carpeta monaco-editor del servidor web. La aplicación tendrá que acceder a estos archivos estáticos.

3. Use monaco para cargarlos. Para obtener ejemplos, consulte los ejemplos.

ESM (webpack)

En los pasos siguientes se describe cómo configurar la aplicación para usar monaco-kusto mediante webpack. El punto de entrada predeterminado de un proyecto es el archivo src/index.js y el archivo de configuración predeterminado es el archivo src/webpack.config.js . En los pasos siguientes se supone que usa la configuración predeterminada del proyecto webpack para agrupar la aplicación.

1. En el archivo de configuración, agregue los siguientes fragmentos de código:

   1. En resolve.alias, agregue los siguientes alias:

      'vs/language/kusto/kustoMode': 'kustoMode',
      'bridge.min': '@kusto/monaco-kusto/release/esm/bridge.min',
      'kusto.javascript.client.min': '@kusto/monaco-kusto/release/esm/kusto.javascript.client.min.js',
      'Kusto.Language.Bridge.min': '@kusto/monaco-kusto/release/esm/Kusto.Language.Bridge.min.js',
      'Kusto': '@kusto/monaco-kusto/release/esm/Kusto.Language.Bridge.min.js',
      'monaco.contribution': '@kusto/monaco-kusto/release/esm/monaco.contribution'
      

   2. En module.rules, agregue los siguientes cargadores y dependencias:

      // Loaders
      { test: /bridge\.js/, parser: { system: false } },
      { test: /kusto\.javascript\.client\.min\.js/, parser: { system: false } },
      { test: /Kusto\.Language\.Bridge\.min\.js/, parser: { system: false } },
      { test: /kustoLanguageService/, parser: { system: false } },
      // Dependencies
      { test: /Kusto\.Language\.Bridge\.min/, loader: 'exports-loader?window.Kusto!imports-loader?bridge.min,kusto.javascript.client.min' },
      { test: /kustoMonarchLanguageDefinition/, loader: 'imports-loader?Kusto' },
      

   3. En entrada, agregue el siguiente punto de entrada. Anote la ruta de acceso de trabajo devuelta, la necesitará más adelante.

      `@kusto/monaco-kusto/release/esm/kusto.worker.js`
      

2. En el archivo KustoLanguageService-loader.js , agregue el siguiente cargador personalizado. Reemplaza el uso de en el archivo de importScripts configuración:

   module.exports = function loader(source) {
       source = `var Kusto = require("@kusto/language-service-next/Kusto.Language.Bridge.min");\n${source}`;
   
       return source.replace(/importScripts.*/g,'');;
   }
   

3. En la aplicación, agregue el código siguiente:

   1. Defina la función MonacoEnvironment en el window objeto . Reemplace <path_and_full_name_of_kusto_worker> por la ruta de acceso de trabajo que anotó anteriormente.

      window.MonacoEnvironment = { globalAPI: true, getWorkerUrl: function() { return "<path_and_full_name_of_kusto_worker>"} };
      

   2. Cree el monaco.editor objeto a partir de un elemento HTML:

      this.editor = monaco.editor.create(editorElement, editorConfig)
      

   3. Llame a la monaco.contribution API para registrar el idioma kusto:

      import('monaco.contribution').then(async (contribution: any) => {
          const model = this.monaco && this.monaco.editor.createModel("", 'kusto');
          this.editor.setModel(model);
          const workerAccessor: monaco.languages.kusto.WorkerAccessor = await monaco.languages.kusto.getKustoWorker();
          const worker: monaco.languages.kusto.KustoWorker = await workerAccessor(model.uri);
      })
      

Adición del esquema de la base de datos al editor

El paquete monaco-kusto proporciona una manera de agregar el esquema de la base de datos al editor. El esquema permite al editor proporcionar sugerencias de autocompletar y otras características.

Use la siguiente estructura para definir el esquema:

const schema = {... <YOUR_DATABASE_SCHEMA> ...};

export function setSchema(editor) {
  window.monaco.languages.kusto.getKustoWorker().then((workerAccessor) => {
    const model = editor.getModel();
    workerAccessor(model.uri).then((worker) => {
      //EITHER: Set schema from a show schema command
      // worker.setSchemaFromShowSchema(
      //     schema,
      //     clusterURI,
      //     database
      // );
      //OR: Set schema from a manually created schema
      // worker.setSchema(schema);
    });
  });
}

Puede obtener el esquema de la base de datos mediante uno de los métodos siguientes:

Desde el clúster

1. En la interfaz de usuario web de Azure Data Explorer, en el menú izquierdo, seleccione Consulta.

2. Seleccione la base de datos para la que desea crear un esquema.

3. En la ventana de consulta, ejecute la consulta siguiente:

   .show schema as json
   

4. Copie el resultado de la consulta y péguelo como constante de esquema . El resultado de la consulta es una lista de bases de datos (vea la interfaz Result en el archivo schema.ts ).

5. Use el setSchemaFromShowSchema() método para establecer el esquema en el editor. También debe especificar el URI del clúster y el nombre de la base de datos que se va a usar en el editor.

Crear manualmente

1. Cree un objeto de esquema que contenga el esquema de la base de datos. Para obtener más información, vea la clusterType interfaz en el archivo src/schema.ts . En el ejemplo siguiente se muestra un objeto de esquema que contiene una base de datos única y una tabla única:

   {
     "clusterType":"Engine",
     "cluster":{
       "connectionString":"<CONNECTION_STRING>",
       "databases":[ {
         "database": {
           "name": "<DATABASE_NAME>",
           "majorVersion": 5,
           "minorVersion": 0,
           "tables": [ {
             "name": "<TABLE_NAME>",
             "entityType": "Table",
             "columns": [ {
               "name": "<COLUMN_NAME>",
               "type": "<COLUMN_TYPE>"
             }, ... ]
           }, ... ]
         }
       }, ... ]
     },
     // Defines schema for the required database.
     // The schema must also be defined in the cluster object.
     "database": {
       "name": "<DATABASE_NAME>",
       "majorVersion": 5,
       "minorVersion": 0,
       "tables": [ {
         "name": "<TABLE_NAME>",
         "entityType": "Table",
         "columns": [ {
           "name": "<COLUMN_NAME>",
           "type": "<COLUMN_TYPE>"
         }, ... ]
       }, ... ]
     }
   }
   

2. Use el setSchema() método para establecer el esquema en el editor.

Proyecto de ejemplo

Puede encontrar un proyecto de ejemplo que use el paquete monaco-kusto . Para usar el ejemplo, clone el repositorio monaco-kusto de GitHub. Encontrará el ejemplo en la carpeta samples/react .

Configuración y prueba del proyecto de ejemplo

Ejecute los siguientes comandos desde la raíz del repositorio clonado:

1. Instale las dependencias y compile el proyecto:

   npm install
   

2. Compruebe que el proyecto funciona. Si se ejecuta correctamente, se abrirá el index.html .

   npm run watch
   

Contenido relacionado

• Información general del Lenguaje de consulta de Kusto (KQL)
• Escritura de consultas de Kusto