Skip to content

Commit

Permalink
rework backend members
Browse files Browse the repository at this point in the history
  • Loading branch information
@sinamics
sinamics committed Aug 4, 2023
1 parent fe1505a commit 10b5367
Show file tree
Hide file tree
Showing 9 changed files with 204 additions and 59 deletions.
30 changes: 21 additions & 9 deletions src/components/modules/memberOptionsModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
import { api } from "~/utils/api";
import { toast } from "react-hot-toast";
import { useRouter } from "next/router";
import { isIPInSubnet } from "~/utils/isIpInsubnet";
import cn from "classnames";
import { useState, useEffect } from "react";
import { type Prisma } from "@prisma/client";
import {
type TagDetails,
type CapabilitiesByName,
type TagsByName,
} from "~/types/network";
import Anotation from "./anotation";
import { useTranslations } from "next-intl";
import { type CapabilitiesByName, type TagDetails } from "~/types/local/member";
import { type TagsByName } from "~/types/local/network";

interface ModalContentProps {
nwid: string;
memberId: string;
central: boolean;
// ipAssignments: string[];
}
const initialIpState = { ipInput: "", isValid: false };

export const MemberOptionsModal: React.FC<ModalContentProps> = ({
nwid,
memberId,
central = false,
}) => {
const t = useTranslations("networkById");
const [state, setState] = useState(initialIpState);
Expand All @@ -33,6 +33,7 @@ export const MemberOptionsModal: React.FC<ModalContentProps> = ({
api.network.getNetworkById.useQuery(
{
nwid,
central,
},
{ enabled: !!query.id, networkMode: "online" }
);
Expand All @@ -41,16 +42,19 @@ export const MemberOptionsModal: React.FC<ModalContentProps> = ({
{
nwid,
id: memberId,
central,
},
{ enabled: !!query.id, networkMode: "online" }
);

useEffect(() => {
// find member by id
const member = networkById?.members.find(
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
(member) => member.id === memberId
);

// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
seIpAssignments(member?.ipAssignments || []);
}, [networkById?.members, memberId]);

Expand Down Expand Up @@ -88,6 +92,7 @@ export const MemberOptionsModal: React.FC<ModalContentProps> = ({
{
updateParams: { ipAssignments: [...newIpPool] },
memberId: id,
central,
nwid,
},
{
Expand Down Expand Up @@ -139,6 +144,7 @@ export const MemberOptionsModal: React.FC<ModalContentProps> = ({
{
updateParams: { ipAssignments: [...ipAssignments, ipInput] },
memberId,
central,
nwid,
},
{
Expand Down Expand Up @@ -176,6 +182,7 @@ export const MemberOptionsModal: React.FC<ModalContentProps> = ({
capabilities,
},
memberId,
central,
nwid,
},
{
Expand Down Expand Up @@ -252,6 +259,7 @@ export const MemberOptionsModal: React.FC<ModalContentProps> = ({
tags,
},
memberId,
central,
nwid,
},
{
Expand Down Expand Up @@ -425,6 +433,7 @@ export const MemberOptionsModal: React.FC<ModalContentProps> = ({
activeBridge: e.target.checked,
},
memberId,
central,
nwid,
},
{
Expand Down Expand Up @@ -454,6 +463,7 @@ export const MemberOptionsModal: React.FC<ModalContentProps> = ({
noAutoAssignIps: e.target.checked,
},
memberId,
central,
nwid,
},
{
Expand All @@ -477,11 +487,13 @@ export const MemberOptionsModal: React.FC<ModalContentProps> = ({
{TagDropdowns(networkById?.network?.tagsByName)}
</div>
</div>
<div className="grid grid-cols-4 items-start gap-4 py-3">
<div className="col-span-4">
<Anotation nwid={nwid} nodeid={memberById?.nodeid} />
{!central ? (
<div className="grid grid-cols-4 items-start gap-4 py-3">
<div className="col-span-4">
<Anotation nwid={nwid} nodeid={memberById?.nodeid} />
</div>
</div>
</div>
) : null}
</div>
</div>
);
Expand Down
78 changes: 61 additions & 17 deletions src/components/modules/networkMembersTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,16 @@ import { useRouter } from "next/router";
import { isIPInSubnet } from "~/utils/isIpInsubnet";
import { useModalStore } from "~/utils/store";
import { MemberOptionsModal } from "./memberOptionsModal";
import {
type NetworkMemberNotation,
type MembersEntity,
} from "~/types/network";
import { DebouncedInput } from "../elements/debouncedInput";
import { useSkipper } from "../elements/useSkipper";
import TableFooter from "./tableFooter";
import { convertRGBtoRGBA } from "~/utils/randomColor";
import Input from "../elements/input";
import { useTranslations } from "next-intl";
import {
type MemberEntity,
type NetworkMemberNotation,
} from "~/types/local/member";
// import { makeNetworkMemberData } from "~/utils/fakeData";

declare module "@tanstack/react-table" {
Expand All @@ -40,7 +40,7 @@ declare module "@tanstack/react-table" {

interface IProp {
nwid: string;
central?: boolean;
central: boolean;
}

enum ConnectionStatus {
Expand Down Expand Up @@ -99,6 +99,7 @@ export const NetworkMembersTable = ({ nwid, central = false }: IProp) => {
updateParams: { ipAssignments: [...newIpPool] },
memberId: id,
nwid,
central,
},
{
onSuccess: () => {
Expand All @@ -116,8 +117,8 @@ export const NetworkMembersTable = ({ nwid, central = false }: IProp) => {
{ onSuccess: () => void refetchNetworkById() }
);
};
const columnHelper = createColumnHelper<MembersEntity>();
const columns = useMemo<ColumnDef<MembersEntity>[]>(
const columnHelper = createColumnHelper<MemberEntity>();
const columns = useMemo<ColumnDef<MemberEntity>[]>(
() => [
columnHelper.accessor(
(row) => {
Expand Down Expand Up @@ -149,6 +150,7 @@ export const NetworkMembersTable = ({ nwid, central = false }: IProp) => {
{
nwid,
memberId: original.id,
central,
updateParams: { authorized: event.target.checked },
},
{ onSuccess: () => void refetchNetworkById() }
Expand Down Expand Up @@ -179,15 +181,26 @@ export const NetworkMembersTable = ({ nwid, central = false }: IProp) => {
columnHelper.accessor("creationTime", {
header: () => <span>{t("networkMembersTable.column.created")}</span>,
id: "creationTime",
cell: (info) => <TimeAgo date={info.getValue() as number} />,
cell: (info) => <TimeAgo date={info.getValue()} />,
}),
columnHelper.accessor("peers", {
header: () => (
<span>{t("networkMembersTable.column.physicalIp.header")}</span>
),
id: "physicalAddress",
cell: (info) => {
const val = info.getValue();
cell: ({ getValue, row: { original } }) => {
if (central) {
const val = original;
if (!val || typeof val.physicalAddress !== "string")
return (
<span className="text-gray-400/50">
{t("networkMembersTable.column.physicalIp.unknownValue")}
</span>
);

return val.physicalAddress.split("/")[0];
}
const val = getValue();
if (!val || typeof val.physicalAddress !== "string")
return (
<span className="text-gray-400/50">
Expand All @@ -207,7 +220,37 @@ export const NetworkMembersTable = ({ nwid, central = false }: IProp) => {
const formatTime = (value: string, unit: string) =>
`${value} ${unit}`;
const cursorStyle = { cursor: "pointer" };
if (central) {
const now = Date.now(); // current timestamp in milliseconds
const lastSeen = original?.lastSeen; // assuming lastSeen is a timestamp in milliseconds
const fiveMinutesAgo = now - 5 * 60 * 1000; // timestamp 5 minutes ago

// Check if lastSeen is within the last 5 minutes
if (lastSeen >= fiveMinutesAgo) {
// The user is considered online
return (
<span
style={cursorStyle}
className="text-success" // Change the className to whatever you use for positive/online statuses
title="User is online"
>
ONLINE
</span>
);
} else {
// The user is considered offline
return (
<span
style={cursorStyle}
className="text-error"
title="User is offline"
>
{t("networkMembersTable.column.conStatus.offline")}
<TimeAgo date={lastSeen} formatter={formatTime} />
</span>
);
}
}
if (original.conStatus === ConnectionStatus.Relayed) {
return (
<span
Expand All @@ -229,7 +272,7 @@ export const NetworkMembersTable = ({ nwid, central = false }: IProp) => {
? t("networkMembersTable.column.conStatus.directLan")
: t("networkMembersTable.column.conStatus.directWan");
const versionInfo =
original.peers && original.peers?.version !== "-1.-1.-1"
original.peers && original?.peers?.version !== "-1.-1.-1"
? ` (v${original.peers?.version})`
: "";

Expand All @@ -253,10 +296,7 @@ export const NetworkMembersTable = ({ nwid, central = false }: IProp) => {
title="User is offline"
>
{t("networkMembersTable.column.conStatus.offline")}
<TimeAgo
date={original?.lastSeen as number}
formatter={formatTime}
/>
<TimeAgo date={original?.lastSeen} formatter={formatTime} />
</span>
);
},
Expand Down Expand Up @@ -285,6 +325,7 @@ export const NetworkMembersTable = ({ nwid, central = false }: IProp) => {
<MemberOptionsModal
nwid={original.nwid}
memberId={original.id}
central={central}
/>
),
})
Expand All @@ -310,7 +351,7 @@ export const NetworkMembersTable = ({ nwid, central = false }: IProp) => {
);

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const defaultColumn: Partial<ColumnDef<MembersEntity>> = {
const defaultColumn: Partial<ColumnDef<MemberEntity>> = {
cell: ({ getValue, row: { index, original }, column: { id }, table }) => {
const initialValue = getValue();
// eslint-disable-next-line react-hooks/rules-of-hooks
Expand All @@ -331,6 +372,7 @@ export const NetworkMembersTable = ({ nwid, central = false }: IProp) => {
{
nwid,
id: original.id,
central,
updateParams: {
name: value as string,
},
Expand Down Expand Up @@ -478,8 +520,11 @@ export const NetworkMembersTable = ({ nwid, central = false }: IProp) => {
// const [data, setData] = useState(() => makeNetworkMemberData(100));
const [autoResetPageIndex, skipAutoResetPageIndex] = useSkipper();
const table = useReactTable({
// @ts-expect-error known error
data,
// @ts-expect-error known error
columns,
// @ts-expect-error known error
defaultColumn,
onSortingChange: setSorting,
getCoreRowModel: getCoreRowModel(),
Expand All @@ -499,7 +544,6 @@ export const NetworkMembersTable = ({ nwid, central = false }: IProp) => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-return
old.map((row, index) => {
if (index === rowIndex) {
// eslint-disable-next-line @typescript-eslint/no-unsafe-return
return {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
...old[rowIndex]!,
Expand Down
6 changes: 1 addition & 5 deletions src/pages/central/[id].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,11 +173,7 @@ const CentralNetworkById = () => {
<div className="w-5/5 mx-auto w-full px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
{members?.length ? (
<div className="membersTable-wrapper">
<NetworkMembersTable
nwid={network.id}
central
// setEditing={(e: boolean) => setEditing(e)}
/>
<NetworkMembersTable nwid={network.id} central={true} />
</div>
) : (
<div className="alert alert-warning flex justify-center shadow-lg">
Expand Down
5 changes: 1 addition & 4 deletions src/pages/network/[id].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,10 +216,7 @@ const NetworkById = () => {
<div className="w-5/5 mx-auto w-full px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
{members.length ? (
<div className="membersTable-wrapper">
<NetworkMembersTable
nwid={network.nwid}
// setEditing={(e: boolean) => setEditing(e)}
/>
<NetworkMembersTable nwid={network.nwid} central={false} />
</div>
) : (
<div className="alert alert-warning flex justify-center shadow-lg">
Expand Down
Loading

0 comments on commit 10b5367

Please sign in to comment.