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

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

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