在Grafana中开发插件时，如何使用‘angular-toastr’

Question

目前，我在Grafana中开发了一个插件，我需要使用像警报一样的通知(在屏幕的右上角)。有几个包可以解决这个问题(例如angular-toastr - https://github.com/Foxandxss/angular-toastr)。我的问题是，在使用nmp安装之后，我如何导入和使用angular包？？我正在尝试使用以下代码:从'…‘导入toastr/node_modules/angular-toastr/dist/angular-toastr’，但我遇到此错误: Plugin Error Fetch error: 404 Not Found Instantiating 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-toast.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'