Integrare l'editor monaco con il supporto di Linguaggio di query Kusto nell'app

È possibile integrare l'editor monaco con Linguaggio di query Kusto supporto (monaco-kusto) nell'app. L'integrazione di monaco-kusto nell'app offre un'esperienza di modifica, ad esempio il completamento, la colorazione, il refactoring, la ridenominazione e la definizione go-to-definition. È necessario creare una soluzione per l'autenticazione, l'esecuzione di query, la visualizzazione dei risultati e l'esplorazione dello schema. Offre una flessibilità completa per modellare l'esperienza utente adatta alle proprie esigenze.

In questo articolo si apprenderà come aggiungere monaco-kusto all'editor di Monaco e integrarlo nell'app. Il pacchetto è disponibile in GitHub e in npm.

Seguire questa procedura per integrare monaco-kusto nell'app usando npm.

Passaggio 1: Installare il pacchetto monaco-kusto

Passaggio 2: Configurare l'app per usare il pacchetto monaco-kusto

Passaggio 3: Aggiungere lo schema del database all'editor

Provare l'integrazione con il progetto Di esempio!

Prerequisiti

• Node.js (v6.10.3 o versione successiva)

Installare il pacchetto monaco-kusto

1. Installare il pacchetto npm editor di Monaco:

   npm i monaco-editor
   

   Nota

   Per personalizzare l'editor di Monaco nativo, vedere Repository GitHub editor di Monaco.

2. Installare il pacchetto monaco-kusto npm:

   npm i @kusto/monaco-kusto
   

Configurare l'app per usare il pacchetto monaco-kusto

È possibile configurare l'app per usare monaco-kusto usando uno dei metodi seguenti:

Sistema del modulo AMD

1. Aggiungere il codice HTML seguente alle pagine in cui viene usato l'editor di Monaco, ad esempio il file index.html . Sono necessari a causa di una dipendenza che il pacchetto ha su 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. Copiare i file statici dai pacchetti monaco emonaco-kusto nella cartella monaco-editor nel server Web. L'app dovrà accedere a questi file statici.

3. Usare monaco per caricarli. Per esempi, vedere gli esempi.

ESM (webpack)

I passaggi seguenti descrivono come configurare l'app per usare monaco-kusto usando webpack. Il punto di ingresso predefinito per un progetto è il file src/index.js e il file di configurazione predefinito è il file src/webpack.config.js . I passaggi seguenti presuppongono che si usi la configurazione predefinita del progetto Webpack per raggruppare l'app.

1. Nel file di configurazione aggiungere i frammenti seguenti:

   1. In resolve.alias aggiungere gli alias seguenti:

      '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. In module.rules aggiungere i caricatori e le dipendenze seguenti:

      // 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. In voce aggiungere il punto di ingresso seguente. Prendere nota del percorso di lavoro restituito, sarà necessario in un secondo momento.

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

2. Nel file KustoLanguageService-loader.js aggiungere il caricatore personalizzato seguente. Sostituisce l'uso di nel file di importScripts configurazione:

   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. Nell'app aggiungere il codice seguente:

   1. Definire la funzione MonacoEnvironment nell'oggetto window . Sostituire <path_and_full_name_of_kusto_worker> con il percorso di lavoro indicato in precedenza.

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

   2. Creare l'oggetto monaco.editor da un elemento HTML:

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

   3. Chiamare l'API per registrare il monaco.contribution linguaggio 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);
      })
      

Aggiungere lo schema del database all'editor

Il pacchetto monaco-kusto consente di aggiungere lo schema del database all'editor. Lo schema consente all'editor di fornire suggerimenti completi automatici e altre funzionalità.

Usare la struttura seguente per definire lo schema:

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);
    });
  });
}

È possibile ottenere lo schema del database usando uno dei metodi seguenti:

Dal cluster

1. Nel menu a sinistra dell'interfaccia utente Web di Azure Esplora dati selezionare Query.

2. Selezionare il database per il quale si vuole creare uno schema.

3. Nella finestra della query eseguire la query seguente:

   .show schema as json
   

4. Copiare il risultato della query e incollarlo come costante dello schema . Il risultato della query è un elenco di database (vedere l'interfaccia Result nel file schema.ts ).

5. Usare il metodo per impostare lo setSchemaFromShowSchema() schema nell'editor. È anche necessario specificare l'URI del cluster e il nome del database da usare nell'editor.

Creare manualmente

1. Creare un oggetto schema contenente lo schema del database. Per altre informazioni, vedere l'interfaccia clusterType nel file src/schema.ts . Nell'esempio seguente viene illustrato un oggetto schema che contiene un singolo database e una singola tabella:

   {
     "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. Usare il metodo per impostare lo setSchema() schema nell'editor.

Progetto di esempio

È possibile trovare un progetto di esempio che usa il pacchetto monaco-kusto . Per usare l'esempio, clonare il repository GitHub monaco-kusto. Si troverà l'esempio nella cartella samples/react .

Configurare e testare il progetto di esempio

Eseguire i comandi seguenti dalla radice del repository clonato:

1. Installare le dipendenze e compilare il progetto:

   npm install
   

2. Verificare che il progetto funzioni. In caso di esito positivo, il index.html verrà aperto.

   npm run watch
   

Contenuti correlati

• Panoramica del Linguaggio di query Kusto (KQL)
• Scrivere query Kusto