Skip to content

Commit

Permalink
Merge branch 'develop' into imad/net-1730-v-26-hide-acl-in-ce
Browse files Browse the repository at this point in the history
  • Loading branch information
@imadtassaoui
imadtassaoui authored Nov 4, 2024
2 parents 80ba60a + 369c835 commit d7bc232
Show file tree
Hide file tree
Showing 10 changed files with 69 additions and 66 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,7 @@ fabric.properties
!.vscode/launch.json
!.vscode/extensions.json
!.vscode/*.code-snippets
.vscode/settings.json

# Local History for Visual Studio Code
.history/
Expand Down
28 changes: 12 additions & 16 deletions src/components/modals/add-network-modal/AddNetworkModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,11 @@ export default function AddNetworkModal({
</Tooltip>
</Col>
<Col>
{isIpv4Val && (
<span title="Generate a random address range" onClick={() => autoFillDetails('ipv4')}>
<ShuffleIcon color={themeToken.colorTextSecondary} size="1rem" className="inline mr-2" />
</span>
)}
<Form.Item name="isipv4" noStyle valuePropName="checked" data-nmui-intercom="add-network-form_isipv4">
<Switch />
</Form.Item>
Expand Down Expand Up @@ -218,14 +223,7 @@ export default function AddNetworkModal({
},
]}
>
<Input
placeholder="Enter address CIDR (eg: 100.64.1.0/24)"
suffix={
<span title="Generate a random address range" onClick={() => autoFillDetails('ipv4')}>
<ShuffleIcon color={themeToken.colorTextSecondary} opacity={0.8} size="1rem" />
</span>
}
/>
<Input placeholder="Enter address CIDR (eg: 100.64.1.0/24)" />
</Form.Item>
</Col>
</Row>
Expand All @@ -252,6 +250,11 @@ export default function AddNetworkModal({
</Tooltip>
</Col>
<Col>
{isIpv6Val && (
<span title="Generate a random address range" onClick={() => autoFillDetails('ipv6')}>
<ShuffleIcon color={themeToken.colorTextSecondary} size="1rem" className="inline mr-2" />
</span>
)}
<Form.Item name="isipv6" noStyle valuePropName="checked" data-nmui-intercom="add-network-form_isipv6">
<Switch />
</Form.Item>
Expand Down Expand Up @@ -288,14 +291,7 @@ export default function AddNetworkModal({
},
]}
>
<Input
placeholder="Enter address CIDR (eg: fd3c:49b3:973f:ee87::/64)"
suffix={
<span title="Generate a random address range" onClick={() => autoFillDetails('ipv6')}>
<ShuffleIcon color={themeToken.colorTextSecondary} opacity={0.8} size="1rem" />
</span>
}
/>
<Input placeholder="Enter address CIDR (eg: fd3c:49b3:973f:ee87::/64)" />
</Form.Item>
</Col>
</Row>
Expand Down
14 changes: 9 additions & 5 deletions src/components/modals/add-tag-modal/AddTagModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,11 +152,15 @@ export default function AddTagModal({ isOpen, nodes, networkId, onCancel, onCrea
Grouped Devices
</FormLabel>
<MultiSelect
options={nodes.map((node) => ({
label: (node.is_static ? node.static_node.clientid : node.name) || '',
value: deduceNodeId(node),
icon: node.is_static ? FileIcon : ServerIcon,
}))}
options={nodes
.toSorted((a, b) =>
(a?.name || a.static_node.clientid).localeCompare(b?.name || b.static_node.clientid),
)
.map((node) => ({
label: (node.is_static ? node.static_node.clientid : node.name) || '',
value: deduceNodeId(node),
icon: node.is_static ? FileIcon : ServerIcon,
}))}
onValueChange={(vals) => {
setSelectedNodes(
vals.map(
Expand Down
14 changes: 9 additions & 5 deletions src/components/modals/update-tag-modal/UpdateTagModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,11 +155,15 @@ export default function UpdateTagModal({ isOpen, tag, nodes, onCancel, onUpdateT
Grouped Devices
</FormLabel>
<MultiSelect
options={nodes.map((node) => ({
label: (node.is_static ? node.static_node.clientid : node.name) || '',
value: deduceNodeId(node),
icon: node.is_static ? FileIcon : ServerIcon,
}))}
options={nodes
.toSorted((a, b) =>
(a?.name || a.static_node.clientid).localeCompare(b?.name || b.static_node.clientid),
)
.map((node) => ({
label: (node.is_static ? node.static_node.clientid : node.name) || '',
value: deduceNodeId(node),
icon: node.is_static ? FileIcon : ServerIcon,
}))}
onValueChange={(vals) => {
console.log(vals);
setSelectedNodes(
Expand Down
5 changes: 2 additions & 3 deletions src/pages/hosts/HostDetailsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ import { AxiosError } from 'axios';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { Link, useNavigate, useParams } from 'react-router-dom';
import { PageProps } from '../../models/Page';

import './HostDetailsPage.scss';
import { resolveAppRoute, useQuery } from '@/utils/RouteUtils';
import NodeStatus from '@/components/ui/Status';
Expand Down Expand Up @@ -118,7 +117,7 @@ export default function HostDetailsPage(props: PageProps) {
// load from store
const host = store.hosts.find((h) => h.id === hostId);
if (!host) {
notify.error({ message: `Host ${hostId} not found` });
notify.error({ message: `Device ${hostId} not found` });
navigate(resolveAppRoute(AppRoutes.HOSTS_ROUTE));
return;
}
Expand All @@ -130,7 +129,7 @@ export default function HostDetailsPage(props: PageProps) {
const onHostDelete = useCallback(async () => {
try {
if (!hostId) {
throw new Error('Host not found');
throw new Error('Device not found');
}
await HostsService.deleteHost(hostId, true);
notify.success({ message: `Device ${host?.name} deleted` });
Expand Down
14 changes: 7 additions & 7 deletions src/pages/hosts/HostsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,7 +201,7 @@ export default function HostsPage(props: PageProps) {
{assocNodes.length > 0 && (
<Col xs={24}>
<Typography.Text color="warning">Device will be removed from the following networks:</Typography.Text>
<ul>
<ul className="list-disc list-inside">
{assocNodes.map((node) => (
<li key={node.id}>{node.network}</li>
))}
Expand Down Expand Up @@ -952,17 +952,17 @@ export default function HostsPage(props: PageProps) {
Devices
</Typography.Title>
<Typography.Text style={{ color: 'white ' }}>
Devices are your servers, VM&apos;s, containers, laptops, and more can all be Devices. Windows, Linux,
Mac, and FreeBSD are all supported. Register a Device with your server and add them to networks to
give them secure access to other devices and resources.
Devices can be added to your network on this page. Servers, VM&apos;s, containers, laptops, and more
can all be added. Windows, Linux, Mac are all supported. Register a device with your server and add
them to networks to give them secure access to other devices and resources.
</Typography.Text>
</Col>
<Col xs={24} xl={(24 * 1) / 3} style={{ position: 'relative' }}>
<Card className="header-card" style={{ height: '20rem', position: 'absolute', width: '100%' }}>
<Typography.Title level={3}>Add a Device</Typography.Title>
<Typography.Text>
Start creating your network by adding controllable devices on your platform. Servers, VM’s, your
laptop, and more are all fair game.
Start creating your network by adding devices on your platform. Servers, VM’s, your laptop, and more
are all fair game.
</Typography.Text>
<Row style={{ marginTop: 'auto' }}>
<Col>
Expand Down Expand Up @@ -1084,7 +1084,7 @@ export default function HostsPage(props: PageProps) {
</Button>

<Button
title="Go to Devices documentation"
title="Go to devices documentation"
size="large"
href={HOST_DOCS_URL}
target="_blank"
Expand Down
8 changes: 0 additions & 8 deletions src/pages/networks/NetworkDetailsPage.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,6 @@
}
}

.network-details-tabs {
.ant-tabs-nav-wrap {
overflow-y: hidden;
overflow-x: auto;
scrollbar-width: thin;
}
}

.selected-row {
$bg-color: rgba(128, 107, 282);
$bg-color-alpha: rgba($bg-color, 0.1);
Expand Down
9 changes: 5 additions & 4 deletions src/pages/networks/NetworkDetailsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,7 @@ import { ACLRule } from '@/services/dtos/ACLDtos';
import ACLPage from './acl/ACLPage';
import { DocumentIcon, PlusIcon, ServerIcon, UserIcon } from '@heroicons/react/24/solid';
import AddNodeDialog from '@/components/modals/add-node-modal/AddNodeDialog';
import NodeStatus from '@/components/ui/Status';

interface ExternalRoutesTableData {
node: ExtendedNode;
Expand Down Expand Up @@ -2409,10 +2410,12 @@ export default function NetworkDetailsPage(props: PageProps) {
const extendedNode = getExtendedNode(node, store.hostsCommonDetails);
if (extendedNode.is_static) {
return node.static_node?.enabled ? (
<Tag color="success">Enabled</Tag>
<NodeStatus nodeHealth="healthy" clickable />
) : (
<Tag color="error">Disabled</Tag>
<NodeStatus nodeHealth="disconnected" clickable />
);
} else if (!extendedNode.connected) {
return <NodeStatus nodeHealth="disconnected" clickable />;
}
return getHostHealth(node.hostid, [node]);
},
Expand Down Expand Up @@ -4462,8 +4465,6 @@ export default function NetworkDetailsPage(props: PageProps) {
setIsInitialLoad(true);
setActiveTabKey(tabKey);
}}
className="network-details-tabs"
moreIcon={null}
/>
</Col>
</Row>
Expand Down
40 changes: 23 additions & 17 deletions src/pages/networks/tag-management/TagManagementPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,23 +112,29 @@ export function TagManagementPage({ network: networkId, networkNodes }: Readonly
</HoverCardTrigger>
{tag.tagged_nodes.length > 0 && (
<HoverCardContent className="border-none min-w-fit w-fit">
<div className="m-2 border rounded bg-bg-default border-stroke-default">
{tag.tagged_nodes.map((node, i) => (
<div key={`node-${i}`} className="p-1 text-sm font-bold break-keep whitespace-nowrap">
{!node.is_static && (
<>
<ComputerIcon size={16} className="inline mr-2" />
{getExtendedNode(node, store.hostsCommonDetails).name}
</>
)}
{node.is_static && (
<>
<FileIcon size={16} className="inline mr-2" />
{node.static_node.clientid}
</>
)}
</div>
))}
<div className="m-2 border rounded bg-bg-default border-stroke-default max-h-80 overflow-y-auto">
{tag.tagged_nodes
.toSorted((a, b) =>
(getExtendedNode(a, store.hostsCommonDetails).name || a.static_node.clientid).localeCompare(
getExtendedNode(b, store.hostsCommonDetails).name || b.static_node.clientid,
),
)
.map((node, i) => (
<div key={`node-${i}`} className="p-1 text-sm font-bold break-keep whitespace-nowrap">
{!node.is_static && (
<>
<ComputerIcon size={16} className="inline mr-2" />
{getExtendedNode(node, store.hostsCommonDetails).name}
</>
)}
{node.is_static && (
<>
<FileIcon size={16} className="inline mr-2" />
{node.static_node.clientid}
</>
)}
</div>
))}
</div>
</HoverCardContent>
)}
Expand Down
2 changes: 1 addition & 1 deletion src/utils/NetworkUtils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ function generateRandomHex(size: number) {
}

export function generateCgnatCIDR() {
return `100.64.${generateRandomNumber(254, true)}.0/24`;
return `100.${generateRandomNumber(64, true) + 63}.${generateRandomNumber(254, true)}.0/24`;
}

export function generateCgnatCIDR6() {
Expand Down

0 comments on commit d7bc232

Please sign in to comment.