mirror of
https://github.com/fosrl/pangolin.git
synced 2025-08-09 20:35:28 +02:00
Resolve ui quirks, add link
This commit is contained in:
Owen Schwartz
parent
161e87dbda
commit
3f55103542
3 changed files with 88 additions and 61 deletions
|
|
@ -200,8 +200,14 @@ export default function CreateSiteForm({
|
||||||
name: data.name,
|
name: data.name,
|
||||||
id: data.siteId,
|
id: data.siteId,
|
||||||
nice: data.niceId.toString(),
|
nice: data.niceId.toString(),
|
||||||
mbIn: data.type == "wireguard" || data.type == "newt" ? "0 MB" : "--",
|
mbIn:
|
||||||
mbOut: data.type == "wireguard" || data.type == "newt" ? "0 MB" : "--",
|
data.type == "wireguard" || data.type == "newt"
|
||||||
|
? "0 MB"
|
||||||
|
: "--",
|
||||||
|
mbOut:
|
||||||
|
data.type == "wireguard" || data.type == "newt"
|
||||||
|
? "0 MB"
|
||||||
|
: "--",
|
||||||
orgId: orgId as string,
|
orgId: orgId as string,
|
||||||
type: data.type as any,
|
type: data.type as any,
|
||||||
online: false
|
online: false
|
||||||
|
|
@ -331,31 +337,33 @@ PersistentKeepalive = 5`
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{form.watch("method") === "newt" && (
|
{form.watch("method") === "newt" && (
|
||||||
<>
|
<Link
|
||||||
<br />
|
className="text-sm text-primary flex items-center gap-1"
|
||||||
<Link
|
href="https://docs.fossorial.io/Newt/install"
|
||||||
className="text-sm text-primary flex items-center gap-1"
|
target="_blank"
|
||||||
href="https://docs.fossorial.io/Newt/install"
|
rel="noopener noreferrer"
|
||||||
target="_blank"
|
>
|
||||||
rel="noopener noreferrer"
|
<span>
|
||||||
>
|
{" "}
|
||||||
<span>
|
Learn how to install Newt on your system
|
||||||
{" "}
|
</span>
|
||||||
Learn how to install Newt on your system
|
<SquareArrowOutUpRight size={14} />
|
||||||
</span>
|
</Link>
|
||||||
<SquareArrowOutUpRight size={14} />
|
|
||||||
</Link>
|
|
||||||
</>
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{form.watch("method") === "local" && (
|
{form.watch("method") === "local" && (
|
||||||
<>
|
<Link
|
||||||
<br />
|
className="text-sm text-primary flex items-center gap-1"
|
||||||
<p>
|
href="https://docs.fossorial.io/Pangolin/without-tunneling"
|
||||||
Data will leave Traefik and go wherever you
|
target="_blank"
|
||||||
want; no tunneling involved.
|
rel="noopener noreferrer"
|
||||||
</p>
|
>
|
||||||
</>
|
<span>
|
||||||
|
{" "}
|
||||||
|
Local sites do not tunnel, learn more
|
||||||
|
</span>
|
||||||
|
<SquareArrowOutUpRight size={14} />
|
||||||
|
</Link>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{(form.watch("method") === "newt" ||
|
{(form.watch("method") === "newt" ||
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,7 @@ import { useState } from "react";
|
||||||
import CreateSiteForm from "./CreateSiteForm";
|
import CreateSiteForm from "./CreateSiteForm";
|
||||||
import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
|
import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
|
||||||
import { useToast } from "@app/hooks/useToast";
|
import { useToast } from "@app/hooks/useToast";
|
||||||
import { formatAxiosError } from "@app/lib/api";;
|
import { formatAxiosError } from "@app/lib/api";
|
||||||
import { createApiClient } from "@app/lib/api";
|
import { createApiClient } from "@app/lib/api";
|
||||||
import { useEnvContext } from "@app/hooks/useEnvContext";
|
import { useEnvContext } from "@app/hooks/useEnvContext";
|
||||||
import CreateSiteFormModal from "./CreateSiteModal";
|
import CreateSiteFormModal from "./CreateSiteModal";
|
||||||
|
|
@ -146,21 +146,27 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
|
||||||
},
|
},
|
||||||
cell: ({ row }) => {
|
cell: ({ row }) => {
|
||||||
const originalRow = row.original;
|
const originalRow = row.original;
|
||||||
|
if (
|
||||||
if (originalRow.online) {
|
originalRow.type == "newt" ||
|
||||||
return (
|
originalRow.type == "wireguard"
|
||||||
<span className="text-green-500 flex items-center space-x-2">
|
) {
|
||||||
<div className="w-2 h-2 bg-green-500 rounded-full"></div>
|
if (originalRow.online) {
|
||||||
<span>Online</span>
|
return (
|
||||||
</span>
|
<span className="text-green-500 flex items-center space-x-2">
|
||||||
);
|
<div className="w-2 h-2 bg-green-500 rounded-full"></div>
|
||||||
|
<span>Online</span>
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
<span className="text-neutral-500 flex items-center space-x-2">
|
||||||
|
<div className="w-2 h-2 bg-gray-500 rounded-full"></div>
|
||||||
|
<span>Offline</span>
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
return (
|
return <span>--</span>;
|
||||||
<span className="text-neutral-500 flex items-center space-x-2">
|
|
||||||
<div className="w-2 h-2 bg-gray-500 rounded-full"></div>
|
|
||||||
<span>Offline</span>
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -16,37 +16,50 @@ type SiteInfoCardProps = {};
|
||||||
export default function SiteInfoCard({}: SiteInfoCardProps) {
|
export default function SiteInfoCard({}: SiteInfoCardProps) {
|
||||||
const { site, updateSite } = useSiteContext();
|
const { site, updateSite } = useSiteContext();
|
||||||
|
|
||||||
|
const getConnectionTypeString = (type: string) => {
|
||||||
|
if (type === "newt") {
|
||||||
|
return "Newt";
|
||||||
|
} else if (type === "wireguard") {
|
||||||
|
return "WireGuard";
|
||||||
|
} else if (type === "local") {
|
||||||
|
return "Local";
|
||||||
|
} else {
|
||||||
|
return "Unknown";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Alert>
|
<Alert>
|
||||||
<InfoIcon className="h-4 w-4" />
|
<InfoIcon className="h-4 w-4" />
|
||||||
<AlertTitle className="font-semibold">Site Information</AlertTitle>
|
<AlertTitle className="font-semibold">Site Information</AlertTitle>
|
||||||
<AlertDescription className="mt-4">
|
<AlertDescription className="mt-4">
|
||||||
<InfoSections>
|
<InfoSections>
|
||||||
<InfoSection>
|
{(site.type == "newt" || site.type == "wireguard") && (
|
||||||
<InfoSectionTitle>Status</InfoSectionTitle>
|
<>
|
||||||
<InfoSectionContent>
|
<InfoSection>
|
||||||
{site.online ? (
|
<InfoSectionTitle>Status</InfoSectionTitle>
|
||||||
<div className="text-green-500 flex items-center space-x-2">
|
<InfoSectionContent>
|
||||||
<div className="w-2 h-2 bg-green-500 rounded-full"></div>
|
{site.online ? (
|
||||||
<span>Online</span>
|
<div className="text-green-500 flex items-center space-x-2">
|
||||||
</div>
|
<div className="w-2 h-2 bg-green-500 rounded-full"></div>
|
||||||
) : (
|
<span>Online</span>
|
||||||
<div className="text-neutral-500 flex items-center space-x-2">
|
</div>
|
||||||
<div className="w-2 h-2 bg-gray-500 rounded-full"></div>
|
) : (
|
||||||
<span>Offline</span>
|
<div className="text-neutral-500 flex items-center space-x-2">
|
||||||
</div>
|
<div className="w-2 h-2 bg-gray-500 rounded-full"></div>
|
||||||
)}
|
<span>Offline</span>
|
||||||
</InfoSectionContent>
|
</div>
|
||||||
</InfoSection>
|
)}
|
||||||
<Separator orientation="vertical" />
|
</InfoSectionContent>
|
||||||
|
</InfoSection>
|
||||||
|
|
||||||
|
<Separator orientation="vertical" />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
<InfoSection>
|
<InfoSection>
|
||||||
<InfoSectionTitle>Connection Type</InfoSectionTitle>
|
<InfoSectionTitle>Connection Type</InfoSectionTitle>
|
||||||
<InfoSectionContent>
|
<InfoSectionContent>
|
||||||
{site.type === "newt"
|
{getConnectionTypeString(site.type)}
|
||||||
? "Newt"
|
|
||||||
: site.type === "wireguard"
|
|
||||||
? "WireGuard"
|
|
||||||
: "Unknown"}
|
|
||||||
</InfoSectionContent>
|
</InfoSectionContent>
|
||||||
</InfoSection>
|
</InfoSection>
|
||||||
</InfoSections>
|
</InfoSections>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue