@roadiehq/backstage-plugin-argo-cd/dist/components/ArgoCDDetailsCard.esm.js

import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';
import { LinearProgress, Tooltip, Box, Button, List, ListItem } from '@material-ui/core';
import { DateTime } from 'luxon';
import { ARGOCD_ANNOTATION_APP_NAME, useArgoCDAppData } from './useArgoCDAppData.esm.js';
import { ErrorBoundary, InfoCard, Table } from '@backstage/core-components';
import { useApi, configApiRef } from '@backstage/core-plugin-api';
import { isArgocdAvailable } from '../conditions.esm.js';
import { useAppDetails } from './useAppDetails.esm.js';
import SyncIcon from '@material-ui/icons/Sync';
import { useEntity, MissingAnnotationEmptyState } from '@backstage/plugin-catalog-react';
import { DetailsDrawerComponent } from './DetailsDrawer.esm.js';

const defaultTableTitle = "ArgoCD overview";
const MessageComponent = ({
  conditions
}) => {
  const [mapped, setMapped] = useState([]);
  useEffect(() => {
    setMapped(
      conditions?.map((condition) => {
        return {
          key: `${condition.lastTransitionTime}-${condition.type}`,
          ...condition
        };
      }) || []
    );
  }, [conditions]);
  return /* @__PURE__ */ jsx(Fragment, { children: mapped ? /* @__PURE__ */ jsx(List, { dense: true, children: mapped.map((condition) => /* @__PURE__ */ jsx(ListItem, { style: { padding: 0 }, children: condition.message }, condition.key)) }) : null });
};
const getElapsedTime = (start) => {
  return DateTime.fromISO(start).toRelative();
};
const getLastSyncState = (operationState) => {
  return operationState.finishedAt ? getElapsedTime(operationState.finishedAt) : operationState.phase;
};
const State = ({
  value,
  conditions
}) => {
  const colorMap = {
    Pending: "#dcbc21",
    Synced: "green",
    Healthy: "green",
    Inactive: "black",
    Failed: "red"
  };
  if (conditions !== void 0) {
    return /* @__PURE__ */ jsx(
      Tooltip,
      {
        title: /* @__PURE__ */ jsx(MessageComponent, { conditions }),
        placement: "bottom-start",
        children: /* @__PURE__ */ jsx(Box, { display: "flex", alignItems: "center", children: /* @__PURE__ */ jsxs(Button, { style: { paddingLeft: "0px" }, children: [
          /* @__PURE__ */ jsx(
            "span",
            {
              style: {
                display: "block",
                width: "8px",
                height: "8px",
                borderRadius: "50%",
                backgroundColor: colorMap[value] || "#dcbc21",
                marginRight: "5px"
              }
            }
          ),
          value
        ] }) })
      }
    );
  }
  return /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", children: [
    /* @__PURE__ */ jsx(
      "span",
      {
        style: {
          display: "block",
          width: "8px",
          height: "8px",
          borderRadius: "50%",
          backgroundColor: colorMap[value] || "#dcbc21",
          marginRight: "5px"
        }
      }
    ),
    value
  ] });
};
const OverviewComponent = ({
  data,
  extraColumns,
  title,
  subtitle,
  retry
}) => {
  const configApi = useApi(configApiRef);
  const baseUrl = configApi.getOptionalString("argocd.baseUrl");
  const supportsMultipleArgoInstances = Boolean(
    configApi.getOptionalConfigArray("argocd.appLocatorMethods")?.length
  );
  const getBaseUrl = (row) => {
    if (supportsMultipleArgoInstances && !baseUrl) {
      const instanceConfig = configApi.getConfigArray("argocd.appLocatorMethods").find((value) => value.getOptionalString("type") === "config")?.getOptionalConfigArray("instances")?.find(
        (value) => value.getOptionalString("name") === row.metadata?.instance?.name
      );
      return instanceConfig?.getOptionalString("frontendUrl") ?? instanceConfig?.getOptionalString("url");
    }
    return baseUrl;
  };
  const columns = [
    {
      title: "Name",
      highlight: true,
      field: "name",
      render: (row) => DetailsDrawerComponent(row, getBaseUrl(row)),
      customSort: (a, b) => a.metadata.name.localeCompare(b.metadata.name)
    },
    {
      title: "Sync Status",
      field: "syncStatus",
      render: (row) => /* @__PURE__ */ jsx(
        State,
        {
          value: row.status.sync.status,
          conditions: row.status.conditions
        }
      ),
      customSort: (a, b) => a.status.sync.status.localeCompare(b.status.sync.status)
    },
    {
      title: "Health Status",
      field: "healthStatus",
      render: (row) => /* @__PURE__ */ jsx(State, { value: row.status.health.status, conditions: void 0 }),
      customSort: (a, b) => a.status.health.status.localeCompare(b.status.health.status)
    },
    {
      title: "Last Synced",
      defaultSort: "desc",
      field: "lastSynced",
      render: (row) => row.status.operationState ? getLastSyncState(row.status.operationState) : "",
      customSort: (a, b) => {
        return DateTime.fromISO(
          a.status.operationState?.finishedAt || "3000-01-01T00:00:00.000Z"
        ).toMillis() - DateTime.fromISO(
          b.status.operationState?.finishedAt || "3000-01-01T00:00:00.000Z"
        ).toMillis();
      }
    }
  ];
  if (supportsMultipleArgoInstances) {
    columns.splice(1, 0, {
      title: "Instance",
      field: "instance",
      render: (row) => row.metadata?.instance?.name,
      customSort: (a, b) => a.metadata?.instance?.name.localeCompare(b.metadata?.instance?.name)
    });
  }
  return /* @__PURE__ */ jsx(
    Table,
    {
      title: title ?? defaultTableTitle,
      subtitle,
      options: {
        paging: true,
        search: false,
        sorting: true,
        draggable: false,
        padding: "dense"
      },
      data: data.items || [],
      columns: columns.concat(extraColumns),
      actions: [
        {
          icon: () => /* @__PURE__ */ jsx(SyncIcon, {}),
          tooltip: "Refresh",
          isFreeAction: true,
          onClick: () => retry()
        }
      ]
    }
  );
};
const ArgoCDDetails = ({
  entity,
  extraColumns,
  title,
  subtitle
}) => {
  const { url, appName, appSelector, appNamespace, projectName } = useArgoCDAppData({
    entity
  });
  const { loading, value, error, retry } = useAppDetails({
    url,
    appName,
    appSelector,
    appNamespace,
    projectName
  });
  if (loading) {
    return /* @__PURE__ */ jsx(InfoCard, { title: title ?? defaultTableTitle, subheader: subtitle, children: /* @__PURE__ */ jsx(LinearProgress, {}) });
  }
  if (error) {
    return /* @__PURE__ */ jsxs(InfoCard, { title: title ?? defaultTableTitle, subheader: subtitle, children: [
      "Error occurred while fetching data. ",
      error.name,
      ": ",
      error.message
    ] });
  }
  if (value) {
    if (value.items !== void 0) {
      return /* @__PURE__ */ jsx(
        OverviewComponent,
        {
          data: value,
          retry,
          extraColumns,
          title: title ?? defaultTableTitle,
          subtitle: subtitle ?? ""
        }
      );
    }
    if (Array.isArray(value)) {
      const wrapped2 = {
        items: value
      };
      return /* @__PURE__ */ jsx(
        OverviewComponent,
        {
          data: wrapped2,
          retry,
          extraColumns,
          title: title ?? defaultTableTitle,
          subtitle: subtitle ?? ""
        }
      );
    }
    const wrapped = {
      items: [value]
    };
    return /* @__PURE__ */ jsx(
      OverviewComponent,
      {
        data: wrapped,
        retry,
        extraColumns,
        title: title ?? defaultTableTitle,
        subtitle: subtitle ?? ""
      }
    );
  }
  return null;
};
const ArgoCDDetailsCard = (props) => {
  const { entity } = useEntity();
  return !isArgocdAvailable(entity) ? /* @__PURE__ */ jsx(MissingAnnotationEmptyState, { annotation: ARGOCD_ANNOTATION_APP_NAME }) : /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(
    ArgoCDDetails,
    {
      entity,
      extraColumns: props.extraColumns || [],
      title: props.title,
      subtitle: props.subtitle
    }
  ) });
};

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