Backstage
/
community-plugins
mirror of https://github.com/backstage/community-plugins.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: small refactor 

Signed-off-by: blam <ben@blam.sh>
This commit is contained in:
blam 2024-05-20 13:31:19 +02:00
parent a708efda20
commit 24bd8f9dfc
3 changed files with 127 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
workspaces/linkerd/plugins/linkerd/src/components/DependenciesCard.tsx
View File

@ -7,6 +7,7 @@ import {
Card,
CardContent,
CardHeader,
CircularProgress,
Divider,
makeStyles,
Typography,
@ -32,9 +33,22 @@ const useStyles = makeStyles({
export const DependenciesCard = () => {
const styles = useStyles();
const { entity } = useEntity();
const { stats } = useStatsForEntity(entity);
const { stats, loading } = useStatsForEntity(entity);
const content = () => {
if (!stats && loading) {
return <CircularProgress />;
}
if (!stats || !stats.current || !stats.current.pods.meshedPodsPercentage) {
return (
<Typography paragraph>
This service doesn't look like it's tagged with the right service, or
linkerd is not injected.
</Typography>
);
}
if (!stats?.incoming.length && !stats?.outgoing.length) {
return (
<Typography paragraph>

217
workspaces/linkerd/plugins/linkerd/src/components/EdgesTable.tsx
View File

@ -15,6 +15,7 @@ import {
Chip,
makeStyles,
Typography,
CircularProgress,
} from '@material-ui/core';
import CheckCircle from '@material-ui/icons/CheckCircle';
import RemoveCircle from '@material-ui/icons/RemoveCircle';
@ -40,121 +41,125 @@ const useStyles = makeStyles({
export const EdgesTable = () => {
const { entity } = useEntity();
const styles = useStyles();
const { stats } = useStatsForEntity(entity);
const { stats, loading } = useStatsForEntity(entity);
const content = () => {
if (!stats && loading) {
return <CircularProgress />;
}
if (!stats || !stats.current || !stats.current.pods.meshedPodsPercentage) {
return (
<Typography paragraph>
This service doesn't look like it's tagged with the right service, or
linkerd is not injected.
</Typography>
);
}
const incoming =
stats?.incoming?.map(edge => {
const matchedEdge = stats?.edges.find(
e =>
e.dst.namespace === stats.current.namespace &&
e.dst.name === stats.current.name &&
e.dst.type === stats.current.type &&
e.src.type === edge.type &&
e.src.name === edge.name &&
e.src.namespace === edge.namespace,
);
return {
...edge,
direction: 'incoming',
secure: matchedEdge?.noIdentityMsg === '',
};
}) ?? [];
const outgoing =
stats?.outgoing?.map(edge => {
const matchedEdge = stats?.edges.find(
e =>
e.src.namespace === stats.current.namespace &&
e.src.name === stats.current.name &&
e.src.type === stats.current.type &&
e.dst.type === edge.type &&
e.dst.name === edge.name &&
e.dst.namespace === edge.namespace,
);
return {
...edge,
direction: 'outgoing',
secure: matchedEdge?.noIdentityMsg === '',
};
}) ?? [];
const edges = [...incoming, ...outgoing]
.filter(f => f.type === 'deployment')
.sort((a, b) => a.name.localeCompare(b.name));
if (!stats) {
return (
<Card className={styles.gridItemCard}>
<CardHeader title="Mesh Edges" className={styles.header} />
<Divider />
<CardContent className={styles.gridItemCardContent}>
<Typography paragraph>
This service doesn't look like it's tagged with the right service,
or linkerd is not injected.
</Typography>
</CardContent>
</Card>
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell>Direction</TableCell>
<TableCell align="right">Name</TableCell>
<TableCell align="right">RPS</TableCell>
<TableCell align="right">S/R</TableCell>
<TableCell align="right">TLS</TableCell>
</TableRow>
</TableHead>
<TableBody>
{edges.map(row => (
<TableRow key={row.name}>
<TableCell component="th" scope="row">
<Chip
label={
row.direction === 'incoming' ? 'Incoming' : 'Outgoing'
}
color={
row.direction === 'incoming' ? 'primary' : 'secondary'
}
/>
</TableCell>
<TableCell align="right">
<EntityRefLink
entityRef={stringifyEntityRef({
kind: 'component',
name: row.name,
namespace: row.namespace,
})}
/>
</TableCell>
<TableCell align="right">{`${row.requestRate.toFixed(
2,
)}`}</TableCell>
<TableCell align="right">
{`${Math.round(row.successRate * 100)}%`}
</TableCell>
<TableCell align="right">
{row.secure ? (
<CheckCircle color="primary" />
) : (
<RemoveCircle color="secondary" />
)}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}
const incoming =
stats?.incoming?.map(edge => {
const matchedEdge = stats?.edges.find(
e =>
e.dst.namespace === stats.current.namespace &&
e.dst.name === stats.current.name &&
e.dst.type === stats.current.type &&
e.src.type === edge.type &&
e.src.name === edge.name &&
e.src.namespace === edge.namespace,
);
return {
...edge,
direction: 'incoming',
secure: matchedEdge?.noIdentityMsg === '',
};
}) ?? [];
const outgoing =
stats?.outgoing?.map(edge => {
const matchedEdge = stats?.edges.find(
e =>
e.src.namespace === stats.current.namespace &&
e.src.name === stats.current.name &&
e.src.type === stats.current.type &&
e.dst.type === edge.type &&
e.dst.name === edge.name &&
e.dst.namespace === edge.namespace,
);
return {
...edge,
direction: 'outgoing',
secure: matchedEdge?.noIdentityMsg === '',
};
}) ?? [];
const edges = [...incoming, ...outgoing]
.filter(f => f.type === 'deployment')
.sort((a, b) => a.name.localeCompare(b.name));
};
return (
<Card className={styles.gridItemCard}>
<CardHeader title="Mesh Edges" className={styles.header} />
<Divider />
<CardContent className={styles.gridItemCardContent}>
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell>Direction</TableCell>
<TableCell align="right">Name</TableCell>
<TableCell align="right">RPS</TableCell>
<TableCell align="right">S/R</TableCell>
<TableCell align="right">TLS</TableCell>
</TableRow>
</TableHead>
<TableBody>
{edges.map(row => (
<TableRow key={row.name}>
<TableCell component="th" scope="row">
<Chip
label={
row.direction === 'incoming' ? 'Incoming' : 'Outgoing'
}
color={
row.direction === 'incoming' ? 'primary' : 'secondary'
}
/>
</TableCell>
<TableCell align="right">
<EntityRefLink
entityRef={stringifyEntityRef({
kind: 'component',
name: row.name,
namespace: row.namespace,
})}
/>
</TableCell>
<TableCell align="right">{`${row.requestRate.toFixed(
2,
)}`}</TableCell>
<TableCell align="right">
{`${Math.round(row.successRate * 100)}%`}
</TableCell>
<TableCell align="right">
{row.secure ? (
<CheckCircle color="primary" />
) : (
<RemoveCircle color="secondary" />
)}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
{content()}
</CardContent>
</Card>
);

2
workspaces/linkerd/plugins/linkerd/src/components/IsMeshedBanner.tsx
View File

@ -11,7 +11,7 @@ export const IsMeshedBanner = () => {
const { entity } = useEntity();
const { stats } = useStatsForEntity(entity);
if (!stats) {
if (!stats || !stats.current.pods.meshedPodsPercentage) {
return (
<Grid item xs={12}>
<Alert icon={<ErrorIcon fontSize="inherit" />} severity="error">