Prometheus: Fixed error in PromLink

public/app/plugins/datasource/prometheus/components/PromLink.tsx

@@ -10,7 +10,7 @@ import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
 interface Props {
 interface Props {
   datasource: PrometheusDatasource;
   datasource: PrometheusDatasource;
   query: PromQuery;
   query: PromQuery;
-  panelData: PanelData;
+  panelData?: PanelData;
 }
 }
 
 
 interface State {
 interface State {
@@ -20,29 +20,38 @@ interface State {
 export default class PromLink extends Component<Props, State> {
 export default class PromLink extends Component<Props, State> {
   state: State = { href: null };
   state: State = { href: null };
   async componentDidUpdate(prevProps: Props) {
   async componentDidUpdate(prevProps: Props) {
-    if (prevProps.panelData !== this.props.panelData && this.props.panelData.request) {
-      const href = await this.getExternalLink();
+    const { panelData } = this.props;
+
+    if (panelData && panelData.request && prevProps.panelData !== panelData) {
+      const href = await this.getExternalLink(panelData);
       this.setState({ href });
       this.setState({ href });
     }
     }
   }
   }
 
 
-  async getExternalLink(): Promise<string> {
-    const { query, panelData } = this.props;
-    const target = panelData.request.targets.length > 0 ? panelData.request.targets[0] : ({ datasource: null } as any);
+  async getExternalLink(panelData: PanelData): Promise<string> {
+    const { query } = this.props;
+    const { request } = panelData;
+
+    if (!request) {
+      return '';
+    }
+
+    const target = request.targets.length > 0 ? request.targets[0] : ({ datasource: null } as any);
     const datasourceName = target.datasource;
     const datasourceName = target.datasource;
     const datasource: PrometheusDatasource = datasourceName
     const datasource: PrometheusDatasource = datasourceName
       ? (((await getDatasourceSrv().get(datasourceName)) as any) as PrometheusDatasource)
       ? (((await getDatasourceSrv().get(datasourceName)) as any) as PrometheusDatasource)
       : (this.props.datasource as PrometheusDatasource);
       : (this.props.datasource as PrometheusDatasource);
 
 
-    const range = panelData.request.range;
+    const range = request.range;
     const start = datasource.getPrometheusTime(range.from, false);
     const start = datasource.getPrometheusTime(range.from, false);
     const end = datasource.getPrometheusTime(range.to, true);
     const end = datasource.getPrometheusTime(range.to, true);
     const rangeDiff = Math.ceil(end - start);
     const rangeDiff = Math.ceil(end - start);
     const endTime = range.to.utc().format('YYYY-MM-DD HH:mm');
     const endTime = range.to.utc().format('YYYY-MM-DD HH:mm');
 
 
     const options = {
     const options = {
-      interval: panelData.request.interval,
+      interval: request.interval,
     } as DataQueryRequest<PromQuery>;
     } as DataQueryRequest<PromQuery>;
+
     const queryOptions = datasource.createQuery(query, options, start, end);
     const queryOptions = datasource.createQuery(query, options, start, end);
     const expr = {
     const expr = {
       'g0.expr': queryOptions.expr,
       'g0.expr': queryOptions.expr,
@@ -60,9 +69,10 @@ export default class PromLink extends Component<Props, State> {
 
 
   render() {
   render() {
     const { href } = this.state;
     const { href } = this.state;
+
     return (
     return (
       <a href={href} target="_blank" rel="noopener">
       <a href={href} target="_blank" rel="noopener">
-        <Icon name="share-alt" /> Prometheus
+        Prometheus
       </a>
       </a>
     );
     );
   }
   }