sharang/compliance-scanner-agent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: MCP cards redesign, inline graph, DAST spacing, missing back buttons
All checks were successful
CI / Deploy Docs (pull_request) Has been skipped
Details
CI / Deploy MCP (pull_request) Has been skipped
Details
CI / Format (push) Successful in 3s
Details
CI / Clippy (push) Successful in 4m15s
Details
CI / Security Audit (push) Has been skipped
Details
CI / Tests (push) Has been skipped
Details
CI / Format (pull_request) Successful in 5s
Details
CI / Clippy (pull_request) Successful in 4m3s
Details
CI / Security Audit (pull_request) Has been skipped
Details
CI / Tests (pull_request) Has been skipped
Details
CI / Detect Changes (push) Has been skipped
Details
CI / Detect Changes (pull_request) Has been skipped
Details
CI / Deploy Agent (push) Has been skipped
Details
CI / Deploy Dashboard (push) Has been skipped
Details
CI / Deploy Docs (push) Has been skipped
Details
CI / Deploy MCP (push) Has been skipped
Details
CI / Deploy Agent (pull_request) Has been skipped
Details
CI / Deploy Dashboard (pull_request) Has been skipped
Details

Browse Source 
- Redesign MCP server cards with proper CSS (grid layout, config details,
  tool chips, token section with icon actions)
- Add back button to MCP Servers page and DAST Findings page
- Embed graph explorer inline on repositories page (toggle via graph icon)
  instead of navigating to separate page
- Refactor GraphExplorerPage into shared GraphExplorerBody component
  with GraphExplorerInline variant for embedding
- Fix DAST Overview spacing: proper stat cards, button margins, icons
- Add btn-active state for toggled graph button

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Sharang Parnerkar
2026-03-09 17:45:34 +01:00
parent c44bf12a4a
commit 494600b43f
6 changed files with 425 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
compliance-dashboard/assets/main.css
View File

