Integracja edytora Monaco z obsługą język zapytań Kusto w aplikacji

Edytor Monaco można zintegrować z obsługą język zapytań Kusto (monaco-kusto) w aplikacji. Zintegrowanie aplikacji monaco-kusto oferuje środowisko edycji, takie jak uzupełnianie, kolorowanie, refaktoryzacja, zmienianie nazw i przechodzenie do definicji. Wymaga to utworzenia rozwiązania do uwierzytelniania, wykonywania zapytań, wyświetlania wyników i eksploracji schematu. Zapewnia ona pełną elastyczność w zakresie dostosowywania środowiska użytkownika, które odpowiada Twoim potrzebom.

W tym artykule dowiesz się, jak dodać aplikację monaco-kusto do edytora Monaco i zintegrować ją z aplikacją. Pakiet jest dostępny w witrynie GitHub i w witrynie npm.

Wykonaj poniższe kroki, aby zintegrować aplikację monaco-kusto z aplikacją przy użyciu narzędzia npm.

Krok 1. Instalowanie pakietu monaco-kusto

Krok 2. Konfigurowanie aplikacji do korzystania z pakietu monaco-kusto

Krok 3. Dodawanie schematu bazy danych do edytora

Wypróbuj integrację z naszym przykładowym projektem!

Wymagania wstępne

• Node.js (wersja 6.10.3 lub nowsza)

Instalowanie pakietu monaco-kusto

1. Zainstaluj pakiet npm edytora Monaco:

   npm i monaco-editor
   

   Uwaga

   Aby dostosować natywny edytor Monaco, zobacz repozytorium GitHub Editor Monaco.

2. Zainstaluj pakiet npm monaco-kusto :

   npm i @kusto/monaco-kusto
   

Konfigurowanie aplikacji do korzystania z pakietu monaco-kusto

Aplikację można skonfigurować do korzystania z usługi monaco-kusto przy użyciu jednej z następujących metod:

System modułów AMD

1. Dodaj następujący kod HTML do stron, na których jest używany edytor Monaco, na przykład plik index.html . Są one wymagane ze względu na zależność, którą pakiet ma w elemecie 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. Skopiuj pliki statyczne z pakietów monaco i monaco-kusto do folderu monaco-editor na serwerze internetowym. Aplikacja będzie musiała uzyskać dostęp do tych plików statycznych.

3. Użyj monako, aby je załadować. Aby zapoznać się z przykładami, zobacz przykłady.

ESM (webpack)

W poniższych krokach opisano, jak skonfigurować aplikację do korzystania z pakietu webpack monaco-kusto . Domyślnym punktem wejścia dla projektu jest plik src/index.js , a domyślnym plikiem konfiguracji jest plik src/webpack.config.js . W poniższych krokach założono, że używasz domyślnej konfiguracji projektu webpack w celu pakietu aplikacji.

1. W pliku konfiguracji dodaj następujące fragmenty kodu:

   1. W obszarze resolve.alias dodaj następujące aliasy:

      '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. W obszarze module.rules dodaj następujące moduły ładujących i zależności:

      // 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. W obszarze entry dodaj następujący punkt wejścia. Zanotuj zwróconą ścieżkę procesu roboczego. Będzie ona potrzebna później.

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

2. W pliku KustoLanguageService-loader.js dodaj następujący moduł ładujący niestandardowy. Zastępuje ono użycie elementu importScripts w pliku konfiguracji:

   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. W aplikacji dodaj następujący kod:

   1. Zdefiniuj funkcję MonacoEnvironment w obiekcie window . Zastąp <path_and_full_name_of_kusto_worker> ciąg zanotowaną wcześniej ścieżką procesu roboczego.

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

   2. Utwórz obiekt na monaco.editor podstawie elementu HTML:

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

   3. Wywołaj interfejs API, monaco.contribution aby zarejestrować język 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);
      })
      

Dodawanie schematu bazy danych do edytora

Pakiet monaco-kusto umożliwia dodanie schematu bazy danych do edytora. Schemat umożliwia edytorowi udostępnianie sugestii autouzupełnianych i innych funkcji.

Użyj następującej struktury, aby zdefiniować schemat:

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

Schemat bazy danych można uzyskać przy użyciu jednej z następujących metod:

Z klastra

1. W internetowym interfejsie użytkownika usługi Azure Data Explorer w menu po lewej stronie wybierz pozycję Zapytanie.

2. Wybierz bazę danych, dla której chcesz utworzyć schemat.

3. W oknie zapytania uruchom następujące zapytanie:

   .show schema as json
   

4. Skopiuj wynik zapytania i wklej go jako stałą schematu . Wynikiem zapytania jest lista baz danych (zobacz interfejs Result w pliku schema.ts ).

5. setSchemaFromShowSchema() Użyj metody , aby ustawić schemat w edytorze. Należy również określić identyfikator URI klastra i nazwę bazy danych do użycia w edytorze.

Ręczne tworzenie

1. Utwórz obiekt schematu zawierający schemat bazy danych. Aby uzyskać więcej informacji, zobacz clusterType interfejs w pliku src/schema.ts . Poniższy przykład przedstawia obiekt schematu, który zawiera pojedynczą bazę danych i jedną 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() Użyj metody , aby ustawić schemat w edytorze.

Przykładowy projekt

Przykładowy projekt korzystający z pakietu monaco-kusto można znaleźć. Aby użyć przykładu, sklonuj repozytorium monaco-kusto GitHub. Przykład znajdziesz w folderze samples/react .

Konfigurowanie i testowanie przykładowego projektu

Uruchom następujące polecenia z katalogu głównego sklonowanego repozytorium:

1. Zainstaluj zależności i skompiluj projekt:

   npm install
   

2. Sprawdź, czy projekt działa. W przypadku pomyślnego otwarcia index.html .

   npm run watch
   

Zawartość pokrewna

• Omówienie języka Kusto Query Language (KQL)
• Pisanie zapytań Kusto