cost-model/ui/src/components/Subtitle.js

import React from 'react'
import { makeStyles } from '@material-ui/styles'
import { isArray, upperFirst } from 'lodash'
import Breadcrumbs from '@material-ui/core/Breadcrumbs'
import Link from '@material-ui/core/Link'
import NavigateNextIcon from '@material-ui/icons/NavigateNext'
import Tooltip from '@material-ui/core/Tooltip'
import Typography from '@material-ui/core/Typography'
import { toVerboseTimeRange } from '../util';

const useStyles = makeStyles({
  root: {
    '& > * + *': {
      marginTop: 2,
    },
  },
  link: {
    cursor: "pointer",
  },
})

const Subtitle = ({ report }) => {
  const classes = useStyles()

  const { aggregateBy, window } = report

  return (
    <div className={classes.root}>
      <Breadcrumbs
        separator={<NavigateNextIcon fontSize="small" />}
        aria-label="breadcrumb"
      >
        {aggregateBy && aggregateBy.length > 0 ? (
          <Typography>{toVerboseTimeRange(window)} by {upperFirst(aggregateBy)}</Typography>
        ) : (
          <Typography>{toVerboseTimeRange(window)}</Typography>
        )}
      </Breadcrumbs>
    </div>
  )
}

export default React.memo(Subtitle)