github/oneuptime
1
1
Fork 0
mirror of https://github.com/OneUptime/oneuptime.git synced 2026-04-06 00:32:12 +02:00
Code Issues 193 Packages Projects Releases Wiki Activity

Refactor Tab component to include countBadge and tabType properties

Browse Source
This commit is contained in:
Simon Larsen
2024-04-23 14:03:37 +01:00
parent 6dcc72e708
commit f716ece35f
2 changed files with 62 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
CommonUI/src/Components/Tabs/Tab.tsx
View File

@@ -1,7 +1,16 @@
import React, { FunctionComponent, ReactElement } from 'react';
export enum TabType {
Error = 'error',
Warning = 'warning',
Info = 'info',
Success = 'success',
}
export interface Tab {
name: string;
countBadge?: number | undefined;
tabType?: TabType | undefined;
children: ReactElement;
}
@@ -14,6 +23,8 @@ export interface ComponentProps {
const TabElement: FunctionComponent<ComponentProps> = (
props: ComponentProps
): ReactElement => {
const backgroundColor: string = 'bg-gray-100';
return (
<div className="mt-3 mb-3">
<div
@@ -21,13 +32,33 @@ const TabElement: FunctionComponent<ComponentProps> = (
onClick={props.onClick}
className={`${
(props.isSelected
? 'bg-gray-100 text-gray-700'
? backgroundColor + ' text-gray-700'
: 'text-gray-500 hover:text-gray-700') +
' rounded-md px-3 py-2 text-sm font-medium cursor-pointer'
' rounded-md px-3 py-2 text-sm font-medium cursor-pointer flex'
}`}
aria-current={props.isSelected ? 'page' : undefined}
>
{props.tab.name}
<div>{props.tab.name}</div>
{props.tab.countBadge && props.tab.countBadge > 0 ? (
<span
className={`${
props.tab.tabType === TabType.Error
? 'bg-red-500'
: props.tab.tabType === TabType.Warning
? 'bg-yellow-500'
: props.tab.tabType === TabType.Info
? 'bg-indigo-500'
: props.tab.tabType === TabType.Success
? 'bg-green-500'
: 'bg-gray-500'
} text-white rounded-full px-2 py-1 text-xs font-semibold ml-2 -mt-0.5`}
>
{props.tab.countBadge}
</span>
) : (
<></>
)}
</div>
</div>
);

31
Dashboard/src/Components/Span/SpanViewer.tsx
View File

@@ -26,6 +26,7 @@ import CodeType from 'Common/Types/Code/CodeType';
import JSONFunctions from 'Common/Types/JSONFunctions';
import AccordionGroup from 'CommonUI/src/Components/Accordion/AccordionGroup';
import Accordion from 'CommonUI/src/Components/Accordion/Accordion';
import { TabType } from 'CommonUI/src/Components/Tabs/Tab';
export interface ComponentProps {
id: string;
@@ -288,9 +289,9 @@ const SpanViewer: FunctionComponent<ComponentProps> = (
(event: SpanEvent) => {
if (eventType === SpanEventType.Exception) {
// name of the event is exception
return event.name === SpanEventType.Exception;
return event.name === SpanEventType.Exception.toLowerCase();
}
return event.name !== SpanEventType.Exception;
return event.name !== SpanEventType.Exception.toLowerCase();
}
);
@@ -303,6 +304,12 @@ const SpanViewer: FunctionComponent<ComponentProps> = (
return <ErrorMessage error="No events found for this span." />;
}
let bgColorClassName: string = 'bg-indigo-500';
if (eventType === SpanEventType.Exception) {
bgColorClassName = 'bg-red-500';
}
return (
<AccordionGroup>
{eventsToShow.map((event: SpanEvent, index: number) => {
@@ -312,7 +319,9 @@ const SpanViewer: FunctionComponent<ComponentProps> = (
title={
<div className="flex space-x-2">
<div className="flex space-x-2">
<div className="rounded-md bg-indigo-500 text-white p-1 text-xs font-semibold">
<div
className={`rounded-md text-white p-1 text-xs font-semibold ${bgColorClassName}`}
>
{eventType}: {index + 1}
</div>
<div className="flex space-x-1">
@@ -523,6 +532,8 @@ const SpanViewer: FunctionComponent<ComponentProps> = (
{
name: 'Logs',
children: getLogsContentElement(),
countBadge: logs.length,
tabType: TabType.Info,
},
{
name: 'Attributes',
@@ -531,10 +542,24 @@ const SpanViewer: FunctionComponent<ComponentProps> = (
{
name: 'Events',
children: getEventsContentElement(),
countBadge: span?.events?.filter((event: SpanEvent) => {
return (
event.name !==
SpanEventType.Exception.toLowerCase()
);
}).length,
tabType: TabType.Info,
},
{
name: 'Exceptions',
children: getExceptionsContentElement(),
tabType: TabType.Error,
countBadge: span?.events?.filter((event: SpanEvent) => {
return (
event.name ===
SpanEventType.Exception.toLowerCase()
);
}).length,
},
]}
onTabChange={() => {}}