앱에서 Kusto 쿼리 언어 지원과 Monaco 편집기 통합
이 문서의 내용
모나코 편집기를 앱에 Kusto 쿼리 언어 지원(monaco-kusto )과 통합할 수 있습니다. monaco-kusto 를 앱에 통합하면 완성, 색 지정, 리팩터링, 이름 바꾸기 및 정의로 이동과 같은 편집 환경을 제공합니다. 인증, 쿼리 실행, 결과 표시 및 스키마 탐색을 위한 솔루션을 빌드해야 합니다. 필요에 맞는 사용자 환경을 유연하게 구성할 수 있습니다.
이 문서에서는 Monaco 편집기에 monaco-kusto 를 추가하고 앱에 통합하는 방법을 알아봅니다. 패키지는 GitHub 및 npm 에서 사용할 수 있습니다.
다음 단계를 사용하여 npm 을 사용하여 monaco-kusto 를 앱에 통합합니다.
1단계 : monaco-kusto 패키지 설치
2단계 : monaco-kusto 패키지를 사용하도록 앱 설정
3단계 : 편집기에서 데이터베이스 스키마 추가
샘플 프로젝트 와 통합해 보세요!
사전 요구 사항
monaco-kusto 패키지 설치
Monaco Editor npm 패키지를 설치합니다.
npm i monaco-editor
monaco-kusto npm 패키지를 설치합니다.
npm i @kusto/monaco-kusto
monaco-kusto 패키지를 사용하도록 앱 설정다음 방법 중 하나를 사용하여 monaco-kusto 를 사용하도록 앱을 설정할 수 있습니다.
index.html 파일과 같이 Monaco 편집기가 사용되는 페이지에 다음 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 폴더에 복사합니다. 앱은 이러한 정적 파일에 액세스해야 합니다.
모나코를 사용하여 로드합니다. 예제는 샘플을 참조하세요 .
다음 단계에서는 webpack을 사용하여 monaco-kusto 를 사용하도록 앱을 설정하는 방법을 설명합니다. 프로젝트의 기본 진입점은 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)
API를 monaco.contribution 호출하여 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 웹 UI의 왼쪽 메뉴에서 쿼리 를 선택합니다.
스키마를 만들 데이터베이스를 선택합니다.
쿼리 창에서 다음 쿼리를 실행합니다.
.show schema as json
쿼리 결과를 복사하여 스키마 상수로 붙여넣습니다. 쿼리 결과는 데이터베이스 목록입니다(schema.ts 파일의 인터페이스 Result 참조).
메서드를 setSchemaFromShowSchema() 사용하여 편집기에서 스키마를 설정합니다. 또한 편집기에서 사용할 클러스터 URI 및 데이터베이스 이름을 지정해야 합니다.
데이터베이스 스키마를 포함하는 스키마 개체를 만듭니다. 자세한 내용은 src/schema.ts 파일의 인터페이스를 참조 clusterType 하세요. 다음 예제에서는 단일 데이터베이스와 단일 테이블을 포함하는 스키마 개체를 보여 줍니다.
{
"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 리포지토리를샘플/react 폴더에서 샘플을 찾을 수 있습니다.
샘플 프로젝트 설정 및 테스트
복제된 리포지토리의 루트에서 다음 명령을 실행합니다.
종속성을 설치하고 프로젝트를 빌드합니다.
npm install
프로젝트가 작동하는지 확인합니다. 성공하면 index.html 열립니다.
npm run watch
관련 콘텐츠