@@ -727,6 +727,208 @@ tbody tr:last-child td {
.mcp-status-dot.stopped { background: var(--text-tertiary); } .mcp-status-dot.stopped { background: var(--text-tertiary); }
.mcp-status-dot.error { background: var(--danger); } .mcp-status-dot.error { background: var(--danger); }
/* ── MCP Server Cards ── */
.mcp-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
gap: 16px;
}
.mcp-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 20px;
transition: border-color 0.2s;
}
.mcp-card:hover {
border-color: var(--border-bright);
}
.mcp-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.mcp-card-title {
display: flex;
align-items: center;
gap: 10px;
}
.mcp-card-title h3 {
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
margin: 0;
color: var(--text-primary);
}
.mcp-card-status {
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 2px 8px;
border-radius: 10px;
}
.mcp-card-status.running {
color: var(--success);
background: var(--success-bg);
}
.mcp-card-status.stopped {
color: var(--text-secondary);
background: var(--bg-secondary);
}
.mcp-card-status.error {
color: var(--danger);
background: var(--danger-bg);
}
.mcp-card-desc {
font-size: 13px;
color: var(--text-secondary);
margin: 0 0 16px;
line-height: 1.4;
}
.mcp-card-details {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
padding: 12px;
background: var(--bg-secondary);
border-radius: var(--radius-md);
}
.mcp-detail-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--text-secondary);
}
.mcp-detail-label {
font-size: 12px;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 6px;
min-width: 80px;
flex-shrink: 0;
}
.mcp-detail-value {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-primary);
word-break: break-all;
}
.mcp-card-tools {
margin-bottom: 16px;
}
.mcp-tools-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.mcp-tool-chip {
font-family: var(--font-mono);
font-size: 11px;
padding: 3px 10px;
background: var(--accent-muted);
color: var(--accent);
border-radius: 12px;
border: 1px solid var(--border-accent);
}
.mcp-card-token {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
background: var(--bg-secondary);
border-radius: var(--radius-md);
margin-bottom: 12px;
}
.mcp-token-display {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
flex: 1;
color: var(--text-secondary);
}
.mcp-token-code {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-primary);
word-break: break-all;
}
.mcp-token-actions {
display: flex;
gap: 4px;
flex-shrink: 0;
}
.mcp-card-footer {
font-size: 11px;
color: var(--text-tertiary);
}
/* ── DAST Stat Cards ── */
.stat-card-item {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 20px;
text-align: center;
}
.stat-card-value {
font-family: var(--font-display);
font-size: 28px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 6px;
}
.stat-card-label {
font-size: 13px;
color: var(--text-secondary);
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
/* ── Button active state ── */
.btn-active,
.btn.btn-active {
background: var(--accent-muted);
border-color: var(--accent);
color: var(--accent);
}
.spinner { .spinner {
display: inline-block; display: inline-block;
width: 14px; width: 14px;

11
compliance-dashboard/src/pages/dast_findings.rs
View File

@@ -1,4 +1,6 @@
use dioxus::prelude::*; use dioxus::prelude::*;
use dioxus_free_icons::icons::bs_icons::*;
use dioxus_free_icons::Icon;
use crate::app::Route; use crate::app::Route;
use crate::components::page_header::PageHeader; use crate::components::page_header::PageHeader;
@@ -10,6 +12,15 @@ pub fn DastFindingsPage() -> Element {
let findings = use_resource(|| async { fetch_dast_findings().await.ok() }); let findings = use_resource(|| async { fetch_dast_findings().await.ok() });
rsx! { rsx! {
div { class: "back-nav",
button {
class: "btn btn-ghost btn-back",
onclick: move |_| { navigator().go_back(); },
Icon { icon: BsArrowLeft, width: 16, height: 16 }
"Back"
}
}
PageHeader { PageHeader {
title: "DAST Findings", title: "DAST Findings",
description: "Vulnerabilities discovered through dynamic application security testing", description: "Vulnerabilities discovered through dynamic application security testing",

41
compliance-dashboard/src/pages/dast_overview.rs
View File

@@ -1,4 +1,6 @@
use dioxus::prelude::*; use dioxus::prelude::*;
use dioxus_free_icons::icons::bs_icons::*;
use dioxus_free_icons::Icon;
use crate::app::Route; use crate::app::Route;
use crate::components::page_header::PageHeader; use crate::components::page_header::PageHeader;
@@ -15,9 +17,9 @@ pub fn DastOverviewPage() -> Element {
description: "Dynamic Application Security Testing — scan running applications for vulnerabilities", description: "Dynamic Application Security Testing — scan running applications for vulnerabilities",
} }
div { class: "grid grid-cols-3 gap-4 mb-6", div { class: "stat-cards", style: "margin-bottom: 24px;",
div { class: "stat-card", div { class: "stat-card-item",
div { class: "stat-value", div { class: "stat-card-value",
match &*scan_runs.read() { match &*scan_runs.read() {
Some(Some(data)) => { Some(Some(data)) => {
let count = data.total.unwrap_or(0); let count = data.total.unwrap_or(0);
@@ -26,10 +28,13 @@ pub fn DastOverviewPage() -> Element {
_ => rsx! { "—" }, _ => rsx! { "—" },
} }
} }
div { class: "stat-label", "Total Scans" } div { class: "stat-card-label",
Icon { icon: BsPlayCircle, width: 14, height: 14 }
" Total Scans"
}
} }
div { class: "stat-card", div { class: "stat-card-item",
div { class: "stat-value", div { class: "stat-card-value",
match &*findings.read() { match &*findings.read() {
Some(Some(data)) => { Some(Some(data)) => {
let count = data.total.unwrap_or(0); let count = data.total.unwrap_or(0);
@@ -38,29 +43,37 @@ pub fn DastOverviewPage() -> Element {
_ => rsx! { "—" }, _ => rsx! { "—" },
} }
} }
div { class: "stat-label", "DAST Findings" } div { class: "stat-card-label",
Icon { icon: BsShieldExclamation, width: 14, height: 14 }
" DAST Findings"
}
} }
div { class: "stat-card", div { class: "stat-card-item",
div { class: "stat-value", "—" } div { class: "stat-card-value", "—" }
div { class: "stat-label", "Active Targets" } div { class: "stat-card-label",
Icon { icon: BsBullseye, width: 14, height: 14 }
" Active Targets"
}
} }
} }
div { class: "flex gap-4 mb-4", div { style: "display: flex; gap: 12px; margin-bottom: 24px;",
Link { Link {
to: Route::DastTargetsPage {}, to: Route::DastTargetsPage {},
class: "btn btn-primary", class: "btn btn-primary",
"Manage Targets" Icon { icon: BsBullseye, width: 14, height: 14 }
" Manage Targets"
} }
Link { Link {
to: Route::DastFindingsPage {}, to: Route::DastFindingsPage {},
class: "btn btn-secondary", class: "btn btn-secondary",
"View Findings" Icon { icon: BsShieldExclamation, width: 14, height: 14 }
" View Findings"
} }
} }
div { class: "card", div { class: "card",
h3 { "Recent Scan Runs" } div { class: "card-header", "Recent Scan Runs" }
match &*scan_runs.read() { match &*scan_runs.read() {
Some(Some(data)) => { Some(Some(data)) => {
let runs = &data.data; let runs = &data.data;

59
compliance-dashboard/src/pages/graph_explorer.rs
View File

@@ -10,6 +10,36 @@ use crate::infrastructure::graph::{fetch_graph, search_nodes, trigger_graph_buil
#[component] #[component]
pub fn GraphExplorerPage(repo_id: String) -> Element { pub fn GraphExplorerPage(repo_id: String) -> Element {
rsx! {
div { class: "back-nav",
button {
class: "btn btn-ghost btn-back",
onclick: move |_| { navigator().go_back(); },
Icon { icon: BsArrowLeft, width: 16, height: 16 }
"Back"
}
}
PageHeader {
title: "Code Knowledge Graph",
description: "Interactive visualization of code structure and relationships",
}
GraphExplorerBody { repo_id: repo_id }
}
}
/// Inline variant without back button and page header — for embedding in other pages.
#[component]
pub fn GraphExplorerInline(repo_id: String) -> Element {
rsx! {
GraphExplorerBody { repo_id: repo_id }
}
}
/// Shared graph explorer body used by both the full page and inline variants.
#[component]
fn GraphExplorerBody(repo_id: String) -> Element {
let repo_id_clone = repo_id.clone(); let repo_id_clone = repo_id.clone();
let mut graph_data = use_resource(move || { let mut graph_data = use_resource(move || {
let rid = repo_id_clone.clone(); let rid = repo_id_clone.clone();
@@ -23,22 +53,15 @@ pub fn GraphExplorerPage(repo_id: String) -> Element {
let mut building = use_signal(|| false); let mut building = use_signal(|| false);
let mut toasts = use_context::<Toasts>(); let mut toasts = use_context::<Toasts>();
// Selected node state
let mut selected_node = use_signal(|| Option::<serde_json::Value>::None); let mut selected_node = use_signal(|| Option::<serde_json::Value>::None);
let mut inspector_open = use_signal(|| false); let mut inspector_open = use_signal(|| false);
// Search state
let mut search_query = use_signal(String::new); let mut search_query = use_signal(String::new);
let mut search_results = use_signal(Vec::<serde_json::Value>::new); let mut search_results = use_signal(Vec::<serde_json::Value>::new);
let mut file_filter = use_signal(String::new); let mut file_filter = use_signal(String::new);
// Store serialized graph JSON in signals so use_effect can react to them
let mut nodes_json = use_signal(String::new); let mut nodes_json = use_signal(String::new);
let mut edges_json = use_signal(String::new); let mut edges_json = use_signal(String::new);
let mut graph_ready = use_signal(|| false); let mut graph_ready = use_signal(|| false);
// When resource resolves, serialize the data into signals
let graph_data_read = graph_data.read(); let graph_data_read = graph_data.read();
if let Some(Some(data)) = &*graph_data_read { if let Some(Some(data)) = &*graph_data_read {
if !data.data.nodes.is_empty() && !graph_ready() { if !data.data.nodes.is_empty() && !graph_ready() {
@@ -50,7 +73,6 @@ pub fn GraphExplorerPage(repo_id: String) -> Element {
} }
} }
// Derive stats and file tree
let (node_count, edge_count, community_count, languages, file_tree_data) = let (node_count, edge_count, community_count, languages, file_tree_data) =
if let Some(Some(data)) = &*graph_data_read { if let Some(Some(data)) = &*graph_data_read {
let build = data.data.build.clone().unwrap_or_default(); let build = data.data.build.clone().unwrap_or_default();
@@ -82,11 +104,8 @@ pub fn GraphExplorerPage(repo_id: String) -> Element {
}; };
let has_graph_data = matches!(&*graph_data_read, Some(Some(d)) if !d.data.nodes.is_empty()); let has_graph_data = matches!(&*graph_data_read, Some(Some(d)) if !d.data.nodes.is_empty());
// Drop the read guard before rendering
drop(graph_data_read); drop(graph_data_read);
// use_effect runs AFTER DOM commit — this is when #graph-canvas exists
use_effect(move || { use_effect(move || {
let ready = graph_ready(); let ready = graph_ready();
if !ready { if !ready {
@@ -98,7 +117,6 @@ pub fn GraphExplorerPage(repo_id: String) -> Element {
return; return;
} }
spawn(async move { spawn(async move {
// Register the click callback + load graph with a small delay for DOM paint
let js = format!( let js = format!(
r#" r#"
window.__onNodeClick = function(nodeJson) {{ window.__onNodeClick = function(nodeJson) {{
@@ -111,8 +129,6 @@ pub fn GraphExplorerPage(repo_id: String) -> Element {
setTimeout(function() {{ setTimeout(function() {{
if (window.__loadGraph) {{ if (window.__loadGraph) {{
window.__loadGraph({nj}, {ej}); window.__loadGraph({nj}, {ej});
}} else {{
console.error('[graph-viz] __loadGraph not found — vis-network may not be loaded');
}} }}
}}, 300); }}, 300);
"# "#
@@ -121,7 +137,6 @@ pub fn GraphExplorerPage(repo_id: String) -> Element {
}); });
}); });
// Extract selected node fields
let sel = selected_node(); let sel = selected_node();
let sel_file = sel let sel_file = sel
.as_ref() .as_ref()
@@ -148,20 +163,6 @@ pub fn GraphExplorerPage(repo_id: String) -> Element {
.unwrap_or(0) as u32; .unwrap_or(0) as u32;
rsx! { rsx! {
div { class: "back-nav",
button {
class: "btn btn-ghost btn-back",
onclick: move |_| { navigator().go_back(); },
Icon { icon: BsArrowLeft, width: 16, height: 16 }
"Back"
}
}
PageHeader {
title: "Code Knowledge Graph",
description: "Interactive visualization of code structure and relationships",
}
if repo_id.is_empty() { if repo_id.is_empty() {
div { class: "card", div { class: "card",
p { "Select a repository to view its code graph." } p { "Select a repository to view its code graph." }

227
compliance-dashboard/src/pages/mcp_servers.rs
View File

@@ -1,4 +1,6 @@
use dioxus::prelude::*; use dioxus::prelude::*;
use dioxus_free_icons::icons::bs_icons::*;
use dioxus_free_icons::Icon;
use crate::components::page_header::PageHeader; use crate::components::page_header::PageHeader;
use crate::components::toast::{ToastType, Toasts}; use crate::components::toast::{ToastType, Toasts};
@@ -26,6 +28,15 @@ pub fn McpServersPage() -> Element {
let mut confirm_delete: Signal<Option<(String, String)>> = use_signal(|| None); let mut confirm_delete: Signal<Option<(String, String)>> = use_signal(|| None);
rsx! { rsx! {
div { class: "back-nav",
button {
class: "btn btn-ghost btn-back",
onclick: move |_| { navigator().go_back(); },
Icon { icon: BsArrowLeft, width: 16, height: 16 }
"Back"
}
}
PageHeader { PageHeader {
title: "MCP Servers", title: "MCP Servers",
description: "Manage Model Context Protocol servers for LLM integrations", description: "Manage Model Context Protocol servers for LLM integrations",
@@ -185,35 +196,37 @@ pub fn McpServersPage() -> Element {
if resp.data.is_empty() { if resp.data.is_empty() {
rsx! { rsx! {
div { class: "card", div { class: "card",
p { class: "text-secondary", "No MCP servers registered. Add one to get started." } p { style: "padding: 1rem; color: var(--text-secondary);", "No MCP servers registered. Add one to get started." }
} }
} }
} else { } else {
rsx! { rsx! {
for server in resp.data.iter() { div { class: "mcp-cards-grid",
{ for server in resp.data.iter() {
let sid = server.id.map(|id| id.to_hex()).unwrap_or_default(); {
let name = server.name.clone(); let sid = server.id.map(|id| id.to_hex()).unwrap_or_default();
let status_class = match server.status { let name = server.name.clone();
compliance_core::models::McpServerStatus::Running => "mcp-status-running", let status_class = match server.status {
compliance_core::models::McpServerStatus::Stopped => "mcp-status-stopped", compliance_core::models::McpServerStatus::Running => "running",
compliance_core::models::McpServerStatus::Error => "mcp-status-error", compliance_core::models::McpServerStatus::Stopped => "stopped",
}; compliance_core::models::McpServerStatus::Error => "error",
let is_token_visible = visible_token().as_deref() == Some(sid.as_str()); };
let created_str = server.created_at.format("%Y-%m-%d %H:%M").to_string(); let status_label = format!("{}", server.status);
let is_token_visible = visible_token().as_deref() == Some(sid.as_str());
let created_str = server.created_at.format("%Y-%m-%d %H:%M").to_string();
let tools_count = server.tools_enabled.len();
rsx! { rsx! {
div { class: "card mcp-server-card mb-4", div { class: "mcp-card",
div { class: "mcp-server-header", // Header row: status dot + name + actions
div { class: "mcp-server-title", div { class: "mcp-card-header",
h3 { "{server.name}" } div { class: "mcp-card-title",
span { class: "mcp-status {status_class}", span { class: "mcp-status-dot {status_class}" }
"{server.status}" h3 { "{server.name}" }
span { class: "mcp-card-status {status_class}", "{status_label}" }
} }
}
div { class: "mcp-server-actions",
button { button {
class: "btn btn-sm btn-ghost", class: "btn btn-sm btn-ghost btn-ghost-danger",
title: "Delete server", title: "Delete server",
onclick: { onclick: {
let id = sid.clone(); let id = sid.clone();
@@ -222,96 +235,106 @@ pub fn McpServersPage() -> Element {
confirm_delete.set(Some((id.clone(), name.clone()))); confirm_delete.set(Some((id.clone(), name.clone())));
} }
}, },
"Delete" Icon { icon: BsTrash, width: 14, height: 14 }
} }
} }
}
if let Some(ref desc) = server.description { if let Some(ref desc) = server.description {
p { class: "text-secondary mb-3", "{desc}" } p { class: "mcp-card-desc", "{desc}" }
} }
div { class: "mcp-config-grid", // Config details
div { class: "mcp-config-item", div { class: "mcp-card-details",
span { class: "mcp-config-label", "Endpoint" } div { class: "mcp-detail-row",
code { class: "mcp-config-value", "{server.endpoint_url}" } Icon { icon: BsGlobe, width: 13, height: 13 }
} span { class: "mcp-detail-label", "Endpoint" }
div { class: "mcp-config-item", code { class: "mcp-detail-value", "{server.endpoint_url}" }
span { class: "mcp-config-label", "Transport" }
span { class: "mcp-config-value", "{server.transport}" }
}
if let Some(port) = server.port {
div { class: "mcp-config-item",
span { class: "mcp-config-label", "Port" }
span { class: "mcp-config-value", "{port}" }
} }
} div { class: "mcp-detail-row",
if let Some(ref db) = server.mongodb_database { Icon { icon: BsHddNetwork, width: 13, height: 13 }
div { class: "mcp-config-item", span { class: "mcp-detail-label", "Transport" }
span { class: "mcp-config-label", "Database" } span { class: "mcp-detail-value", "{server.transport}" }
span { class: "mcp-config-value", "{db}" }
} }
} if let Some(port) = server.port {
} div { class: "mcp-detail-row",
Icon { icon: BsPlug, width: 13, height: 13 }
div { class: "mcp-tools-section", span { class: "mcp-detail-label", "Port" }
span { class: "mcp-config-label", "Enabled Tools" } span { class: "mcp-detail-value", "{port}" }
div { class: "mcp-tools-list",
for tool in server.tools_enabled.iter() {
span { class: "mcp-tool-badge", "{tool}" }
}
}
}
div { class: "mcp-token-section",
span { class: "mcp-config-label", "Access Token" }
div { class: "mcp-token-row",
code { class: "mcp-token-value",
if is_token_visible {
"{server.access_token}"
} else {
"mcp_••••••••••••••••••••••••••••"
} }
} }
button { }
class: "btn btn-sm btn-ghost",
onclick: { // Tools
let id = sid.clone(); div { class: "mcp-card-tools",
move |_| { span { class: "mcp-detail-label",
if visible_token().as_deref() == Some(id.as_str()) { Icon { icon: BsTools, width: 13, height: 13 }
visible_token.set(None); " {tools_count} tools"
} else {
visible_token.set(Some(id.clone()));
}
}
},
if is_token_visible { "Hide" } else { "Reveal" }
} }
button { div { class: "mcp-tools-list",
class: "btn btn-sm btn-ghost", for tool in server.tools_enabled.iter() {
onclick: { span { class: "mcp-tool-chip", "{tool}" }
let id = sid.clone(); }
move |_| {
let id = id.clone();
spawn(async move {
match regenerate_mcp_token(id).await {
Ok(_) => {
toasts.push(ToastType::Success, "Token regenerated");
servers.restart();
}
Err(e) => toasts.push(ToastType::Error, e.to_string()),
}
});
}
},
"Regenerate"
} }
} }
}
div { class: "mcp-meta", // Token section
span { class: "text-secondary", div { class: "mcp-card-token",
"Created {created_str}" div { class: "mcp-token-display",
Icon { icon: BsKey, width: 13, height: 13 }
code { class: "mcp-token-code",
if is_token_visible {
"{server.access_token}"
} else {
"mcp_••••••••••••••••••••"
}
}
}
div { class: "mcp-token-actions",
button {
class: "btn btn-sm btn-ghost",
title: if is_token_visible { "Hide token" } else { "Reveal token" },
onclick: {
let id = sid.clone();
move |_| {
if visible_token().as_deref() == Some(id.as_str()) {
visible_token.set(None);
} else {
visible_token.set(Some(id.clone()));
}
}
},
if is_token_visible {
Icon { icon: BsEyeSlash, width: 14, height: 14 }
} else {
Icon { icon: BsEye, width: 14, height: 14 }
}
}
button {
class: "btn btn-sm btn-ghost",
title: "Regenerate token",
onclick: {
let id = sid.clone();
move |_| {
let id = id.clone();
spawn(async move {
match regenerate_mcp_token(id).await {
Ok(_) => {
toasts.push(ToastType::Success, "Token regenerated");
servers.restart();
}
Err(e) => toasts.push(ToastType::Error, e.to_string()),
}
});
}
},
Icon { icon: BsArrowRepeat, width: 14, height: 14 }
}
}
}
// Footer
div { class: "mcp-card-footer",
span { "Created {created_str}" }
} }
} }
} }
@@ -321,8 +344,8 @@ pub fn McpServersPage() -> Element {
} }
} }
}, },
Some(None) => rsx! { div { class: "card", p { "Failed to load MCP servers." } } }, Some(None) => rsx! { div { class: "card", p { style: "padding: 1rem;", "Failed to load MCP servers." } } },
None => rsx! { div { class: "card", p { "Loading..." } } }, None => rsx! { div { class: "loading", "Loading..." } },
} }
} }
} }

34
compliance-dashboard/src/pages/repositories.rs
View File

@@ -2,10 +2,10 @@ use dioxus::prelude::*;
use dioxus_free_icons::icons::bs_icons::*; use dioxus_free_icons::icons::bs_icons::*;
use dioxus_free_icons::Icon; use dioxus_free_icons::Icon;
use crate::app::Route;
use crate::components::page_header::PageHeader; use crate::components::page_header::PageHeader;
use crate::components::pagination::Pagination; use crate::components::pagination::Pagination;
use crate::components::toast::{ToastType, Toasts}; use crate::components::toast::{ToastType, Toasts};
use crate::pages::graph_explorer::GraphExplorerInline;
async fn async_sleep_5s() { async fn async_sleep_5s() {
#[cfg(feature = "web")] #[cfg(feature = "web")]
@@ -34,6 +34,7 @@ pub fn RepositoriesPage() -> Element {
let mut toasts = use_context::<Toasts>(); let mut toasts = use_context::<Toasts>();
let mut confirm_delete = use_signal(|| Option::<(String, String)>::None); // (id, name) let mut confirm_delete = use_signal(|| Option::<(String, String)>::None); // (id, name)
let mut scanning_ids = use_signal(Vec::<String>::new); let mut scanning_ids = use_signal(Vec::<String>::new);
let mut graph_repo_id = use_signal(|| Option::<String>::None);
let mut repos = use_resource(move || { let mut repos = use_resource(move || {
let p = page(); let p = page();
@@ -286,10 +287,19 @@ pub fn RepositoriesPage() -> Element {
} }
} }
td { style: "display: flex; gap: 4px;", td { style: "display: flex; gap: 4px;",
Link { button {
to: Route::GraphExplorerPage { repo_id: repo_id.clone() }, class: if graph_repo_id().as_deref() == Some(repo_id.as_str()) { "btn btn-ghost btn-active" } else { "btn btn-ghost" },
class: "btn btn-ghost",
title: "View graph", title: "View graph",
onclick: {
let rid = repo_id.clone();
move |_| {
if graph_repo_id().as_deref() == Some(rid.as_str()) {
graph_repo_id.set(None);
} else {
graph_repo_id.set(Some(rid.clone()));
}
}
},
Icon { icon: BsDiagram3, width: 16, height: 16 } Icon { icon: BsDiagram3, width: 16, height: 16 }
} }
button { button {
@@ -354,6 +364,22 @@ pub fn RepositoriesPage() -> Element {
on_page_change: move |p| page.set(p), on_page_change: move |p| page.set(p),
} }
} }
// Inline graph explorer
if let Some(rid) = graph_repo_id() {
div { class: "card", style: "margin-top: 16px;",
div { class: "card-header", style: "display: flex; justify-content: space-between; align-items: center;",
span { "Code Graph" }
button {
class: "btn btn-sm btn-ghost",
title: "Close graph",
onclick: move |_| { graph_repo_id.set(None); },
Icon { icon: BsX, width: 18, height: 18 }
}
}
GraphExplorerInline { repo_id: rid }
}
}
} }
}, },
Some(None) => rsx! { Some(None) => rsx! {