Modulating frontend

frontend/src/pages/HomePage.tsx

@@ -1,6 +0,0 @@
-import React from "react"
-
-
-export default function HomePage({ children }: { children: any }) {
-    return children
-}

frontend/src/pages/NFRegex.tsx/ServiceDetails.tsx

@@ -55,7 +55,7 @@ function ServiceDetails() {
 
     const [tooltipAddRegexOpened, setTooltipAddRegexOpened] = useState(false);
 
-    return <div>
+    return <>
         <LoadingOverlay visible={loader} />
         <ServiceRow service={serviceInfo} />
         {regexesList.length === 0?<>
@@ -77,9 +77,7 @@ function ServiceDetails() {
         }
 
         {srv?<AddNewRegex opened={open} onClose={closeModal} service={srv} />:null}
-
-
-    </div>
+    </>
 }
 
 export default ServiceDetails;

frontend/src/pages/NFRegex.tsx/index.tsx

@@ -1,9 +1,9 @@
-import { ActionIcon, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
+import { ActionIcon, Badge, LoadingOverlay, Space, Title, Tooltip } from '@mantine/core';
 import React, { useEffect, useState } from 'react';
 import { BsPlusLg } from "react-icons/bs";
 import { useNavigate, useParams } from 'react-router-dom';
 import ServiceRow from '../../components/NFRegex/ServiceRow';
-import { Service } from '../../js/models';
+import { GeneralStats, Service } from '../../js/models';
 import { errorNotify, eventUpdateName, fireUpdateRequest, nfregex } from '../../js/utils';
 import AddNewService from '../../components/NFRegex/AddNewService';
 import { useWindowEvent } from '@mantine/hooks';
@@ -18,13 +18,22 @@ function NFRegex({ children }: { children: any }) {
     const {srv} = useParams()
     const [tooltipAddServOpened, setTooltipAddServOpened] = useState(false);
     
+    const [generalStats, setGeneralStats] = useState<GeneralStats>({closed:0, regexes:0, services:0});
+
     const updateInfo = async () => {
         
-        await nfregex.services().then(res => {
-            setServices(res)    
-        }).catch(err => {
-            errorNotify("Home Page Auto-Update failed!", err.toString())
-        })
+        await Promise.all([
+            nfregex.stats().then(res => {
+                setGeneralStats(res)
+            }).catch(
+                err => errorNotify("General Info Auto-Update failed!", err.toString())
+            ),
+            nfregex.services().then(res => {
+                setServices(res)    
+            }).catch(err => {
+                errorNotify("Home Page Auto-Update failed!", err.toString())
+            })
+        ])
         setLoader(false)
     }
 
@@ -33,8 +42,18 @@ function NFRegex({ children }: { children: any }) {
 
     const closeModal = () => {setOpen(false);}
 
-    return <div id="service-list" className="center-flex-row">
-        {srv?children:<>
+    return <>
+    
+    <div id="service-list" className="center-flex-row">
+        <Space h="sm" />
+        <div className='center-flex'>
+            <Badge color="green" size="lg" variant="filled">Services: {generalStats.services}</Badge>
+              <Space w="xs" />
+            <Badge size="lg" color="yellow" variant="filled">Filtered Connections: {generalStats.closed}</Badge>
+              <Space w="xs" />
+            <Badge size="lg" color="violet" variant="filled">Regexes: {generalStats.regexes}</Badge>
+        </div>
+        {srv?null:<>
             <LoadingOverlay visible={loader} />
             {services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.service_id} onClick={()=>{
                 navigator("/nfregex/"+srv.service_id)
@@ -51,6 +70,8 @@ function NFRegex({ children }: { children: any }) {
             <AddNewService opened={open} onClose={closeModal} />
         </>}
     </div>
+    {srv?children:null}
+    </>
 }
 
 export default NFRegex;