Skip to content

Commit

Permalink
Fix table loading glitch (#227)
Browse files Browse the repository at this point in the history
  • Loading branch information
@saroojbkhari
saroojbkhari authored Jul 10, 2023
1 parent 09ae157 commit cc5a9b1
Show file tree
Hide file tree
Showing 6 changed files with 661 additions and 962 deletions.
5 changes: 5 additions & 0 deletions src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -467,4 +467,9 @@ ul.ant-list-items {

.style-like-text .ant-select-arrow {
display: none !important;
}


.ant-spin-nested-loading .ant-spin-spinning {
min-height: 300px;
}
84 changes: 42 additions & 42 deletions src/views/AccessControl.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -473,7 +473,7 @@ export const AccessControl = () => {
};

const renderPorts = (ports: string[]) => {
if (!ports) {
if (!ports) {
return (
<Tag style={{ marginRight: 3 }}>
<span className="menlo-font">ALL</span>
Expand Down Expand Up @@ -661,7 +661,46 @@ export const AccessControl = () => {
/>
)}
<Card bodyStyle={{ padding: 0 }}>
{!showTutorial && (
{showTutorial && !loading ? (
<Space
direction="vertical"
size="small"
align="center"
style={{
display: "flex",
padding: "45px 15px",
justifyContent: "center",
}}
>
<Title level={4} style={{ textAlign: "center" }}>
Create New Rule
</Title>
<Paragraph
style={{
textAlign: "center",
whiteSpace: "pre-line",
}}
>
It looks like you don't have any rules. {"\n"}
Get started with access control by adding a new one.
<a
target="_blank"
rel="noreferrer"
href="https://docs.netbird.io/how-to/manage-network-access"
>
{" "}
Learn more
</a>
</Paragraph>
<Button
size={"middle"}
type="primary"
onClick={() => onClickAddNewPolicy()}
>
Add rule
</Button>
</Space>
) : (
<Table
pagination={{
current: currentPage,
Expand All @@ -683,6 +722,7 @@ export const AccessControl = () => {
}`}
showSorterTooltip={false}
scroll={{ x: true }}
style={{ minHeight: "300px" }}
loading={tableSpin(loading)}
dataSource={dataTable}
>
Expand Down Expand Up @@ -825,46 +865,6 @@ export const AccessControl = () => {
/>
</Table>
)}
{showTutorial && (
<Space
direction="vertical"
size="small"
align="center"
style={{
display: "flex",
padding: "45px 15px",
justifyContent: "center",
}}
>
<Title level={4} style={{ textAlign: "center" }}>
Create New Rule
</Title>
<Paragraph
style={{
textAlign: "center",
whiteSpace: "pre-line",
}}
>
It looks like you don't have any rules. {"\n"}
Get started with access control by adding a new one.
<a
target="_blank"
rel="noreferrer"
href="https://docs.netbird.io/how-to/manage-network-access"
>
{" "}
Learn more
</a>
</Paragraph>
<Button
size={"middle"}
type="primary"
onClick={() => onClickAddNewPolicy()}
>
Add rule
</Button>
</Space>
)}
</Card>
</Space>
</Col>
Expand Down
82 changes: 41 additions & 41 deletions src/views/Nameservers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -540,7 +540,46 @@ export const Nameservers = () => {
/>
)}
<Card bodyStyle={{ padding: 0 }}>
{!showTutorial && (
{showTutorial && !loading ? (
<Space
direction="vertical"
size="small"
align="center"
style={{
display: "flex",
padding: "45px 15px",
justifyContent: "center",
}}
>
<Title level={4} style={{ textAlign: "center" }}>
Create Nameserver
</Title>
<Paragraph
style={{
textAlign: "center",
whiteSpace: "pre-line",
}}
>
It looks like you don't have any nameservers. {"\n"}
Get started by adding one to your network.
<a
target="_blank"
rel="noreferrer"
href="https://docs.netbird.io/how-to/manage-dns-in-your-network"
>
{" "}
Learn more
</a>
</Paragraph>
<Button
size={"middle"}
type="primary"
onClick={() => onClickAddNewNSGroup()}
>
Add nameserver
</Button>
</Space>
) : (
<Table
pagination={{
pageSize,
Expand All @@ -555,6 +594,7 @@ export const Nameservers = () => {
}`}
showSorterTooltip={false}
scroll={{ x: true }}
style={{ minHeight: "300px" }}
loading={tableSpin(loading)}
dataSource={dataTable}
>
Expand Down Expand Up @@ -651,46 +691,6 @@ export const Nameservers = () => {
/>
</Table>
)}
{showTutorial && (
<Space
direction="vertical"
size="small"
align="center"
style={{
display: "flex",
padding: "45px 15px",
justifyContent: "center",
}}
>
<Title level={4} style={{ textAlign: "center" }}>
Create Nameserver
</Title>
<Paragraph
style={{
textAlign: "center",
whiteSpace: "pre-line",
}}
>
It looks like you don't have any nameservers. {"\n"}
Get started by adding one to your network.
<a
target="_blank"
rel="noreferrer"
href="https://docs.netbird.io/how-to/manage-dns-in-your-network"
>
{" "}
Learn more
</a>
</Paragraph>
<Button
size={"middle"}
type="primary"
onClick={() => onClickAddNewNSGroup()}
>
Add nameserver
</Button>
</Space>
)}
</Card>
</Space>
</>
Expand Down
97 changes: 53 additions & 44 deletions src/views/Peers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,8 +206,6 @@ export const Peers = () => {
}
}, [deletedPeer]);



const filterDataTable = (): Peer[] => {
const t = textToSearch.toLowerCase().trim();
let f: Peer[] = filter(peers, (f: Peer) => {
Expand Down Expand Up @@ -511,17 +509,26 @@ export const Peers = () => {

let loginExpire = peer.login_expired ? (
<Tooltip title="The peer is offline and needs to be re-authenticated because its login has expired ">
<Tag color="red"><Text style={{fontSize: "10px", color: "rgba(210, 64, 64, 0.85)"}} type={"secondary"}>needs login</Text></Tag>
<Tag color="red">
<Text
style={{ fontSize: "10px", color: "rgba(210, 64, 64, 0.85)" }}
type={"secondary"}
>
needs login
</Text>
</Tag>
</Tooltip>
) : (
""
);

const userEmail = users?.find((u) => u.id === peer.user_id)?.email;
let expiry = !peer.login_expiration_enabled ? (
<Tag>
<Text type="secondary" style={{ fontSize: 10 }}>expiration disabled</Text>
</Tag>
<Tag>
<Text type="secondary" style={{ fontSize: 10 }}>
expiration disabled
</Text>
</Tag>
) : null;
if (!userEmail) {
return (
Expand Down Expand Up @@ -573,12 +580,14 @@ export const Peers = () => {
<Col span={24}>
<Title className="page-heading">Peers</Title>
{peers.length ? (
<Paragraph style={{marginTop: "5px"}}>
A list of all machines and devices connected to your private network. Use this view to manage peers
<Paragraph style={{ marginTop: "5px" }}>
A list of all machines and devices connected to your private
network. Use this view to manage peers
</Paragraph>
) : (
<Paragraph style={{marginTop: "5px"}} type={"secondary"}>
A list of all machines and devices connected to your private network. Use this view to manage peers
<Paragraph style={{ marginTop: "5px" }} type={"secondary"}>
A list of all machines and devices connected to your private
network. Use this view to manage peers
</Paragraph>
)}

Expand Down Expand Up @@ -649,7 +658,39 @@ export const Peers = () => {
/>
)}
<Card bodyStyle={{ padding: 0 }}>
{!showTutorial && (
{showTutorial && !loading ? (
<Space
direction="vertical"
size="small"
align="center"
style={{
display: "flex",
padding: "45px 15px",
justifyContent: "center",
}}
>
<Title level={4} style={{ textAlign: "center" }}>
Get Started
</Title>
<Paragraph
style={{
textAlign: "center",
whiteSpace: "pre-line",
}}
>
It looks like you don't have any connected machines.{" "}
{"\n"}
Get started by adding one to your network.
</Paragraph>
<Button
size={"middle"}
type="primary"
onClick={() => setAddPeerModalOpen(true)}
>
Add new peer
</Button>
</Space>
) : (
<Table
pagination={{
pageSize,
Expand All @@ -666,6 +707,7 @@ export const Peers = () => {
scroll={{ x: true }}
loading={tableSpin(loading)}
dataSource={dataTable}
style={{ minHeight: "300px" }}
>
<Column
title="Name"
Expand Down Expand Up @@ -804,39 +846,6 @@ export const Peers = () => {
/>
</Table>
)}
{showTutorial && (
<Space
direction="vertical"
size="small"
align="center"
style={{
display: "flex",
padding: "45px 15px",
justifyContent: "center",
}}
>
<Title level={4} style={{ textAlign: "center" }}>
Get Started
</Title>
<Paragraph
style={{
textAlign: "center",
whiteSpace: "pre-line",
}}
>
It looks like you don't have any connected machines.{" "}
{"\n"}
Get started by adding one to your network.
</Paragraph>
<Button
size={"middle"}
type="primary"
onClick={() => setAddPeerModalOpen(true)}
>
Add new peer
</Button>
</Space>
)}
</Card>
</Space>
</Col>
Expand Down
Loading

0 comments on commit cc5a9b1

Please sign in to comment.