fleet/frontend/components/LastUpdatedText/LastUpdatedText.tsx

import React from "react";
import formatDistanceToNowStrict from "date-fns/formatDistanceToNowStrict";
import { abbreviateTimeUnits } from "utilities/helpers";

import TooltipWrapper from "components/TooltipWrapper";

const baseClass = "component__last-updated-text";

interface ILastUpdatedTextProps {
  lastUpdatedAt: string;
  whatToRetrieve: string;
}
const LastUpdatedText = ({
  lastUpdatedAt,
  whatToRetrieve,
}: ILastUpdatedTextProps): JSX.Element => {
  if (!lastUpdatedAt || lastUpdatedAt === "0001-01-01T00:00:00Z") {
    lastUpdatedAt = "never";
  } else {
    lastUpdatedAt = abbreviateTimeUnits(
      formatDistanceToNowStrict(new Date(lastUpdatedAt), {
        addSuffix: true,
      })
    );
  }

  return (
    <span className={baseClass}>
      <TooltipWrapper
        tipContent={`Fleet periodically queries all hosts <br />to retrieve ${whatToRetrieve}.`}
      >
        {`Updated ${lastUpdatedAt}`}
      </TooltipWrapper>
    </span>
  );
};

export default LastUpdatedText;