Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Copy IP or DNS on the peers tab #112

Merged
merged 3 commits into from
Nov 25, 2022
Merged

Copy IP or DNS on the peers tab #112

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
71f0a06
Copy Peer IP or DNS in the Address column in Peers table
braginini Nov 25, 2022
65a67ca
Fix peer IP copy btn margin
braginini Nov 25, 2022
360225f
Fix DNS description toggle
braginini Nov 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/components/AccessControlNew.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -302,7 +302,9 @@ const AccessControlNew = () => {
)}
{!editDescription ? (
<div className={"access-control input-text ant-drawer-subtitle"}
onClick={() => toggleEditDescription(true)}>{formRule.description && formRule.description.trim() !== "" ? formRule.description : 'Add description...'}</div>
onClick={() => toggleEditDescription(true)}>
{formRule.description && formRule.description.trim() !== "" ? formRule.description : 'Add description...'}
</div>
) : (
<Form.Item
name="description"
Expand Down
157 changes: 90 additions & 67 deletions src/components/NameServerGroupUpdate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,14 @@ import {
Tooltip,
Typography
} from "antd";
import {CloseOutlined, FlagFilled, MinusCircleOutlined, PlusOutlined, QuestionCircleFilled, QuestionCircleOutlined} from "@ant-design/icons";
import {
CloseOutlined,
FlagFilled,
MinusCircleOutlined,
PlusOutlined,
QuestionCircleFilled,
QuestionCircleOutlined
} from "@ant-design/icons";
import {Header} from "antd/es/layout/layout";
import {RuleObject} from "antd/lib/form";
import cidrRegex from 'cidr-regex';
Expand Down Expand Up @@ -62,6 +69,18 @@ const NameServerGroupUpdate = () => {
const optionsDisabledEnabled = [{label: 'Enabled', value: true}, {label: 'Disabled', value: false}]
const optionsPrimary = [{label: 'Yes', value: true}, {label: 'No', value: false}]

useEffect(() => {
if (editName) inputNameRef.current!.focus({
cursor: 'end',
});
}, [editName]);

useEffect(() => {
if (editDescription) inputDescriptionRef.current!.focus({
cursor: 'end',
});
}, [editDescription]);

useEffect(() => {
if (!nsGroup) return

Expand Down Expand Up @@ -98,10 +117,11 @@ const NameServerGroupUpdate = () => {
setIsPrimary(false)
}

const onChange = (changedValues:any) => {
const onChange = (changedValues: any) => {
if (changedValues.primary !== undefined) {
setIsPrimary(changedValues.primary)
}
setFormNSGroup({...formNSGroup, ...changedValues})
}

let googleChoice = 'Google DNS'
Expand Down Expand Up @@ -210,7 +230,7 @@ const NameServerGroupUpdate = () => {
});
}

const createNSGroupToSave = (values:NameServerGroup): NameServerGroupToSave => {
const createNSGroupToSave = (values: NameServerGroup): NameServerGroupToSave => {
let [existingGroups, newGroups] = getExistingAndToCreateGroupsLists(values.groups)
return {
id: formNSGroup.id || null,
Expand All @@ -225,12 +245,12 @@ const NameServerGroupUpdate = () => {
} as NameServerGroupToSave
}

const toggleEditName = (b: boolean) => {
setEditDescription(b)
const toggleEditName = (status: boolean) => {
setEditName(status)
}

const toggleEditDescription = (b: boolean) => {
setEditDescription(b)
const toggleEditDescription = (status: boolean) => {
setEditDescription(status)
}

const domainRegex = /(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]/;
Expand Down Expand Up @@ -341,16 +361,17 @@ const NameServerGroupUpdate = () => {
const renderDomains = (fields: FormListFieldData[], {add, remove}, {errors}) => (
<>
<Row>
<Space >
<Col>
Match domains
</Col>
<Col>
<Tooltip title="Only queries to domains specified here will be resolved by these nameservers." className={"ant-form-item-tooltip"}>
<QuestionCircleOutlined style={{color: "rgba(0, 0, 0, 0.45)",cursor: "help"}}/>
</Tooltip>
</Col>
</Space>
<Space>
<Col>
Match domains
</Col>
<Col>
<Tooltip title="Only queries to domains specified here will be resolved by these nameservers."
className={"ant-form-item-tooltip"}>
<QuestionCircleOutlined style={{color: "rgba(0, 0, 0, 0.45)", cursor: "help"}}/>
</Tooltip>
</Col>
</Space>
</Row>
{fields.map((field, index) => {
return (
Expand All @@ -365,7 +386,8 @@ const NameServerGroupUpdate = () => {
</Form.Item>
</Col>
<Col span={2} style={{textAlign: 'center'}}>
<MinusCircleOutlined hidden={isPrimary} className="dynamic-delete-button" onClick={() => remove(field.name)}/>
<MinusCircleOutlined hidden={isPrimary} className="dynamic-delete-button"
onClick={() => remove(field.name)}/>
</Col>
</Row>
)
Expand Down Expand Up @@ -394,22 +416,21 @@ const NameServerGroupUpdate = () => {
<Space style={{display: 'flex', justifyContent: 'end'}}>
<Button onClick={onCancel} disabled={savedNSGroup.loading}>Cancel</Button>
<Button type="primary" onClick={handleFormSubmit} disabled={savedNSGroup.loading}
>{`${formNSGroup.id ? 'Save' : 'Create'}`}</Button>
>{`${formNSGroup.id ? 'Save' : 'Create'}`}</Button>
</Space>
}
>
{selectCustom ?
(<Form layout="vertical" requiredMark={false} form={form}
onValuesChange={onChange}
>
>
<Row gutter={16}>
<Col span={24}>
<Header style={{margin: "-32px -24px 20px -24px", padding: "24px 24px 0 24px"}}>
<Row align="top">
<Col flex="none" style={{display: "flex"}}>
{!editName && !editDescription && formNSGroup.id &&
<button type="button" aria-label="Close"
className="ant-drawer-close"
<button type="button" aria-label="Close" className="ant-drawer-close"
style={{paddingTop: 3}}
onClick={onCancel}>
<span role="img" aria-label="close"
Expand All @@ -430,13 +451,13 @@ const NameServerGroupUpdate = () => {
tooltip="Add a nameserver group name"
rules={[
{
required: true,
message: 'Please add an identifier for this nameserver group',
whitespace: true
},
required: true,
message: 'Please add an identifier for this nameserver group',
whitespace: true
},
{
validator: nameValidator
}
validator: nameValidator
}
]}
>
<Input placeholder="e.g. Public DNS" ref={inputNameRef}
Expand All @@ -447,21 +468,21 @@ const NameServerGroupUpdate = () => {
)}
{!editDescription ? (
<div className={"access-control input-text ant-drawer-subtitle"}
onClick={() => toggleEditDescription(true)}>{formNSGroup.description && formNSGroup.description.trim() !== "" ? formNSGroup.description : 'Add description...'}</div>
onClick={() => toggleEditDescription(true)}>
{formNSGroup.description && formNSGroup.description.trim() !== "" ? formNSGroup.description : 'Add description...'}
</div>
) : (
<Form.Item
name="description"
label="Description"
style={{marginTop: 24}}
>
<Input placeholder="Add description..."
ref={inputDescriptionRef}
<Input placeholder="Add description..." ref={inputDescriptionRef}
onPressEnter={() => toggleEditDescription(false)}
onBlur={() => toggleEditDescription(false)}
autoComplete="off" maxLength={200}/>
autoComplete="off"/>
</Form.Item>
)}

</Col>
</Row>
<Row align="top">
Expand Down Expand Up @@ -549,7 +570,8 @@ const NameServerGroupUpdate = () => {
<Paragraph>
Nameservers let you define resolvers for your DNS queries.
Because not all operating systems support match-only domain resolution,
you should define at least one set of nameservers to resolve all domains per distribution group.
you should define at least one set of nameservers to resolve all domains
per distribution group.
</Paragraph>
</Col>
</Row>
Expand All @@ -564,42 +586,43 @@ const NameServerGroupUpdate = () => {
</Row>
</Form>) :
(
<Space direction={"vertical"} style={{ width: '100%' }}>
<Row align='middle'>
<Col span={24} style={{textAlign: 'left'}}>
<span className="ant-form-item">Select a predefined nameserver</span>
</Col>
</Row>
<Row align='middle'>
<Col span={24} style={{textAlign: 'center'}}>
<Select
style={{width: '100%'}}
onChange={handleSelectChange}
options={[
{
value: googleChoice,
label: googleChoice,
},
{
value: cloudflareChoice,
label: cloudflareChoice,
},
{
value: quad9Choice,
label: quad9Choice,
},
{
value: customChoice,
label: customChoice,
},
]}
/>
</Col>
</Row>
<Space direction={"vertical"} style={{width: '100%'}}>
<Row align='middle'>
<Col span={24} style={{textAlign: 'left'}}>
<span className="ant-form-item">Select a predefined nameserver</span>
</Col>
</Row>
<Row align='middle'>
<Col span={24} style={{textAlign: 'center'}}>
<Select
style={{width: '100%'}}
onChange={handleSelectChange}
options={[
{
value: googleChoice,
label: googleChoice,
},
{
value: cloudflareChoice,
label: cloudflareChoice,
},
{
value: quad9Choice,
label: quad9Choice,
},
{
value: customChoice,
label: customChoice,
},
]}
/>
</Col>
</Row>
<Row align='middle'>
<Col span={24} style={{textAlign: 'left'}}>
<Col span={24} style={{textAlign: 'left'}}>
<span className="ant-form-item"><Typography.Link onClick={() => handleSelectChange(customChoice)}>Or add custom</Typography.Link></span>
<span className="ant-form-item"><Typography.Link
onClick={() => handleSelectChange(customChoice)}>Or add custom</Typography.Link></span>
</Col>
</Col>
</Row>
Expand Down
23 changes: 17 additions & 6 deletions src/views/Peers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -383,15 +383,26 @@ export const Peers = () => {
}

const body = <span style={{height: "auto", whiteSpace: "normal", textAlign: "left"}}>
<Text>{peer.dns_label}</Text>
<br/>
<Text type="secondary">{peer.ip}</Text>
</span>
return <ButtonCopyMessage keyMessage={peer.key}
<Row>
<ButtonCopyMessage keyMessage={peer.dns_label}
toCopy={peer.dns_label}
body={body}
body={peer.dns_label}
messageText={'Peer domain copied'}
styleNotification={{}}/>
</Row>

<Row>
<ButtonCopyMessage keyMessage={peer.ip}
toCopy={peer.ip}
body={<Text type="secondary">{peer.ip}</Text>}
messageText={'Peer IP copied'}
style={{marginTop:'-10px'}}
styleNotification={{}}/>
</Row>
</span>


return body
}

const renderName = (peer: PeerDataTable) => {
Expand Down