Интеграция редактора Monaco с поддержкой язык запросов Kusto в приложении

Статья
03/09/2023

Вы можете интегрировать редактор Monaco с поддержкой язык запросов Kusto (monaco-kusto) в приложение. Интеграция monaco-kusto в приложение обеспечивает возможности редактирования, такие как завершение, раскрашивание, рефакторинг, переименование и переход к определению. Для этого требуется создать решение для проверки подлинности, выполнения запросов, отображения результатов и изучения схемы. Он обеспечивает полную гибкость для создания пользовательского интерфейса в соответствии с вашими потребностями.

Из этой статьи вы узнаете, как добавить monaco-kusto в редактор Monaco и интегрировать его в приложение. Пакет доступен на сайте GitHub и npm.

Выполните следующие действия, чтобы интегрировать monaco-kusto в приложение с помощью npm.

Шаг 1. Установка пакета monaco-kusto

Шаг 2. Настройка приложения для использования пакета monaco-kusto

Шаг 3. Добавление схемы базы данных в редактор

Попробуйте интеграцию с нашим примером проекта!

Предварительные требования

Node.js (версия 6.10.3 или более поздняя)

Установка пакета monaco-kusto

Установите пакет npm редактора Monaco:
```
npm i monaco-editor
```
Примечание

Сведения о настройке собственного редактора Monaco см. в репозитории GitHub редактора Monaco.
Установите пакет npm monaco-kusto :
```
npm i @kusto/monaco-kusto
```

Настройка приложения для использования пакета monaco-kusto

Вы можете настроить приложение для использования monaco-kusto одним из следующих способов:

Система модулей AMD
ESM (webpack)

Добавьте следующий HTML-код на страницы, где используется редактор Monaco, например файл index.html . Они необходимы из-за зависимости пакета 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>

Скопируйте статические файлы из пакетов monaco и monaco-kusto в папку monaco-editor на веб-сервере. Приложению потребуется доступ к этим статическим файлам.
Используйте monaco для их загрузки. Примеры см. в примерах.

Ниже описано, как настроить приложение для использования monaco-kusto с помощью webpack. Точкой входа по умолчанию для проекта является файл src/index.js , а файл конфигурации по умолчанию — файл src/webpack.config.js . В следующих шагах предполагается, что вы используете настройку проекта webpack по умолчанию для упаковки приложения.

В файле конфигурации добавьте следующие фрагменты кода:

В поле resolve.alias добавьте следующие псевдонимы:

'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'

В разделе module.rules добавьте следующие загрузчики и зависимости:

// 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' },

В разделе запись добавьте следующую точку входа. Запишите возвращенный рабочий путь. Он понадобится позже.
```
`@kusto/monaco-kusto/release/esm/kusto.worker.js`
```

В файлеKustoLanguageService-loader.js добавьте следующий пользовательский загрузчик. Он заменяет использование importScripts в файле конфигурации:
```
module.exports = function loader(source) {
    source = `var Kusto = require("@kusto/language-service-next/Kusto.Language.Bridge.min");\n${source}`;

    return source.replace(/importScripts.*/g,'');;
}
```

Добавьте в приложение следующий код:

Определите функцию MonacoEnvironment для объекта window . Замените <path_and_full_name_of_kusto_worker> рабочим путем, который вы записали ранее.
```
window.MonacoEnvironment = { globalAPI: true, getWorkerUrl: function() { return "<path_and_full_name_of_kusto_worker>"} };
```
monaco.editor Создайте объект из элемента HTML:
```
this.editor = monaco.editor.create(editorElement, editorConfig)
```

monaco.contribution Вызовите API, чтобы зарегистрировать язык 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);
})

Добавление схемы базы данных в редактор

Пакет monaco-kusto позволяет добавить схему базы данных в редактор. Схема позволяет редактору предоставлять предложения автозавершения и другие функции.

Чтобы определить схему, используйте следующую структуру:

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

Схему базы данных можно получить одним из следующих способов:

Из кластера
Создание вручную

В пользовательском веб-интерфейсе Azure Data Explorer в меню слева выберите Запрос.
Выберите базу данных, для которой требуется создать схему.
В окне запроса выполните следующий запрос:
```
.show schema as json
```
Скопируйте результат запроса и вставьте его как константу схемы . Результатом запроса является список баз данных (см. интерфейс Result в файле schema.ts ).
Используйте метод , setSchemaFromShowSchema() чтобы задать схему в редакторе. Кроме того, необходимо указать универсальный код ресурса (URI) кластера и имя базы данных, используемой в редакторе.

Создайте объект схемы, содержащий схему базы данных. Дополнительные сведения см. в интерфейсе clusterType в файле src/schema.ts . В следующем примере показан объект схемы, содержащий одну базу данных и одну таблицу:

{
  "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>"
      }, ... ]
    }, ... ]
  }
}

Используйте метод , setSchema() чтобы задать схему в редакторе.

Пример проекта

Вы можете найти пример проекта, использующего пакет monaco-kusto . Чтобы использовать пример, клонируйте репозиторий monaco-kusto GitHub. Пример можно найти в папке samples/react .

Настройка и тестирование примера проекта

Выполните следующие команды из корня клонированного репозитория:

Установите зависимости и выполните сборку проекта:
```
npm install
```
Убедитесь, что проект работает. В случае успеха откроетсяindex.html .
```
npm run watch
```

Поделиться через

Интеграция редактора Monaco с поддержкой язык запросов Kusto в приложении

Предварительные требования

Установка пакета monaco-kusto

Настройка приложения для использования пакета monaco-kusto

Добавление схемы базы данных в редактор

Пример проекта

Настройка и тестирование примера проекта

Обратная связь

Обратная связь

Дополнительные ресурсы

Поделиться через

Интеграция редактора Monaco с поддержкой язык запросов Kusto в приложении

Предварительные требования

Установка пакета monaco-kusto

Настройка приложения для использования пакета monaco-kusto

Добавление схемы базы данных в редактор

Пример проекта

Настройка и тестирование примера проекта

См. также

Обратная связь

Обратная связь

Дополнительные ресурсы