feat(dashboard): add sensitive data toggle to flow chart

Add an eye toggle in the flow section header that masks sensitive node
labels (users, tokens, nodes, groups, channels) in the Sankey while keeping
model names visible. Masking only rewrites display text; nodes stay distinct
via their key so graph structure, links, and highlighting are unaffected.
This commit is contained in:
CaIon
2026-06-20 22:09:04 +08:00
parent 8ad83bf62f
commit 5e86644649
10 changed files with 119 additions and 9 deletions
@@ -94,6 +94,8 @@ import { FlowNodeFilterControl } from './flow-node-filter'
interface FlowChartsProps {
filters?: DashboardFilters
// When false, sensitive node labels are masked in the rendered Sankey.
sensitiveVisible?: boolean
}
const FLOW_METRIC_OPTIONS = [
@@ -340,6 +342,7 @@ export function FlowCharts(props: FlowChartsProps) {
staleTime: 60_000,
})
const maskSensitive = props.sensitiveVisible === false
const flowData = useMemo(
() =>
buildDashboardFlowData(isLoading ? [] : (flowRows ?? []), metric, {
@@ -351,6 +354,7 @@ export function FlowCharts(props: FlowChartsProps) {
visibleStages,
topNodeLimit,
overflowMode,
maskSensitive,
deletedTokenLabel: (tokenId) => t('Deleted ({{id}})', { id: tokenId }),
otherNodeLabel: (kind) => t(FLOW_OTHER_NODE_LABEL_KEYS[kind]),
}),
@@ -366,6 +370,7 @@ export function FlowCharts(props: FlowChartsProps) {
selectedUsers,
topNodeLimit,
visibleStages,
maskSensitive,
t,
]
)
@@ -468,6 +473,7 @@ export function FlowCharts(props: FlowChartsProps) {
selectedNodes.map(flowNodeFilterKey).join(','),
selectedUsers.join(','),
visibleStages.join(','),
maskSensitive ? 'masked' : 'plain',
flowRows?.length ?? 0,
resolvedTheme,
].join('-')