如何在Grafana中开发插件时使用'angular-toastr'

Question

目前我正在Grafana开发一个插件，我需要使用通知，如警报（在屏幕的右上角）。这个问题有几个包（例如angular-toastr-https://github.com/Foxandxss/angular-toastr）。我的问题是如何在安装后使用nmp install导入和使用角度包？我正在尝试使用此代码：从'... / node_modules / angular-toastr / dist / angular-toastr'导入toastr但我遇到此错误：插件错误获取错误：404未找到实例化http://x.x.x.x:3000/public/plugins/node_modules/angular-toastr/dist/angular-toastr.js

Answer 1

您可以在插件源代码中包含该库。因此，如果您有如下所示的文件夹结构，请将“外部”文件夹添加到src

plugin
     +node_modules
     +src
        +external

现在将angular-toastr.js放在外部文件夹中，然后将其导入控制器，如下所示：

import * as toastr from './external/angular-toastr'

您目前遇到的问题是您正在尝试访问不存在的文件，因此您的404错误。所以我认为路径是错误的，但更重要的是，您可能不会将您的node_modules文件夹与您的插件一起发送，只是dist文件夹。因此，当您构建插件时，例如使用grunt这是我们使用的，所需的库将被复制到你的dist文件夹中，并且当你现在使用相对路径时将可用。

Answer 2

这是我的文件夹结构：

这是我的代码：

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'