De Monaco Editor integreren met Kusto-querytaal ondersteuning in uw app

U kunt de Monaco Editor met Kusto-querytaal-ondersteuning (monaco-kusto) integreren in uw app. Integratie van monaco-kusto in uw app biedt u een bewerkingservaring zoals voltooiing, inkleuring, herstructureren, hernoemen en go-to-definition. Hiervoor moet u een oplossing bouwen voor verificatie, query-uitvoering, weergave van resultaten en schemaverkenning. Het biedt u volledige flexibiliteit om de gebruikerservaring aan te passen die aan uw behoeften voldoet.

In dit artikel leert u hoe u monaco-kusto toevoegt aan de Monaco-editor en deze integreert in uw app. Het pakket is beschikbaar op GitHub en op npm.

Gebruik de volgende stappen om monaco-kusto te integreren in uw app met behulp van npm.

Stap 1: het monaco-kusto-pakket installeren

Stap 2: uw app instellen voor het gebruik van het monaco-kusto-pakket

Stap 3: Uw databaseschema toevoegen aan de editor

Probeer de integratie met ons Voorbeeldproject!

Vereisten

• Node.js (v6.10.3 of hoger)

Installeer het monaco-kusto-pakket

1. Installeer het npm-pakket van de Monaco-editor:

   npm i monaco-editor
   

   Notitie

   Zie Monaco Editor GitHub-opslagplaats als u de systeemeigen Monaco-editor wilt aanpassen.

2. Installeer het npm-pakket monaco-kusto :

   npm i @kusto/monaco-kusto
   

Uw app instellen voor het gebruik van het monaco-kusto-pakket

U kunt uw app op een van de volgende manieren instellen voor het gebruik van monaco-kusto :

AMD-modulesysteem

1. Voeg de volgende HTML toe aan pagina's waarop de Monaco-editor wordt gebruikt, zoals uw index.html-bestand . Ze zijn vereist vanwege een afhankelijkheid van het pakket op 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. Kopieer de statische bestanden van de pakketten monaco en monaco-kusto naar de map monaco-editor op uw webserver. Uw app moet toegang hebben tot deze statische bestanden.

3. Gebruik monaco om ze te laden. Zie de voorbeelden voor voorbeelden.

ESM (webpack)

In de volgende stappen wordt beschreven hoe u uw app instelt voor het gebruik van monaco-kusto met behulp van webpack. Het standaardinvoerpunt voor een project is het bestand src/index.js en het standaardconfiguratiebestand is het bestand src/webpack.config.js . Bij de volgende stappen wordt ervan uitgegaan dat u de standaardinstelling van het webpack-project gebruikt om uw app te bundelen.

1. Voeg in het configuratiebestand de volgende fragmenten toe:

   1. Voeg onder resolve.alias de volgende aliassen toe:

      '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. Voeg onder module.rules de volgende loaders en afhankelijkheden toe:

      // 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. Voeg onder vermelding het volgende invoerpunt toe. Noteer het geretourneerde werkpad. U hebt dit later nodig.

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

2. Voeg in het bestandKustoLanguageService-loader.js het volgende aangepaste laadprogramma toe. Het vervangt het gebruik van importScripts in het configuratiebestand:

   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. Voeg in uw app de volgende code toe:

   1. Definieer de functie MonacoEnvironment voor uw window object. Vervang door <path_and_full_name_of_kusto_worker> het werkpad dat u eerder hebt genoteerd.

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

   2. Maak het monaco.editor object op basis van een HTML-element:

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

   3. Roep de monaco.contribution API aan om de Kusto-taal te registreren:

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

Uw databaseschema toevoegen aan de editor

Het monaco-kusto-pakket biedt een manier om uw databaseschema toe te voegen aan de editor. Met het schema kan de editor suggesties voor automatisch aanvullen en andere functies bieden.

Gebruik de volgende structuur om het schema te definiëren:

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

U kunt uw databaseschema op een van de volgende manieren ophalen:

Vanuit uw cluster

1. Selecteer in de webinterface van Azure Data Explorer in het menu links de optie Query.

2. Selecteer de database waarvoor u een schema wilt maken.

3. Voer in het queryvenster de volgende query uit:

   .show schema as json
   

4. Kopieer het resultaat van de query en plak deze als de schemaconstante . Het resultaat van de query is een lijst met databases (zie interface Result in het bestand schema.ts ).

5. Gebruik de setSchemaFromShowSchema() methode om het schema in de editor in te stellen. U moet ook de cluster-URI en de naam van de database opgeven die in de editor moet worden gebruikt.

Handmatig maken

1. Maak een schemaobject dat het databaseschema bevat. Zie de interface in het clusterType bestand src/schema.ts voor meer informatie. In het volgende voorbeeld ziet u een schemaobject dat één database en één tabel bevat:

   {
     "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. Gebruik de setSchema() methode om het schema in de editor in te stellen.

Voorbeeldproject

U kunt een voorbeeldproject vinden dat gebruikmaakt van het monaco-kusto-pakket . Als u het voorbeeld wilt gebruiken, kloont u de github-opslagplaats monaco-kusto. U vindt het voorbeeld in de map samples/react .

Uw voorbeeldproject instellen en testen

Voer de volgende opdrachten uit vanuit de hoofdmap van de gekloonde opslagplaats:

1. Installeer afhankelijkheden en bouw het project:

   npm install
   

2. Controleer of het project werkt. Als dit lukt, wordt de index.html geopend.

   npm run watch
   

Gerelateerde inhoud

• Overzicht van Kusto Query Language (KQL)
• Kusto-query's schrijven