Autosuggestion for network interfaces ips

frontend/src/components/AddNewService.tsx

@@ -1,7 +1,7 @@
-import { Button, Group, NumberInput, Space, TextInput, Notification, Modal, Switch, SegmentedControl } from '@mantine/core';
+import { Button, Group, NumberInput, Space, TextInput, Notification, Modal, Switch, SegmentedControl, SelectItemProps, Autocomplete, AutocompleteItem } from '@mantine/core';
 import { useForm } from '@mantine/hooks';
-import React, { useState } from 'react';
-import { addservice, okNotify, startservice, regex_ipv4, regex_ipv6 } from '../js/utils';
+import React, { useEffect, useState } from 'react';
+import { addservice, okNotify, startservice, regex_ipv4, regex_ipv6, getipinterfaces } from '../js/utils';
 import { ImCross } from "react-icons/im"
 
 type ServiceAddForm = {
@@ -12,13 +12,23 @@ type ServiceAddForm = {
     autostart: boolean,
 }
 
+interface ItemProps extends AutocompleteItem {
+    label: string;
+}
+
+const AutoCompleteItem = React.forwardRef<HTMLDivElement, ItemProps>(
+    ({ label, value, ...props }: ItemProps, ref) => <div ref={ref} {...props}>
+            ( <b>{label}</b> ) -{">"} <b>{value}</b> 
+    </div>
+  );
+
 function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void }) {
 
     const form = useForm({
         initialValues: {
             name:"",
             port:8080,
-            ip_int:"127.0.0.1",
+            ip_int:"",
             proto:"tcp",
             autostart: true
         },
@@ -30,6 +40,14 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
         }
     })
 
+    const [ipInterfaces, setIpInterfaces] = useState<AutocompleteItem[]>([]);
+
+    useEffect(()=>{
+        getipinterfaces().then(data => {
+            setIpInterfaces(data.map(item => ({label:item.name, value:item.addr})));
+        })
+    },[])
+
     const close = () =>{
         onClose()
         form.reset()
@@ -55,7 +73,8 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
             setSubmitLoading(false)
             setError("Request Failed! [ "+err+" ]")
         })
-    }    
+    }
+
 
   return <Modal size="xl" title="Add a new service" opened={opened} onClose={close} closeOnClickOutside={false} centered>
     <form onSubmit={form.onSubmit(submitRequest)}>
@@ -66,9 +85,11 @@ function AddNewService({ opened, onClose }:{ opened:boolean, onClose:()=>void })
             />
             <Space h="md" />
 
-            <TextInput
+            <Autocomplete
                 label="Public IP Interface (ipv4/ipv6 + CIDR allowed)"
                 placeholder="10.1.1.0/24"
+                itemComponent={AutoCompleteItem}
+                data={ipInterfaces}
                 {...form.getInputProps('ip_int')}
             />