在Backstage中集成Grafana

import React from 'react';
import { useState, useEffect } from 'react';
import { Page, Content } from '@backstage/core-components';
import { identityApiRef, useApi, microsoftAuthApiRef } from '@backstage/core-plugin-api';
import PermissionDenied from '../../../../packages/app/src/components/custom/PermissionDenied';

export const MainPage = () => {
  // useApi作为hook必须在顶层调用
  const microsoftAuthApi = useApi(microsoftAuthApiRef);
  const IdentityApi = useApi(identityApiRef);

  const [localSrc, setLocalSrc] = useState('');
  const [loading, setLoading] = useState(true);
  const [backstageCredentials, setBackstageCredentials] = useState('');
  const [isMicroLogin, setIsMicroLogin] = useState(true);

  useEffect(() => {
    const getDataByMicrosoftIdToken = async () => {
      try {
        const microsoftCredentials = await microsoftAuthApi.getIdToken();
        setLocalSrc(
          `https://grafana.xxxxxx.com.cn/d/ee080bb6-9a05-4a8b-84fb-871fd9a14c16/new-dashboard?orgId=1&auth_token=${microsoftCredentials}`
        );
      } catch (error) {
        // 当没有登录过MicroSoft账号时，进入此界面将自动弹出请求登录窗口，此时点击reject all，则进行此处理
        console.log('Failed to fetch Microsoft credentials:', error);
      } finally {
        setIsMicroLogin(false);
        setLoading(false);
      }
    };

    const getBackStageUserIdentity = async () => {
      try {
        const bkstCredentials = await IdentityApi.getBackstageIdentity();
        setBackstageCredentials(bkstCredentials.userEntityRef);

        if (bkstCredentials.userEntityRef !== 'user:development/guest') {
          getDataByMicrosoftIdToken();
        }
      } catch (error) {
        console.log('Failed to fetch Backstage credentials:', error);
      }
    };

    getBackStageUserIdentity();
  }, []);

  // 若登录账号为guest访客账号或未进行MicroSoft账号登录认证，则将无权限访问
  if (backstageCredentials === 'user:development/guest' || !isMicroLogin) {
    return (
      <Page themeId="tool">
        <Content>
          <PermissionDenied />
        </Content>
      </Page>
    );
  }

  return (
    <Page themeId="tool">
      <Content>
        {loading ? (
          <div>Loading...</div>
        ) : (
          <iframe
            src={localSrc}
            title="Grafana"
            height="100%"
            width="100%"
            style={{ border: 0 }}
          />
        )}
      </Content>
    </Page>
  );
};

import React from "react";
import { Button, Container, Typography } from '@material-ui/core';

const PermissionDenied = () => {
  return (
    <Container style={{ textAlign: 'center', marginTop: '100px' }}>
      <img
        src="https://static.vecteezy.com/system/resources/previews/002/846/473/large_2x/cloud-computing-technology-vector.jpg"
        style={{ width: '30%', margin: '20px auto', display: 'block', maxWidth: '100%' }}
        alt="Permission Denied"
      />
      <Typography variant="h2" gutterBottom>
        Permission Defined
      </Typography>
      <Typography variant="h5" gutterBottom>
        您尚未有权限访问
      </Typography>
      <Button
        variant="contained"
        color="primary"
        href='/'
        style={{ marginTop: '20px' }}
      >
        返回主页
      </Button>
    </Container>
  );
};

export default PermissionDenied;

// ...other import
import { grafanaPage } from '@internal/backstage-plugin-grafana';

// ...others
const routes = (
  <FlatRoutes>
    {/* ...others */}
    <Route path="/grafana" element={<GrafanaPage />} />
  </FlatRoutes>
);

<SidebarPage>
  {/* ...others */}
  <Sidebar>
    <SidebarGroup label="Menu" icon={<MenuIcon />}>
      {/* ...others */}
      <SidebarScrollWrapper>
        {/* Items in this group will be scrollable if they run out of space */}
        <SidebarItem icon={DashboardIcon} to="grafana" text="Grafana" />
        {/* ...others */}
      </SidebarScrollWrapper>
    </SidebarGroup>
  </Sidebar>
  {/* ...others */}
</SidebarPage>