Skip to content

chore: add few last fixes #306

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 22, 2025
Merged

chore: add few last fixes #306

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
107 changes: 75 additions & 32 deletions infrastructure/control-panel/src/routes/monitoring/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,11 +46,48 @@
const newNodes: Node[] = [];
let nodeId = 1;

// Add eVaults in a column on the left (x: 200, y: starting from 150)
// Add service nodes at the top (x: 400, 600, 800, y: 50)
newNodes.push({
id: 'registry',
position: { x: 400, y: 50 },
data: {
label: 'Registry',
subLabel: 'Service',
type: 'service',
selected: false
},
type: 'vault'
});

newNodes.push({
id: 'ontology',
position: { x: 600, y: 50 },
data: {
label: 'Ontology Service',
subLabel: 'Service',
type: 'service',
selected: false
},
type: 'vault'
});

newNodes.push({
id: 'provisioner',
position: { x: 800, y: 50 },
data: {
label: 'eVault Provisioner',
subLabel: 'Service',
type: 'service',
selected: false
},
type: 'vault'
});

// Add eVaults in a column on the left (x: 200, y: starting from 500)
selectedEVaults.forEach((evault, index) => {
newNodes.push({
id: `evault-${index + 1}`,
position: { x: 200, y: 150 + index * 180 },
position: { x: 200, y: 500 + index * 180 },
data: {
label: evault.evaultId || evault.name || 'eVault',
subLabel: evault.serviceUrl || evault.ip || 'Unknown',
Expand All @@ -61,11 +98,11 @@
});
});

// Add platforms in a column on the right (x: 800, y: starting from 150)
// Add platforms in a column on the right (x: 800, y: starting from 500)
selectedPlatforms.forEach((platform, index) => {
newNodes.push({
id: `platform-${index + 1}`,
position: { x: 800, y: 150 + index * 180 },
position: { x: 800, y: 500 + index * 180 },
data: {
label: platform.name,
subLabel: platform.url,
Expand All @@ -82,6 +119,13 @@

// Load SvelteFlow component
loadSvelteFlow();

// Start subscription immediately on mount
subscribeToEvents();

// Initialize sequence state to show we're ready
sequenceStarted = true;
currentFlowStep = 0;
});

async function loadSvelteFlow() {
Expand Down Expand Up @@ -378,13 +422,10 @@
// Don't clear flowMessages - keep old logs
edges = [];

// Close existing connection if any
if (eventSource) {
eventSource.close();
// Only start new SSE connection if one doesn't exist
if (!eventSource) {
subscribeToEvents();
}

// Start new SSE connection
subscribeToEvents();
}

// Function to reset the sequence
Expand Down Expand Up @@ -435,7 +476,7 @@

<section class="flex h-full w-full">
<div class="bg-gray flex h-screen w-screen flex-col">
<div class="z-10 flex w-full items-center justify-between bg-white p-4 shadow-sm">
<div class="z-10 flex w-full items-center justify-between bg-white p-4">
<div>
<h4 class="text-xl font-semibold text-gray-800">Live Monitoring</h4>
<p class="mt-1 text-sm text-gray-600">
Expand Down Expand Up @@ -543,30 +584,25 @@

<!-- Flow Messages Panel -->
<div
class="flex h-full w-[40%] cursor-pointer flex-col bg-white p-4 shadow-sm transition-colors hover:bg-gray-50"
onclick={!sequenceStarted || currentFlowStep >= 4 ? startSequence : undefined}
class:cursor-pointer={!sequenceStarted || currentFlowStep >= 4}
class:cursor-default={sequenceStarted && currentFlowStep < 4}
class="flex h-full w-[40%] cursor-default flex-col bg-white p-4 transition-colors hover:bg-gray-50"
>
<div class="mb-4">
<h3 class="text-lg font-semibold text-gray-800">Data Flow</h3>
{#if sequenceStarted}
<div class="mt-2 text-sm text-gray-600">
Current Step: {currentFlowStep === 0
? 'Waiting...'
: currentFlowStep === 1
? 'Platform creating entry locally'
: currentFlowStep === 2
? 'Syncing to eVault'
: currentFlowStep === 3
? 'eVault created metaenvelope'
: currentFlowStep === 4
? 'Awareness Protocol'
: currentFlowStep === 5
? 'All platforms notified'
: 'Complete'}
</div>
{/if}
<div class="mt-2 text-sm text-gray-600">
Current Step: {currentFlowStep === 0
? 'Waiting for events...'
: currentFlowStep === 1
? 'Platform creating entry locally'
: currentFlowStep === 2
? 'Syncing to eVault'
: currentFlowStep === 3
? 'eVault created metaenvelope'
: currentFlowStep === 4
? 'Awareness Protocol'
: currentFlowStep === 5
? 'All platforms notified'
: 'Complete'}
</div>
</div>

<div class="flex-1 space-y-2 overflow-y-auto">
Expand Down Expand Up @@ -617,4 +653,11 @@
:global(.svelte-flow__edge.default .svelte-flow__edge-path) {
stroke-dasharray: none !important;
}

/* Hide handles on service nodes */
:global(.svelte-flow__node[data-id='registry'] .svelte-flow__handle),
:global(.svelte-flow__node[data-id='ontology'] .svelte-flow__handle),
:global(.svelte-flow__node[data-id='provisioner'] .svelte-flow__handle) {
visibility: hidden !important;
}
</style>
Loading