Monaco Düzenleyicisi'ni uygulamanızda Kusto Sorgu Dili desteğiyle tümleştirme

Monako Düzenleyicisi'ni Kusto Sorgu Dili desteğiyle (monaco-kusto) uygulamanıza tümleştirebilirsiniz. Monaco-kusto'yu uygulamanızla tümleştirerek tamamlama, renklendirme, yeniden düzenleme, yeniden adlandırma ve tanıma gitme gibi bir düzenleme deneyimi sunar. Kimlik doğrulaması, sorgu yürütme, sonuç görüntüleme ve şema keşfi için bir çözüm oluşturmanız gerekir. İhtiyaçlarınıza uygun kullanıcı deneyimine tam esneklik sunar.

Bu makalede Monaco Düzenleyicisi'ne monaco-kusto eklemeyi ve uygulamanıza tümleştirmeyi öğreneceksiniz. Paket GitHub'da ve npm'de kullanılabilir.

monaco-kusto'yunpm kullanarak uygulamanızla tümleştirmek için aşağıdaki adımları kullanın.

1. Adım: Monaco-kusto paketini yükleme

2. Adım: Uygulamanızı monaco-kusto paketini kullanacak şekilde ayarlama

3. Adım: Veritabanı şemanızı düzenleyiciye ekleme

Örnek projemizle tümleştirmeyi deneyin!

Önkoşullar

• Node.js (v6.10.3 veya üzeri)

monaco-kusto paketini yükleme

1. Monaco Editor npm paketini yükleyin:

   npm i monaco-editor
   

   Not

   Yerel Monako Düzenleyicisi'ni özelleştirmek için bkz. Monaco Düzenleyicisi GitHub deposu.

2. monaco-kusto npm paketini yükleyin:

   npm i @kusto/monaco-kusto
   

Uygulamanızı monaco-kusto paketini kullanacak şekilde ayarlama

Uygulamanızı aşağıdaki yöntemlerden birini kullanarak monaco-kusto kullanacak şekilde ayarlayabilirsiniz:

AMD modül sistemi

1. index.html dosyanız gibi Monaco Düzenleyicisi'nin kullanıldığı sayfalara aşağıdaki HTML'yi ekleyin. Bunlar, paketin üzerinde kusto-language-servicesahip olduğu bir bağımlılık nedeniyle gereklidir.

   <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. Monaco ve monaco-kusto paketlerinden statik dosyaları web sunucunuzdaki monaco-editor klasörüne kopyalayın. Uygulamanızın bu statik dosyalara erişmesi gerekir.

3. Bunları yüklemek için monaco kullanın. Örnekler için örneklere bakın.

ESM (webpack)

Aşağıdaki adımlarda webpack kullanarak monaco-kusto kullanmak için uygulamanızın nasıl ayarlanacağı açıklanmaktadır. Projenin varsayılan giriş noktası src/index.js dosyası, varsayılan yapılandırma dosyası ise src/webpack.config.js dosyasıdır. Aşağıdaki adımlarda, uygulamanızı paketlemek için varsayılan web paketi projesi kurulumunu kullandığınız varsayılır.

1. Yapılandırma dosyasına aşağıdaki kod parçacıklarını ekleyin:

   1. resolve.alias altına aşağıdaki diğer adları ekleyin:

      '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. module.rules altında aşağıdaki yükleyicileri ve bağımlılıkları ekleyin:

      // 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. girdisinin altına aşağıdaki giriş noktasını ekleyin. Döndürülen çalışan yolunu not alın; daha sonra buna ihtiyacınız olacaktır.

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

2. KustoLanguageService-loader.js dosyasına aşağıdaki özel yükleyiciyi ekleyin. Yapılandırma dosyasındaki kullanımının importScripts yerini alır:

   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. Uygulamanıza aşağıdaki kodu ekleyin:

   1. Nesnenizde windowMonacoEnvironment işlevini tanımlayın. değerini daha önce not ettiğiniz çalışan yolu ile değiştirin <path_and_full_name_of_kusto_worker> .

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

   2. monaco.editor Nesneyi bir HTML öğesinden oluşturun:

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

   3. monaco.contribution Kusto dilini kaydetmek için API'yi çağırın:

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

Veritabanı şemanızı düzenleyiciye ekleme

monaco-kusto paketi, veritabanı şemanızı düzenleyiciye eklemek için bir yol sağlar. Şema, düzenleyicinin otomatik tamamlama önerileri ve diğer özellikleri sağlamasına olanak tanır.

Şemayı tanımlamak için aşağıdaki yapıyı kullanın:

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

Veritabanı şemanızı almak için aşağıdaki yöntemlerden birini kullanabilirsiniz:

Kümenizden

1. Azure Veri Gezgini web kullanıcı arabiriminin sol menüsünde Sorgu'yu seçin.

2. Şema oluşturmak istediğiniz veritabanını seçin.

3. Sorgu penceresinde aşağıdaki sorguyu çalıştırın:

   .show schema as json
   

4. Sorgunun sonucunu kopyalayın ve şema sabiti olarak yapıştırın. Sorgunun sonucu veritabanlarının listesidir (schema.ts dosyasındaki arabirime Result bakın).

5. Düzenleyicide setSchemaFromShowSchema() şemayı ayarlamak için yöntemini kullanın. Ayrıca düzenleyicide kullanılacak küme URI'sini ve veritabanının adını belirtmelisiniz.

El ile oluşturma

1. Veritabanı şemasını içeren bir şema nesnesi oluşturun. Daha fazla bilgi için src/schema.ts dosyasındaki arabirimine bakınclusterType. Aşağıdaki örnekte, tek bir veritabanı ve tek bir tablo içeren bir şema nesnesi gösterilmektedir:

   {
     "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. Düzenleyicide setSchema() şemayı ayarlamak için yöntemini kullanın.

Örnek proje

Monaco-kusto paketini kullanan örnek bir proje bulabilirsiniz. Örneği kullanmak için monaco-kusto GitHub deposunu kopyalayın. Örneği samples/react klasöründe bulabilirsiniz.

Örnek projenizi ayarlama ve test etme

Kopyalanan deponun kökünden aşağıdaki komutları çalıştırın:

1. Bağımlılıkları yükleyin ve projeyi derleyin:

   npm install
   

2. Projenin çalıştığını doğrulayın. Başarılı olursa index.html açılır.

   npm run watch
   

İlgili içerik

• Kusto Sorgu Dili'ne (KQL) genel bakış
• Kusto sorguları yazma