feat(ui): make app/route/agent clickable in exchange header for navigation
This commit is contained in:
@@ -41,6 +41,29 @@
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.linkBtn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.25rem;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
padding: 2px 4px;
|
||||||
|
margin: -2px 0;
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
cursor: pointer;
|
||||||
|
font: inherit;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
transition: background 0.1s, color 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.linkBtn:hover {
|
||||||
|
background: var(--bg-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.linkBtn:hover .icon {
|
||||||
|
color: var(--amber);
|
||||||
|
}
|
||||||
|
|
||||||
.agentLabel {
|
.agentLabel {
|
||||||
font-size: 0.625rem;
|
font-size: 0.625rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|||||||
@@ -57,15 +57,21 @@ export function ExchangeHeader({ detail }: ExchangeHeaderProps) {
|
|||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
<span className={styles.separator} />
|
<span className={styles.separator} />
|
||||||
|
<button className={styles.linkBtn} onClick={() => navigate(`/exchanges/${detail.applicationName}`)} title="Show all exchanges for this application">
|
||||||
<span className={styles.app}>{detail.applicationName}</span>
|
<span className={styles.app}>{detail.applicationName}</span>
|
||||||
<GitBranch size={12} className={styles.icon} />
|
</button>
|
||||||
|
<button className={styles.linkBtn} onClick={() => navigate(`/exchanges/${detail.applicationName}/${detail.routeId}`)} title="Show all exchanges for this route">
|
||||||
<span className={styles.route}>{detail.routeId}</span>
|
<span className={styles.route}>{detail.routeId}</span>
|
||||||
|
<GitBranch size={12} className={styles.icon} />
|
||||||
|
</button>
|
||||||
{detail.agentId && (
|
{detail.agentId && (
|
||||||
<>
|
<>
|
||||||
<span className={styles.separator} />
|
<span className={styles.separator} />
|
||||||
<Server size={12} className={styles.icon} />
|
<button className={styles.linkBtn} onClick={() => navigate(`/runtime/${detail.applicationName}/${detail.agentId}`)} title="Go to agent details">
|
||||||
<span className={styles.app}>{detail.applicationName}</span>
|
<span className={styles.app}>{detail.applicationName}</span>
|
||||||
<MonoText size="xs">{detail.agentId}</MonoText>
|
<MonoText size="xs">{detail.agentId}</MonoText>
|
||||||
|
<Server size={12} className={styles.icon} />
|
||||||
|
</button>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
<span className={styles.duration}>{formatDuration(detail.durationMs)}</span>
|
<span className={styles.duration}>{formatDuration(detail.durationMs)}</span>
|
||||||
|
|||||||
Reference in New Issue
Block a user