src/panels/corpglory-dataexporter-panel/components/Panel.tsx

@@ -55,6 +55,7 @@ import { RefreshEvent } from '@grafana/runtime';
 
 import React, { useState, useEffect } from 'react';
 import * as _ from 'lodash';
+import PluginState from 'plugin_state';
 
 const PANEL_ID = 'corpglory-dataexporter-panel';
 const APP_ID = 'corpglory-dataexporter-app';
@@ -215,6 +216,7 @@ export function Panel({ width, height, timeRange, eventBus, timeZone }: Props) {
       queries: selectedQueries,
       csvDelimiter,
     };
+    const token = await PluginState.createGrafanaToken();
     // TODO: move this function to API Service
     await queryApi('/task', {
       method: 'POST',
@@ -222,6 +224,7 @@ export function Panel({ width, height, timeRange, eventBus, timeZone }: Props) {
         task,
         url: window.location.toString(),
         timeZoneName,
+        apiKey: token.key,
       },
     });
 
@@ -261,6 +264,7 @@ export function Panel({ width, height, timeRange, eventBus, timeZone }: Props) {
             custom: {
               filterable: false,
               displayMode: 'image',
+              cellOptions: { type: 'image' },
             },
             links: [
               {
@@ -330,6 +334,7 @@ export function Panel({ width, height, timeRange, eventBus, timeZone }: Props) {
             custom: {
               filterable: false,
               displayMode: 'image',
+              cellOptions: { type: 'image' },
             },
             links: [
               {
@@ -394,6 +399,7 @@ export function Panel({ width, height, timeRange, eventBus, timeZone }: Props) {
             custom: {
               filterable: false,
               displayMode: 'image',
+              cellOptions: { type: 'image' },
             },
             links: [
               {