diff --git a/app/dashboard/src/constants/query-ids.ts b/app/dashboard/src/constants/query-ids.ts
@@ -0,0 +1,8 @@
+
+export const queryIds = {
+ hosts: 'hosts',
+ inbounds: 'inbounds',
+ users: 'users',
+ nodes: 'nodes',
+ services: 'services',
+};
diff --git a/app/dashboard/src/pages/hosts/inbounds-sidebar/index.tsx b/app/dashboard/src/pages/hosts/inbounds-sidebar/index.tsx
@@ -2,23 +2,24 @@ import { Table, Thead, Tbody, Th, Td, Tr, HStack } from '@chakra-ui/react';
import classNames from 'classnames';
import { InboundCard } from 'components/inbounds-card';
import { handleSort } from 'components/table';
-import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
-import { useInbounds } from 'stores';
+import { useQuery } from 'react-query';
+import { fetchInbounds, useInbounds } from 'stores';
export const InboundsSidebar = () => {
const {
- inbounds,
onInboundsFilterChange,
inboundsFilters: filters,
selectedInbound,
selectInbound,
- refetchInbounds
} = useInbounds();
+
+ const { data: inbounds } = useQuery('hosts', () => {
+ return fetchInbounds();
+ });
+
const { t } = useTranslation();
- useEffect(() => {
- inbounds.length === 0 && refetchInbounds();
- }, [inbounds.length])
+
return (
<Table orientation="vertical" zIndex="docked" pr="3" >
<Thead zIndex="docked" position="relative">
@@ -37,7 +38,7 @@ export const InboundsSidebar = () => {
</Tr>
</Thead>
<Tbody>
- {inbounds.map((inbound, i) => {
+ {inbounds?.map((inbound, i) => {
const active = inbounds[i] == selectedInbound
return (
<Tr key={i}
@@ -47,7 +48,6 @@ export const InboundsSidebar = () => {
onClick={() => { selectInbound(inbound) }}>
<Td>
<InboundCard
-
tag={inbound.tag}
nodeName={inbound.node.name}
protocol={inbound.protocol}
diff --git a/app/dashboard/src/pages/hosts/users/dialog/data-limit-field.tsx b/app/dashboard/src/pages/hosts/users/dialog/data-limit-field.tsx
@@ -1,39 +0,0 @@
-import { FormControl, FormLabel } from '@chakra-ui/react';
-import { Input } from 'components/input';
-import { TFunction } from 'i18next';
-import { Controller } from 'react-hook-form';
-
-
-interface DataLimitFieldProps {
- form: any;
- disabled: boolean;
- t: TFunction<'translation', undefined, 'translation'>;
-}
-
-export const DataLimitField = ({ form, disabled, t }: DataLimitFieldProps) => {
- return (
- <FormControl mb={'10px'}>
- <FormLabel>{t('userDialog.dataLimit')}</FormLabel>
- <Controller
- control={form.control}
- name="data_limit"
- render={({ field }) => {
- return (
- <Input
- endAdornment="GB"
- type="number"
- size="sm"
- borderRadius="6px"
- onChange={field.onChange}
- disabled={disabled}
- error={
- form.formState.errors.data_limit?.message
- }
- value={field.value ? String(field.value) : ''}
- />
- );
- }}
- />
- </FormControl>
- )
-}
diff --git a/app/dashboard/src/pages/hosts/users/dialog/default-values.ts b/app/dashboard/src/pages/hosts/users/dialog/default-values.ts
@@ -1,15 +0,0 @@
-
-import { FormType } from './form-schema';
-
-export const getDefaultValues = (): FormType => {
-
- return {
- services: [],
- data_limit: 0,
- expire: null,
- username: '',
- data_limit_reset_strategy: 'no_reset',
- status: 'active',
- note: '',
- };
-};
diff --git a/app/dashboard/src/pages/hosts/users/dialog/expire-date-field.tsx b/app/dashboard/src/pages/hosts/users/dialog/expire-date-field.tsx
@@ -1,91 +0,0 @@
-import {
- FormControl,
- FormHelperText,
- FormLabel,
-} from '@chakra-ui/react';
-import dayjs from 'dayjs';
-import { i18n, TFunction } from 'i18next';
-import ReactDatePicker from 'react-datepicker';
-import { Controller } from 'react-hook-form';
-import { relativeExpiryDate } from 'utils/dateFormatter';
-import { Input } from 'components/input';
-
-interface ExpireDateFieldProps {
- form: any;
- disabled: boolean;
- t: TFunction<'translation', undefined, 'translation'>;
- i18n: i18n;
-}
-
-export const ExpireDateField = ({ form, t, i18n, disabled }: ExpireDateFieldProps) => {
- return (
- <FormControl mb={'10px'}>
- <FormLabel>{t('userDialog.expiryDate')}</FormLabel>
- <Controller
- name="expire"
- control={form.control}
- render={({ field }) => {
- function createDateAsUTC(num: number) {
- return dayjs(
- dayjs(num * 1000).utc()
- // .format("MMMM D, YYYY") // exception with: dayjs.locale(lng);
- ).toDate();
- }
- const { status, time } = relativeExpiryDate(
- field.value
- );
- return (
- <>
- <ReactDatePicker
- locale={i18n.language.toLocaleLowerCase()}
- dateFormat={t('dateFormat')}
- minDate={new Date()}
- selected={
- field.value
- ? createDateAsUTC(field.value)
- : undefined
- }
- onChange={(date: Date) => {
- field.onChange({
- target: {
- value: date
- ? dayjs(
- dayjs(date)
- .set('hour', 23)
- .set('minute', 59)
- .set('second', 59)
- )
- .utc()
- .valueOf() / 1000
- : 0,
- name: 'expire',
- },
- });
- }}
- customInput={
- <Input
- size="sm"
- type="text"
- borderRadius="6px"
- clearable
- disabled={disabled}
- error={
- form.formState.errors.expire?.message
- }
- />
- }
- />
- {field.value ? (
- <FormHelperText>
- {t(status, { time: time })}
- </FormHelperText>
- ) : (
- ''
- )}
- </>
- );
- }}
- />
- </FormControl>
- )
-}
diff --git a/app/dashboard/src/pages/hosts/users/dialog/form-schema.ts b/app/dashboard/src/pages/hosts/users/dialog/form-schema.ts
@@ -1,22 +0,0 @@
-
-import { z } from 'zod';
-import { UserCreate } from 'types';
-
-export type FormType = Pick<UserCreate, keyof UserCreate>;
-export const schema = z.object({
- username: z.string().min(1, { message: 'Username is required' }),
- note: z.string().nullable(),
- data_limit: z
- .string()
- .min(0, 'The minimum number is 0')
- .or(z.number())
- .nullable()
- .transform((str) => {
- if (str) return Number((parseFloat(String(str)) * 1073741824).toFixed(5));
- return 0;
- }),
- expire: z.number().nullable(),
- data_limit_reset_strategy: z.string(),
- status: z.string(),
- services: z.array(z.number()).nonempty({ message: 'At least one service is required' }),
-});
diff --git a/app/dashboard/src/pages/hosts/users/dialog/icons.ts b/app/dashboard/src/pages/hosts/users/dialog/icons.ts
@@ -1,11 +0,0 @@
-
-import { chakra } from '@chakra-ui/react';
-import {
- ChartPieIcon,
-} from '@heroicons/react/24/outline';
-export const UserUsageIcon = chakra(ChartPieIcon, {
- baseStyle: {
- w: 5,
- h: 5,
- },
-});
diff --git a/app/dashboard/src/pages/hosts/users/dialog/index.tsx b/app/dashboard/src/pages/hosts/users/dialog/index.tsx
@@ -1,363 +0,0 @@
-import {
- Alert,
- Button,
- Tooltip,
- IconButton,
- Spinner,
- AlertIcon,
- Box,
- Collapse,
- Flex,
- Grid,
- GridItem,
- ModalBody,
- ModalCloseButton,
- ModalContent,
- Modal,
- VStack,
- useColorMode,
- useToast,
- ModalOverlay,
- HStack,
-} from '@chakra-ui/react';
-import { zodResolver } from '@hookform/resolvers/zod';
-import dayjs from 'dayjs';
-import { FC, useEffect, useState } from 'react';
-import ReactApexChart from 'react-apexcharts';
-import { FormProvider, useForm, useWatch } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import {
- User,
- FilterUsageType,
- UserCreate,
- Service
-} from 'types';
-import { UsageFilter, createUsageConfig } from 'components/usage-filter';
-import {
- AddIcon,
- EditIcon,
- DialogModalHeader,
- DialogModalFooter,
- DeleteIcon
-} from 'components/dialog';
-import { UserUsageIcon } from './icons';
-import { getDefaultValues } from './default-values';
-import { schema, FormType } from './form-schema';
-import { ServicesField } from './services-field';
-import { UsernameField } from './username-field';
-import { DataLimitField } from './data-limit-field';
-import { PeriodicUsageReset } from './periodic-usage-reset';
-import { ExpireDateField } from './expire-date-field';
-import { NoteField } from './note-field';
-import { useUsers, useServices } from 'stores';
-
-const formatUser = (user: User): FormType => {
- const services: number[] = user.services.map((service: number | Service): number => {
- return (typeof service !== 'number') ? service.id : service;
- });
- return {
- ...user,
- services,
- data_limit: user.data_limit
- ? Number((user.data_limit / 1073741824).toFixed(5))
- : user.data_limit,
- };
-};
-
-export type UserDialogProps = {};
-
-export const UserDialog: FC<UserDialogProps> = () => {
- const {
- editingUser,
- isCreatingNewUser,
- onCreateUser,
- editUser,
- fetchUserUsage,
- onEditingUser,
- createUser,
- onDeletingUser,
- } = useUsers();
- const { refetchServices, services } = useServices();
- const isEditing = !!editingUser;
- const isOpen = isCreatingNewUser || isEditing;
- const [loading, setLoading] = useState(false);
- const [error, setError] = useState<string | null>('');
- const toast = useToast();
- const { t, i18n } = useTranslation();
-
- const { colorMode } = useColorMode();
-
- const [usageVisible, setUsageVisible] = useState(false);
- const handleUsageToggle = () => {
- setUsageVisible((current) => !current);
- };
-
- const form = useForm<FormType>({
- defaultValues: getDefaultValues(),
- resolver: zodResolver(schema),
- });
-
- const [dataLimit] = useWatch({
- control: form.control,
- name: ['data_limit'],
- });
-
- const usageTitle = t('userDialog.total');
- const [usage, setUsage] = useState(createUsageConfig(colorMode, usageTitle));
- const [usageFilter, setUsageFilter] = useState('1m');
- const fetchUsageWithFilter = (query: FilterUsageType) => {
- fetchUserUsage(editingUser!, query).then((data: any) => {
- const labels = [];
- const series = [];
- for (const key in data.usages) {
- series.push(data.usages[key].used_traffic);
- labels.push(data.usages[key].node_name);
- }
- setUsage(createUsageConfig(colorMode, usageTitle, series, labels));
- });
- };
-
- useEffect(() => {
- if (isOpen) {
- refetchServices();
- }
- }, [isOpen]);
-
-
- useEffect(() => {
- if (editingUser) {
- form.reset(formatUser(editingUser));
-
- fetchUsageWithFilter({
- start: dayjs().utc().subtract(30, 'day').format('YYYY-MM-DDTHH:00:00'),
- });
- }
- }, [editingUser]);
-
- const submit = async (values: FormType) => {
- setLoading(true);
- const methods = { edited: editUser, created: createUser };
- const method = isEditing ? 'edited' : 'created';
- setError(null);
- const { services, username, ...rest } = values;
-
- let body: UserCreate = {
- ...rest,
- username,
- services,
- data_limit: values.data_limit,
- data_limit_reset_strategy:
- values.data_limit && values.data_limit > 0
- ? values.data_limit_reset_strategy
- : 'no_reset',
- status:
- values.status === 'active' || values.status === 'disabled'
- ? values.status
- : 'active',
- };
-
- await methods[method](body)
- .then(() => {
- toast({
- title: t(
- isEditing ? 'userDialog.userEdited' : 'userDialog.userCreated',
- { username: values.username }
- ),
- status: 'success',
- isClosable: true,
- position: 'top',
- duration: 3000,
- });
- onClose();
- })
- .catch((err) => {
- if (err?.response?.status === 409 || err?.response?.status === 400)
- setError(err?.response?._data?.detail);
- if (err?.response?.status === 422) {
- Object.keys(err.response._data.detail).forEach((key) => {
- setError(err?.response._data.detail[key] as string);
- form.setError(
- key as 'services' | 'username' | 'data_limit' | 'expire',
- {
- type: 'custom',
- message: err.response._data.detail[key],
- }
- );
- });
- }
- })
- .finally(() => {
- setLoading(false);
- });
- };
-
- const onClose = () => {
- form.reset(getDefaultValues());
- onCreateUser(false);
- onEditingUser(null);
- setError(null);
- setUsageVisible(false);
- setUsageFilter('1m');
- };
-
- const handleResetUsage = () => {
- useUsers.setState({ resetUsageUser: editingUser });
- };
-
- const handleRevokeSubscription = () => {
- useUsers.setState({ revokeSubscriptionUser: editingUser });
- };
-
- const disabled = loading;
-
- return (
- <Modal isOpen={isOpen} onClose={onClose} size="2xl">
- <ModalOverlay bg="blackAlpha.300" backdropFilter="blur(10px)" />
- <FormProvider {...form} formState={form.formState}>
- <ModalContent mx="3">
- <form onSubmit={form.handleSubmit(submit)}>
- <DialogModalHeader HeaderIcon={isEditing ? EditIcon : AddIcon} title={isEditing ? t('userDialog.editUserTitle') : t('createNewUser')} />
- <ModalCloseButton mt={3} disabled={disabled} />
- <ModalBody>
- <Grid
- templateColumns={{
- base: 'repeat(1, 1fr)',
- md: 'repeat(2, 1fr)',
- }}
- gap={3}
- >
- <GridItem>
- <VStack justifyContent="space-between">
- <Flex
- flexDirection="column"
- gridAutoRows="min-content"
- w="full"
- >
- <UsernameField form={form} disabled={disabled} isEditing={isEditing} t={t} />
- <DataLimitField form={form} disabled={disabled} t={t} />
-
- <Collapse
- in={!!(dataLimit && dataLimit > 0)}
- animateOpacity
- style={{ width: '100%' }}
- >
- <PeriodicUsageReset form={form} t={t} />
- </Collapse>
- <ExpireDateField form={form} t={t} i18n={i18n} disabled={disabled} />
- <NoteField form={form} t={t} />
- </Flex>
- {error && (
- <Alert
- status="error"
- display={{ base: 'none', md: 'flex' }}
- >
- <AlertIcon />
- {error}
- </Alert>
- )}
- </VStack>
- </GridItem>
-
- <GridItem>
- <ServicesField t={t} services={services} form={form} />
- </GridItem>
-
- {isEditing && usageVisible && (
- <GridItem pt={6} colSpan={{ base: 1, md: 2 }}>
- <VStack gap={4}>
- <UsageFilter
- defaultValue={usageFilter}
- onChange={(filter, query) => {
- setUsageFilter(filter);
- fetchUsageWithFilter(query);
- }}
- />
- <Box
- width={{ base: '100%', md: '70%' }}
- justifySelf="center"
- >
- <ReactApexChart
- options={usage.options}
- series={usage.series}
- type="donut"
- />
- </Box>
- </VStack>
- </GridItem>
- )}
- </Grid>
-
- {error && (
- <Alert
- mt="3"
- status="error"
- display={{ base: 'flex', md: 'none' }}
- >
- <AlertIcon />
- {error}
- </Alert>
- )}
- </ModalBody>
- <DialogModalFooter>
- <HStack
- justifyContent="flex-start"
- w={{
- base: 'full',
- sm: 'unset',
- }}
- >
- {isEditing && editingUser !== null && (
- <>
- <Tooltip label={t('delete')} placement="top">
- <IconButton
- aria-label="Delete"
- size="sm"
- onClick={() => {
- onDeletingUser(editingUser);
- onClose();
- }}
- >
- <DeleteIcon />
- </IconButton>
- </Tooltip>
- <Tooltip label={t('userDialog.usage')} placement="top">
- <IconButton
- aria-label="usage"
- size="sm"
- onClick={handleUsageToggle}
- >
- <UserUsageIcon />
- </IconButton>
- </Tooltip>
- <Button onClick={handleResetUsage} size="sm">
- {t('userDialog.resetUsage')}
- </Button>
- <Button onClick={handleRevokeSubscription} size="sm">
- {t('userDialog.revokeSubscription')}
- </Button>
- </>
- )}
- </HStack>
- <HStack
- w="full"
- maxW={{ md: '50%', base: 'full' }}
- justify="end"
- >
- <Button
- type="submit"
- size="sm"
- px="8"
- colorScheme="primary"
- leftIcon={loading ? <Spinner size="xs" /> : undefined}
- disabled={false}
- >
- {isEditing ? t('userDialog.editUser') : t('createUser')}
- </Button>
- </HStack>
- </DialogModalFooter>
- </form>
- </ModalContent>
- </FormProvider>
- </Modal >
- );
-};
diff --git a/app/dashboard/src/pages/hosts/users/dialog/note-field.tsx b/app/dashboard/src/pages/hosts/users/dialog/note-field.tsx
@@ -1,22 +0,0 @@
-import { FormControl, FormLabel, Textarea, FormErrorMessage } from '@chakra-ui/react';
-import { TFunction } from 'i18next';
-
-interface NoteFieldProps {
- form: any;
- t: TFunction<'translation', undefined, 'translation'>;
-}
-
-export const NoteField = ({ t, form }: NoteFieldProps) => {
- return (
- <FormControl
- mb={'10px'}
- isInvalid={!!form.formState.errors.note}
- >
- <FormLabel>{t('userDialog.note')}</FormLabel>
- <Textarea {...form.register('note')} />
- <FormErrorMessage>
- {form.formState.errors?.note?.message}
- </FormErrorMessage>
- </FormControl>
- )
-}
diff --git a/app/dashboard/src/pages/hosts/users/dialog/periodic-usage-reset.tsx b/app/dashboard/src/pages/hosts/users/dialog/periodic-usage-reset.tsx
@@ -1,39 +0,0 @@
-import { FormControl, FormLabel, Select } from '@chakra-ui/react';
-import { Controller } from 'react-hook-form';
-import { resetStrategy } from 'constants/Settings';
-import { TFunction } from 'i18next';
-
-
-interface PreiodicUsageResetProps {
- form: any;
- t: TFunction<'translation', undefined, 'translation'>;
-}
-
-export const PeriodicUsageReset = ({ form, t }: PreiodicUsageResetProps) => {
- return (
- <FormControl height="66px">
- <FormLabel>
- {t('userDialog.periodicUsageReset')}
- </FormLabel>
- <Controller
- control={form.control}
- name="data_limit_reset_strategy"
- render={({ field }) => {
- return (
- <Select size="sm" {...field}>
- {resetStrategy.map((s) => {
- return (
- <option key={s.value} value={s.value}>
- {t(
- 'userDialog.resetStrategy' + s.title
- )}
- </option>
- );
- })}
- </Select>
- );
- }}
- />
- </FormControl>
- )
-}
diff --git a/app/dashboard/src/pages/hosts/users/dialog/services-field.tsx b/app/dashboard/src/pages/hosts/users/dialog/services-field.tsx
@@ -1,60 +0,0 @@
-import { FormControl, FormLabel, FormErrorMessage, Center, Spinner, Text, Flex, chakra } from '@chakra-ui/react';
-import { UsersIcon, ServerStackIcon } from '@heroicons/react/24/outline';
-import { IconBaseStyle } from 'constants/IconBaseStyle';
-import { TFunction } from 'i18next';
-import { Controller } from 'react-hook-form';
-import { Service } from 'types';
-import { SystemPropertyStatus } from 'components/system-property-status';
-import { ServicesSelectList } from './services-select-list';
-
-const UsersServiceIcon = chakra(UsersIcon, IconBaseStyle);
-const InboundsServiceIcon = chakra(ServerStackIcon, IconBaseStyle);
-
-interface ServicesFieldProps {
- form: any;
- services: Service[];
- t: TFunction<'translation', undefined, 'translation'>;
-}
-
-export const ServicesField = ({ form, t, services }: ServicesFieldProps) => {
- return services.length === 0 ? (
- <Center><Spinner /></Center>
- ) : (
- <FormControl
- isInvalid={
- !!form.formState.errors.services?.message
- }
- >
- <FormLabel>{t('userDialog.services')}</FormLabel>
- <Controller
- control={form.control}
- name="services"
- render={() => {
- return (
- <ServicesSelectList
- list={services}
- renderCheckboxContent={(service) => (
- <Flex alignItems="center" justifyContent="space-between" flexDir="row" w="full">
- <Text fontSize="sm" color="gray.700" _dark={{ color: 'gray.100' }} fontWeight="medium">
- {service.name}
- </Text>
- <Flex flexDirection="row" alignItems="center">
- <SystemPropertyStatus value={service.users.length} StatusIcon={UsersServiceIcon} />
- <Text color="primary.600" _dark={{ color: 'gray.100' }} mx="8px" fontSize="sm">/</Text>
- <SystemPropertyStatus value={service.inbounds.length} StatusIcon={InboundsServiceIcon} />
- </Flex>
- </Flex>
- )}
- />
- );
- }}
- />
- <FormErrorMessage>
- {t(
- form.formState.errors.services
- ?.message as string
- )}
- </FormErrorMessage>
- </FormControl>
- );
-}
diff --git a/app/dashboard/src/pages/hosts/users/dialog/services-select-list.tsx b/app/dashboard/src/pages/hosts/users/dialog/services-select-list.tsx
@@ -1,55 +0,0 @@
-
-import {
- Box,
- Flex,
- Stack,
-} from '@chakra-ui/react';
-import { ListCheckBox } from 'components/list-check-box';
-import { forwardRef, ReactNode } from 'react';
-import {
- useFormContext,
-} from 'react-hook-form';
-import { Service } from 'types';
-
-interface ServicesSelectListProps {
- list: Service[];
- renderCheckboxContent: (service: Service) => ReactNode;
-}
-
-export const ServicesSelectList = forwardRef<HTMLDivElement, ServicesSelectListProps>(
- function({ list, renderCheckboxContent }, ref) {
- const form = useFormContext();
-
- const handleServiceToggle = (serviceId: number) => {
- const currentServices = form.getValues('services');
- const isSelected = currentServices.includes(serviceId);
-
- let updatedServices;
-
- if (isSelected) {
- updatedServices = currentServices.filter((id: number) => id !== serviceId);
- } else {
- updatedServices = [...currentServices, serviceId];
- }
-
- form.setValue('services', updatedServices, { shouldValidate: true });
- };
-
- return (
- <Stack spacing={3} ref={ref}>
- {list.map((service: Service) => (
- <Box key={service.id}>
- <Flex align="center">
- <ListCheckBox
- isChecked={form.getValues('services').includes(service.id)}
- onChange={() => handleServiceToggle(service.id)}
- value={String(service.id)}
- renderContent={() => renderCheckboxContent(service)}
- />
- </Flex>
- </Box>
- ))}
- </Stack>
- );
- }
-);
diff --git a/app/dashboard/src/pages/hosts/users/dialog/username-field.tsx b/app/dashboard/src/pages/hosts/users/dialog/username-field.tsx
@@ -1,63 +0,0 @@
-import { HStack, Input, Tooltip, Box, Switch, FormControl, FormLabel } from '@chakra-ui/react';
-import { TFunction } from 'i18next';
-import { Controller } from 'react-hook-form';
-
-interface UsernameFieldProps {
- form: any;
- isEditing: boolean;
- t: TFunction<'translation', undefined, 'translation'>;
- disabled: boolean;
-}
-
-export const UsernameField = ({ form, isEditing, t, disabled }: UsernameFieldProps) => {
- return (
- <FormControl mb={'10px'}>
- <FormLabel>{t('username')}</FormLabel>
- <HStack>
- <Input
- size="sm"
- type="text"
- borderRadius="6px"
- error={form.formState.errors.username?.message}
- disabled={disabled || isEditing}
- {...form.register('username')}
- />
- {isEditing && (
- <HStack px={1}>
- <Controller
- name="status"
- control={form.control}
- render={({ field }) => {
- return (
- <Tooltip
- placement="top"
- label={'status: ' + field.value}
- textTransform="capitalize"
- >
- <Box>
- <Switch
- colorScheme="primary"
- disabled={
- field.value !== 'active' &&
- field.value !== 'disabled'
- }
- isChecked={field.value === 'active'}
- onChange={(e) => {
- if (e.target.checked) {
- field.onChange('active');
- } else {
- field.onChange('disabled');
- }
- }}
- />
- </Box>
- </Tooltip>
- );
- }}
- />
- </HStack>
- )}
- </HStack>
- </FormControl>
- )
-}
diff --git a/app/dashboard/src/pages/hosts/users/filters.tsx b/app/dashboard/src/pages/hosts/users/filters.tsx
@@ -1,144 +0,0 @@
-import {
- BoxProps,
- Button,
- chakra,
- Grid,
- GridItem,
- HStack,
- IconButton,
- Input,
- InputGroup,
- InputLeftElement,
- InputRightElement,
- Spinner,
-} from '@chakra-ui/react';
-import {
- ArrowPathIcon,
- MagnifyingGlassIcon,
- XMarkIcon,
-} from '@heroicons/react/24/outline';
-import classNames from 'classnames';
-import { useDashboard, useUsers } from 'stores';
-import debounce from 'lodash.debounce';
-import React, { FC, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-const iconProps = {
- baseStyle: {
- w: 4,
- h: 4,
- },
-};
-
-const SearchIcon = chakra(MagnifyingGlassIcon, iconProps);
-const ClearIcon = chakra(XMarkIcon, iconProps);
-export const ReloadIcon = chakra(ArrowPathIcon, iconProps);
-
-export type FilterProps = {} & BoxProps;
-const setSearchField = debounce((username: string) => {
- useUsers.getState().onFilterChange({
- ...useUsers.getState().usersFilters,
- offset: 0,
- username,
- });
-}, 300);
-
-export const UsersFilters: FC<FilterProps> = ({ ...props }) => {
- const { loading, } = useDashboard();
- const { usersFilters: filters, onFilterChange, refetchUsers, onCreateUser, onResetAllUsage } = useUsers();
- const { t } = useTranslation();
- const [search, setSearch] = useState('');
- const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
- setSearch(e.target.value);
- setSearchField(e.target.value);
- };
- const clear = () => {
- setSearch('');
- onFilterChange({
- ...filters,
- offset: 0,
- username: '',
- });
- };
- return (
- <Grid
- id="users-filters"
- templateColumns={{
- lg: 'repeat(3, 1fr)',
- md: 'repeat(4, 1fr)',
- base: 'repeat(1, 1fr)',
- }}
- position="sticky"
- top={0}
- mx="-6"
- px="6"
- rowGap={4}
- gap={{
- lg: 4,
- base: 0,
- }}
- bg="var(--chakra-colors-chakra-body-bg)"
- py={4}
- zIndex="docked"
- {...props}
- >
- <GridItem colSpan={{ base: 1, md: 2, lg: 1 }} order={{ base: 2, md: 1 }}>
- <InputGroup>
- <InputLeftElement pointerEvents="none" children={<SearchIcon />} />
- <Input
- placeholder={t('search')}
- value={search}
- borderColor="light-border"
- onChange={onChange}
- />
- <InputRightElement>
- {loading && <Spinner size="xs" />}
- {filters.username && filters.username.length > 0 && (
- <IconButton
- onClick={clear}
- aria-label="clear"
- size="xs"
- variant="ghost"
- >
- <ClearIcon />
- </IconButton>
- )}
- </InputRightElement>
- </InputGroup>
- </GridItem>
- <GridItem colSpan={2} order={{ base: 1, md: 2 }}>
- <HStack justifyContent="flex-end" alignItems="center" h="full">
- <IconButton
- aria-label="refresh users"
- disabled={loading}
- onClick={refetchUsers}
- size="sm"
- variant="outline"
- >
- <ReloadIcon
- className={classNames({
- 'animate-spin': loading,
- })}
- />
- </IconButton>
- <Button
- colorScheme="red"
- size="sm"
- onClick={() => onResetAllUsage(true)}
- px={5}
- >
- {t('resetAllUsage')}
- </Button>
- <Button
- colorScheme="primary"
- size="sm"
- onClick={() => onCreateUser(true)}
- px={5}
- >
- {t('createUser')}
- </Button>
- </HStack>
- </GridItem>
- </Grid>
- );
-};
diff --git a/app/dashboard/src/pages/hosts/users/index.tsx b/app/dashboard/src/pages/hosts/users/index.tsx
@@ -1,29 +0,0 @@
-import { UserDialog } from './dialog';
-import { UsersTable } from './table';
-import { UsersFilters } from './filters';
-import {
- ResetAllUsageModal,
- DeleteUserModal,
- QRCodeDialog,
- ResetUserUsageModal,
- RevokeSubscriptionModal
-} from './modals';
-import { pages } from 'stores';
-import Page from 'components/page';
-
-const UsersPage = () => {
- return (
- <Page page={pages.users}>
- <UsersFilters />
- <UsersTable />
- <UserDialog />
- <QRCodeDialog />
- <DeleteUserModal />
- <RevokeSubscriptionModal />
- <ResetAllUsageModal />
- <ResetUserUsageModal />
- </Page>
- )
-}
-
-export default UsersPage;
diff --git a/app/dashboard/src/pages/hosts/users/modals/delete-modal.tsx b/app/dashboard/src/pages/hosts/users/modals/delete-modal.tsx
@@ -1,49 +0,0 @@
-import {
- useToast,
-} from '@chakra-ui/react';
-import { FC, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useUsers } from 'stores';
-import { DeleteModal } from 'components/delete-modal';
-
-type DeleteUserModalProps = {
- deleteCallback?: () => void;
-};
-
-export const DeleteUserModal: FC<DeleteUserModalProps> = () => {
- const [loading, setLoading] = useState(false);
- const { deletingUser, onDeletingUser, deleteUser } = useUsers();
- const { t } = useTranslation();
- const toast = useToast();
- const onClose = () => {
- onDeletingUser(null);
- };
- const onDelete = () => {
- if (deletingUser) {
- setLoading(true);
- deleteUser(deletingUser)
- .then(() => {
- toast({
- title: t('deleteUser.deleteSuccess', { username: deletingUser.username }),
- status: 'success',
- isClosable: true,
- position: 'top',
- duration: 3000,
- });
- })
- .then(onClose)
- .finally(setLoading.bind(null, false));
- }
- };
- return (
- <DeleteModal
- onDelete={onDelete}
- loading={loading}
- isOpen={!!deletingUser}
- onClose={onClose}
- deletingObjectName={deletingUser?.username}
- deleteObjectPromptT={'deleteUser.prompt'}
- deleteObjectTitleT={'deleteUser.title'}
- />
- );
-};
diff --git a/app/dashboard/src/pages/hosts/users/modals/index.tsx b/app/dashboard/src/pages/hosts/users/modals/index.tsx
@@ -1,5 +0,0 @@
-export * from './reset-all-usage-modal';
-export * from './delete-modal';
-export * from './qrcode-modals';
-export * from './reset-user-usage-modal';
-export * from './revoke-subscription-modal';
diff --git a/app/dashboard/src/pages/hosts/users/modals/qrcode-modals.tsx b/app/dashboard/src/pages/hosts/users/modals/qrcode-modals.tsx
@@ -1,175 +0,0 @@
-import {
- Box,
- chakra,
- HStack,
- IconButton,
- Modal,
- ModalBody,
- ModalCloseButton,
- ModalContent,
- ModalHeader,
- ModalOverlay,
- Text,
- VStack,
-} from '@chakra-ui/react';
-import {
- ChevronLeftIcon,
- ChevronRightIcon,
- QrCodeIcon,
-} from '@heroicons/react/24/outline';
-import { QRCodeCanvas } from 'qrcode.react';
-import { FC, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import Slider from 'react-slick';
-import 'slick-carousel/slick/slick-theme.css';
-import 'slick-carousel/slick/slick.css';
-import { Icon } from 'components/icon';
-import { useUsers } from 'stores';
-
-const QRCode = chakra(QRCodeCanvas);
-const NextIcon = chakra(ChevronRightIcon, {
- baseStyle: {
- w: 6,
- h: 6,
- color: 'gray.600',
- _dark: {
- color: 'white',
- },
- },
-});
-const PrevIcon = chakra(ChevronLeftIcon, {
- baseStyle: {
- w: 6,
- h: 6,
- color: 'gray.600',
- _dark: {
- color: 'white',
- },
- },
-});
-const QRIcon = chakra(QrCodeIcon, {
- baseStyle: {
- w: 5,
- h: 5,
- },
-});
-
-export const QRCodeDialog: FC = () => {
- const { QRcodeLinks, setQRCode, setSubLink, subscribeUrl } = useUsers();
- const isOpen = QRcodeLinks !== null;
- const [index, setIndex] = useState(0);
- const { t } = useTranslation();
- const onClose = () => {
- setQRCode(null);
- setSubLink(null);
- };
-
- const subscribeQrLink = String(subscribeUrl).startsWith('/')
- ? window.location.origin + subscribeUrl
- : String(subscribeUrl);
-
- return (
- <Modal isOpen={isOpen} onClose={onClose}>
- <ModalOverlay bg="blackAlpha.300" backdropFilter="blur(10px)" />
- <ModalContent mx="3" w="fit-content" maxW="3xl">
- <ModalHeader pt={6}>
- <Icon color="primary">
- <QRIcon color="white" />
- </Icon>
- </ModalHeader>
- <ModalCloseButton mt={3} />
- {QRcodeLinks && (
- <ModalBody
- gap={{
- base: '20px',
- lg: '50px',
- }}
- pr={{
- lg: '60px',
- }}
- px={{
- base: '50px',
- }}
- display="flex"
- justifyContent="center"
- flexDirection={{
- base: 'column',
- lg: 'row',
- }}
- >
- {subscribeUrl && (
- <VStack>
- <QRCode
- mx="auto"
- size={300}
- p="2"
- level={'L'}
- includeMargin={false}
- value={subscribeQrLink}
- bg="white"
- />
- <Text display="block" textAlign="center" pb={3} mt={1}>
- {t('qrcodeDialog.sublink')}
- </Text>
- </VStack>
- )}
- <Box w="300px">
- <Slider
- centerPadding="0px"
- centerMode={true}
- slidesToShow={1}
- slidesToScroll={1}
- dots={false}
- afterChange={setIndex}
- onInit={() => setIndex(0)}
- nextArrow={
- <IconButton
- size="sm"
- position="absolute"
- display="flex !important"
- _before={{ content: '""' }}
- aria-label="next"
- mr="-4"
- >
- <NextIcon />
- </IconButton>
- }
- prevArrow={
- <IconButton
- size="sm"
- position="absolute"
- display="flex !important"
- _before={{ content: '""' }}
- aria-label="prev"
- ml="-4"
- >
- <PrevIcon />
- </IconButton>
- }
- >
- {QRcodeLinks.map((link, i) => {
- return (
- <HStack key={i}>
- <QRCode
- mx="auto"
- size={300}
- p="2"
- level={'L'}
- includeMargin={false}
- value={link}
- bg="white"
- />
- </HStack>
- );
- })}
- </Slider>
- <Text display="block" textAlign="center" pb={3} mt={1}>
- {index + 1} / {QRcodeLinks.length}
- </Text>
- </Box>
- </ModalBody>
- )}
- </ModalContent>
- </Modal>
- );
-};
diff --git a/app/dashboard/src/pages/hosts/users/modals/reset-all-usage-modal.tsx b/app/dashboard/src/pages/hosts/users/modals/reset-all-usage-modal.tsx
@@ -1,105 +0,0 @@
-import {
- Button,
- chakra,
- Modal,
- ModalBody,
- ModalCloseButton,
- ModalContent,
- ModalFooter,
- ModalHeader,
- ModalOverlay,
- Spinner,
- Text,
- useToast,
-} from '@chakra-ui/react';
-import { FC, useState } from 'react';
-import { DocumentMinusIcon } from '@heroicons/react/24/outline';
-import { Icon } from 'components/icon';
-import { useTranslation } from 'react-i18next';
-import { useUsers } from 'stores';
-
-export const ResetIcon = chakra(DocumentMinusIcon, {
- baseStyle: {
- w: 5,
- h: 5,
- },
-});
-
-type DeleteUserModalProps = {};
-
-export const ResetAllUsageModal: FC<DeleteUserModalProps> = () => {
- const [loading, setLoading] = useState(false);
- const { isResetingAllUsage, onResetAllUsage, resetAllUsage } = useUsers();
- const { t } = useTranslation();
- const toast = useToast();
- const onClose = () => {
- onResetAllUsage(false);
- };
- const onReset = () => {
- setLoading(true);
- resetAllUsage()
- .then(() => {
- toast({
- title: t('resetAllUsage.success'),
- status: 'success',
- isClosable: true,
- position: 'top',
- duration: 3000,
- });
- })
- .catch(() => {
- toast({
- title: t('resetAllUsage.error'),
- status: 'error',
- isClosable: true,
- position: 'top',
- duration: 3000,
- });
- })
- .finally(() => {
- setLoading(false);
- });
- };
- return (
- <Modal isCentered isOpen={isResetingAllUsage} onClose={onClose} size="sm">
- <ModalOverlay bg="blackAlpha.300" backdropFilter="blur(10px)" />
- <ModalContent mx="3">
- <ModalHeader pt={6}>
- <Icon color="red">
- <ResetIcon />
- </Icon>
- </ModalHeader>
- <ModalCloseButton mt={3} />
- <ModalBody>
- <Text fontWeight="semibold" fontSize="lg">
- {t('resetAllUsage.title')}
- </Text>
- {isResetingAllUsage && (
- <Text
- mt={1}
- fontSize="sm"
- _dark={{ color: 'gray.400' }}
- color="gray.600"
- >
- {t('resetAllUsage.prompt')}
- </Text>
- )}
- </ModalBody>
- <ModalFooter display="flex">
- <Button size="sm" onClick={onClose} mr={3} w="full" variant="outline">
- {t('cancel')}
- </Button>
- <Button
- size="sm"
- w="full"
- colorScheme="red"
- onClick={onReset}
- leftIcon={loading ? <Spinner size="xs" /> : undefined}
- >
- {t('reset')}
- </Button>
- </ModalFooter>
- </ModalContent>
- </Modal>
- );
-};
diff --git a/app/dashboard/src/pages/hosts/users/modals/reset-user-usage-modal.tsx b/app/dashboard/src/pages/hosts/users/modals/reset-user-usage-modal.tsx
@@ -1,110 +0,0 @@
-import {
- Button,
- chakra,
- Modal,
- ModalBody,
- ModalCloseButton,
- ModalContent,
- ModalFooter,
- ModalHeader,
- ModalOverlay,
- Spinner,
- Text,
- useToast,
-} from '@chakra-ui/react';
-import { FC, useState } from 'react';
-import { ArrowPathIcon } from '@heroicons/react/24/outline';
-import { Icon } from 'components/icon';
-import { useTranslation, Trans } from 'react-i18next';
-import { useUsers } from 'stores';
-
-const ResetIcon = chakra(ArrowPathIcon, {
- baseStyle: {
- w: 5,
- h: 5,
- },
-});
-
-type DeleteUserModalProps = {};
-
-export const ResetUserUsageModal: FC<DeleteUserModalProps> = () => {
- const [loading, setLoading] = useState(false);
- const { resetUsageUser: user, resetDataUsage } = useUsers();
- const { t } = useTranslation();
- const toast = useToast();
- const onClose = () => {
- useUsers.setState({ resetUsageUser: null });
- };
- const onReset = () => {
- if (user) {
- setLoading(true);
- resetDataUsage(user)
- .then(() => {
- toast({
- title: t('resetUserUsage.success', { username: user.username }),
- status: 'success',
- isClosable: true,
- position: 'top',
- duration: 3000,
- });
- })
- .catch(() => {
- toast({
- title: t('resetUserUsage.error'),
- status: 'error',
- isClosable: true,
- position: 'top',
- duration: 3000,
- });
- })
- .finally(() => {
- setLoading(false);
- });
- }
- };
- return (
- <Modal isCentered isOpen={!!user} onClose={onClose} size="sm">
- <ModalOverlay bg="blackAlpha.300" backdropFilter="blur(10px)" />
- <ModalContent mx="3">
- <ModalHeader pt={6}>
- <Icon color="blue">
- <ResetIcon />
- </Icon>
- </ModalHeader>
- <ModalCloseButton mt={3} />
- <ModalBody>
- <Text fontWeight="semibold" fontSize="lg">
- {t('resetUserUsage.title')}
- </Text>
- {user && (
- <Text
- mt={1}
- fontSize="sm"
- _dark={{ color: 'gray.400' }}
- color="gray.600"
- >
- <Trans
- components={{ b: <b /> }}>
- {t('resetUserUsage.prompt', { username: user.username })}
- </Trans>
- </Text>
- )}
- </ModalBody>
- <ModalFooter display="flex">
- <Button size="sm" onClick={onClose} mr={3} w="full" variant="outline">
- {t('cancel')}
- </Button>
- <Button
- size="sm"
- w="full"
- colorScheme="blue"
- onClick={onReset}
- leftIcon={loading ? <Spinner size="xs" /> : undefined}
- >
- {t('reset')}
- </Button>
- </ModalFooter>
- </ModalContent>
- </Modal>
- );
-};
diff --git a/app/dashboard/src/pages/hosts/users/modals/revoke-subscription-modal.tsx b/app/dashboard/src/pages/hosts/users/modals/revoke-subscription-modal.tsx
@@ -1,109 +0,0 @@
-import {
- Button,
- chakra,
- Modal,
- ModalBody,
- ModalCloseButton,
- ModalContent,
- ModalFooter,
- ModalHeader,
- ModalOverlay,
- Spinner,
- Text,
- useToast,
-} from '@chakra-ui/react';
-import { ArrowPathIcon } from '@heroicons/react/24/outline';
-import { useUsers } from 'stores';
-import { FC, useState } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
-import { Icon } from 'components/icon';
-
-const ResetIcon = chakra(ArrowPathIcon, {
- baseStyle: {
- w: 5,
- h: 5,
- },
-});
-
-export type RevokeSubscriptionModalProps = {};
-
-export const RevokeSubscriptionModal: FC<RevokeSubscriptionModalProps> = () => {
- const [loading, setLoading] = useState(false);
- const { revokeSubscriptionUser: user, revokeSubscription } = useUsers();
- const { t } = useTranslation();
- const toast = useToast();
- const onClose = () => {
- useUsers.setState({ revokeSubscriptionUser: null });
- };
- const onReset = () => {
- if (user) {
- setLoading(true);
- revokeSubscription(user)
- .then(() => {
- toast({
- title: t('revokeUserSub.success', { username: user.username }),
- status: 'success',
- isClosable: true,
- position: 'top',
- duration: 3000,
- });
- })
- .catch(() => {
- toast({
- title: t('revokeUserSub.error'),
- status: 'error',
- isClosable: true,
- position: 'top',
- duration: 3000,
- });
- })
- .finally(() => {
- setLoading(false);
- });
- }
- };
- return (
- <Modal isCentered isOpen={!!user} onClose={onClose} size="sm">
- <ModalOverlay bg="blackAlpha.300" backdropFilter="blur(10px)" />
- <ModalContent mx="3">
- <ModalHeader pt={6}>
- <Icon color="blue">
- <ResetIcon />
- </Icon>
- </ModalHeader>
- <ModalCloseButton mt={3} />
- <ModalBody>
- <Text fontWeight="semibold" fontSize="lg">
- {t('revokeUserSub.title')}
- </Text>
- {user && (
- <Text
- mt={1}
- fontSize="sm"
- _dark={{ color: 'gray.400' }}
- color="gray.600"
- >
- <Trans components={{ b: <b /> }}>
- {t('revokeUserSub.prompt', { username: user.username })}
- </Trans>
- </Text>
- )}
- </ModalBody>
- <ModalFooter display="flex">
- <Button size="sm" onClick={onClose} mr={3} w="full" variant="outline">
- {t('cancel')}
- </Button>
- <Button
- size="sm"
- w="full"
- colorScheme="blue"
- onClick={onReset}
- leftIcon={loading ? <Spinner size="xs" /> : undefined}
- >
- {t('revoke')}
- </Button>
- </ModalFooter>
- </ModalContent>
- </Modal>
- );
-};
diff --git a/app/dashboard/src/pages/hosts/users/table/action-buttons.tsx b/app/dashboard/src/pages/hosts/users/table/action-buttons.tsx
@@ -1,144 +0,0 @@
-
-import { t } from 'i18next';
-import CopyToClipboard from 'react-copy-to-clipboard';
-import { User } from 'types';
-import {
- CopiedIcon,
- CopyIcon,
- QRIcon,
- SubscriptionLinkIcon
-} from 'components/table';
-import {
- HStack,
- IconButton,
- Tooltip,
-} from '@chakra-ui/react';
-import { FC, useEffect, useState } from 'react';
-import { useUsers } from 'stores';
-
-type ActionButtonsProps = {
- user: User;
-};
-
-export const ActionButtons: FC<ActionButtonsProps> = ({ user }) => {
- const { setQRCode, setSubLink } = useUsers();
-
- const proxyLinks = user.links.join('\r\n');
-
- const [copied, setCopied] = useState([-1, false]);
- useEffect(() => {
- if (copied[1]) {
- setTimeout(() => {
- setCopied([-1, false]);
- }, 1000);
- }
- }, [copied]);
- return (
- <HStack
- justifyContent="flex-end"
- onClick={(e) => {
- e.preventDefault();
- e.stopPropagation();
- }}
- >
- <CopyToClipboard
- text={
- user.subscription_url.startsWith('/')
- ? window.location.origin + user.subscription_url
- : user.subscription_url
- }
- onCopy={() => {
- setCopied([0, true]);
- }}
- >
- <div>
- <Tooltip
- label={
- copied[0] == 0 && copied[1]
- ? t('usersTable.copied')
- : t('usersTable.copyLink')
- }
- placement="top"
- >
- <IconButton
- p="0 !important"
- aria-label="copy subscription link"
- bg="transparent"
- _dark={{
- _hover: {
- bg: 'gray.700',
- },
- }}
- size={{
- base: 'sm',
- md: 'md',
- }}
- >
- {copied[0] == 0 && copied[1] ? (
- <CopiedIcon />
- ) : (
- <SubscriptionLinkIcon />
- )}
- </IconButton>
- </Tooltip>
- </div>
- </CopyToClipboard>
- <CopyToClipboard
- text={proxyLinks}
- onCopy={() => {
- setCopied([1, true]);
- }}
- >
- <div>
- <Tooltip
- label={
- copied[0] == 1 && copied[1]
- ? t('usersTable.copied')
- : t('usersTable.copyConfigs')
- }
- placement="top"
- >
- <IconButton
- p="0 !important"
- aria-label="copy configs"
- bg="transparent"
- _dark={{
- _hover: {
- bg: 'gray.700',
- },
- }}
- size={{
- base: 'sm',
- md: 'md',
- }}
- >
- {copied[0] == 1 && copied[1] ? <CopiedIcon /> : <CopyIcon />}
- </IconButton>
- </Tooltip>
- </div>
- </CopyToClipboard>
- <Tooltip label="QR Code" placement="top">
- <IconButton
- p="0 !important"
- aria-label="qr code"
- bg="transparent"
- _dark={{
- _hover: {
- bg: 'gray.700',
- },
- }}
- size={{
- base: 'sm',
- md: 'md',
- }}
- onClick={() => {
- setQRCode(user.links);
- setSubLink(user.subscription_url);
- }}
- >
- <QRIcon />
- </IconButton>
- </Tooltip>
- </HStack >
- );
-};
diff --git a/app/dashboard/src/pages/hosts/users/table/index.tsx b/app/dashboard/src/pages/hosts/users/table/index.tsx
@@ -1,408 +0,0 @@
-
-import {
- Accordion,
- AccordionButton,
- AccordionItem,
- AccordionPanel,
- Box,
- HStack,
- IconButton,
- Table,
- TableProps,
- Tbody,
- Td,
- Text,
- Th,
- Thead,
- Tooltip,
- Tr,
- useBreakpointValue,
- VStack,
-} from '@chakra-ui/react';
-import classNames from 'classnames';
-import { statusColors } from 'constants/Settings';
-import { FC, Fragment, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { OnlineBadge } from 'components/online-badge';
-import { OnlineStatus } from 'components/online-status';
-import { StatusBadge } from 'components/status-badge';
-import {
- Pagination,
- EmptySection,
- AccordionArrowIcon,
- handleSort,
- EditIcon,
- StatusSortSelect,
- Sort,
-} from 'components/table';
-import { UsageSlider, UsageSliderCompact } from './usage-slider';
-import { useUsers } from 'stores';
-import { ActionButtons } from './action-buttons';
-import { pageSizeManagers } from 'utils/userPreferenceStorage';
-
-type ExpandedIndex = number | number[];
-
-type UsersTableProps = {} & TableProps;
-
-export const UsersTable: FC<UsersTableProps> = (props) => {
- const {
- usersFilters: filters,
- users: { users },
- users: { total },
- onEditingUser,
- onCreateUser,
- onFilterChange,
- } = useUsers();
-
- const { t } = useTranslation();
- const [selectedRow, setSelectedRow] = useState<ExpandedIndex | undefined>(
- undefined
- );
- const useTable = useBreakpointValue({ base: false, md: true });
-
- const isFiltered = users.length !== total;
-
- const handleStatusFilter = (e: any) => {
- onFilterChange({
- status: e.target.value.length > 0 ? e.target.value : undefined,
- });
- };
-
- const toggleAccordion = (index: number) => {
- setSelectedRow(index === selectedRow ? undefined : index);
- };
- return (
- <Box id="users-table" overflowX={{ base: 'unset', md: 'unset' }}>
- <Accordion
- allowMultiple
- display={{ base: 'block', md: 'none' }}
- index={selectedRow}
- >
- <Table orientation="vertical" zIndex="docked" {...props}>
- <Thead zIndex="docked" position="relative">
- <Tr>
- <Th
- position="sticky"
- minW="120px"
- pl={4}
- pr={4}
- cursor={'pointer'}
- onClick={handleSort.bind(null, filters, 'username', onFilterChange)}
- >
- <HStack>
- <span>{t('users')}</span>
- <Sort sort={filters.sort} column="username" />
- </HStack>
- </Th>
- <Th
- position="sticky"
- minW="50px"
- pl={0}
- pr={0}
- w="140px"
- cursor={'pointer'}
- >
- <HStack spacing={0} position="relative">
- <Text
- position="absolute"
- _dark={{
- bg: 'gray.750',
- }}
- _light={{
- bg: '#F9FAFB',
- }}
- userSelect="none"
- pointerEvents="none"
- zIndex={1}
- w="100%"
- >
- {t('usersTable.status')}
- {filters.status ? ': ' + filters.status : ''}
- </Text>
- <StatusSortSelect filters={filters} handleStatusFilter={handleStatusFilter} options={['active', 'disabled', 'limited', 'expired', 'on_hold']} />
- </HStack>
- </Th>
- <Th
- position="sticky"
- minW="100px"
- cursor={'pointer'}
- pr={0}
- onClick={handleSort.bind(null, filters, 'used_traffic', onFilterChange)}
- >
- <HStack>
- <span>{t('usersTable.dataUsage')}</span>
- <Sort sort={filters.sort} column="used_traffic" />
- </HStack>
- </Th>
- <Th
- position="sticky"
- minW="32px"
- w="32px"
- p={0}
- cursor={'pointer'}
- ></Th>
- </Tr>
- </Thead>
- <Tbody>
- {!useTable &&
- users?.map((user, i) => {
- return (
- <Fragment key={user.username}>
- <Tr
- onClick={toggleAccordion.bind(null, i)}
- cursor="pointer"
- >
- <Td borderBottom={0} minW="100px" pl={4} pr={4}>
- <div className="flex-status">
- <OnlineBadge lastOnline={user.online_at} />
- {user.username}
- </div>
- </Td>
- <Td borderBottom={0} minW="50px" pl={0} pr={0}>
- <StatusBadge
- compact
- showDetail={false}
- expiryDate={user.expire}
- status={user.status}
- />
- </Td>
- <Td borderBottom={0} minW="100px" pr={0}>
- <UsageSliderCompact
- totalUsedTraffic={user.lifetime_used_traffic}
- dataLimitResetStrategy={
- user.data_limit_reset_strategy
- }
- used={user.used_traffic}
- total={user.data_limit}
- colorScheme={statusColors[user.status].bandWidthColor}
- />
- </Td>
- <Td p={0} borderBottom={0} w="32px" minW="32px">
- <AccordionArrowIcon
- color="gray.600"
- _dark={{
- color: 'gray.400',
- }}
- transition="transform .2s ease-out"
- transform={
- selectedRow === i ? 'rotate(180deg)' : '0deg'
- }
- />
- </Td>
- </Tr>
- <Tr
- className="collapsible"
- onClick={toggleAccordion.bind(null, i)}
- >
- <Td p={0} colSpan={4}>
- <AccordionItem border={0}>
- <AccordionButton display="none"></AccordionButton>
- <AccordionPanel
- border={0}
- cursor="pointer"
- px={6}
- py={3}
- >
- <VStack justifyContent="space-between" spacing="4">
- <VStack
- alignItems="flex-start"
- w="full"
- spacing={-1}
- >
- <Text
- textTransform="capitalize"
- fontSize="xs"
- fontWeight="bold"
- color="gray.600"
- _dark={{
- color: 'gray.400',
- }}
- >
- {t('usersTable.dataUsage')}
- </Text>
- <Box width="full" minW="230px">
- <UsageSlider
- totalUsedTraffic={
- user.lifetime_used_traffic
- }
- dataLimitResetStrategy={
- user.data_limit_reset_strategy
- }
- used={user.used_traffic}
- total={user.data_limit}
- colorScheme={
- statusColors[user.status].bandWidthColor
- }
- />
- </Box>
- </VStack>
- <HStack w="full" justifyContent="space-between">
- <Box width="full">
- <StatusBadge
- compact
- expiryDate={user.expire}
- status={user.status}
- />
- <OnlineStatus lastOnline={user.online_at} />
- </Box>
- <HStack>
- <ActionButtons user={user} />
- <Tooltip
- label={t('userDialog.editUser')}
- placement="top"
- >
- <IconButton
- p="0 !important"
- aria-label="Edit user"
- bg="transparent"
- _dark={{
- _hover: {
- bg: 'gray.700',
- },
- }}
- size={{
- base: 'sm',
- md: 'md',
- }}
- onClick={(e) => {
- e.stopPropagation();
- onEditingUser(user);
- }}
- >
- <EditIcon />
- </IconButton>
- </Tooltip>
- </HStack>
- </HStack>
- </VStack>
- </AccordionPanel>
- </AccordionItem>
- </Td>
- </Tr>
- </Fragment>
- );
- })}
- </Tbody>
- </Table>
- </Accordion>
- <Table
- orientation="vertical"
- display={{ base: 'none', md: 'table' }}
- {...props}
- >
- <Thead zIndex="docked" position="relative">
- <Tr>
- <Th
- position="sticky"
- minW="140px"
- cursor={'pointer'}
- onClick={handleSort.bind(null, filters, 'username', onFilterChange)}
- >
- <HStack>
- <span>{t('username')}</span>
- <Sort sort={filters.sort} column="username" />
- </HStack>
- </Th>
- <Th
- position="sticky"
- width="400px"
- minW="150px"
- cursor={'pointer'}
- >
- <HStack spacing={0} position="relative">
- <Text
- position="absolute"
- _dark={{
- bg: 'gray.750',
- }}
- _light={{
- bg: '#F9FAFB',
- }}
- userSelect="none"
- pointerEvents="none"
- zIndex={1}
- w="100%"
- >
- {t('usersTable.status')}
- {filters.status ? ': ' + filters.status : ''}
- </Text>
- <StatusSortSelect filters={filters} handleStatusFilter={handleStatusFilter} options={['active', 'disabled', 'limited', 'expired', 'on_hold']} />
- </HStack>
- </Th>
- <Th
- position="sticky"
- width="350px"
- minW="230px"
- cursor={'pointer'}
- onClick={handleSort.bind(null, filters, 'used_traffic', onFilterChange)}
- >
- <HStack>
- <span>{t('usersTable.dataUsage')}</span>
- <Sort sort={filters.sort} column="used_traffic" />
- </HStack>
- </Th>
- <Th
- position="sticky"
- width="200px"
- minW="180px"
- />
- </Tr>
- </Thead>
- <Tbody>
- {useTable &&
- users?.map((user, i) => {
- return (
- <Tr
- key={user.username}
- className={classNames('interactive', {
- 'last-row': i === users.length - 1,
- })}
- onClick={() => onEditingUser(user)}
- >
- <Td minW="140px">
- <div className="flex-status">
- <OnlineBadge lastOnline={user.online_at} />
- {user.username}
- <OnlineStatus lastOnline={user.online_at} />
- </div>
- </Td>
- <Td width="400px" minW="150px">
- <StatusBadge
- expiryDate={user.expire}
- status={user.status}
- />
- </Td>
- <Td width="350px" minW="230px">
- <UsageSlider
- totalUsedTraffic={user.lifetime_used_traffic}
- dataLimitResetStrategy={user.data_limit_reset_strategy}
- used={user.used_traffic}
- total={user.data_limit}
- colorScheme={statusColors[user.status].bandWidthColor}
- />
- </Td>
- <Td width="200px" minW="180px">
- <ActionButtons user={user} />
- </Td>
- </Tr>
- );
- })}
- {users.length == 0 && (
- <Tr>
- <Td colSpan={4}>
- <EmptySection
- isFiltered={isFiltered}
- noObjectT="usersTable.noUser"
- noObjectMatchedT='usersTable.noUserMatched'
- createObjectT="createUser"
- onCreateObject={onCreateUser}
- />
- </Td>
- </Tr>
- )}
- </Tbody>
- </Table>
- <Pagination filters={filters} total={total} onFilterChange={onFilterChange} pageSizeManager={pageSizeManagers.users} />
- </Box>
- );
-};
diff --git a/app/dashboard/src/pages/hosts/users/table/usage-slider.tsx b/app/dashboard/src/pages/hosts/users/table/usage-slider.tsx
@@ -1,106 +0,0 @@
-import { HStack, Text, SliderTrack, SliderFilledTrack, Slider, SliderProps } from '@chakra-ui/react';
-import { resetStrategy } from 'constants/Settings';
-import { formatBytes } from 'utils/formatByte';
-import { useTranslation } from 'react-i18next';
-import { FC } from 'react';
-
-export const UsageSliderCompact: FC<UsageSliderProps> = (props) => {
- const { used, total } = props;
- const isUnlimited = total === 0 || total === null;
- return (
- <HStack
- justifyContent="space-between"
- fontSize="xs"
- fontWeight="medium"
- color="gray.600"
- _dark={{
- color: 'gray.400',
- }}
- >
- <Text>
- {formatBytes(used)} /{' '}
- {isUnlimited ? (
- <Text as="span" fontFamily="system-ui">
- ∞
- </Text>
- ) : (
- formatBytes(total)
- )}
- </Text>
- </HStack>
- );
-};
-
-type UsageSliderProps = {
- used: number;
- total: number | null;
- dataLimitResetStrategy: string | null;
- totalUsedTraffic: number;
-} & SliderProps;
-
-const getResetStrategy = (strategy: string): string => {
- for (var i = 0; i < resetStrategy.length; i++) {
- const entry = resetStrategy[i];
- if (entry.value == strategy) {
- return entry.title;
- }
- }
- return 'No';
-};
-
-export const UsageSlider: FC<UsageSliderProps> = (props) => {
- const {
- used,
- total,
- dataLimitResetStrategy,
- totalUsedTraffic,
- ...restOfProps
- } = props;
- const isUnlimited = total === 0 || total === null;
- const isReached = !isUnlimited && (used / total) * 100 >= 100;
- const { t } = useTranslation();
- return (
- <>
- <Slider
- orientation="horizontal"
- value={isUnlimited ? 100 : Math.min((used / total) * 100, 100)}
- colorScheme={isReached ? 'red' : 'primary'}
- {...restOfProps}
- >
- <SliderTrack h="6px" borderRadius="full">
- <SliderFilledTrack borderRadius="full" />
- </SliderTrack>
- </Slider>
- <HStack
- justifyContent="space-between"
- fontSize="xs"
- fontWeight="medium"
- color="gray.600"
- _dark={{
- color: 'gray.400',
- }}
- >
- <Text>
- {formatBytes(used)} /{' '}
- {isUnlimited ? (
- <Text as="span" fontFamily="system-ui">
- ∞
- </Text>
- ) : (
- formatBytes(total) +
- (dataLimitResetStrategy && dataLimitResetStrategy !== 'no_reset'
- ? ' ' +
- t(
- 'userDialog.resetStrategy' +
- getResetStrategy(dataLimitResetStrategy)
- )
- : '')
- )}
- </Text>
- <Text>
- {t('usersTable.total')}: {formatBytes(totalUsedTraffic)}
- </Text>
- </HStack>
- </>
- );
-};
diff --git a/app/dashboard/src/pages/nodes/table/index.tsx b/app/dashboard/src/pages/nodes/table/index.tsx
@@ -34,7 +34,9 @@ import {
StatusSortSelect,
handleSort,
} from 'components/table';
-import { useNodes } from 'stores';
+import { fetchNodes, useNodes } from 'stores';
+import { useQuery } from 'react-query';
+import { queryIds } from 'constants/query-ids';
type ExpandedIndex = number | number[];
@@ -43,13 +45,12 @@ type NodesTableProps = {} & TableProps;
export const NodesTable: FC<NodesTableProps> = (props) => {
const {
nodesFilters: filters,
- nodes,
onEditingNode,
onAddingNode,
onFilterChange,
} = useNodes();
-
- const total = nodes.length;
+ const { data: nodes } = useQuery(queryIds.nodes, () => { return fetchNodes() })
+ const total = nodes?.length || 0;
const { t } = useTranslation();
const [selectedRow, setSelectedRow] = useState<ExpandedIndex | undefined>(
@@ -373,7 +374,7 @@ export const NodesTable: FC<NodesTableProps> = (props) => {
</Tr>
);
})}
- {nodes.length == 0 && (
+ {nodes?.length == 0 && (
<Tr>
<Td colSpan={5}>
<EmptySection
diff --git a/app/dashboard/src/pages/services/dialog/index.tsx b/app/dashboard/src/pages/services/dialog/index.tsx
@@ -32,7 +32,9 @@ import { schema, FormType } from './form-schema';
import { InboundsField } from './inbounds-field';
import { NameField } from './name-field';
import { InboundType, Service, ServiceCreate } from 'types';
-import { useInbounds, useServices } from 'stores';
+import { fetchInbounds, useInbounds, useServices } from 'stores';
+import { useQuery } from 'react-query';
+import { queryIds } from 'constants/query-ids';
const formatService = (service: Service): FormType => {
const inbounds: number[] = service.inbounds.map((inbound: number | InboundType): number => {
@@ -56,10 +58,10 @@ export const ServiceDialog: FC<ServiceDialogProps> = () => {
createService,
onDeletingService,
} = useServices();
+ const { refetchInbounds } = useInbounds();
const {
- inbounds,
- refetchInbounds,
- } = useInbounds();
+ data: inbounds,
+ } = useQuery(queryIds.inbounds, () => fetchInbounds());
const isEditing = !!editingService;
const isOpen = isCreatingNewService || isEditing;
const [loading, setLoading] = useState(false);
@@ -149,7 +151,7 @@ export const ServiceDialog: FC<ServiceDialogProps> = () => {
w="full"
>
<NameField form={form} disabled={disabled} isEditing={isEditing} t={t} />
- <InboundsField t={t} inbounds={inbounds} form={form} />
+ <InboundsField t={t} inbounds={inbounds || []} form={form} />
</Flex>
{error && (
<Alert
diff --git a/app/dashboard/src/pages/services/table.tsx b/app/dashboard/src/pages/services/table.tsx
@@ -22,8 +22,10 @@ import {
Pagination,
Sort
} from 'components/table';
-import { useServices } from 'stores';
+import { fetchServices, useServices } from 'stores';
import { pageSizeManagers } from 'utils/userPreferenceStorage';
+import { useQuery } from 'react-query';
+import { queryIds } from 'constants/query-ids';
type ExpandedIndex = number | number[];
type ServicesTableProps = {} & TableProps;
@@ -31,11 +33,11 @@ type ServicesTableProps = {} & TableProps;
export const ServicesTable: FC<ServicesTableProps> = (props) => {
const {
servicesFilters: filters,
- services,
onEditingService,
onCreateService,
onFilterChange,
} = useServices();
+ const { data: services } = useQuery(queryIds.services, () => { return fetchServices(filters) });
const useTable = useBreakpointValue({ base: false, md: true });
const { t } = useTranslation();
const [selectedRow,] = useState<ExpandedIndex | undefined>(
@@ -192,7 +194,7 @@ export const ServicesTable: FC<ServicesTableProps> = (props) => {
</Tr>
);
})}
- {services.length == 0 && (
+ {services?.length == 0 && (
<Tr>
<Td colSpan={3}>
<EmptySection
@@ -207,8 +209,8 @@ export const ServicesTable: FC<ServicesTableProps> = (props) => {
)}
</Tbody>
</Table>
- <Pagination
- total={services.length}
+ <Pagination
+ total={services?.length || 0}
onFilterChange={onFilterChange}
filters={filters}
pageSizeManager={pageSizeManagers.services}
diff --git a/app/dashboard/src/pages/users/dialog/index.tsx b/app/dashboard/src/pages/users/dialog/index.tsx
@@ -49,7 +49,9 @@ import { DataLimitField } from './data-limit-field';
import { PeriodicUsageReset } from './periodic-usage-reset';
import { ExpireDateField } from './expire-date-field';
import { NoteField } from './note-field';
-import { useUsers, useServices } from 'stores';
+import { useUsers, useServices, fetchServices } from 'stores';
+import { queryIds } from 'constants/query-ids';
+import { useQuery } from 'react-query';
const formatUser = (user: User): FormType => {
const services: number[] = user.services.map((service: number | Service): number => {
@@ -77,7 +79,14 @@ export const UserDialog: FC<UserDialogProps> = () => {
createUser,
onDeletingUser,
} = useUsers();
- const { refetchServices, services } = useServices();
+ const { refetchServices, servicesFilters: filters } = useServices();
+ const { data: services } = useQuery({
+ queryKey: queryIds.services,
+ initialData: [],
+ queryFn: () => {
+ return fetchServices(filters);
+ }
+ });
const isEditing = !!editingUser;
const isOpen = isCreatingNewUser || isEditing;
const [loading, setLoading] = useState(false);
@@ -259,7 +268,7 @@ export const UserDialog: FC<UserDialogProps> = () => {
</GridItem>
<GridItem>
- <ServicesField t={t} services={services} form={form} />
+ <ServicesField t={t} services={services || []} form={form} />
</GridItem>
{isEditing && usageVisible && (
diff --git a/app/dashboard/src/pages/users/table/index.tsx b/app/dashboard/src/pages/users/table/index.tsx
@@ -36,9 +36,12 @@ import {
Sort,
} from 'components/table';
import { UsageSlider, UsageSliderCompact } from './usage-slider';
-import { useUsers } from 'stores';
+import { fetchUsers, useUsers } from 'stores';
import { ActionButtons } from './action-buttons';
import { pageSizeManagers } from 'utils/userPreferenceStorage';
+import { useQuery } from 'react-query';
+import { User } from 'types';
+import { queryIds } from 'constants/query-ids';
type ExpandedIndex = number | number[];
@@ -47,27 +50,27 @@ type UsersTableProps = {} & TableProps;
export const UsersTable: FC<UsersTableProps> = (props) => {
const {
usersFilters: filters,
- users: { users },
- users: { total },
onEditingUser,
onCreateUser,
onFilterChange,
} = useUsers();
-
+ const { data } = useQuery({
+ queryKey: queryIds.users,
+ queryFn: () => { return fetchUsers(filters) },
+ initialData: { total: 0, users: [] },
+ });
const { t } = useTranslation();
const [selectedRow, setSelectedRow] = useState<ExpandedIndex | undefined>(
undefined
);
const useTable = useBreakpointValue({ base: false, md: true });
- const isFiltered = users.length !== total;
-
const handleStatusFilter = (e: any) => {
onFilterChange({
status: e.target.value.length > 0 ? e.target.value : undefined,
});
};
-
+ const isFiltered = data?.total !== data?.users.length;
const toggleAccordion = (index: number) => {
setSelectedRow(index === selectedRow ? undefined : index);
};
@@ -145,7 +148,7 @@ export const UsersTable: FC<UsersTableProps> = (props) => {
</Thead>
<Tbody>
{!useTable &&
- users?.map((user, i) => {
+ data?.users.map((user, i) => {
return (
<Fragment key={user.username}>
<Tr
@@ -350,12 +353,12 @@ export const UsersTable: FC<UsersTableProps> = (props) => {
</Thead>
<Tbody>
{useTable &&
- users?.map((user, i) => {
+ data?.users.map((user: User, i) => {
return (
<Tr
key={user.username}
className={classNames('interactive', {
- 'last-row': i === users.length - 1,
+ 'last-row': i === data?.users.length - 1,
})}
onClick={() => onEditingUser(user)}
>
@@ -387,7 +390,7 @@ export const UsersTable: FC<UsersTableProps> = (props) => {
</Tr>
);
})}
- {users.length == 0 && (
+ {data?.users.length == 0 && (
<Tr>
<Td colSpan={4}>
<EmptySection
@@ -402,7 +405,7 @@ export const UsersTable: FC<UsersTableProps> = (props) => {
)}
</Tbody>
</Table>
- <Pagination filters={filters} total={total} onFilterChange={onFilterChange} pageSizeManager={pageSizeManagers.users} />
+ <Pagination filters={filters} total={data?.total || 0} onFilterChange={onFilterChange} pageSizeManager={pageSizeManagers.users} />
</Box>
);
};
diff --git a/app/dashboard/src/stores/inbounds.store.ts b/app/dashboard/src/stores/inbounds.store.ts
@@ -7,6 +7,7 @@ import { z } from 'zod';
import { HostsFilterType, InboundsFilterType } from 'types';
import { pageSizeManagers } from 'utils/userPreferenceStorage';
import { queryClient } from 'service/react-query';
+import { queryIds } from 'constants/query-ids';
const isPortThenValue = (value: number) => (value <= 65535 && value !== 0) ? value : null;
@@ -37,9 +38,7 @@ export type Hosts = HostType[];
export const fetchInbounds = async () => {
useDashboard.setState({ loading: true });
return fetch('/inbounds')
- .then((inbounds: Inbounds) => {
- useInbounds.setState({ inbounds });
- })
+ .then((inbounds: Inbounds) => inbounds)
.finally(() => {
useDashboard.setState({ loading: false });
});
@@ -59,10 +58,9 @@ type InboundsStateType = {
loading: boolean;
setLoading: (value: boolean) => void;
// Inbounds
- inbounds: Inbounds;
- refetchInbounds: () => void;
selectedInbound: InboundType | null;
selectInbound: (inbound: InboundType) => void;
+ refetchInbounds: () => void;
// Hosts
refetchHosts: () => void;
hostsFilters: HostsFilterType;
@@ -84,7 +82,6 @@ type InboundsStateType = {
export const useInbounds = create(
subscribeWithSelector<InboundsStateType>((set, get) => ({
- inbounds: [],
selectedHost: null,
selectedInbound: null,
loading: false,
@@ -121,10 +118,10 @@ export const useInbounds = create(
set({ loading: value })
},
refetchInbounds: () => {
- fetchInbounds();
+ queryClient.invalidateQueries(queryIds.inbounds);
},
refetchHosts: () => {
- queryClient.invalidateQueries('hosts');
+ queryClient.invalidateQueries(queryIds.hosts);
},
selectInbound: (host): void => {
set({ selectedInbound: host })
diff --git a/app/dashboard/src/stores/nodes.store.ts b/app/dashboard/src/stores/nodes.store.ts
@@ -5,6 +5,8 @@ import { z } from 'zod';
import { FilterUsageType, NodesFilterType } from 'types/filter';
import { pageSizeManagers } from 'utils/userPreferenceStorage';
import { useDashboard } from './dashboard.store';
+import { queryClient } from 'service/react-query';
+import { queryIds } from 'constants/query-ids';
export const NodeSchema = z.object({
name: z.string().min(1),
@@ -61,12 +63,16 @@ export const getNodeCreateDefaultValues = (): NodeCreate => ({
export const FetchNodesQueryKey = 'fetch-nodes-query-key';
-export function fetchNodes() {
- return fetch('/nodes');
+export function fetchNodes(): Promise<NodeType[]> {
+ useDashboard.setState({ loading: true })
+ return fetch('/nodes').then((nodes) => {
+ return nodes;
+ }).finally(() => {
+ useDashboard.setState({ loading: false })
+ });
}
export type NodeStore = {
- nodes: NodeType[];
certificate: string,
deletingNode?: NodeCreate | null;
editingNode: NodeCreate | null;
@@ -99,7 +105,6 @@ export const useNodesQuery = () => {
};
export const useNodes = create<NodeStore>((set, get) => ({
- nodes: [],
certificate: '',
editingNode: null,
deletingNode: null,
@@ -125,11 +130,7 @@ export const useNodes = create<NodeStore>((set, get) => ({
return fetch('/nodes', { method: 'POST', body }).then(() => { get().refetchCertificate() });
},
refetchNodes: () => {
- useDashboard.setState({ loading: true })
- fetchNodes().then((nodes) => {
- useDashboard.setState({ loading: false })
- set({ nodes });
- })
+ queryClient.invalidateQueries(queryIds.nodes);
},
refetchCertificate: () => {
fetch('/nodes/settings').then((res) => {
diff --git a/app/dashboard/src/stores/services.store.ts b/app/dashboard/src/stores/services.store.ts
@@ -7,9 +7,9 @@ import { subscribeWithSelector } from 'zustand/middleware';
import { fetch } from 'service/http';
import { ServicesFilterType } from 'types/filter';
import { useDashboard, useUsers } from 'stores';
+import { queryIds } from 'constants/query-ids';
type ServicesStateType = {
- services: Service[],
isCreatingNewService: boolean;
editingService: Service | null | undefined;
deletingService: Service | null;
@@ -33,7 +33,6 @@ export const fetchServices = async (query: ServicesFilterType): Promise<Service[
return fetch('/services')
.then((services) => {
- useServices.setState({ services });
return services;
})
.finally(() => {
@@ -46,7 +45,6 @@ export const useServices = create(
editingService: null,
deletingService: null,
isCreatingNewService: false,
- services: [],
servicesFilters: {
name: '',
limit: pageSizeManagers.services.getPageSize(),
@@ -62,7 +60,7 @@ export const useServices = create(
get().refetchServices();
},
refetchServices: () => {
- fetchServices(get().servicesFilters);
+ queryClient.invalidateQueries(queryIds.services);
},
onCreateService: (isCreatingNewService) => set({ isCreatingNewService }),
onEditingService: (editingService) => {
diff --git a/app/dashboard/src/stores/users.store.ts b/app/dashboard/src/stores/users.store.ts
@@ -7,15 +7,12 @@ import { useServices, useDashboard } from 'stores';
import { StatisticsQueryKey } from 'components/statistics-card';
import { queryClient } from 'service/react-query';
import { UsersFilterType, FilterUsageType } from 'types/filter';
+import { queryIds } from 'constants/query-ids';
type UsersStateType = {
isCreatingNewUser: boolean;
editingUser: User | null | undefined;
deletingUser: User | null;
- users: {
- users: User[];
- total: number;
- };
usersFilters: UsersFilterType;
resetUsageUser: User | null;
revokeSubscriptionUser: User | null;
@@ -39,7 +36,12 @@ type UsersStateType = {
fetchUserUsage: (user: User, query: FilterUsageType) => Promise<void>;
}
-export const fetchUsers = async (query: UsersFilterType): Promise<User[]> => {
+type UserResponse = {
+ total: number,
+ users: User[]
+}
+
+export const fetchUsers = async (query: UsersFilterType): Promise<UserResponse> => {
for (const key in query) {
if (!query[key as keyof UsersFilterType]) delete query[key as keyof UsersFilterType];
}
@@ -49,7 +51,6 @@ export const fetchUsers = async (query: UsersFilterType): Promise<User[]> => {
for (let i = 0; i < users.users.length; i++) {
users.users[i].service = users.users[i].service_ids;
}
- useUsers.setState({ users });
return users;
})
.finally(() => {
@@ -61,10 +62,6 @@ export const useUsers = create(subscribeWithSelector<UsersStateType>((set, get)
editingUser: null,
deletingUser: null,
isCreatingNewUser: false,
- users: {
- users: [],
- total: 0,
- },
resetUsageUser: null,
revokeSubscriptionUser: null,
isResetingAllUsage: false,
@@ -82,7 +79,7 @@ export const useUsers = create(subscribeWithSelector<UsersStateType>((set, get)
set({ subscribeUrl });
},
refetchUsers: () => {
- fetchUsers(get().usersFilters);
+ queryClient.invalidateQueries(queryIds.users);
},
resetAllUsage: async () => {
return fetch('/users/reset', { method: 'POST' }).then(() => {
diff --git a/makefile b/makefile
@@ -11,9 +11,10 @@ dashboard-build:
cp ./app/dashboard/dist/index.html ./app/dashboard/dist/404.html
dashboard-dev:
- npm run dev \
+ VITE_BASE_API=http://0.0.0.0:8000/api/ npm run dev \
+ --prefix './app/dashboard/' \
-- --host 0.0.0.0 \
- --base ../app/dashboard/ \
+ --base ./app/dashboard/ \
--clearScreen false
dashboard-cleanup: