mirrors/netbird-dashboard
1
0
Fork 0
mirror of https://github.com/netbirdio/dashboard.git synced 2026-01-26 01:21:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update site fonts (#209)

Browse Source
This commit is contained in:
Sarooj bukhari
2023-06-18 18:03:40 +05:00
committed by GitHub
parent 312c60dd45
commit fcc51243e0
7 changed files with 759 additions and 560 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/PeerUpdate.tsx
View File

@@ -20,8 +20,10 @@ import {
Switch,
Breadcrumb,
Table,
Badge,
SelectProps,
Modal,
Tooltip,
} from "antd";
import { Container } from "./Container";
import { Header } from "antd/es/layout/layout";
@@ -78,7 +80,7 @@ const PeerUpdate = () => {
const [peerGroups, setPeerGroups] = useState([] as GroupPeer[]);
const inputNameRef = useRef<any>(null);
const [editName, setEditName] = useState(false);
const options: SelectProps["options"] = [];
const options: SelectProps["options"] = [];
const [estimatedName, setEstimatedName] = useState("");
const [callingPeerAPI, setCallingPeerAPI] = useState(false);
const [callingGroupAPI, setCallingGroupAPI] = useState(false);
@@ -150,7 +152,7 @@ const PeerUpdate = () => {
(route) => route.peer !== peer.id
);
setNotPeerRoutes(filterNotPeerRoutes);
}, [routes]);
}, [routes]);
useEffect(() => {
if (!peer) return;
@@ -594,7 +596,10 @@ const PeerUpdate = () => {
fontWeight: "400",
}}
>
{formPeer.userEmail}{" "}
<div style={{ marginBottom: "2px" }}>
{" "}
{formPeer.userEmail}{" "}
</div>
</Paragraph>
</div>
) : (
@@ -653,9 +658,26 @@ const PeerUpdate = () => {
>
NetBird IP
</span>
<Tag color={formPeer.connected ? "green" : "red"}>
{formPeer.connected ? "online" : "offline"}
</Tag>
{formPeer.connected ? (
<Badge
status="success"
style={{
marginTop: "1px",
marginRight: "5px",
marginLeft: "0px",
}}
></Badge>
) : (
<Badge
status="error"
style={{
marginTop: "1px",
marginRight: "5px",
marginLeft: "0px",
}}
></Badge>
)}
</>
}
>

9
src/index.css
View File

@@ -1,11 +1,11 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arimo:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;500&display=swap');
@import 'antd/dist/reset.css';
html,
body,
* {
font-family: 'Roboto', sans-serif !important;
font-family: 'Arimo', sans-serif !important;
}
body {
@@ -267,3 +267,8 @@ td.non-highlighted-table-column {
.react-select__indicator {
padding: 0 5px !important;
}
.ant-badge-status-dot {
width: 8px!important;
height: 8px!important;
}

17
src/views/AccessControl.tsx
View File

@@ -541,7 +541,6 @@ export const AccessControl = () => {
})
);
};
return (
<>
{!setupEditPolicyVisible && (
@@ -550,10 +549,18 @@ export const AccessControl = () => {
<Row>
<Col span={24}>
<Title className="page-heading">Access Control</Title>
<Paragraph type="secondary">
Access rules help you manage access permissions in your
organisation.
</Paragraph>
{policies.length ? (
<Paragraph>
Access rules help you manage access permissions in your
organisation.
</Paragraph>
) : (
<Paragraph type={"secondary"}>
Access rules help you manage access permissions in your
organisation.
</Paragraph>
)}
<Space
direction="vertical"
size="large"

1036
src/views/Nameservers.tsx
View File

File diff suppressed because it is too large Load Diff

158
src/views/Peers.tsx
View File

@@ -13,6 +13,7 @@ import {
} from "@ant-design/icons";
import {
Alert,
Badge,
Button,
Card,
Col,
@@ -92,26 +93,6 @@ export const Peers = () => {
{ label: "All", value: "all" },
];
const itemsMenuAction = [
{
key: "view",
label: (
<Button type="text" block onClick={() => onClickViewPeer()}>
View
</Button>
),
},
{
key: "delete",
label: (
<Button type="text" onClick={() => showConfirmDelete()}>
Delete
</Button>
),
},
];
const actionsMenu = <Menu items={itemsMenuAction}></Menu>;
const transformDataTable = (d: Peer[]): PeerDataTable[] => {
return d.map((p) => {
const gs = groups
@@ -132,13 +113,13 @@ export const Peers = () => {
};
useEffect(() => {
if(users) {
let currentUser = users.find((user) => user.is_current)
if(currentUser) {
if (users) {
let currentUser = users.find((user) => user.is_current);
if (currentUser) {
setIsAdmin(currentUser.role === "admin");
}
}
}, [users])
}, [users]);
const refresh = () => {
dispatch(
@@ -339,10 +320,11 @@ export const Peers = () => {
setOptionOnOff(value);
};
const showConfirmDelete = () => {
const showConfirmDelete = (record: PeerDataTable) => {
setPeerToAction(record);
let peerRoutes: string[] = [];
routes.forEach((r) => {
if (r.peer == peerToAction?.id) {
if (r.peer == record?.id) {
peerRoutes.push(r.network_id);
}
});
@@ -397,7 +379,7 @@ export const Peers = () => {
</div>
);
}
let name = peerToAction ? peerToAction.name : "";
let name = record ? record.name : "";
confirmModal.confirm({
icon: <ExclamationCircleOutlined />,
title: <span className="font-500">Delete peer {name}</span>,
@@ -407,7 +389,7 @@ export const Peers = () => {
dispatch(
peerActions.deletedPeer.request({
getAccessTokenSilently: getTokenSilently,
payload: peerToAction && peerToAction.id ? peerToAction.id! : "",
payload: record && record.id ? record.id! : "",
})
);
},
@@ -581,6 +563,26 @@ export const Peers = () => {
};
const renderName = (peer: PeerDataTable) => {
let status = (
<Badge
size={"small"}
status={peer.connected ? "success" : "error"}
style={{
margin: "0",
minWidth: "max-content",
}}
text={peer.name}
></Badge>
);
let loginExpire = peer.login_expired ? (
<Tooltip title="The peer is offline and needs to be re-authenticated because its login has expired ">
<Tag color="orange">needs login</Tag>
</Tooltip>
) : (
""
);
const userEmail = users?.find((u) => u.id === peer.user_id)?.email;
let expiry = !peer.login_expiration_enabled ? (
<div>
@@ -593,17 +595,20 @@ export const Peers = () => {
) : null;
if (!userEmail) {
return (
<Button
type="text"
style={{ height: "auto", whiteSpace: "normal", textAlign: "left" }}
onClick={() => setUpdateGroupsVisible(peer, true)}
>
<span style={{ textAlign: "left" }}>
<Row>
<Text className="font-500">{peer.name}</Text>
</Row>
</span>
</Button>
<>
<Button
type="text"
style={{ height: "auto", whiteSpace: "normal", textAlign: "left" }}
onClick={() => setUpdateGroupsVisible(peer, true)}
>
<span style={{ textAlign: "left" }}>
<Row>
<Text className="font-500"> {status}</Text>
</Row>
<Row>{loginExpire}</Row>
</span>
</Button>
</>
);
}
return (
@@ -615,12 +620,14 @@ export const Peers = () => {
>
<span style={{ textAlign: "left" }}>
<Row>
<Text className="font-500">{peer.name}</Text>
<Text className="font-500"> {status}</Text>
</Row>
<Row>
<Text type="secondary">{userEmail}</Text>
</Row>
<Row>{expiry}</Row>
<Row style={{ minWidth: "195px" }}>
{expiry} {loginExpire}
</Row>
</span>
</Button>
</div>
@@ -635,10 +642,17 @@ export const Peers = () => {
<Row>
<Col span={24}>
<Title className="page-heading">Peers</Title>
<Paragraph type={"secondary"}>
A list of all the machines in your account including their
name, IP and status.
</Paragraph>
{peers.length ? (
<Paragraph>
A list of all the machines in your account including their
name, IP and status.
</Paragraph>
) : (
<Paragraph type={"secondary"}>
A list of all the machines in your account including their
name, IP and status.
</Paragraph>
)}
<Space
direction="vertical"
@@ -763,28 +777,6 @@ export const Peers = () => {
return renderAddress(record);
}}
/>
<Column
title="Status"
dataIndex="connected"
align="center"
render={(text, record: PeerDataTable, index) => {
let status = text ? (
<Tag color="green">online</Tag>
) : (
<Tag color="red">offline</Tag>
);
if (record.login_expired) {
return (
<Tooltip title="The peer is offline and needs to be re-authenticated because its login has expired ">
<Tag color="orange">needs login</Tag>
</Tooltip>
);
}
return status;
}}
/>
<Column
title="Groups"
dataIndex="groupsCount"
@@ -853,26 +845,32 @@ export const Peers = () => {
return formatOS(text);
}}
/>
<Column title="Version" dataIndex="version" />
<Column
title="Version"
dataIndex="version"
render={(text, record, index) => {
if (text === "development") {
return "dev";
}
return text;
}}
/>
<Column
title=""
align="center"
render={(text, record, index) => {
return (
<Dropdown
trigger={["click"]}
overlay={actionsMenu}
onOpenChange={(visible) => {
if (visible)
setPeerToAction(record as PeerDataTable);
<Button
type="text"
style={{
color: "rgba(210, 64, 64, 0.85)",
}}
onClick={() =>
showConfirmDelete(record as PeerDataTable)
}
>
<Button type="text">
<Space>
<EllipsisOutlined />
</Space>
</Button>
</Dropdown>
Delete
</Button>
);
}}
/>

17
src/views/Routes.tsx
View File

@@ -574,10 +574,19 @@ export const Routes = () => {
<Row>
<Col span={24}>
<Title className="page-heading">Network Routes</Title>
<Paragraph type="secondary">
Network routes allow you to create routes to access other networks
without installing NetBird on every resource.
</Paragraph>
{routes.length ? (
<Paragraph>
Network routes allow you to create routes to access other
networks without installing NetBird on every resource.
</Paragraph>
) : (
<Paragraph type={"secondary"}>
Network routes allow you to create routes to access other
networks without installing NetBird on every resource.
</Paragraph>
)}
<Space
direction="vertical"
size="large"

48
src/views/SetupKeys.tsx
View File

@@ -16,6 +16,7 @@ import {
RadioChangeEvent,
Row,
Select,
Badge,
Space,
Table,
Tag,
@@ -385,10 +386,17 @@ export const SetupKeys = () => {
<Row>
<Col span={24}>
<Title className="page-heading">Setup Keys</Title>
<Paragraph type="secondary">
A list of all the setup keys in your account including their
name, state, type and expiration.
</Paragraph>
{setupKeys.length ? (
<Paragraph>
A list of all the setup keys in your account including their
name, state, type and expiration.
</Paragraph>
) : (
<Paragraph type={"secondary"}>
A list of all the setup keys in your account including their
name, state, type and expiration.
</Paragraph>
)}
<Space
direction="vertical"
size="large"
@@ -555,7 +563,7 @@ export const SetupKeys = () => {
sorter={(a, b) =>
(a as any).name.localeCompare((b as any).name)
}
render={(text, record, index) => {
render={(text, record: any, index) => {
return (
<Button
type="text"
@@ -565,7 +573,21 @@ export const SetupKeys = () => {
className="tooltip-label"
>
{" "}
<Text className="font-500">{text}</Text>
<Text className="font-500">
<Badge
size={"small"}
status={
record.state === "valid"
? "success"
: "error"
}
style={{
margin: "0",
minWidth: "max-content",
}}
text={text}
></Badge>
</Text>
</Button>
);
}}
@@ -630,20 +652,6 @@ export const SetupKeys = () => {
return formatDate(text);
}}
/>
<Column
title="State"
dataIndex="state"
render={(text, record, index) => {
return text === "valid" ? (
<Tag color="green">{text}</Tag>
) : (
<Tag color="red">{text}</Tag>
);
}}
sorter={(a, b) =>
(a as any).state.localeCompare((b as any).state)
}
/>
<Column
title=""
align="center"