Share via

Integrar o Editor do Mónaco com Linguagem de Pesquisa Kusto suporte na sua aplicação

  • Artigo

Pode integrar o Editor do Mónaco com Linguagem de Pesquisa Kusto suporte (monaco-kusto) na sua aplicação. Integrar o monaco-kusto na sua aplicação oferece-lhe uma experiência de edição, como conclusão, coloração, refatorização, mudança de nome e ir para a definição. Requer que crie uma solução para autenticação, execução de consultas, apresentação de resultados e exploração de esquemas. Oferece-lhe toda a flexibilidade para criar a experiência do utilizador que se adequa às suas necessidades.

Neste artigo, irá aprender a adicionar monaco-kusto ao Editor do Mónaco e integrá-lo na sua aplicação. O pacote está disponível no GitHub e no npm.

Utilize os seguintes passos para integrar monaco-kusto na sua aplicação com o npm.

Passo 1: instalar o pacote monaco-kusto

Passo 2: configurar a sua aplicação para utilizar o pacote monaco-kusto

Passo 3: adicionar o esquema da base de dados ao editor

Experimente a integração com o nosso Projeto de exemplo!

Pré-requisitos

Instalar o pacote monaco-kusto

  1. Instale o pacote npm do Editor do Mónaco:

    npm i monaco-editor

    Nota

    Para personalizar o Editor nativo do Mónaco, consulte o repositório GitHub do Editor do Mónaco.

  2. Instale o pacote monaco-kusto npm:

    npm i @kusto/monaco-kusto

Configurar a sua aplicação para utilizar o pacote monaco-kusto

Pode configurar a sua aplicação para utilizar monaco-kusto com um dos seguintes métodos:

  1. Adicione o seguinte HTML às páginas em que o Editor do Mónaco é utilizado, como o ficheiro index.html . São necessários devido a uma dependência que o pacote tem em 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. Copie os ficheiros estáticos dos pacotes monaco e monaco-kusto para a pasta monaco-editor no seu servidor Web. A sua aplicação terá de aceder a estes ficheiros estáticos.

  3. Utilize o mónaco para carregá-los. Por exemplo, veja os exemplos.

Adicionar o esquema da base de dados ao editor

O pacote monaco-kusto fornece uma forma de adicionar o esquema da base de dados ao editor. O esquema permite que o editor forneça sugestões de conclusão automática e outras funcionalidades.

Utilize a seguinte estrutura para definir o esquema:

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

Pode obter o esquema da base de dados com um dos seguintes métodos:

  1. Na IU do Azure Data Explorer Web, no menu esquerdo, selecione Consulta.

  2. Selecione a base de dados para a qual pretende criar um esquema.

  3. Na janela de consulta, execute a seguinte consulta:

    .show schema as json

  4. Copie o resultado da consulta e cole-o como a constante de esquema . O resultado da consulta é uma lista de bases de dados (veja interface Result no ficheiro schema.ts ).

  5. Utilize o setSchemaFromShowSchema() método para definir o esquema no editor. Também tem de especificar o URI do cluster e o nome da base de dados a utilizar no editor.

Projeto de exemplo

Pode encontrar um projeto de exemplo que utilize o pacote monaco-kusto . Para utilizar o exemplo, clone o repositório monaco-kusto GitHub. Encontrará o exemplo na pasta samples/react .

Configurar e testar o projeto de exemplo

Execute os seguintes comandos a partir da raiz do repositório clonado:

  1. Instale dependências e crie o projeto:

    npm install

  2. Verifique se o projeto está a funcionar. Se for bem-sucedido, o index.html será aberto.

    npm run watch

Conteúdo relacionado