Intégrer l’éditeur Monaco à Langage de requête Kusto support dans votre application
Vous pouvez intégrer l’éditeur Monaco avec Langage de requête Kusto support (monaco-kusto) dans votre application. L’intégration de monaco-kusto dans votre application vous offre une expérience de modification telle que la saisie semi-automatique, la colorisation, la refactorisation, le renommage et la définition d’accès. Vous devez créer une solution pour l’authentification, l’exécution des requêtes, l’affichage des résultats et l’exploration de schéma. Il vous offre une flexibilité totale pour créer l’expérience utilisateur qui correspond à vos besoins.
Dans cet article, vous allez apprendre à ajouter monaco-kusto à l’éditeur Monaco et à l’intégrer à votre application. Le package est disponible sur GitHub et sur npm.
Suivez les étapes suivantes pour intégrer monaco-kusto à votre application à l’aide de npm.
Étape 1 : Installer le package monaco-kusto
Étape 2 : Configurer votre application pour utiliser le package monaco-kusto
Étape 3 : Ajouter votre schéma de base de données à l’éditeur
Essayez l’intégration à notre exemple de projet !
Prérequis
- Node.js (v6.10.3 ou version ultérieure)
Installer le package monaco-kusto
Installez le package Monaco Editor npm :
npm i monaco-editor
Notes
Pour personnaliser l’éditeur Monaco natif, consultez référentiel GitHub de l’éditeur Monaco.
Installez le package monaco-kusto npm :
npm i @kusto/monaco-kusto
Configurer votre application pour utiliser le package monaco-kusto
Vous pouvez configurer votre application pour utiliser monaco-kusto à l’aide de l’une des méthodes suivantes :
Ajoutez le code HTML suivant aux pages où l’éditeur Monaco est utilisé, comme votre fichier index.html . Elles sont requises en raison d’une dépendance du package sur
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>
Copiez les fichiers statiques des packages monaco et monaco-kusto dans le dossier monaco-editor sur votre serveur web. Votre application doit accéder à ces fichiers statiques.
Utilisez monaco pour les charger. Pour obtenir des exemples, consultez les exemples.
Ajouter votre schéma de base de données à l’éditeur
Le package monaco-kusto permet d’ajouter votre schéma de base de données à l’éditeur. Le schéma permet à l’éditeur de fournir des suggestions de saisie semi-automatique et d’autres fonctionnalités.
Utilisez la structure suivante pour définir le schéma :
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);
});
});
}
Vous pouvez obtenir votre schéma de base de données à l’aide de l’une des méthodes suivantes :
Dans l’interface utilisateur web Azure Data Explorer, dans le menu de gauche, sélectionnez Requête.
Sélectionnez la base de données pour laquelle vous souhaitez créer un schéma.
Dans la fenêtre de requête, exécutez la requête suivante :
.show schema as json
Copiez le résultat de la requête et collez-le en tant que constante de schéma . Le résultat de la requête est une liste de bases de données (voir l’interface
Result
dans le fichier schema.ts ).Utilisez la
setSchemaFromShowSchema()
méthode pour définir le schéma dans l’éditeur. Vous devez également spécifier l’URI de cluster et le nom de la base de données à utiliser dans l’éditeur.
Exemple de projet
Vous trouverez un exemple de projet qui utilise le package monaco-kusto . Pour utiliser l’exemple, clonez le référentiel GitHub monaco-kusto. Vous trouverez l’exemple dans le dossier samples/react .
Configurer et tester votre exemple de projet
Exécutez les commandes suivantes à partir de la racine du référentiel cloné :
Installez les dépendances et générez le projet :
npm install
Vérifiez que le projet fonctionne. En cas de réussite, le index.htmls’ouvre .
npm run watch
Contenu connexe
Commentaires
https://aka.ms/ContentUserFeedback.
Bientôt disponible : Tout au long de l’année 2024, nous abandonnerons progressivement le mécanisme de retour d’information GitHub Issues pour le remplacer par un nouveau système de commentaires. Pour plus d’informations, consultez :Soumettre et afficher des commentaires pour