Skip to content

Commit f5db248

Browse files
authored
feat(ourlogs): Add project badge to log row (#100910)
This adds a small project badge to log rows so users can tell which project a log line is from at a glance when looking at multiple projects. Other: - This memoizes project badge as we shouldn't be rerendering ~2-5ms components when none of the props change, this especially hurts log table performance as hundreds of lines can be rendered at once. Closes LOGS-385
1 parent 948ee22 commit f5db248

File tree

3 files changed

+12
-5
lines changed

3 files changed

+12
-5
lines changed

static/app/components/idBadge/projectBadge.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {cloneElement} from 'react';
1+
import {cloneElement, memo} from 'react';
22
import styled from '@emotion/styled';
33

44
import type {LinkProps} from 'sentry/components/core/link';
@@ -101,4 +101,4 @@ const StyledLink = styled(Link)`
101101
}
102102
`;
103103

104-
export default ProjectBadge;
104+
export default memo(ProjectBadge);

static/app/views/explore/logs/tables/logsInfiniteTable.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import useJumpButtons from 'sentry/components/replays/useJumpButtons';
1414
import {GridResizer} from 'sentry/components/tables/gridEditable/styles';
1515
import {IconArrow, IconWarning} from 'sentry/icons';
1616
import {t, tct} from 'sentry/locale';
17+
import {space} from 'sentry/styles/space';
1718
import type {TagCollection} from 'sentry/types/group';
1819
import {defined} from 'sentry/utils';
1920
import {
@@ -331,6 +332,7 @@ export function LogsInfiniteTable({
331332
'.log-table-row-chevron-button': {
332333
width: theme.isChonk ? '24px' : '18px',
333334
height: theme.isChonk ? '24px' : '18px',
335+
padding: `${space(0.5)} ${space(0.75)}`,
334336
marginRight: '4px',
335337
display: 'flex',
336338
alignItems: 'center',

static/app/views/explore/logs/tables/logsTableRow.tsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import omit from 'lodash/omit';
66

77
import {Button} from 'sentry/components/core/button';
88
import {EmptyStreamWrapper} from 'sentry/components/emptyStateWarning';
9+
import ProjectBadge from 'sentry/components/idBadge/projectBadge';
910
import LoadingIndicator from 'sentry/components/loadingIndicator';
1011
import {IconAdd, IconJson, IconSubtract, IconWarning} from 'sentry/icons';
1112
import {IconChevron} from 'sentry/icons/iconChevron';
@@ -22,6 +23,7 @@ import useCopyToClipboard from 'sentry/utils/useCopyToClipboard';
2223
import {useLocation} from 'sentry/utils/useLocation';
2324
import useOrganization from 'sentry/utils/useOrganization';
2425
import useProjectFromId from 'sentry/utils/useProjectFromId';
26+
import useProjects from 'sentry/utils/useProjects';
2527
import CellAction, {
2628
Actions,
2729
ActionTriggerType,
@@ -36,6 +38,7 @@ import {
3638
import type {TraceItemDetailsResponse} from 'sentry/views/explore/hooks/useTraceItemDetails';
3739
import {useFetchTraceItemDetailsOnHover} from 'sentry/views/explore/hooks/useTraceItemDetails';
3840
import {
41+
AlwaysPresentLogFields,
3942
DEFAULT_TRACE_ITEM_HOVER_TIMEOUT,
4043
DEFAULT_TRACE_ITEM_HOVER_TIMEOUT_WITH_AUTO_REFRESH,
4144
HiddenLogDetailFields,
@@ -149,6 +152,7 @@ export const LogRowContent = memo(function LogRowContent({
149152
const location = useLocation();
150153
const organization = useOrganization();
151154
const fields = useQueryParamsFields();
155+
const projects = useProjects();
152156

153157
const autorefreshEnabled = useLogsAutoRefreshEnabled();
154158
const setAutorefresh = useSetLogsAutoRefresh();
@@ -227,9 +231,9 @@ export const LogRowContent = memo(function LogRowContent({
227231

228232
const severityNumber = dataRow[OurLogKnownFieldKey.SEVERITY_NUMBER];
229233
const severityText = dataRow[OurLogKnownFieldKey.SEVERITY];
230-
const project = useProjectFromId({
231-
project_id: '' + dataRow[OurLogKnownFieldKey.PROJECT_ID],
232-
});
234+
const projectId: (typeof AlwaysPresentLogFields)[1] =
235+
dataRow[OurLogKnownFieldKey.PROJECT_ID];
236+
const project = projects.projects.find(p => p.id === '' + projectId);
233237
const projectSlug = project?.slug ?? '';
234238

235239
const level = getLogSeverityLevel(
@@ -335,6 +339,7 @@ export const LogRowContent = memo(function LogRowContent({
335339
<span className="log-table-row-chevron-button">{chevronIcon}</span>
336340
)}
337341
<SeverityCircleRenderer extra={rendererExtra} meta={meta} />
342+
{project ? <ProjectBadge project={project} avatarSize={12} hideName /> : null}
338343
</LogFirstCellContent>
339344
</LogsTableBodyFirstCell>
340345
{fields?.map(field => {

0 commit comments

Comments
 (0)