From 3f56a2cb3bd188a5faa063bd8eacf464dc98308a Mon Sep 17 00:00:00 2001 From: linoe97 Date: Tue, 14 Jun 2022 22:43:48 +0200 Subject: [PATCH] added tooltips and buttons --- frontend/globals.d.ts | 5 + frontend/src/components/AddNewRegex.tsx | 15 +- frontend/src/components/Header/index.tsx | 27 +- frontend/src/components/RegexView/index.tsx | 8 +- frontend/src/components/ServiceRow/index.tsx | 46 +- frontend/src/pages/HomePage.tsx | 2 +- frontend/src/pages/ServiceDetails.tsx | 43 +- frontend/tsconfig.json | 3 +- package-lock.json | 475 +++++++++++++++++++ 9 files changed, 581 insertions(+), 43 deletions(-) create mode 100755 frontend/globals.d.ts create mode 100644 package-lock.json diff --git a/frontend/globals.d.ts b/frontend/globals.d.ts new file mode 100755 index 0000000..0c69a85 --- /dev/null +++ b/frontend/globals.d.ts @@ -0,0 +1,5 @@ +// declaration.d.ts +declare module '*.scss' { + const content: Record; + export default content; +} \ No newline at end of file diff --git a/frontend/src/components/AddNewRegex.tsx b/frontend/src/components/AddNewRegex.tsx index 8dab492..0d8945f 100755 --- a/frontend/src/components/AddNewRegex.tsx +++ b/frontend/src/components/AddNewRegex.tsx @@ -1,4 +1,4 @@ -import { Button, Group, Space, TextInput, Notification, Switch, NativeSelect } from '@mantine/core'; +import { Button, Group, Space, TextInput, Notification, Switch, NativeSelect, Tooltip } from '@mantine/core'; import { useForm } from '@mantine/hooks'; import React, { useState } from 'react'; import { RegexAddForm } from '../js/models'; @@ -78,13 +78,16 @@ function AddNewRegex({ closePopup, service }:{ closePopup:()=>void, service:stri {...form.getInputProps('regex')} /> - + + + diff --git a/frontend/src/components/Header/index.tsx b/frontend/src/components/Header/index.tsx index ef4fa75..f60261c 100755 --- a/frontend/src/components/Header/index.tsx +++ b/frontend/src/components/Header/index.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { ActionIcon, Badge, Button, Divider, Group, Image, Menu, Modal, Notification, Space, Switch, TextInput } from '@mantine/core'; +import { ActionIcon, Badge, Button, Divider, Group, Image, Menu, Modal, Notification, Space, Switch, TextInput, Tooltip, FloatingTooltip } from '@mantine/core'; import style from "./Header.module.scss"; import { changepassword, errorNotify, generalstats, logout, okNotify } from '../../js/utils'; import { ChangePassword, GeneralStats, update_freq } from '../../js/models'; @@ -72,19 +72,16 @@ function Header() { setLoadingBtn(false) } - - const {srv_id} = useParams() - - - const [open, setOpen] = useState(false); const closeModal = () => {setOpen(false);} return
-
- Firegex logo -
+ +
+ Firegex logonavigator("/")}/> +
+
Services: {generalStats.services} Filtered Connections: {generalStats.closed} @@ -98,13 +95,23 @@ function Header() {
{ location.pathname !== "/"? + navigator("/")}> + :null} - setOpen(true)} size="xl" radius="md" variant="filled"> + { location.pathname !== "/"? + + setOpen(true)} size="xl" radius="md" variant="filled"> + + : + setOpen(true)} size="xl" radius="md" variant="filled"> + + } + {srv_id? diff --git a/frontend/src/components/RegexView/index.tsx b/frontend/src/components/RegexView/index.tsx index 71e2e0d..cf6c90d 100755 --- a/frontend/src/components/RegexView/index.tsx +++ b/frontend/src/components/RegexView/index.tsx @@ -1,4 +1,4 @@ -import { Grid, Text, Title, Badge, Space, ActionIcon } from '@mantine/core'; +import { Grid, Text, Title, Badge, Space, ActionIcon, Tooltip } from '@mantine/core'; import React, { useState } from 'react'; import { RegexFilter } from '../../js/models'; import { deleteregex, errorNotify, getHumanReadableRegex, okNotify } from '../../js/utils'; @@ -43,8 +43,10 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) { {regex_expr} - setDeleteModal(true)} size="xl" radius="md" variant="filled"> - + + setDeleteModal(true)} size="xl" radius="md" variant="filled"> + + diff --git a/frontend/src/components/ServiceRow/index.tsx b/frontend/src/components/ServiceRow/index.tsx index 97510a5..0e52ede 100755 --- a/frontend/src/components/ServiceRow/index.tsx +++ b/frontend/src/components/ServiceRow/index.tsx @@ -1,4 +1,4 @@ -import { ActionIcon, Badge, Grid, Space, Title } from '@mantine/core'; +import { ActionIcon, Badge, Grid, Space, Title, Tooltip } from '@mantine/core'; import React, { useState } from 'react'; import { FaPause, FaPlay, FaStop } from 'react-icons/fa'; import { Service } from '../../js/models'; @@ -8,7 +8,7 @@ import YesNoModal from '../YesNoModal'; import { errorNotify, okNotify, pauseservice, startservice, stopservice } from '../../js/utils'; //"status":"stop"/"wait"/"active"/"pause", -function ServiceRow({ service, onClick, additional_buttons }:{ service:Service, onClick?:()=>void, additional_buttons?:any }) { +function ServiceRow({ service, onClick, additional_buttons, add_new_regex }:{ service:Service, onClick?:()=>void, additional_buttons?:any, add_new_regex?:any }) { let status_color = "gray"; switch(service.status){ @@ -73,6 +73,9 @@ function ServiceRow({ service, onClick, additional_buttons }:{ service:Service,
+
+ {add_new_regex} +
Status: {service.status} @@ -83,23 +86,30 @@ function ServiceRow({ service, onClick, additional_buttons }:{ service:Service,
{additional_buttons} {["pause","wait"].includes(service.status)? - setStopModal(true)} size="xl" radius="md" variant="filled" - disabled={service.status === "stop"}> - - : - - - + + + setStopModal(true)} size="xl" radius="md" variant="filled" + disabled={service.status === "stop"}> + + + : + + + + + } - - - + + + + +
{onClick?:null} @@ -107,8 +117,8 @@ function ServiceRow({ service, onClick, additional_buttons }:{ service:Service, setStopModal(false)} action={stopService} opened={stopModal} diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx index 50f0f33..6b9743d 100755 --- a/frontend/src/pages/HomePage.tsx +++ b/frontend/src/pages/HomePage.tsx @@ -33,7 +33,7 @@ function HomePage() { {services.length > 0?services.map( srv => { navigator("/"+srv.id) - }} />):<> No services found! Add one clicking the add button above} + }} />):<> No services found! Add one clicking the "+" button above}
} diff --git a/frontend/src/pages/ServiceDetails.tsx b/frontend/src/pages/ServiceDetails.tsx index 9c4d198..d356388 100755 --- a/frontend/src/pages/ServiceDetails.tsx +++ b/frontend/src/pages/ServiceDetails.tsx @@ -1,9 +1,11 @@ -import { ActionIcon, Grid, LoadingOverlay, Space, Title } from '@mantine/core'; +import { ActionIcon, Grid, LoadingOverlay, Modal, Space, Title, Tooltip } from '@mantine/core'; import React, { useEffect, useState } from 'react'; import { BsTrashFill } from 'react-icons/bs'; import { useNavigate, useParams } from 'react-router-dom'; import RegexView from '../components/RegexView'; import ServiceRow from '../components/ServiceRow'; +import AddNewRegex from '../components/AddNewRegex'; +import { BsPlusLg } from "react-icons/bs"; import YesNoModal from '../components/YesNoModal'; import { RegexFilter, Service, update_freq } from '../js/models'; import { deleteservice, errorNotify, okNotify, regenport, serviceinfo, serviceregexlist } from '../js/utils'; @@ -24,6 +26,8 @@ function ServiceDetails() { const [regexesList, setRegexesList] = useState([]) const [loader, setLoader] = useState(true); + const [open, setOpen] = useState(false); + const closeModal = () => {setOpen(false);} const navigator = useNavigate() @@ -80,17 +84,48 @@ function ServiceDetails() { return
- setDeleteModal(true)} size="xl" radius="md" variant="filled"> + + setDeleteModal(true)} size="xl" radius="md" variant="filled"> + - setChangePortModal(true)} size="xl" radius="md" variant="filled"> + + setChangePortModal(true)} size="xl" radius="md" variant="filled"> + + } add_new_regex={<> + + setOpen(true)} size="xl" radius="md" variant="filled"> + }> + {regexesList.length === 0? - <> No regex found for this service! Add one clicking the add button above: + <> No regex found for this service! Add one by clicking the "+" button + +
+ + setOpen(true)} size="xl" radius="md" variant="filled"> + +
+ + + + : {regexesList.map( (regexInfo) => )} } + + {srv_id? + + + : + null + } +