fix: remove accidental scrollbar from deployment banner (#10616)

* chore: clean up DeploymentBannerView markup

* fix: remove extra scrollbar

* refactor: remove needless calc call
This commit is contained in:
Michael Smith
2023-11-09 15:52:23 -05:00
committed by GitHub
parent 61fac2dcfc
commit 8290fee3f7
@@ -75,13 +75,14 @@ export interface DeploymentBannerViewProps {
export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
const { health, stats, fetchStats } = props;
const theme = useTheme();
const aggregatedMinutes = useMemo(() => {
if (!stats) {
return;
}
return dayjs(stats.collected_at).diff(stats.aggregated_from, "minutes");
}, [stats]);
const displayLatency = stats?.workspaces.connection_latency_ms.P50 || -1;
const [timeUntilRefresh, setTimeUntilRefresh] = useState(0);
useEffect(() => {
if (!stats || !fetchStats) {
@@ -130,7 +131,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
justify-content: center;
background-color: ${unhealthy ? colors.red[10] : undefined};
padding: 0 12px;
height: ${bannerHeight}px;
height: 100%;
color: #fff;
& svg {
@@ -151,10 +152,13 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
pointer-events: none;
`;
const displayLatency = stats?.workspaces.connection_latency_ms.P50 || -1;
return (
<div
css={{
position: "sticky",
lineHeight: 1,
height: bannerHeight,
bottom: 0,
zIndex: 1,
@@ -216,6 +220,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
</div>
)}
</Tooltip>
<div css={styles.group}>
<div css={styles.category}>Workspaces</div>
<div css={styles.values}>
@@ -245,6 +250,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
/>
</div>
</div>
<div css={styles.group}>
<Tooltip title={`Activity in the last ~${aggregatedMinutes} minutes`}>
<div css={styles.category}>Transmission</div>
@@ -279,6 +285,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
</Tooltip>
</div>
</div>
<div css={styles.group}>
<div css={styles.category}>Active Connections</div>
@@ -317,6 +324,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
</Tooltip>
</div>
</div>
<div
css={{
color: theme.palette.text.primary,