项目需求vue中台项目引入grafana监控可视化，整体需求，拆分query部分，将code和builder查询模式移植到自己平台，并通过share方式加载仪表盘
grafana前端环境构建---待补充
brew install grafana // mac 安装
brew services start grafana // 启动服务
brew services restart grafana // 重启服务
prometheus服务----待补充
brew install prometheus // mac 安装
brew services start prometheus // 启动服务
brew services restart prometheus // 重启服务
code模式
移植code模式模式主要就是使用monaco-editor和monaco-editor-webpack-plugin，前端项目直接install即可，注意版本号匹配就行，我自己的是前者0.30.1，后者6.0.0
monaco-editor
/* stylelint-disable block-opening-brace-space-before */
<template>
<div class="myEditor">
<div
id="container"
ref="container"
class="container"
/>
</div>
</template>
<script>
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution';
import dataJson from './data.json'; // prometheus 命令集合--源码接口获取
import dataFunction from './fuction.js'; // 初始化系统命令集合--源码文件里找
const hoverTips = (arr, word) => {
let tip = '';
arr.forEach((item) => {
if (word == item.text) {
tip = {
contents: [{ value: item.title || '' }, { value: item.content || '' }]
};
}
});
return tip;
};
export default {
props: {
codes: {
type: String,
default: function() {
return '<div>请编辑javascript内容</div>';
}
},
language: {
type: String,
default: function() {
return 'sql';
}
},
editorOptions: {
type: Object,
default: function() {
return {
foldingStrategy: 'indentation', // 代码可分小段折叠
selectOnLineNumbers: true,
roundedSelection: false,
readOnly: false, // 只读
cursorStyle: 'line', // 光标样式
automaticLayout: false, // 自动布局
glyphMargin: true, // 字形边缘
useTabStops: false,
fontSize: 28, // 字体大小
tabSize: 2, // tab 缩进长度
autoIndent: true // 自动布局
};
}
}
},
data() {
return {
dataJson,
theme: 'vs-dark',
codesCopy: null, // 内容备份
editor: null,
registerObject: null,
suggestions: [{
label: 'go_gc_duration_seconds', // 展示
insertText: 'go_gc_duration_seconds', // 实际输入到editor
detail: '说明'
// filtertText: 'g'
}, {
label: 'node_disk_read_retries_total',
detail: '说明',
insertText: 'node_disk_read_retries_total'
}]
};
},
// beforeMount() {
// // 创建代码提醒
// this.registerObject.completionItemProvider = monaco.languages.registerCompletionItemProvider(this.language, {
// provideCompletionItems: function(model, position) {
// // find out if we are completing a property in the 'dependencies' object.
// var textUntilPosition = model.getValueInRange({
// startLineNumber: 1,
// startColumn: 1,
// endLineNumber: position.lineNumber,
// endColumn: position.column
// });
// var suggestions = [];
// if (textUntilPosition.charAt(textUntilPosition.length - 2) == '.') {
// suggestions = this.createTips();
// }
// return {suggestions: suggestions};
// }
// });
// },
mounted() {
this.initEditor();
},
destroyed() {
this.registerObject.completionItemProvider.dispose();
this.editor.dispose();
},
methods: {
initEditor() {
this.$refs.container.innerHTML = '';
this.monacoEditor = monaco.editor.create(this.$refs.container, {
value: this.codesCopy || this.codes,
language: this.language,
theme: this.theme,
editorOptions: this.editorOptions
});
this.$emit('onMounted', this.monacoEditor);
this.monacoEditor.onDidChangeModelContent((event) => {
this.codesCopy = this.monacoEditor.getValue();
this.$emit('onCodeChange', this.monacoEditor.getValue(), event);
});
// 提示代码区
monaco.languages.registerCompletionItemProvider(this.language, {
provideCompletionItems: () => {
return { suggestions: this.createTips() };
},
triggerCharacters: ['ddddddddd', ':', 'F'] // 触发智能提示关键词
});
// 自定义文字悬浮提示
monaco.languages.registerHoverProvider(this.language, {
// 自定义文字悬浮提示
provideHover: (model, position) => {
console.log(model, position);
if (model.getWordAtPosition(position) != null) {
const word = model.getWordAtPosition(position).word;
console.log(word);
let arr = [
{
text: 'SqlUtil', // 悬浮文字
title: '数据库操作', // 标题
content: '对数据进行操作，支持sql,addConditionExist等操作' // 提示内容
}
];
return hoverTips(arr, word);
}
}
});
this.monacoEditor.onDidBlurEditorText(() => {
this.suggestions_ = []; // 解决多个编辑器suggestions缓存问题
this.$emit('update', this.monacoEditor.getValue());
});
this.monacoEditor.onDidFocusEditorText(() => {
this.suggestions_ = this.suggestions; // 解决多个编辑器suggestions缓存问题
});
},
// 调用接口或者查询提示
getSuggestions(sql) {
return this.$api['dataModelAdd/getSuggestions']({
sqlSentences: sql
}).then((data) => {
this.suggestions = data || [];
});
},
// 代码提示方法(返回一个数组)
createTips() {
const data = this.dataJson.data.map(item => {
return {
label: item, // 展示
insertText: item // 实际输入到editor
};
});
let TRIGONOMETRIC_FUNCTIONS = dataFunction;
return TRIGONOMETRIC_FUNCTIONS.concat(data);
}
}
};
</script>
<style scoped>
.container {
height: 100px;
text-align: left;
}
</style>
vue前端项目引入
<iframe
ref="iframe" :src="htmlUrl" frameborder="0" width="100%" height="100%" scrolling="auto"
/>
htmlUrl='grafana分享出去的link链接'
使用iframe加载url,需解除跨域限制
终端运行brew list grafana，查询grafana conf 文件目录
brew list grafana
usr/local/Cellar/grafana/8.3.3/share/grafana/ (5324 files)
1、设置允许iframe嵌入 打开conf/defaults.ini，设置allow_embedding = true
2、允许匿名访问，不需要登录 [auth.anonymous] enabled = true
grafana前端项目导航栏需求
1、隐藏顶部和左侧导航栏，在链接上添加&kiosk
2、隐藏左侧菜单栏，在链接上添加&kiosk=tv
3，三种模式 &kiosk=off,full,tv
等待持续补充……
