Skip to content

Commit

Permalink
Re-work DNS layout (#222)
Browse files Browse the repository at this point in the history
  • Loading branch information
saroojbkhari authored Jul 10, 2023
1 parent cb89eeb commit 09ae157
Show file tree
Hide file tree
Showing 14 changed files with 2,076 additions and 962 deletions.
908 changes: 908 additions & 0 deletions src/components/NameServerGroupAdd.tsx

Large diffs are not rendered by default.

1,393 changes: 761 additions & 632 deletions src/components/NameServerGroupUpdate.tsx

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion src/components/PeerUpdate.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -366,7 +366,6 @@ const PeerUpdate = () => {
noUpdateToName() &&
noUpdateToLoginExpiration()
) {
console.log("no group update==<");
const style = { marginTop: 85 };
if (savedGroups.loading) {
message.loading({
Expand Down
1 change: 0 additions & 1 deletion src/components/RoutePeerUpdate.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -234,7 +234,6 @@ const RoutePeerUpdate = () => {
style: styleNotification,
});
} else if (savedRoute.success) {
console.log("savedRoute", savedRoute);
message.success({
content: "Route has been successfully updated.",
key: saveKey,
Expand Down
1 change: 0 additions & 1 deletion src/components/RouteUpdate.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -259,7 +259,6 @@ const RouteAddNew = () => {
style: styleNotification,
});
} else if (savedRoute.success) {
console.log("savedRoute", savedRoute);
message.success({
content: "Route has been successfully added.",
key: saveKey,
Expand Down
26 changes: 26 additions & 0 deletions src/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -211,6 +211,9 @@ td.non-highlighted-table-column {

.ant-form-item-explain-error {
font-weight: 500;
font-size: 12px;
line-height: 14px;
margin-top: 2px;
}

.menlo-font,
Expand Down Expand Up @@ -441,4 +444,27 @@ ul.ant-list-items {
position: absolute;
top: 10px;
right: 2px;
}

.blue-color {
color: #1890FF;
}

.style-like-text .ant-select-selector {
background: transparent !important;
border: none !important;
padding: 0 !important;
color: rgba(0, 0, 0, 1) !important;
}

.style-like-text .ant-select-selection-search::after {
display: none !important;
}

.style-like-text .ant-select-selection-item {
padding-inline-end: 0 !important;
}

.style-like-text .ant-select-arrow {
display: none !important;
}
1 change: 1 addition & 0 deletions src/store/nameservers/actions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ const actions = {

setNameServerGroup: createAction('SET_NameServerGroup')<NameServerGroup>(),
setSetupNewNameServerGroupVisible: createAction('SET_SETUP_NEW_NameServerGroup_VISIBLE')<boolean>(),
setSetupEditNameServerGroupVisible: createAction('SET_SETUP_EDIT_NameServerGroup_VISIBLE')<boolean>(),
setSetupNewNameServerGroupHA: createAction('SET_SETUP_NEW_NameServerGroup_HA')<boolean>()
};

Expand Down
14 changes: 10 additions & 4 deletions src/store/nameservers/reducer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ type StateType = Readonly<{
deleteNameServerGroup: DeleteResponse<string | null>;
savedNameServerGroup: CreateResponse<NameServerGroup | null>;
setupNewNameServerGroupVisible: boolean;
setupEditNameServerGroupVisible: boolean;
setupNewNameServerGroupHA: boolean
}>;

Expand All @@ -27,17 +28,18 @@ const initialState: StateType = {
success: false,
failure: false,
error: null,
data : null
data: null,
},
savedNameServerGroup: <CreateResponse<NameServerGroup | null>>{
loading: false,
success: false,
failure: false,
error: null,
data : null
data: null,
},
setupNewNameServerGroupVisible: false,
setupNewNameServerGroupHA: false
setupEditNameServerGroupVisible: false,
setupNewNameServerGroupHA: false,
};

const data = createReducer<NameServerGroup[], ActionTypes>(initialState.data as NameServerGroup[])
Expand Down Expand Up @@ -79,6 +81,9 @@ const savedNameServerGroup = createReducer<CreateResponse<NameServerGroup | null
const setupNewNameServerGroupVisible = createReducer<boolean, ActionTypes>(initialState.setupNewNameServerGroupVisible)
.handleAction(actions.setSetupNewNameServerGroupVisible, (store, action) => action.payload)

const setupEditNameServerGroupVisible = createReducer<boolean, ActionTypes>(initialState.setupEditNameServerGroupVisible)
.handleAction(actions.setSetupEditNameServerGroupVisible, (store, action) => action.payload)

const setupNewNameServerGroupHA = createReducer<boolean, ActionTypes>(initialState.setupNewNameServerGroupHA)
.handleAction(actions.setSetupNewNameServerGroupHA, (store, action) => action.payload)

Expand All @@ -91,5 +96,6 @@ export default combineReducers({
deletedNameServerGroup,
savedNameServerGroup,
setupNewNameServerGroupVisible,
setupNewNameServerGroupHA
setupEditNameServerGroupVisible,
setupNewNameServerGroupHA,
});
4 changes: 2 additions & 2 deletions src/store/nameservers/sagas.ts
Original file line number Diff line number Diff line change
Expand Up @@ -118,13 +118,13 @@ export function* setDeleteNameServerGroup(action: ReturnType<typeof actions.set

export function* deleteNameServerGroup(action: ReturnType<typeof actions.deleteNameServerGroup.request>): Generator {
try {
yield call(actions.setDeletedNameServerGroup,{
yield put(actions.setDeletedNameServerGroup({
loading: true,
success: false,
failure: false,
error: null,
data: null
} as DeleteResponse<string | null>)
}))

const effect = yield call(service.deletedNameServerGroup, action.payload);
const response = effect as ApiResponse<any>;
Expand Down
29 changes: 14 additions & 15 deletions src/store/nameservers/types.ts
Original file line number Diff line number Diff line change
@@ -1,21 +1,20 @@
export interface NameServerGroup {
id?: string
name: string
description: string
primary: boolean
domains: string[]
nameservers: NameServer[]
groups: string[]
enabled: boolean
id?: string;
name: string;
description: string;
primary: boolean;
domains: string[];
nameservers: NameServer[];
groups: string[];
enabled: boolean;
}

export interface NameServer {
ip: string
ns_type: string
port: number
ip: string;
ns_type: string;
port: number;
}

export interface NameServerGroupToSave extends NameServerGroup
{
groupsToCreate: string[]
}
export interface NameServerGroupToSave extends NameServerGroup {
groupsToCreate?: string[];
}
16 changes: 9 additions & 7 deletions src/store/policy/sagas.ts
Original file line number Diff line number Diff line change
Expand Up @@ -174,13 +174,15 @@ export function* deletePolicy(
action: ReturnType<typeof actions.deletePolicy.request>
): Generator {
try {
yield call(actions.setDeletedPolicy, {
loading: true,
success: false,
failure: false,
error: null,
data: null,
} as DeleteResponse<string | null>);
yield put(
actions.setDeletedPolicy({
loading: true,
success: false,
failure: false,
error: null,
data: null,
})
);

const effect = yield call(service.deletedPolicy, action.payload);
const response = effect as ApiResponse<any>;
Expand Down
1 change: 0 additions & 1 deletion src/views/AccessControl.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -549,7 +549,6 @@ export const AccessControl = () => {
})
);
};
console.log("dataTable", dataTable);
return (
<>
{!setupEditPolicyVisible && (
Expand Down
145 changes: 79 additions & 66 deletions src/views/DNS.tsx
Original file line number Diff line number Diff line change
@@ -1,78 +1,91 @@
import React, {useEffect, useState} from 'react';
import {Container} from "../components/Container";
import {
Col,
Row,
Tabs,
Typography,
} from "antd";
import type { TabsProps } from 'antd';
import React, { useEffect, useState } from "react";
import { Container } from "../components/Container";
import { Col, Row, Tabs, Typography } from "antd";
import type { TabsProps } from "antd";
import NameServerGroupUpdate from "../components/NameServerGroupUpdate";
import NameServerGroupAdd from "../components/NameServerGroupAdd";
import Nameservers from "./Nameservers";
import {actions as groupActions} from "../store/group";
import {useGetTokenSilently} from "../utils/token";
import {useDispatch, useSelector} from "react-redux";
import { actions as groupActions } from "../store/group";
import { useGetTokenSilently } from "../utils/token";
import { useDispatch, useSelector } from "react-redux";
import DNSSettingsForm from "./DNSSettings";
import {RootState} from "typesafe-actions";
import {actions as dnsSettingsActions} from '../store/dns-settings';
import {useGetGroupTagHelpers} from "../utils/groups";
import { RootState } from "typesafe-actions";
import { actions as dnsSettingsActions } from "../store/dns-settings";
import { useGetGroupTagHelpers } from "../utils/groups";

const {Title, Paragraph} = Typography;
const { Title, Paragraph } = Typography;

export const DNS = () => {
const {getTokenSilently} = useGetTokenSilently()
const dispatch = useDispatch()
const {
getGroupNamesFromIDs,
} = useGetGroupTagHelpers()
const { getTokenSilently } = useGetTokenSilently();
const dispatch = useDispatch();
const { getGroupNamesFromIDs } = useGetGroupTagHelpers();

const dnsSettingsData = useSelector((state: RootState) => state.dnsSettings.data)
const dnsSettingsData = useSelector(
(state: RootState) => state.dnsSettings.data
);
const setupEditNameServerGroupVisible = useSelector(
(state: RootState) => state.nameserverGroup.setupEditNameServerGroupVisible
);
const setupNewNameServerGroupVisible = useSelector(
(state: RootState) => state.nameserverGroup.setupNewNameServerGroupVisible
);
useEffect(() => {
dispatch(
groupActions.getGroups.request({
getAccessTokenSilently: getTokenSilently,
payload: null,
})
);
}, []);

useEffect(() => {
dispatch(groupActions.getGroups.request({getAccessTokenSilently: getTokenSilently, payload: null}));
}, [])
const nsTabKey = "1";
const items: TabsProps["items"] = [
{
key: nsTabKey,
label: "Nameservers",
children: <Nameservers />,
},
{
key: "2",
label: "Settings",
children: <DNSSettingsForm />,
},
];

const nsTabKey = '1'
const items: TabsProps['items'] = [
{
key: nsTabKey,
label: 'Nameservers',
children: <Nameservers/>,
},
{
key: '2',
label: 'Settings',
children: <DNSSettingsForm/>,
},
]

const onTabClick = (key:string) => {
if (key == nsTabKey) {
if (!dnsSettingsData) return
dispatch(dnsSettingsActions.setDNSSettings({
disabled_management_groups: getGroupNamesFromIDs(dnsSettingsData.disabled_management_groups),
}))
}
const onTabClick = (key: string) => {
if (key == nsTabKey) {
if (!dnsSettingsData) return;
dispatch(
dnsSettingsActions.setDNSSettings({
disabled_management_groups: getGroupNamesFromIDs(
dnsSettingsData.disabled_management_groups
),
})
);
}
};

return (
<>
<Container style={{paddingTop: "40px"}}>
<Row>
<Col span={24}>
<Tabs
defaultActiveKey={nsTabKey}
items={items}
onTabClick={onTabClick}
animated={{ inkBar: true, tabPane: false }}
tabPosition="top"
/>
</Col>
</Row>
</Container>
<NameServerGroupUpdate/>
</>
)
}
return (
<>
{!setupEditNameServerGroupVisible && (
<Container style={{ paddingTop: "40px" }}>
<Row>
<Col span={24}>
<Tabs
defaultActiveKey={nsTabKey}
items={items}
onTabClick={onTabClick}
animated={{ inkBar: true, tabPane: false }}
tabPosition="top"
/>
</Col>
</Row>
</Container>
)}
{setupEditNameServerGroupVisible && <NameServerGroupUpdate />}
{setupNewNameServerGroupVisible && <NameServerGroupAdd />}
</>
);
};

export default DNS;
export default DNS;
Loading

0 comments on commit 09ae157

Please sign in to comment.