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

1. 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.

2. 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 :

Système de module AMD

1. 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>
   

2. 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.

3. Utilisez monaco pour les charger. Pour obtenir des exemples, consultez les exemples.

ESM (webpack)

Les étapes suivantes décrivent comment configurer votre application pour utiliser monaco-kusto à l’aide de webpack. Le point d’entrée par défaut d’un projet est le fichier src/index.js et le fichier de configuration par défaut est le fichier src/webpack.config.js . Les étapes suivantes supposent que vous utilisez la configuration de projet webpack par défaut pour regrouper votre application.

1. Dans le fichier de configuration, ajoutez les extraits de code suivants :

   1. Sous resolve.alias, ajoutez les alias suivants :

      '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. Sous module.rules, ajoutez les chargeurs et dépendances suivants :

      // 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. Sous entrée, ajoutez le point d’entrée suivant. Notez le chemin d’accès de worker retourné. Vous en aurez besoin ultérieurement.

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

2. Dans le fichier KustoLanguageService-loader.js , ajoutez le chargeur personnalisé suivant. Il remplace l’utilisation de dans le fichier de importScripts configuration :

   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. Dans votre application, ajoutez le code suivant :

   1. Définissez la fonction MonacoEnvironment sur votre window objet. Remplacez par <path_and_full_name_of_kusto_worker> le chemin d’accès worker que vous avez noté précédemment.

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

   2. Créez l’objet monaco.editor à partir d’un élément HTML :

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

   3. Appelez l’API monaco.contribution pour inscrire la langue 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);
      })
      

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 :

À partir de votre cluster

1. Dans l’interface utilisateur web Azure Data Explorer, dans le menu de gauche, sélectionnez Requête.

2. Sélectionnez la base de données pour laquelle vous souhaitez créer un schéma.

3. Dans la fenêtre de requête, exécutez la requête suivante :

   .show schema as json
   

4. 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 ).

5. 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.

Créer manuellement

1. Créez un objet de schéma qui contient le schéma de base de données. Pour plus d’informations, consultez l’interface clusterType dans le fichier src/schema.ts . L’exemple suivant montre un objet de schéma qui contient une base de données unique et une seule table :

   {
     "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. Utilisez la setSchema() méthode pour définir le schéma 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é :

1. Installez les dépendances et générez le projet :

   npm install
   

2. Vérifiez que le projet fonctionne. En cas de réussite, le index.htmls’ouvre .

   npm run watch
   

Contenu connexe

• Vue d’ensemble du Langage de requête Kusto (KQL)
• Écrire des requêtes Kusto