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
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".
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:
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>
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.
Verwenden Sie monaco, um sie zu laden. Beispiele finden Sie in den Beispielen.
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:
Wählen Sie auf der Azure Data Explorer-Weboberfläche im linken Menü die Option Abfrage aus.
Wählen Sie die Datenbank aus, für die Sie ein Schema erstellen möchten.
Führen Sie im Abfragefenster die folgende Abfrage aus:
.show schema as json
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 ).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.
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:
Installieren Sie Abhängigkeiten, und erstellen Sie das Projekt:
npm install
Überprüfen Sie, ob das Projekt funktioniert. Bei erfolgreicher Ausführung wird die index.html geöffnet.
npm run watch
Verwandte Inhalte
Feedback
https://aka.ms/ContentUserFeedback.
Bald verfügbar: Im Laufe des Jahres 2024 werden wir GitHub-Issues stufenweise als Feedbackmechanismus für Inhalte abbauen und durch ein neues Feedbacksystem ersetzen. Weitere Informationen finden Sie unterFeedback senden und anzeigen für