Azure
/
ipam
зеркало из https://github.com/Azure/ipam.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Optimized API calls for UI and removed several commented out items and console logged outputs

This commit is contained in:
Matthew Garrett 2022-09-04 00:37:20 -07:00
Родитель 429dbadc3f
Коммит bbb184f570
8 изменённых файлов: 105 добавлений и 80 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

2
ui/src/features/DiscoverTable/Table.js
Просмотреть файл

@ -83,8 +83,6 @@ export default function DiscoverTable(props) {
function renderExpand(params) {
const onClick = (e) => {
e.stopPropagation();
console.log("CLICK!");
// setSelectionModel([params.value]);
setRowData(params.row);
setMenuExpand(true);
};

1
ui/src/features/admin/admin.js
Просмотреть файл

@ -260,7 +260,6 @@ export default function Administration() {
}, []);
function refreshData() {
console.log("REFRESHING...");
const request = {
scopes: apiRequest.scopes,
account: accounts[0],

6
ui/src/features/configure/block/Utils/editVnets.js
Просмотреть файл

@ -60,7 +60,7 @@ export default function EditVnets(props) {
const unchanged = block ? isEqual(block['vnets'].map(vnet => vnet.id).sort(), selectionModel.sort()) : false;
React.useEffect(() => {
refreshData();
(block && !refreshing && !refreshingState) && refreshData();
}, [block]);
React.useEffect(() => {
@ -84,6 +84,7 @@ export default function EditVnets(props) {
if(space && block) {
try {
setRefreshing(true);
setSelectionModel([]);
const response = await instance.acquireTokenSilent(request);
var data = await fetchBlockAvailable(response.accessToken, space, block.name);
data.forEach((item) => {
@ -141,6 +142,7 @@ export default function EditVnets(props) {
}
function manualRefresh() {
console.log("MANUAL REFRESH");
setLoading(true);
setVNets([]);
refresh();
@ -266,7 +268,7 @@ export default function EditVnets(props) {
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancel</Button>
<Button onClick={onSubmit} disabled={unchanged || sending}>
<Button onClick={onSubmit} disabled={unchanged || sending || loading || refreshingState}>
Apply
</Button>
</DialogActions>

6
ui/src/features/configure/block/block.js
Просмотреть файл

@ -173,14 +173,14 @@ export default function BlockDataGrid(props) {
handleClose={() => setAddBlockOpen(false)}
space={selected ? selected.name : null}
blocks={selected ? selected.blocks : null}
refresh={() => refresh()}
refresh={refresh}
/>
<EditVnets
open={editVNetsOpen}
handleClose={() => setEditVNetsOpen(false)}
space={selected ? selected.name : null}
block={selectedRow ? selectedRow : null}
refresh={() => refresh()}
refresh={refresh}
refreshingState={refreshing}
/>
<ConfirmDelete
@ -188,7 +188,7 @@ export default function BlockDataGrid(props) {
handleClose={() => setDeleteBlockOpen(false)}
space={selected ? selected.name : null}
block={selectedRow ? selectedRow.name : null}
refresh={() => refresh()}
refresh={refresh}
/>
</React.Fragment>
}

8
ui/src/features/configure/configure.js
Просмотреть файл

@ -70,11 +70,17 @@ export default function ConfigureIPAM() {
const dispatch = useDispatch();
var loaded = false;
React.useEffect(() => {
refresh();
if(!loaded) {
refresh();
loaded = true;
}
}, []);
function refresh() {
console.log("REFRESH SPACES");
const request = {
scopes: apiRequest.scopes,
account: accounts[0],

6
ui/src/features/configure/space/space.js
Просмотреть файл

@ -154,19 +154,19 @@ export default function SpaceDataGrid(props) {
handleClose={() => setEditSpaceOpen(false)}
space={selectedRow ? selectedRow : null}
spaces={spaces}
refresh={() => refresh()}
refresh={refresh}
/>
<AddSpace
open={addSpaceOpen}
handleClose={() => setAddSpaceOpen(false)}
spaces={spaces}
refresh={() => refresh()}
refresh={refresh}
/>
<ConfirmDelete
open={deleteSpaceOpen}
handleClose={() => setDeleteSpaceOpen(false)}
space={selectedRow ? selectedRow.name : null}
refresh={() => refresh()}
refresh={refresh}
/>
</React.Fragment>
}

60
ui/src/features/ipam/ipamAPI.js
Просмотреть файл

@ -1,7 +1,5 @@
import axios from 'axios';
// const ENGINE_URL = 'localhost:8000'
// const ENGINE_URL = 'localhost:3000'
const ENGINE_URL = window.location.origin
export function fetchSpaces(token, utilization = false) {
@ -17,16 +15,6 @@ export function fetchSpaces(token, utilization = false) {
}
})
.then(response => response.data)
.then((data) => {
data.forEach(space => {
if(utilization) {
space['available'] = (space.size - space.used);
space['utilization'] = Math.round((space.used / space.size) * 100) || 0;
}
});
return data;
})
.catch(error => {
console.log("ERROR FETCHING SPACES FROM API");
console.log(error);
@ -105,27 +93,6 @@ export function deleteSpace(token, space, force) {
});
}
// export function fetchBlocks(token) {
// const headers = [
// ['Authorization', `Bearer ${token}`]
// ];
// return fetch('${ENGINE_URL}/api/block?detail=true', { headers })
// .then((response) => response.json()
// .then((data) => {
// data.forEach(block => {
// block['available'] = (block.size - block.used);
// block['utilization'] = Math.round((block.used / block.size) * 100);
// block['id'] = `${block.name}@${block.parentSpace}`;
// });
// return data;
// }))
// .catch((error) => {
// console.log("ERROR FETCHING IP BLOCKS FROM API");
// });
// }
export function createBlock(token, space, body) {
const url = new URL(`${ENGINE_URL}/api/spaces/${space}/blocks`);
@ -262,15 +229,6 @@ export function fetchVNets(token) {
}
})
.then(response => response.data)
.then((data) => {
data.forEach(vnet => {
vnet['available'] = (vnet.size - vnet.used);
vnet['utilization'] = Math.round((vnet.used / vnet.size) * 100);
vnet['prefixes'] = vnet.prefixes.join(", ");
});
return data;
})
.catch(error => {
console.log("ERROR FETCHING VNETS FROM API");
console.log(error);
@ -278,13 +236,6 @@ export function fetchVNets(token) {
});
}
const subnetMap = {
AFW: "Azure Firewall",
VGW: "Virtual Network Gateway",
BAS: "Azure Bastion",
AGW: "Application Gateway"
};
export function fetchSubnets(token) {
var url = new URL(`${ENGINE_URL}/api/azure/subnet`);
@ -295,15 +246,6 @@ export function fetchSubnets(token) {
}
})
.then(response => response.data)
.then((data) => {
data.forEach(subnet => {
subnet['available'] = (subnet.size - subnet.used);
subnet['utilization'] = Math.round((subnet.used / subnet.size) * 100);
subnet['type'] = subnetMap[subnet['type']];
});
return data;
})
.catch(error => {
console.log("ERROR FETCHING SUBNETS FROM API");
console.log(error);
@ -333,7 +275,7 @@ export function refreshAll(token) {
(async () => await fetchSpaces(token, true))(),
// (async () => await fetchBlocks(token))(),
(async () => await fetchVNets(token))(),
(async () => await fetchSubnets(token))(),
// (async () => await fetchSubnets(token))(),
(async () => await fetchEndpoints(token))()
];

96
ui/src/features/ipam/ipamSlice.js
Просмотреть файл

@ -8,6 +8,13 @@ import {
getMe
} from './ipamAPI';
const subnetMap = {
AFW: "Azure Firewall",
VGW: "Virtual Network Gateway",
BAS: "Azure Bastion",
AGW: "Application Gateway"
};
const initialState = {
refreshInterval: null,
isAdmin: false,
@ -88,10 +95,19 @@ export const ipamSlice = createSlice({
extraReducers: (builder) => {
builder
.addCase(fetchSpacesAsync.fulfilled, (state, action) => {
state.spaces = action.payload;
const spaces = action.payload.map((space) => {
if('size' in space && 'used' in space) {
space.available = (space.size - space.used);
space.utilization = Math.round((space.used / space.size) * 100) || 0;
}
return space;
});
state.spaces = spaces;
state.blocks = action.payload.map((space) => {
space.blocks.forEach(block => {
space.blocks.forEach((block) => {
block.parentSpace = space.name;
block.available = (block.size - block.used);
block.utilization = Math.round((block.used / block.size) * 100);
@ -102,20 +118,46 @@ export const ipamSlice = createSlice({
}).flat();
})
.addCase(fetchVNetsAsync.fulfilled, (state, action) => {
state.vNets = action.payload;
const vnets = action.payload.map((vnet) => {
vnet.available = (vnet.size - vnet.used);
vnet.utilization = Math.round((vnet.used / vnet.size) * 100);
vnet.prefixes = vnet.prefixes.join(", ");
return vnet;
});
state.vNets = vnets;
})
.addCase(fetchSubnetsAsync.fulfilled, (state, action) => {
state.subnets = action.payload;
const subnets = action.payload.map((subnet) => {
subnet.available = (subnet.size - subnet.used);
subnet.utilization = Math.round((subnet.used / subnet.size) * 100);
subnet.type = subnetMap[subnet.type];
return subnet;
});
state.subnets = subnets;
})
.addCase(fetchEndpointsAsync.fulfilled, (state, action) => {
state.endpoints = action.payload;
})
.addCase(refreshAllAsync.fulfilled, (state, action) => {
state.refreshing = false;
state.spaces = action.payload[0];
const spaces = action.payload[0].map((space) => {
if('size' in space && 'used' in space) {
space.available = (space.size - space.used);
space.utilization = Math.round((space.used / space.size) * 100) || 0;
}
return space;
});
state.spaces = spaces;
state.blocks = action.payload[0].map((space) => {
space.blocks.forEach(block => {
space.blocks.forEach((block) => {
block.parentSpace = space.name;
block.available = (block.size - block.used);
block.utilization = Math.round((block.used / block.size) * 100);
@ -125,9 +167,45 @@ export const ipamSlice = createSlice({
return space.blocks;
}).flat();
state.vNets = action.payload[1];
state.subnets = action.payload[2];
state.endpoints = action.payload[3];
const vnets = action.payload[1].map((vnet) => {
vnet.available = (vnet.size - vnet.used);
vnet.utilization = Math.round((vnet.used / vnet.size) * 100);
vnet.prefixes = vnet.prefixes.join(", ");
return vnet;
});
state.vNets = vnets;
const subnets = action.payload[1].map((vnet) => {
var subnetArray = [];
vnet.subnets.forEach((subnet) => {
const subnetDetails = {
name: subnet.name,
id: `${vnet.id}/subnets/${subnet.name}`,
prefix: subnet.prefix,
resource_group: vnet.resource_group,
subscription_id: vnet.subscription_id,
tenant_id: vnet.tenant_id,
vnet_name: vnet.name,
vnet_id: vnet.id,
used: subnet.used,
size: subnet.size,
available: (subnet.size - subnet.used),
utilization: Math.round((subnet.used / subnet.size) * 100),
type: subnetMap[subnet.type]
};
subnetArray.push(subnetDetails);
});
return subnetArray;
}).flat();
state.subnets = subnets;
state.endpoints = action.payload[2];
})
.addCase(refreshAllAsync.pending, (state) => {
state.refreshing = true;