Integrieren des Monaco-Editors in Kusto-Abfragesprache Unterstützung in Ihre App

Sie können den Monaco Editor mit Kusto-Abfragesprache Support (monaco-kusto) in Ihre App integrieren. Die Integration von monaco-kusto in Ihre App bietet Ihnen eine Bearbeitungserfahrung wie Vervollständigung, Farbgebung, Refactoring, Umbenennung und Go-to-Definition. Sie müssen eine Lösung für Authentifizierung, Abfrageausführung, Ergebnisanzeige und Schemauntersuchung erstellen. Es bietet Ihnen die volle Flexibilität, um die Benutzererfahrung zu gestalten, die Ihren Anforderungen entspricht.

In diesem Artikel erfahren Sie, wie Sie monaco-kusto dem Monaco Editor hinzufügen und in Ihre App integrieren. Das Paket ist auf GitHub und auf npm verfügbar.

Führen Sie die folgenden Schritte aus, um monaco-kusto mithilfe von npm in Ihre App zu integrieren.

Schritt 1: Installieren des monaco-kusto-Pakets

Schritt 2: Einrichten Ihrer App für die Verwendung des monaco-kusto-Pakets

Schritt 3: Hinzufügen Ihres Datenbankschemas zum Editor

Testen Sie die Integration mit unserem Beispielprojekt!

Voraussetzungen

• Node.js (v6.10.3 oder höher)

Installieren des monaco-kusto-Pakets

1. Installieren Sie das Npm-Paket Monaco Editor:

   npm i monaco-editor
   

   Hinweis

   Informationen zum Anpassen des nativen Monaco-Editors finden Sie unter GitHub-Repository "Monaco Editor".

2. Installieren Sie das npm-Paket monaco-kusto :

   npm i @kusto/monaco-kusto
   

Einrichten Ihrer App für die Verwendung des monaco-kusto-Pakets

Sie können Ihre App für die Verwendung von monaco-kusto mit einer der folgenden Methoden einrichten:

AMD-Modulsystem

1. Fügen Sie den folgenden HTML-Code zu Seiten hinzu, auf denen der Monaco-Editor verwendet wird, z. B. Ihrer index.html-Datei . Sie sind aufgrund einer Abhängigkeit erforderlich, die das Paket von aufweist 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. Kopieren Sie die statischen Dateien aus den Paketen monaco und monaco-kusto in den Ordner monaco-editor auf Ihrem Webserver. Ihre App muss auf diese statischen Dateien zugreifen.

3. Verwenden Sie monaco, um sie zu laden. Beispiele finden Sie in den Beispielen.

ESM (Webpack)

In den folgenden Schritten wird beschrieben, wie Sie Ihre App für die Verwendung von monaco-kusto mithilfe von Webpack einrichten. Der Standardeinstiegspunkt für ein Projekt ist die src/index.js-Datei , und die Standardkonfigurationsdatei ist die src/webpack.config.js-Datei . Bei den folgenden Schritten wird davon ausgegangen, dass Sie das standardmäßige Webpack-Projektsetup verwenden, um Ihre App zu bündeln.

1. Fügen Sie in der Konfigurationsdatei die folgenden Codeausschnitte hinzu:

   1. Fügen Sie unter resolve.alias die folgenden Aliase hinzu:

      '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. Fügen Sie unter module.rules die folgenden Ladeprogramme und Abhängigkeiten hinzu:

      // 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. Fügen Sie unter eintrag den folgenden Einstiegspunkt hinzu. Notieren Sie sich den zurückgegebenen Workerpfad, den Sie später benötigen.

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

2. Fügen Sie in der dateiKustoLanguageService-loader.js das folgende benutzerdefinierte Ladeprogramm hinzu. Er ersetzt die Verwendung von importScripts in der Konfigurationsdatei:

   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. Fügen Sie in Ihrer App den folgenden Code hinzu:

   1. Definieren Sie die MonacoEnvironment-Funktion für Ihr window Objekt. Ersetzen Sie durch <path_and_full_name_of_kusto_worker> den zuvor notierten Workerpfad.

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

   2. Erstellen Sie das monaco.editor -Objekt aus einem HTML-Element:

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

   3. Rufen Sie die monaco.contribution API auf, um die Kusto-Sprache zu registrieren:

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

Hinzufügen Ihres Datenbankschemas zum Editor

Das Paket monaco-kusto bietet eine Möglichkeit zum Hinzufügen Ihres Datenbankschemas zum Editor. Das Schema ermöglicht es dem Editor, Vorschläge für die automatische Vervollständigung und andere Features bereitzustellen.

Verwenden Sie die folgende Struktur, um das Schema zu definieren:

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

Sie können Ihr Datenbankschema mit einer der folgenden Methoden abrufen:

Aus Ihrem Cluster

1. Wählen Sie auf der Azure Data Explorer-Weboberfläche im linken Menü die Option Abfrage aus.

2. Wählen Sie die Datenbank aus, für die Sie ein Schema erstellen möchten.

3. Führen Sie im Abfragefenster die folgende Abfrage aus:

   .show schema as json
   

4. Kopieren Sie das Ergebnis der Abfrage, und fügen Sie es als Schemakonstante ein. Das Ergebnis der Abfrage ist eine Liste der Datenbanken (siehe Schnittstelle Result in der Datei schema.ts ).

5. Verwenden Sie die setSchemaFromShowSchema() -Methode, um das Schema im Editor festzulegen. Sie müssen auch den Cluster-URI und den Namen der Datenbank angeben, die im Editor verwendet werden soll.

Manuelles Erstellen

1. Erstellen Sie ein Schemaobjekt, das das Datenbankschema enthält. Weitere Informationen finden Sie in der clusterType -Schnittstelle in der Datei src/schema.ts . Das folgende Beispiel zeigt ein Schemaobjekt, das eine einzelne Datenbank und eine einzelne Tabelle enthält:

   {
     "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. Verwenden Sie die setSchema() -Methode, um das Schema im Editor festzulegen.

Beispielprojekt

Sie finden ein Beispielprojekt, das das Paket monaco-kusto verwendet. Um das Beispiel zu verwenden, klonen Sie das GitHub-Repository monaco-kusto. Sie finden das Beispiel im Ordner samples/react .

Einrichten und Testen Ihres Beispielprojekts

Führen Sie die folgenden Befehle im Stammverzeichnis des geklonten Repositorys aus:

1. Installieren Sie Abhängigkeiten, und erstellen Sie das Projekt:

   npm install
   

2. Überprüfen Sie, ob das Projekt funktioniert. Bei erfolgreicher Ausführung wird die index.html geöffnet.

   npm run watch
   

Verwandte Inhalte

• Kusto Query Language (KQL) – Übersicht
• Schreiben von Kusto-Abfragen