@@ -505,6 +505,7 @@ <h2 class="section-title">Requests</h2>
505505 }
506506 } catch ( error ) {
507507 console . error ( 'Error loading config:' , error ) ;
508+ document . getElementById ( 'navbar-title' ) . textContent = 'ConnectLib Dashboard' ;
508509 }
509510 }
510511
@@ -522,43 +523,75 @@ <h2 class="section-title">Requests</h2>
522523 statusBadge . className = 'status-badge error' ;
523524 }
524525
525- document . getElementById ( 'resource-type' ) . textContent = data . resourceType ;
526+ document . getElementById ( 'resource-type' ) . textContent = data . resourceType || 'N/A' ;
526527 } catch ( error ) {
527528 console . error ( 'Error loading status:' , error ) ;
529+ document . getElementById ( 'connectlib-status' ) . textContent = 'Error' ;
530+ document . getElementById ( 'connectlib-status' ) . className = 'status-badge error' ;
531+ }
532+ }
533+
534+ async function loadPortInfo ( ) {
535+ try {
536+ const response = await fetch ( `${ API_BASE_URL } /requests` ) ;
537+ const data = await response . json ( ) ;
538+
539+ const portElement = document . getElementById ( 'port-info' ) ;
540+ if ( data . portInfo ) {
541+ portElement . textContent = data . portInfo ;
542+ } else {
543+ portElement . textContent = 'N/A' ;
544+ }
545+ } catch ( error ) {
546+ console . error ( 'Error loading port info:' , error ) ;
547+ document . getElementById ( 'port-info' ) . textContent = 'N/A' ;
528548 }
529549 }
530550
531551 async function loadRoutes ( ) {
532552 try {
533553 const response = await fetch ( `${ API_BASE_URL } /routes` ) ;
534- const routes = await response . json ( ) ;
554+ const data = await response . json ( ) ;
535555
536556 const tbody = document . getElementById ( 'routes-tbody' ) ;
537557 tbody . innerHTML = '' ;
538558
559+ // Handle both array and object with routes property
560+ const routes = Array . isArray ( data ) ? data : ( data . routes || [ ] ) ;
561+
562+ if ( routes . length === 0 ) {
563+ tbody . innerHTML = '<tr><td colspan="3" style="text-align: center; color: #94a3b8;">No routes available</td></tr>' ;
564+ return ;
565+ }
566+
539567 routes . forEach ( ( route , index ) => {
540568 const row = document . createElement ( 'tr' ) ;
541569
542570 row . innerHTML = `
543- <td>${ index + 1 } </td>
544- <td><span class="route-badge">${ route . name } </span></td>
545- <td><span class="route-badge">${ route . url } </span></td>
546- ` ;
571+ <td>${ index + 1 } </td>
572+ <td><span class="route-badge">${ route . name } </span></td>
573+ <td><span class="route-badge">${ route . url } </span></td>
574+ ` ;
547575 tbody . appendChild ( row ) ;
548576 } ) ;
549577 } catch ( error ) {
550578 console . error ( 'Error loading routes:' , error ) ;
579+ const tbody = document . getElementById ( 'routes-tbody' ) ;
580+ tbody . innerHTML = '<tr><td colspan="3" style="text-align: center; color: #ef4444;">Error loading routes</td></tr>' ;
551581 }
552582 }
553583
554584 async function loadRequests ( ) {
555585 try {
556586 const response = await fetch ( `${ API_BASE_URL } /requests` ) ;
557- const requests = await response . json ( ) ;
587+ const data = await response . json ( ) ;
558588
559589 const container = document . getElementById ( 'requests-container' ) ;
560590 container . innerHTML = '' ;
561591
592+ // Handle both array and object with requests property
593+ const requests = Array . isArray ( data ) ? data : ( data . requests || [ ] ) ;
594+
562595 if ( requests . length === 0 ) {
563596 container . innerHTML = '<p style="text-align: center; color: #94a3b8;">No requests</p>' ;
564597 return ;
@@ -574,30 +607,32 @@ <h2 class="section-title">Requests</h2>
574607 request . status === 'success' ? 'Success' : 'Failed' ;
575608
576609 requestItem . innerHTML = `
577- <div class="request-flow">
578- <div class="request-node">
579- <div class="node-dot ${ statusClass } "></div>
580- <div class="node-label">Route</div>
581- <div class="node-value">${ request . route } </div>
582- </div>
583- <div class="connector"></div>
584- <div class="request-node">
585- <div class="node-dot ${ statusClass } "></div>
586- <div class="node-label">URL Branch</div>
587- <div class="node-value">${ request . branch } </div>
588- </div>
589- <div class="connector"></div>
590- <div class="request-node">
591- <div class="node-dot ${ statusClass } "></div>
592- <div class="node-label">Status</div>
593- <div class="node-value">${ statusText } </div>
594- </div>
610+ <div class="request-flow">
611+ <div class="request-node">
612+ <div class="node-dot ${ statusClass } "></div>
613+ <div class="node-label">Route</div>
614+ <div class="node-value">${ request . route } </div>
615+ </div>
616+ <div class="connector"></div>
617+ <div class="request-node">
618+ <div class="node-dot ${ statusClass } "></div>
619+ <div class="node-label">URL Branch</div>
620+ <div class="node-value">${ request . branch } </div>
595621 </div>
596- ` ;
622+ <div class="connector"></div>
623+ <div class="request-node">
624+ <div class="node-dot ${ statusClass } "></div>
625+ <div class="node-label">Status</div>
626+ <div class="node-value">${ statusText } </div>
627+ </div>
628+ </div>
629+ ` ;
597630 container . appendChild ( requestItem ) ;
598631 } ) ;
599632 } catch ( error ) {
600633 console . error ( 'Error loading requests:' , error ) ;
634+ const container = document . getElementById ( 'requests-container' ) ;
635+ container . innerHTML = '<p style="text-align: center; color: #ef4444;">Error loading requests</p>' ;
601636 }
602637 }
603638
@@ -617,10 +652,12 @@ <h2 class="section-title">Requests</h2>
617652 loadRoutes ( ) ;
618653 loadRequests ( ) ;
619654 loadConfig ( ) ;
655+ loadPortInfo ( ) ;
620656
621657 setInterval ( ( ) => {
622658 loadStatus ( ) ;
623659 loadRoutes ( ) ;
660+ loadPortInfo ( ) ;
624661 } , 5000 ) ;
625662 } ) ;
626663</ script >
0 commit comments