GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-12 04:29:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(SelectedSpanDetails): add styled components, minor refactoring (#191)

Browse Source
This commit is contained in:
NIDHI TANDON 2021-06-28 21:32:41 +05:30 committed by GitHub
parent d09c63331d
commit 6f2b66c286
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 72 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
frontend/src/modules/Traces/SelectedSpanDetails.tsx
View File

@ -1,69 +1,85 @@
import React from "react";
import { Card, Space, Tabs, Typography } from "antd";
import styled from "styled-components";
import { pushDStree } from "../../store/actions";
import { pushDStree } from "Src/store/actions";
const { TabPane } = Tabs;
const { Text } = Typography;
const { Text, Title, Paragraph } = Typography;
interface SelectedSpanDetailsProps {
data: pushDStree
data: pushDStree;
}
const Title = styled(Text)`
color: "#2D9CDB",
fontSize: '12px',
// Check this discussion for antd with styled components
// https://gist.github.com/newswim/fa916c66477ddd5952f7d6548e6a0605
const CustomTitle = styled(Title)`
&&& {
color: #f2f2f2;
font-size: 14px;
}
`;
const CustomText = styled(Text)`
&&& {
color: #2d9cdb;
font-size: 14px;
}
`;
const CustomSubTitle = styled(Title)`
&&& {
color: #bdbdbd;
font-size: 14px;
margin-bottom: 8px;
}
`;
const CustomSubText = styled(Paragraph)`
&&& {
background: #4f4f4f;
color: #2d9cdb;
font-size: 12px;
padding: 6px 8px;
word-break: break-all;
margin-bottom: 16px;
}
`;
const SelectedSpanDetails = (props: SelectedSpanDetailsProps) => {
let spanTags = props.data.tags;
let service = props.data?.name?.split(":")[0];
let operation = props.data?.name?.split(":")[1];
const spanTags = props.data.tags;
const service = props.data?.name?.split(":")[0];
const operation = props.data?.name?.split(":")[1];
return (
<Card style={{ border: "none", background: "transparent", padding: 0 }} bodyStyle={{ padding: 0 }}>
<Card
style={{ border: "none", background: "transparent", padding: 0 }}
bodyStyle={{ padding: 0 }}
>
<Space direction="vertical">
<strong> Details for selected Span </strong>
<Space direction="vertical" size={2}>
<Text style={{ marginTop: "18px" }}>
Service
</Text>
<Title style={{ color: "#2D9CDB", fontSize: "12px" }}>
{service}
</Title>
<CustomTitle style={{ marginTop: "18px" }}>Service</CustomTitle>
<CustomText>{service}</CustomText>
</Space>
<Space direction="vertical" size={2}>
<Text>
Operation
</Text>
<Text style={{ color: "#2D9CDB", fontSize: "12px" }}>
{operation}
</Text>
<CustomTitle>Operation</CustomTitle>
<CustomText>{operation}</CustomText>
</Space>
</Space>
<Tabs defaultActiveKey="1">
<TabPane tab="Tags" key="1">
{spanTags && spanTags.map((tags, index) => {
{spanTags &&
spanTags.map((tags, index) => {
return (
<>
{tags.value && (
<>
<Text style={{ color: "#BDBDBD", fontSize: "12px", marginBottom: "8px" }}>
{tags.key}
</Text>
<div style={{
background: "#4F4F4F",
color: "#2D9CDB",
fontSize: "12px",
padding: "6px 8px",
wordBreak: "break-all",
marginBottom: "16px",
}}>
<CustomSubTitle>{tags.key}</CustomSubTitle>
<CustomSubText>
{tags.key === "error" ? "true" : tags.value}
</div>
</CustomSubText>
</>
)}
</>
@ -71,23 +87,13 @@ const SelectedSpanDetails = (props: SelectedSpanDetailsProps) => {
})}
</TabPane>
<TabPane tab="Errors" key="2">
{spanTags && spanTags
{spanTags &&
spanTags
.filter((tags) => tags.key === "error")
.map((error) => (
<>
<Text style={{ color: "#BDBDBD", fontSize: "12px", marginBottom: "8px" }}>
{error.key}
</Text>
<div style={{
background: "#4F4F4F",
color: "#2D9CDB",
fontSize: "12px",
padding: "6px 8px",
wordBreak: "break-all",
marginBottom: "16px",
}}>
true
</div>
<CustomSubTitle>{error.key}</CustomSubTitle>
<CustomSubText>true</CustomSubText>
</>
))}
</TabPane>