message: Refactor config/type usage out of component, use new API instead.
diff: */
  import React, { FC } from 'react';
  -import {
  - configApiRef,
  - Progress,
  - Table,
  - TableColumn,
  - useApi,
  -} from '@backstage/core';
  +import { Progress, Table, TableColumn, useApi } from '@backstage/core';
  import Alert from '@material-ui/lab/Alert';
  import { useAsync } from 'react-use';
  -
  -type NewRelicApplication = {
  - id: number;
  - application_summary: NewRelicApplicationSummary;
  - name: string;
  - language: string;
  - health_status: string;
  - reporting: boolean;
  - settings: NewRelicApplicationSettings;
  - links?: NewRelicApplicationLinks;
  -};
  -
  -type NewRelicApplicationSummary = {
  - apdex_score: number;
  - error_rate: number;
  - host_count: number;
  - instance_count: number;
  - response_time: number;
  - throughput: number;
  -};
  -
  -type NewRelicApplicationSettings = {
  - app_apdex_threshold: number;
  - end_user_apdex_threshold: number;
  - enable_real_user_monitoring: boolean;
  - use_server_side_config: boolean;
  -};
  -
  -type NewRelicApplicationLinks = {
  - application_instances: Array<any>;
  - servers: Array<any>;
  - application_hosts: Array<any>;
  -};
  -
  -type NewRelicApplications = {
  - applications: NewRelicApplication[];
  -};
  +import { newRelicApiRef, NewRelicApplications } from '../../api';
  export const NewRelicAPMTable: FC<NewRelicApplications> = ({
  applications,
  @@ -73,7 +31,7 @@ export const NewRelicAPMTable: FC<NewRelicApplications> = ({
  { title: 'Instance Count', field: 'instanceCount' },
  { title: 'Apdex', field: 'apdexScore' },
  ];
  - const data = applications.map((app: NewRelicApplication) => {
  + const data = applications.map(app => {
  const { name, application_summary: applicationSummary } = app;
  const {
  response_time: responseTime,
  @@ -104,25 +62,11 @@ export const NewRelicAPMTable: FC<NewRelicApplications> = ({
  };
  const NewRelicFetchComponent: FC<{}> = () => {
  - const configApi = useApi(configApiRef);
  - const apiBaseUrl = configApi.getString('newrelic.api.baseUrl');
  - const apiKey = configApi.getString('newrelic.api.key');
  - const apiKeyIsSet = apiKey && apiKey !== 'NEW_RELIC_REST_API_KEY';
  -
  - const { value, loading, error } = useAsync(async (): Promise<
  - NewRelicApplication[]
  - > => {
  - if (!apiKeyIsSet) {
  - return [];
  - }
  + const api = useApi(newRelicApiRef);
  - const response = await fetch(`${apiBaseUrl}/applications.json`, {
  - headers: {
  - 'X-Api-Key': apiKey,
  - },
  - });
  - const data: NewRelicApplications = await response.json();
  - return data.applications.filter((application: NewRelicApplication) => {
  + const { value, loading, error } = useAsync(async () => {
  + const data = await api.getApplications();
  + return data.applications.filter(application => {
  return application.hasOwnProperty('application_summary');
  });
  }, []);
  @@ -131,12 +75,6 @@ const NewRelicFetchComponent: FC<{}> = () => {
  return <Progress />;
  } else if (error) {
  return <Alert severity="error">{error.message}</Alert>;
  - } else if (!apiKeyIsSet) {
  - return (
  - <Alert severity="error">
  - No REST API Key configured. Check your app-config.yaml.
  - </Alert>
  - );
  }
  return <NewRelicAPMTable applications={value || []} />;
  