目前我正在Grafana开发一个插件,我需要使用警报之类的通知(在屏幕的右上角)。这个问题有几个包(例如angular-toastr - https://github.com/Foxandxss/angular-toastr)。我的问题是如何在安装后使用nmp install导入和使用角度包? 我正在尝试使用此代码: 从'... / node_modules / angular-toastr / dist / angular-toastr'导入toastr 但我遇到这个错误: 插件错误 获取错误:404 Not Found Instantiating http://x.x.x.x:3000/public/plugins/node_modules/angular-toastr/dist/angular-toastr.js
答案 0 :(得分:1)
您可以在插件源代码中包含该库。因此,如果您有如下所示的文件夹结构,请添加'外部'文件夹到src
plugin
+node_modules
+src
+external
现在将angular-toastr.js放在外部文件夹中,然后将其导入控制器,如下所示:
import * as toastr from './external/angular-toastr'
您目前遇到的问题是您尝试访问的文件不存在,因此导致404错误。所以我想象路径是错误的,但更重要的是,你可能不会用你的插件发送你的node_modules文件夹,只是dist文件夹。因此,当您构建插件时,例如使用grunt这是我们使用的,所需的库将被复制到您的dist文件夹中,并且将在您现在使用相对路径时可用。
答案 1 :(得分:0)
这是我的代码:
import _ from 'lodash'
import kbn from 'app/core/utils/kbn'
import {MetricsPanelCtrl} from 'app/plugins/sdk'
import {Presenter} from './util/presenter'
import {Styler} from './util/styler'
/* eslint-disable import/no-webpack-loader-syntax */
import './css/main-panel.css!'
/* eslint-disable import/no-webpack-loader-syntax */
import * as toastr from './external/angular-toastr'
const panelDefaults = {
valueMeasurement: 'Avg',
valueShow: {
show: false,
fontSize: '22px',
format: 'none',
decimals: '2'
// fillColor: 'rgba(31, 118, 189, 0.18)',
},
nullValue: {
nullValueTo: 'N/A',
nullValueBGColor: 'rgb(128,128,128)'
},
tooltipOpt: {
showName: true,
showVal: false
},
thresholds: '',
colors: ['#299c46', 'rgba(237, 129, 40, 0.89)', '#d44a3a'],
notifications: {
direction: ['success', 'warning', 'critical'],
warningNotify: {
activation: false,
notifyTitle: ''
}
},
sensorDraw: {
drawModel: 'Square',
marginTop: '2',
marginRight: '2',
marginBottom: '2',
marginLeft: '2',
drawModels: ['Square', 'Circle'],
circleRad: '60',
SquareWidth: '120'
}
}
export class MulStatPluginCtrl extends MetricsPanelCtrl {
constructor ($scope, $injector, linkSrv, alertSrv) {
super($scope, $injector)
_.defaults(this.panel, panelDefaults)
this.events.on('init-edit-mode', this.onInitEditMode.bind(this))
this.events.on('data-received', this.onDataReceived.bind(this))
this.events.on('render', this.onRender.bind(this))
// this.events.on('data-error', this.onDataError.bind(this))
// this.events.on('panel-initialized', this.render.bind(this))
this.alertSrv = alertSrv
// this.formatter = new Formatter(this.panel, kbn)
// this.fetchdata = new FetchData(this.panel)
// this.drawer = new Drawer(this.panel)
this.presenter = new Presenter(this.panel, kbn, this.alertSrv)
this.styler = new Styler(this.panel)
this.aggregations = ['Last', 'First', 'Max', 'Min', 'Sum', 'Avg', 'Delta']
// this.PubData = {}
// this.data = {}
this.measurements = {}
}
onDataReceived (dataList) {
// this.seriesList = seriesList
this.Sensors = dataList
this.render()
}
onRender () {
// this.sensor2.crrVal = this.fetchdata.getCurrentVal(this.dataRaw, 2)
// this.formatter.call(this.sensor2)
// this.render()
this.presenter.call(this.Sensors)
this.styler.call(this.Sensors)
// console.log('my test console.log')
toastr.error('Hello world!', 'Toastr fun!')
}
onInitEditMode () {
this.addEditorTab('Options', 'public/plugins/rahyaft-mulstat-panel/options.html')
this.unitFormats = kbn.getUnitFormats()
}
onEditorSetFormat (subItem) {
this.panel.valueShow.format = subItem.value
this.refresh()
}
invertColorOrder () {
var tmp = this.panel.colors[0]
this.panel.colors[0] = this.panel.colors[2]
this.panel.colors[2] = tmp
this.render()
}
invertNotifDirectionOrder () {
var tmp = this.panel.notifications.direction[0]
this.panel.notifications.direction[0] = this.panel.notifications.direction[2]
this.panel.notifications.direction[2] = tmp
this.render()
}
onColorChange (panelColorIndex) {
return color => {
this.panel.colors[panelColorIndex] = color
this.render()
}
}
tooltipRender () {
//
// toastr.success('Hello world!', 'Toastr fun!')
// console.log('my test console.log')
// this.refresh()
}
link (scope, elem, attrs, ctrl) {
// this.masterDiv = elem.find('#rahMulStatMainDiv')
// this.$panelContainer = elem.find('.rahyaftstat2m-panel-val-container')
// this.$panelContainer.addClass("st-card");
// this.$panelContoller = ctrl;
}
}
MulStatPluginCtrl.templateUrl = 'module.html'