Megosztás a következőn keresztül:

A Monaco-szerkesztő integrálása Kusto lekérdezésnyelv támogatással az alkalmazásban

  • Cikk

A Monaco-szerkesztőt integrálhatja Kusto lekérdezésnyelv támogatással (monaco-kusto) az alkalmazásba. A monaco-kusto alkalmazásba való integrálása olyan szerkesztési élményt nyújt, mint a befejezés, a színezés, az újrabontás, az átnevezés és a definícióba lépés. Ehhez létre kell készítenie egy megoldást a hitelesítéshez, a lekérdezések végrehajtásához, az eredmények megjelenítéséhez és a sémafeltáráshoz. Teljes rugalmasságot biztosít az igényeinek megfelelő felhasználói élmény alakításához.

Ebből a cikkből megtudhatja, hogyan veheti fel a monaco-kusto fájlt a Monaco-szerkesztőbe, és hogyan integrálhatja azt az alkalmazásba. A csomag elérhető a GitHubon és az npm-en.

Az alábbi lépésekkel integrálhatja a monaco-kusto alkalmazást az alkalmazásba az npm használatával.

1. lépés: A monaco-kusto csomag telepítése

2. lépés: Az alkalmazás beállítása a monaco-kusto csomag használatára

3. lépés: Az adatbázisséma hozzáadása a szerkesztőhöz

Próbálja ki a mintaprojekttel való integrációt!

Előfeltételek

  • Node.js (6.10.3-s vagy újabb verzió)

A monaco-kusto csomag telepítése

  1. Telepítse a Monaco Editor npm-csomagot:

    npm i monaco-editor

    Megjegyzés

    A natív Monaco-szerkesztő testreszabásához lásd: Monaco Editor GitHub-adattár.

  2. Telepítse a monaco-kusto npm csomagot:

    npm i @kusto/monaco-kusto

Az alkalmazás beállítása a monaco-kusto csomag használatára

Az alábbi módszerek egyikével állíthatja be az alkalmazást a monaco-kusto használatára:

  1. Adja hozzá a következő HTML-t az olyan lapokhoz, ahol a Monaco-szerkesztőt használja, például a index.html fájlt. Ezekre a csomag kusto-language-servicefüggősége miatt van szükség.

    <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. Másolja a statikus fájlokat a monaco és a monaco-kusto csomagokból a webkiszolgáló monaco-editor mappájába. Az alkalmazásnak hozzá kell férnie ezekhez a statikus fájlokhoz.

  3. Monacóval töltse be őket. Példákért tekintse meg a mintákat.

Adatbázisséma hozzáadása a szerkesztőhöz

A monaco-kusto csomag lehetővé teszi az adatbázisséma szerkesztőhöz való hozzáadását. A séma lehetővé teszi, hogy a szerkesztő automatikus kiegészítési javaslatokat és egyéb szolgáltatásokat nyújtson.

A séma meghatározásához használja az alábbi struktúrát:

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

Az adatbázissémát az alábbi módszerek egyikével szerezheti be:

  1. Az Azure Data Explorer webes felhasználói felületén, a bal oldali menüben válassza a Lekérdezés lehetőséget.

  2. Válassza ki azt az adatbázist, amelyhez sémát szeretne létrehozni.

  3. A lekérdezési ablakban futtassa a következő lekérdezést:

    .show schema as json

  4. Másolja ki a lekérdezés eredményét, és illessze be sémaállandóként . A lekérdezés eredménye az adatbázisok listája (lásd a schema.ts fájl felületétResult).

  5. setSchemaFromShowSchema() A metódus használatával állítsa be a sémát a szerkesztőben. Meg kell adnia a fürt URI-ját és a szerkesztőben használni kívánt adatbázis nevét is.

Mintaprojekt

Egy mintaprojektet talál, amely a monaco-kusto csomagot használja. A minta használatához klónozza a monaco-kusto GitHub adattárat. A mintát a minták/react mappában találja.

Mintaprojekt beállítása és tesztelése

Futtassa a következő parancsokat a klónozott adattár gyökeréből:

  1. Telepítse a függőségeket, és hozza létre a projektet:

    npm install

  2. Ellenőrizze, hogy a projekt működik-e. Ha sikeres, megnyílik a index.html .

    npm run watch

Kapcsolódó tartalom