@fireflyai/backstage-plugin-firefly/dist/components/TopFiveComponentsWith/TopFiveComponents.esm.js

Firefly plugin for Backstage

import React, { useState, useEffect } from 'react';
import _ from 'lodash';
import { TopFiveComponentsItem } from './TopFiveComponentsItem.esm.js';
import { InfoCard, EmptyState } from '@backstage/core-components';
import { useStyles, colors } from './TopFiveComponents.styles.esm.js';
import { AccountTree } from '@mui/icons-material';
import { capitalize } from '../common.esm.js';

const TopFiveComponents = ({ type, entities }) => {
  const [data, setData] = useState([]);
  const classes = useStyles();
  useEffect(() => {
    if (!entities?.length) return;
    const componentMap = /* @__PURE__ */ new Map();
    entities.forEach((entity) => {
      switch (type) {
        case "unmanaged":
          if (entity.spec?.lifecycle !== "unmanaged") return;
          break;
        case "drifted":
          if (entity.spec?.lifecycle !== "drifted") return;
          break;
      }
      const dependencyOf = entity.spec?.dependencyOf || [];
      const componentRefs = dependencyOf.filter((ref) => ref.startsWith("component:"));
      componentRefs.forEach((componentRef) => {
        const componentName = componentRef.replace("component:", "");
        const componentData = componentMap.get(componentName) || {
          name: componentName,
          resourceCount: 0
        };
        componentData.resourceCount += 1;
        componentMap.set(componentName, componentData);
      });
    });
    const sortedData = Array.from(componentMap.values()).sort((a, b) => b.resourceCount - a.resourceCount).slice(0, 5);
    setData(sortedData);
  }, [entities, type]);
  const renderList = () => {
    return data.map((item) => /* @__PURE__ */ React.createElement(
      TopFiveComponentsItem,
      {
        key: item.name,
        name: item.name,
        count: item.resourceCount,
        color: colors[type]
      }
    ));
  };
  if (_.isEmpty(data)) {
    return /* @__PURE__ */ React.createElement(InfoCard, { title: `Top 5 Components with ${type !== "resources" ? `${capitalize(type)} ` : ""}Resources` }, /* @__PURE__ */ React.createElement(
      EmptyState,
      {
        missing: "data",
        title: `No Components with ${type !== "resources" ? `${capitalize(type)} ` : ""}Resources Found`,
        description: `Couldn't find any components with ${type !== "resources" ? `${type} ` : ""}resources associated.`
      }
    ));
  }
  return /* @__PURE__ */ React.createElement(InfoCard, { title: `Top 5 Components with ${type !== "resources" ? `${capitalize(type)} ` : ""}Resources` }, /* @__PURE__ */ React.createElement("div", { className: `${classes.topFiveComponents} ${classes.basicCard} ${classes.row}` }, /* @__PURE__ */ React.createElement("span", { className: classes.line, style: { backgroundColor: colors[type] } }), /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement("span", { className: `${classes.circle} ${classes.center}`, style: { backgroundColor: colors[type] } }, /* @__PURE__ */ React.createElement(AccountTree, { className: classes.circleIcon }))), /* @__PURE__ */ React.createElement("div", { className: `${classes.list} ${classes.col}` }, renderList())));
};

export { TopFiveComponents, TopFiveComponents as default };
//# sourceMappingURL=TopFiveComponents.esm.js.map