Grafana - How can I display the data return from external api in Grafana?

Question

I'm try to create a plugin that get data from the external API and then display in Grafana. But it doesn't work. The plugin can get data from the API, but it cannot display on the dashboard.

How can I resolve the problem?

The java API like this.It search data from database and then return to the plugin.

public String getData(String start, String end, String type){
        ArrayList<PCRC> list = new ArrayList<>();
        JSONArray result = new JSONArray();
        try{
            JSONObject object = new JSONObject();
            object.put("recordtime", new Date());
            object.put("success", 12);
            object.put("fail", 0);
            object.put("total", 12);
            result.add(object);

            object = new JSONObject();
            object.put("recordtime", new Date());
            object.put("success", 24);
            object.put("fail", 1);
            object.put("total", 25);
            result.add(object);

            log.info("-------------success get data");
        }catch (Exception e){
            log.error(e.getMessage());
            e.printStackTrace();
        }finally {
            return result.toJSONString();
        }
    }

The Grafana plugin like this It get the search parameters from the front end, and then request data from Java API. It can get the return values. But it doesn't display it. I don't know what's wrong with it.

async doRequest(url: string, param: string, query: MyQuery){
    console.log(22);
    var resultUrl = this.hostUrl + url;

    const result = await getBackendSrv().datasourceRequest({
      method: "GET",
      url: resultUrl,
      params: {
        start: '2020-08-02 00:00:00',
        end: '2020-12-28 12:00:00',
        type: 'GET'
      }
    })
    return result;
  }

  async query(options: DataQueryRequest<MyQuery>): Promise<DataQueryResponse> {
    const { range } = options;
    const from = dateTimeAsMoment(range!.from.valueOf()).format('YYYY-MM-DD HH:mm:ss');
    const to = dateTimeAsMoment(range!.to.valueOf()).format('YYYY-MM-DD HH:mm:ss');

    // Return a constant for each query.
    const promise = options.targets.map(target => {

      const query = defaults(target, defaultQuery);
      const frame = new MutableDataFrame({
        refId: query.refId,
        fields: [
          { name: 'Time', type: FieldType.time },
          { name: 'value', type: FieldType.number },
        ],
      });

      const param = "?start=" + from + "&end=" + to + "&type=" + this.fileType;
      this.doRequest(this.dataUrl, param, query).then((response) => {
      
        console.log(response);
        if (response.data.length > 0){
          response.data.forEach((item: any) =>{

            var time = dateTimeAsMoment(item.recordtime).format('YYYY-MM-DD HH:mm:ss')
            frame.appendRow([time, item.success]);
            console.log(frame);
          })
        }

        return frame;
      })

    });

    return Promise.all(promise).then((data) => ({ data }));
  }
}

Answer 1

等待大神答复