Add region and public ip to peer table and detailed peer view (#340)

* Fix group badge icon size

* Fix copy icon size

* Add region information to peer table and single peer view

* Push to docker

* Change login expired icon size

* Fix country flag in single peer view

* Change country flag size in peer table

* Disable revalidation for countries

* Fix icon size on peer detail view

* Rollback workflow

* Revert login expiration

---------

Co-authored-by: Maycon Santos <[email protected]>

Author: heisbrot

src/app/(dashboard)/peer/page.tsx

@@ -26,23 +26,28 @@ import TextWithTooltip from "@components/ui/TextWithTooltip";
 import { IconCloudLock, IconInfoCircle } from "@tabler/icons-react";
 import useFetchApi from "@utils/api";
 import dayjs from "dayjs";
-import { trim } from "lodash";
+import { isEmpty, trim } from "lodash";
 import {
   Cpu,
+  FlagIcon,
   Globe,
   History,
   MapPin,
   MonitorSmartphoneIcon,
+  NetworkIcon,
   PencilIcon,
   TerminalSquare,
 } from "lucide-react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { toASCII } from "punycode";
 import React, { useMemo, useState } from "react";
+import Skeleton from "react-loading-skeleton";
 import { useSWRConfig } from "swr";
+import RoundedFlag from "@/assets/countries/RoundedFlag";
 import CircleIcon from "@/assets/icons/CircleIcon";
 import NetBirdIcon from "@/assets/icons/NetBirdIcon";
 import PeerIcon from "@/assets/icons/PeerIcon";
+import { useCountries } from "@/contexts/CountryProvider";
 import PeerProvider, { usePeer } from "@/contexts/PeerProvider";
 import RoutesProvider from "@/contexts/RoutesProvider";
 import { useHasChanges } from "@/hooks/useHasChanges";
@@ -139,7 +144,7 @@ function PeerOverview() {
                   <CircleIcon
                     active={peer.connected}
                     size={12}
-                    className={"mb-[3px]"}
+                    className={"mb-[3px] shrink-0"}
                   />
                   <TextWithTooltip text={name} maxChars={30} />
 
@@ -291,6 +296,12 @@ function PeerOverview() {
 }
 
 function PeerInformationCard({ peer }: { peer: Peer }) {
+  const { isLoading, getRegionByPeer } = useCountries();
+
+  const countryText = useMemo(() => {
+    return getRegionByPeer(peer);
+  }, [getRegionByPeer, peer]);
+
   return (
     <Card>
       <Card.List>
@@ -304,6 +315,44 @@ function PeerInformationCard({ peer }: { peer: Peer }) {
           value={peer.ip}
         />
 
+        <Card.ListItem
+          label={
+            <>
+              <NetworkIcon size={16} />
+              Public IP-Address
+            </>
+          }
+          value={peer.connection_ip}
+        />
+
+        <Card.ListItem
+          label={
+            <>
+              <FlagIcon size={16} />
+              Region
+            </>
+          }
+          tooltip={false}
+          value={
+            isEmpty(peer.country_code) ? (
+              "Unknown"
+            ) : (
+              <>
+                {isLoading ? (
+                  <Skeleton width={140} />
+                ) : (
+                  <div className={"flex gap-2 items-center"}>
+                    <div className={"border-0 border-nb-gray-800 rounded-full"}>
+                      <RoundedFlag country={peer.country_code} size={12} />
+                    </div>
+                    {countryText}
+                  </div>
+                )}
+              </>
+            )
+          }
+        />
+
         <Card.ListItem
           label={
             <>
@@ -347,6 +396,7 @@ function PeerInformationCard({ peer }: { peer: Peer }) {
                 ")"
           }
         />
+
         <Card.ListItem
           label={
             <>

src/components/Card.tsx

@@ -30,13 +30,15 @@ type CardListItemProps = {
   value: React.ReactNode;
   className?: string;
   copy?: boolean;
+  tooltip?: boolean;
 };
 
 function CardListItem({
   label,
   value,
   className,
   copy = false,
+  tooltip = true,
 }: CardListItemProps) {
   const [, copyToClipBoard] = useCopyToClipboard(value as string);
 
@@ -57,7 +59,11 @@ function CardListItem({
           copy && copyToClipBoard(`${label} has been copied to clipboard.`)
         }
       >
-        <TextWithTooltip text={value as string} maxChars={40} />
+        {tooltip ? (
+          <TextWithTooltip text={value as string} maxChars={40} />
+        ) : (
+          value
+        )}
         {copy && <Copy size={13} />}
       </div>
     </li>

src/components/CopyToClipboardText.tsx

@@ -28,12 +28,16 @@ export default function CopyToClipboardText({ children, message }: Props) {
 
       {copied ? (
         <CheckIcon
-          className={"text-nb-gray-100 opacity-0 group-hover:opacity-100"}
+          className={
+            "text-nb-gray-100 opacity-0 group-hover:opacity-100 shrink-0"
+          }
           size={12}
         />
       ) : (
         <CopyIcon
-          className={"text-nb-gray-100 opacity-0 group-hover:opacity-100"}
+          className={
+            "text-nb-gray-100 opacity-0 group-hover:opacity-100 shrink-0"
+          }
           size={12}
         />
       )}

src/components/FullTooltip.tsx

@@ -50,6 +50,7 @@ export default function FullTooltip({
                 className={cn(
                   isAction ? "cursor-pointer" : "cursor-default",
                   "inline-flex  items-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-neutral-100 transition-all hover:bg-nb-gray-800/60 py-2 px-3 rounded-md",
+                  className,
                 )}
               >
                 {children}

src/components/ui/CountrySelector.tsx

@@ -2,19 +2,16 @@ import {
   SelectDropdown,
   SelectOption,
 } from "@components/select/SelectDropdown";
-import useFetchApi from "@utils/api";
 import { createElement, useMemo } from "react";
 import RoundedFlag from "@/assets/countries/RoundedFlag";
-import { Country } from "@/interfaces/Country";
+import { useCountries } from "@/contexts/CountryProvider";
 
 type Props = {
   value: string;
   onChange: (value: string) => void;
 };
 export const CountrySelector = ({ value, onChange }: Props) => {
-  const { data: countries, isLoading } = useFetchApi<Country[]>(
-    "/locations/countries",
-  );
+  const { countries, isLoading } = useCountries();
 
   const countryList = useMemo(() => {
     return countries?.map((country) => {

src/components/ui/GroupBadge.tsx

@@ -27,7 +27,7 @@ export default function GroupBadge({
       className={cn("transition-all group whitespace-nowrap", className)}
       onClick={onClick}
     >
-      <FolderGit2 size={12} />
+      <FolderGit2 size={12} className={"shrink-0"} />
       <TextWithTooltip text={group.name} maxChars={20} />
       {children}
       {showX && (

src/components/ui/LoginExpiredBadge.tsx

@@ -10,7 +10,7 @@ export default function LoginExpiredBadge({ loginExpired }: Props) {
     <Tooltip delayDuration={1}>
       <TooltipTrigger>
         <Badge variant={"red"} className={"px-3"}>
-          <AlertTriangle size={14} className={"mr-1"} />
+          <AlertTriangle size={13} className={"mr-1"} />
           Login required
         </Badge>
       </TooltipTrigger>

src/components/ui/TextWithTooltip.tsx

@@ -24,11 +24,12 @@ export default function TextWithTooltip({
     <FullTooltip
       disabled={charCount <= maxChars || hideTooltip}
       interactive={false}
+      className={"truncate w-full"}
       content={
         <div className={"max-w-xs break-all whitespace-normal"}>{text}</div>
       }
     >
-      <span className={cn(className)}>
+      <span className={cn(className, "truncate")}>
         {charCount > maxChars ? text && `${text.slice(0, maxChars)}...` : text}
       </span>
     </FullTooltip>

src/contexts/CountryProvider.tsx

@@ -0,0 +1,47 @@
+import useFetchApi from "@utils/api";
+import React, { useCallback } from "react";
+import { Country } from "@/interfaces/Country";
+import { Peer } from "@/interfaces/Peer";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+const CountryContext = React.createContext(
+  {} as {
+    countries: Country[] | undefined;
+    isLoading: boolean;
+    getRegionByPeer: (peer: Peer) => string;
+  },
+);
+
+export default function CountryProvider({ children }: Props) {
+  const { data: countries, isLoading } = useFetchApi<Country[]>(
+    "/locations/countries",
+    false,
+    false,
+  );
+
+  const getRegionByPeer = useCallback(
+    (peer: Peer) => {
+      if (!countries) return "Unknown";
+      const country = countries.find(
+        (c) => c.country_code === peer.country_code,
+      );
+      if (!country) return "Unknown";
+      if (!peer.city_name) return country.country_name;
+      return `${country.country_name}, ${peer.city_name}`;
+    },
+    [countries],
+  );
+
+  return (
+    <CountryContext.Provider value={{ countries, isLoading, getRegionByPeer }}>
+      {children}
+    </CountryContext.Provider>
+  );
+}
+
+export const useCountries = () => {
+  return React.useContext(CountryContext);
+};

src/interfaces/Peer.ts

@@ -20,4 +20,7 @@ export interface Peer {
   login_expired: boolean;
   login_expiration_enabled: boolean;
   approval_required: boolean;
+  city_name: string;
+  country_code: string;
+  connection_ip: string;
 }