Mengintegrasikan Editor Monako dengan dukungan Bahasa Kueri Kusto di aplikasi Anda

Anda dapat mengintegrasikan Monaco Editor dengan dukungan Bahasa Kueri Kusto (monaco-kusto) ke dalam aplikasi Anda. Mengintegrasikan monaco-kusto ke dalam aplikasi Anda menawarkan pengalaman pengeditan seperti penyelesaian, pewarnaan, pemfaktoran ulang, penggantian nama, dan masuk ke definisi. Ini mengharuskan Anda untuk membangun solusi untuk autentikasi, eksekusi kueri, tampilan hasil, dan eksplorasi skema. Ini menawarkan fleksibilitas penuh untuk membuat pengalaman pengguna yang sesuai dengan kebutuhan Anda.

Dalam artikel ini, Anda akan mempelajari cara menambahkan monaco-kusto ke Editor Monako dan mengintegrasikannya ke dalam aplikasi Anda. Paket tersedia di GitHub dan pada npm.

Gunakan langkah-langkah berikut untuk mengintegrasikan monaco-kusto ke dalam aplikasi Anda menggunakan npm.

Langkah 1: Instal paket monaco-kusto

Langkah 2: Siapkan aplikasi Anda untuk menggunakan paket monaco-kusto

Langkah 3: Menambahkan skema database Anda ke editor

Cobalah integrasi dengan proyek Sampel kami!

Prasyarat

• Node.js (v6.10.3 atau yang lebih baru)

Menginstal paket monaco-kusto

1. Instal paket npm Editor Monaco:

   npm i monaco-editor
   

   Catatan

   Untuk menyesuaikan Editor Monako asli, lihat Repositori GitHub Editor Monaco.

2. Instal paket npm monaco-kusto :

   npm i @kusto/monaco-kusto
   

Menyiapkan aplikasi Anda untuk menggunakan paket monaco-kusto

Anda dapat menyiapkan aplikasi untuk menggunakan monaco-kusto menggunakan salah satu metode berikut:

Sistem modul AMD

1. Tambahkan HTML berikut ke halaman tempat Editor Monako digunakan, seperti file index.html Anda. Mereka diperlukan karena dependensi yang dimiliki paket pada 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. Salin file statis dari paket monaco dan monaco-kusto ke folder monaco-editor di server web Anda. Aplikasi Anda harus mengakses file statis ini.

3. Gunakan monako untuk memuatnya. Misalnya, lihat sampel.

ESM (webpack)

Langkah-langkah berikut menjelaskan cara menyiapkan aplikasi Anda untuk menggunakan monaco-kusto menggunakan webpack. Titik masuk default untuk proyek adalah file src/index.js dan file konfigurasi default adalah file src/webpack.config.js . Langkah-langkah berikut mengasumsikan bahwa Anda menggunakan penyiapan proyek webpack default untuk menggabungkan aplikasi Anda.

1. Dalam file konfigurasi, tambahkan cuplikan berikut:

   1. Di bawah resolve.alias, tambahkan alias berikut:

      '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. Di bawah module.rules, tambahkan loader dan dependensi berikut:

      // 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. Di bawah entri, tambahkan titik entri berikut. Catat jalur pekerja yang dikembalikan, Anda akan membutuhkannya nanti.

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

2. Dalam file KustoLanguageService-loader.js , tambahkan pemuat kustom berikut. Ini menggantikan penggunaan importScripts dalam file konfigurasi:

   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. Di aplikasi Anda, tambahkan kode berikut:

   1. Tentukan fungsi MonacoEnvironment pada objek Anda window . Ganti <path_and_full_name_of_kusto_worker> dengan jalur pekerja yang Anda catat sebelumnya.

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

   2. monaco.editor Buat objek dari elemen HTML:

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

   3. monaco.contribution Panggil API untuk mendaftarkan bahasa 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);
      })
      

Menambahkan skema database Anda ke editor

Paket monaco-kusto menyediakan cara untuk menambahkan skema database Anda ke editor. Skema ini memungkinkan editor untuk memberikan saran lengkapi otomatis dan fitur lainnya.

Gunakan struktur berikut untuk menentukan skema:

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

Anda bisa mendapatkan skema database Anda menggunakan salah satu metode berikut:

Dari kluster Anda

1. Di antarmuka pengguna web Azure Data Explorer, di menu sebelah kiri, pilih Kueri.

2. Pilih database yang ingin Anda buat skemanya.

3. Di jendela kueri, jalankan kueri berikut ini:

   .show schema as json
   

4. Salin hasil kueri dan tempelkan sebagai konstanta skema . Hasil kueri adalah daftar database (lihat antarmuka Result dalam file schema.ts ).

5. setSchemaFromShowSchema() Gunakan metode untuk mengatur skema di editor. Anda juga harus menentukan URI kluster dan nama database yang akan digunakan di editor.

Membuat secara manual

1. Buat objek skema yang berisi skema database. Untuk informasi selengkapnya, lihat clusterType antarmuka dalam file src/schema.ts . Contoh berikut menunjukkan objek skema yang berisi database tunggal dan satu tabel:

   {
     "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. setSchema() Gunakan metode untuk mengatur skema di editor.

Sampel proyek

Anda dapat menemukan proyek sampel yang menggunakan paket monaco-kusto . Untuk menggunakan sampel, kloning repositori GitHub monaco-kusto. Anda akan menemukan sampel di folder samples/react .

Menyiapkan dan menguji proyek sampel Anda

Jalankan perintah berikut dari akar repositori kloning:

1. Instal dependensi dan bangun proyek:

   npm install
   

2. Verifikasi bahwa proyek berfungsi. Jika berhasil, index.html akan terbuka.

   npm run watch
   

Konten terkait

• Gambaran umum Bahasa Kueri Kusto (KQL)
• Menulis kueri Kusto