Compartilhar via

Integrar o Editor monaco com suporte Linguagem de Consulta Kusto em seu aplicativo

  • Artigo

Você pode integrar o Editor mônaco ao suporte Linguagem de Consulta Kusto (monaco-kusto) ao seu aplicativo. A integração do monaco-kusto ao seu aplicativo oferece uma experiência de edição, como conclusão, colorização, refatoração, renomeação e definição. Ele exige que você crie uma solução para autenticação, execução de consulta, exibição de resultados e exploração de esquema. Ele oferece total flexibilidade para criar a experiência do usuário que atenda às suas necessidades.

Neste artigo, você aprenderá a adicionar monaco-kusto ao Editor do Mônaco e integrá-lo ao seu aplicativo. O pacote está disponível no GitHub e no npm.

Use as etapas a seguir para integrar o monaco-kusto ao seu aplicativo usando o npm.

Etapa 1: Instalar o pacote monaco-kusto

Etapa 2: Configurar seu aplicativo para usar o pacote monaco-kusto

Etapa 3: Adicionar o esquema de banco de dados ao editor

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

Pré-requisitos

Instalar o pacote monaco-kusto

  1. Instale o pacote npm do Editor monaco:

    npm i monaco-editor

    Observação

    Para personalizar o Editor Mônaco nativo, confira Repositório GitHub do Editor de Mônaco.

  2. Instale o pacote npm monaco-kusto :

    npm i @kusto/monaco-kusto

Configurar seu aplicativo para usar o pacote monaco-kusto

Você pode configurar seu aplicativo para usar monaco-kusto usando um dos seguintes métodos:

  1. Adicione o HTML a seguir às páginas em que o Editor mônaco é usado, como o arquivo index.html . Eles 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 arquivos estáticos dos pacotes monaco e monaco-kusto para a pasta monaco-editor em seu servidor Web. Seu aplicativo precisará acessar esses arquivos estáticos.

  3. Use Mônaco para carregá-los. Para obter exemplos, consulte os exemplos.

Adicionar o esquema de banco de dados ao editor

O pacote monaco-kusto fornece uma maneira de adicionar seu esquema de banco de dados ao editor. O esquema permite que o editor forneça sugestões de preenchimento automático e outros recursos.

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

Você pode obter seu esquema de banco de dados usando um dos seguintes métodos:

  1. Na interface do usuário da Web do Azure Data Explorer, no menu à esquerda, selecione Consulta.

  2. Selecione o banco de dados para o qual você deseja 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 bancos de dados (consulte interface Result no arquivo schema.ts ).

  5. Use o setSchemaFromShowSchema() método para definir o esquema no editor. Você também deve especificar o URI do cluster e o nome do banco de dados a ser usado no editor.

Projeto de exemplo

Você pode encontrar um projeto de exemplo que usa o pacote monaco-kusto . Para usar o exemplo, clone o repositório GitHub monaco-kusto. Você encontrará o exemplo na pasta samples/react .

Configurar e testar seu projeto de exemplo

Execute os seguintes comandos na raiz do repositório clonado:

  1. Instale dependências e compile o projeto:

    npm install

  2. Verifique se o projeto está funcionando. Se tiver êxito, o index.html será aberto.

    npm run watch

Conteúdo relacionado