fleet/frontend/components/TableContainer/DataTable/LinkCell/LinkCell.tsx

import React from 'react';
import { useDispatch } from 'react-redux';
import { push } from 'react-router-redux';

import { IHost } from 'interfaces/host';
import helpers from 'kolide/helpers';
import PATHS from 'router/paths';
import Button from 'components/buttons/Button/Button';

interface ILinkCellProps {
  value: string;
  host: IHost;
}

const LinkCell = (props: ILinkCellProps): JSX.Element => {
  const { value, host } = props;

  const dispatch = useDispatch();

  const onHostClick = (selectedHost: IHost): void => {
    dispatch(push(PATHS.HOST_DETAILS(selectedHost)));
  };

  const lastSeenTime = (status: string, seenTime: string): string => {
    const { humanHostLastSeen } = helpers;

    if (status !== 'online') {
      return `Last Seen: ${humanHostLastSeen(seenTime)} UTC`;
    }

    return 'Online';
  };

  return (
    <Button
      onClick={() => onHostClick(host)}
      variant="text-link"
      title={lastSeenTime(host.status, host.seen_time)}
    >
      {value}
    </Button>
  );
};

export default LinkCell;