@liatrio/backstage-dora-plugin/dist/components/AtAGlance.esm.js

A Backstage plugin for DORA metrics

import React, { useState, useEffect } from 'react';
import { useTheme } from '@mui/material/styles';
import { InfoCard } from '@backstage/core-components';
import { Box } from '@material-ui/core';
import { Theme, getDateDaysInPastUtc, TrendGraph, Board, fetchData } from '@liatrio/react-dora-charts';
import { useEntity } from '@backstage/plugin-catalog-react';
import { useApi, configApiRef } from '@backstage/core-plugin-api';
import { useAuthHeaderValueLookup, getRepositoryName, COLOR_LIGHT, COLOR_DARK } from '../helper.esm.js';
import { ChartTitle } from './ChartTitle.esm.js';
import { Tooltip } from 'react-tooltip';

const AtAGlance = () => {
  const entity = useEntity();
  const configApi = useApi(configApiRef);
  const backendUrl = configApi.getString("backend.baseUrl");
  const dataEndpoint = configApi.getString("dora.dataEndpoint");
  const daysToFetch = configApi.getNumber("dora.daysToFetch");
  const includeWeekends = configApi.getOptionalBoolean("dora.includeWeekends");
  const showDetails = configApi.getOptionalBoolean("dora.showDetails");
  const rankThresholds = configApi.getOptional(
    "dora.rankThresholds"
  );
  const showTrendGraph = configApi.getOptionalBoolean("dora.showTrendGraph");
  const showIndividualTrends = configApi.getOptionalBoolean(
    "dora.showIndividualTrends"
  );
  const [data, setData] = useState();
  const [loading, setLoading] = useState(false);
  const backstageTheme = useTheme();
  const theme = backstageTheme.palette.mode === "dark" ? Theme.Dark : Theme.Light;
  const getAuthHeaderValue = useAuthHeaderValueLookup();
  const apiUrl = `${backendUrl}/api/proxy/dora/api/${dataEndpoint}`;
  const repositoryName = getRepositoryName(entity);
  const startDate = getDateDaysInPastUtc(31);
  const endDate = getDateDaysInPastUtc(0);
  const message = "";
  useEffect(() => {
    if (!repositoryName) {
      return;
    }
    const fetch = async () => {
      const fetchOptions = {
        api: apiUrl,
        getAuthHeaderValue,
        start: getDateDaysInPastUtc(daysToFetch),
        end: getDateDaysInPastUtc(0),
        repositories: [repositoryName]
      };
      setLoading(true);
      await fetchData(
        fetchOptions,
        (respData) => {
          setData(respData);
          setLoading(false);
        },
        (_) => {
          setLoading(false);
        }
      );
    };
    fetch();
  }, []);
  const tTitle = /* @__PURE__ */ React.createElement(
    ChartTitle,
    {
      title: "DORA: 30 Days At a Glance",
      info: "You DORA Trend, week over week, for the period selected",
      theme
    }
  );
  const bTitle = /* @__PURE__ */ React.createElement(
    ChartTitle,
    {
      title: "DORA: 30 Days At a Glance",
      info: "How well you are doing in each of the DORA Metrics",
      theme
    }
  );
  return /* @__PURE__ */ React.createElement(InfoCard, { title: showTrendGraph ? tTitle : bTitle }, /* @__PURE__ */ React.createElement(
    Tooltip,
    {
      id: "metric_tooltip",
      place: "bottom",
      border: `1px solid ${theme === Theme.Dark ? COLOR_LIGHT : COLOR_DARK}`,
      opacity: "1",
      style: {
        borderRadius: "10px",
        maxWidth: "300px",
        padding: "10px",
        zIndex: "100",
        backgroundColor: backstageTheme.palette.background.default
      }
    }
  ), /* @__PURE__ */ React.createElement(Box, { position: "relative" }, /* @__PURE__ */ React.createElement(Box, { display: "flex", justifyContent: "flex-end" }, repositoryName === "" ? /* @__PURE__ */ React.createElement("div", null, "DORA Metrics are not available for Non-GitHub repos currently") : /* @__PURE__ */ React.createElement("div", { style: { width: "750px", height: "220px" } }, showTrendGraph ? /* @__PURE__ */ React.createElement(
    TrendGraph,
    {
      showIndividualTrends,
      data,
      loading,
      graphStart: startDate,
      graphEnd: endDate,
      metricThresholdSet: rankThresholds,
      message,
      theme
    }
  ) : /* @__PURE__ */ React.createElement(
    Board,
    {
      data,
      loading,
      alwaysShowDetails: showDetails,
      includeWeekendsInCalculations: includeWeekends,
      graphStart: startDate,
      graphEnd: endDate,
      metricThresholdSet: rankThresholds,
      message,
      theme
    }
  )))));
};

export { AtAGlance };
//# sourceMappingURL=AtAGlance.esm.js.map