зеркало из https://github.com/Azure/ipam.git
Added global settings and made Azure Portal link dynamic by cloud
This commit is contained in:
Родитель
bd7a79a34d
Коммит
b905380da4
|
@ -7,6 +7,7 @@ services:
|
|||
args:
|
||||
PORT: 80
|
||||
environment:
|
||||
REACT_APP_AZURE_ENV: ${AZURE_ENV}
|
||||
REACT_APP_UI_ID: ${UI_APP_ID}
|
||||
REACT_APP_ENGINE_ID: ${ENGINE_APP_ID}
|
||||
REACT_APP_TENANT_ID: ${TENANT_ID}
|
||||
|
|
|
@ -7,7 +7,8 @@ import {
|
|||
DataGrid,
|
||||
GridOverlay,
|
||||
GridToolbarContainer,
|
||||
GridToolbarColumnsButton
|
||||
GridToolbarColumnsButton,
|
||||
GridToolbarFilterButton
|
||||
} from "@mui/x-data-grid";
|
||||
|
||||
import {
|
||||
|
@ -68,12 +69,12 @@ export default function DiscoverTable(props) {
|
|||
|
||||
if (!columns.find( x => x['field'] === 'id' )) {
|
||||
columns.push(
|
||||
{ field: "id", headerName: "", headerAlign: "right", align: "right", width: 25, sortable: false, renderCell: renderExpand }
|
||||
{ field: "id", headerName: "", headerAlign: "right", align: "right", width: 25, filterable: false, sortable: false, renderCell: renderExpand }
|
||||
);
|
||||
} else {
|
||||
columns.pop();
|
||||
columns.push(
|
||||
{ field: "id", headerName: "", headerAlign: "right", align: "right", width: 25, sortable: false, renderCell: renderExpand }
|
||||
{ field: "id", headerName: "", headerAlign: "right", align: "right", width: 25, filterable: false, sortable: false, renderCell: renderExpand }
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -213,18 +214,21 @@ export default function DiscoverTable(props) {
|
|||
justifyContent="center"
|
||||
style={{ borderBottom: "1px solid rgba(224, 224, 224, 1)", backgroundColor: selectedRow ? "rgba(25, 118, 210, 0.12)" : "unset" }}
|
||||
>
|
||||
<Box width="300px" display="flex" justifyContent="flex-start" alignItems="center">
|
||||
<Box width="400px" display="flex" justifyContent="flex-start" alignItems="center">
|
||||
<GridToolbarColumnsButton
|
||||
sx={{ ml: 2 }}
|
||||
/>
|
||||
<GridToolbarFilterButton
|
||||
sx={{ ml: 2 }}
|
||||
/>
|
||||
</Box>
|
||||
<Box width="100%" alignSelf="center" textAlign="center">
|
||||
<Typography sx={{ flex: "1 1 100%" }} variant="h6" component="div">
|
||||
{selectedRow ? `'${selectedRow.name}' selected` : `${config.title}s`}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box width="300px" display="flex" justifyContent="flex-end" alignItems="center">
|
||||
<Tooltip title="Filter">
|
||||
<Box width="400px" display="flex" justifyContent="flex-end" alignItems="center">
|
||||
{/* <Tooltip title="Filter">
|
||||
<IconButton
|
||||
ref={anchorEl}
|
||||
color="primary"
|
||||
|
@ -244,7 +248,7 @@ export default function DiscoverTable(props) {
|
|||
filterSettings={filterSettings}
|
||||
handleClose={handleMenuClose}
|
||||
state={filterMenuState}
|
||||
/>
|
||||
/> */}
|
||||
</Box>
|
||||
</Box>
|
||||
</GridToolbarContainer>
|
||||
|
@ -258,8 +262,10 @@ export default function DiscoverTable(props) {
|
|||
<DataGrid
|
||||
disableSelectionOnClick
|
||||
disableColumnMenu
|
||||
hideFooter
|
||||
hideFooterPagination
|
||||
// hideFooter
|
||||
// hideFooterPagination
|
||||
pagination
|
||||
autoPageSize
|
||||
hideFooterSelectedRowCount
|
||||
density="compact"
|
||||
rows={filteredData}
|
||||
|
@ -289,7 +295,11 @@ export default function DiscoverTable(props) {
|
|||
"&.MuiDataGrid-root .MuiDataGrid-columnHeader:focus, &.MuiDataGrid-root .MuiDataGrid-cell:focus, &.MuiDataGrid-root .MuiDataGrid-cell:focus-within":
|
||||
{
|
||||
outline: "none",
|
||||
}
|
||||
},
|
||||
// "&.MuiDataGrid-root .MuiDataGrid-footerContainer":
|
||||
// {
|
||||
// minHeight: "59.5px",
|
||||
// }
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
|
|
@ -17,6 +17,8 @@ import {
|
|||
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
|
||||
import { AZURE_PORTAL } from "../../../global/azureClouds";
|
||||
|
||||
import { TableContext } from "../TableContext";
|
||||
|
||||
const theme = createTheme({
|
||||
|
@ -178,7 +180,7 @@ export default function ItemDetails(props) {
|
|||
<React.Fragment>
|
||||
<Divider />
|
||||
<Link>
|
||||
<Button variant="text" size="small" onClick={() => window.open(`https://portal.azure.com/#@${rowData.tenant_id}/resource/${rowData.id}`, "_blank")}>VIEW IN PORTAL</Button>
|
||||
<Button variant="text" size="small" onClick={() => window.open(`https://${AZURE_PORTAL}/#@${rowData.tenant_id}/resource/${rowData.id}`, "_blank")}>VIEW IN PORTAL</Button>
|
||||
</Link>
|
||||
</React.Fragment>
|
||||
}
|
||||
|
|
|
@ -38,11 +38,11 @@ export const spaces = {
|
|||
idFunc: (row) => row.name
|
||||
},
|
||||
columns: [
|
||||
{ field: "name", headerName: "Space Name", headerAlign: "left", align: "left", flex: 0.85 },
|
||||
{ field: "utilization", headerName: "Utilization", headerAlign: "left", align: "left", flex: 0.5, renderCell: renderProgress },
|
||||
{ field: "desc", headerName: "Description", headerAlign: "left", align: "left", flex: 0.85 },
|
||||
{ field: "size", headerName: "Total IP's", headerAlign: "right", align: "right", flex: 0.35 },
|
||||
{ field: "used", headerName: "Allocated IP's", headerAlign: "right", align: "right", flex: 0.45 },
|
||||
{ field: "name", headerName: "Space Name", type: 'string', headerAlign: "left", align: "left", flex: 0.85 },
|
||||
{ field: "utilization", headerName: "Utilization", type: 'number', headerAlign: "left", align: "left", flex: 0.5, renderCell: renderProgress },
|
||||
{ field: "desc", headerName: "Description", type: 'string', headerAlign: "left", align: "left", flex: 0.85 },
|
||||
{ field: "size", headerName: "Total IP's", type: 'number', headerAlign: "right", align: "right", flex: 0.35 },
|
||||
{ field: "used", headerName: "Allocated IP's", type: 'number', headerAlign: "right", align: "right", flex: 0.45 },
|
||||
],
|
||||
filterSettings: [
|
||||
{ type: "select", title: "Space Name", dataField: "name" },
|
||||
|
@ -67,12 +67,12 @@ export const blocks = {
|
|||
idFunc: (row) => row.id
|
||||
},
|
||||
columns: [
|
||||
{ field: "name", headerName: "Block Name", headerAlign: "left", align: "left", flex: 0.85 },
|
||||
{ field: "utilization", headerName: "Utilization", headerAlign: "left", align: "left", flex: 0.5, renderCell: renderProgress },
|
||||
{ field: "parentSpace", headerName: "Space", headerAlign: "left", align: "left", flex: 0.85 },
|
||||
{ field: "size", headerName: "Total IP's", headerAlign: "right", align: "right", flex: 0.35 },
|
||||
{ field: "used", headerName: "Allocated IP's", headerAlign: "right", align: "right", flex: 0.45 },
|
||||
{ field: "cidr", headerName: "CIDR Block", headerAlign: "right", align: "right", flex: 0.75 },
|
||||
{ field: "name", headerName: "Block Name", type: 'string', headerAlign: "left", align: "left", flex: 0.85 },
|
||||
{ field: "utilization", headerName: "Utilization", type: 'number', headerAlign: "left", align: "left", flex: 0.5, renderCell: renderProgress },
|
||||
{ field: "parentSpace", headerName: "Space", type: 'string', headerAlign: "left", align: "left", flex: 0.85 },
|
||||
{ field: "size", headerName: "Total IP's", type: 'number', headerAlign: "right", align: "right", flex: 0.35 },
|
||||
{ field: "used", headerName: "Allocated IP's", type: 'number', headerAlign: "right", align: "right", flex: 0.45 },
|
||||
{ field: "cidr", headerName: "CIDR Block", type: 'string', headerAlign: "right", align: "right", flex: 0.75 },
|
||||
],
|
||||
filterSettings: [
|
||||
{ type: "select", title: "Block Name", dataField: "name" },
|
||||
|
@ -99,12 +99,12 @@ export const vnets = {
|
|||
idFunc: (row) => row.id
|
||||
},
|
||||
columns: [
|
||||
{ field: "name", headerName: "vNet Name", headerAlign: "left", align: "left", flex: 0.85 },
|
||||
{ field: "utilization", headerName: "Utilization", headerAlign: "left", align: "left", flex: 0.5, renderCell: renderProgress },
|
||||
{ field: "parentBlock", headerName: "Block", headerAlign: "left", align: "left", flex: 0.85, renderCell: (params) => params.value ?? "<Unassigned>" },
|
||||
{ field: "size", headerName: "Total IP's", headerAlign: "right", align: "right", flex: 0.35 },
|
||||
{ field: "used", headerName: "Allocated IP's", headerAlign: "right", align: "right", flex: 0.45 },
|
||||
{ field: "prefixes", headerName: "IP Space", headerAlign: "right", align: "right", flex: 0.75 },
|
||||
{ field: "name", headerName: "vNet Name", type: 'string', headerAlign: "left", align: "left", flex: 0.85 },
|
||||
{ field: "utilization", headerName: "Utilization", type: 'number', headerAlign: "left", align: "left", flex: 0.5, renderCell: renderProgress },
|
||||
{ field: "parentBlock", headerName: "Block", type: 'string', headerAlign: "left", align: "left", flex: 0.85, renderCell: (params) => params.value ?? "<Unassigned>" },
|
||||
{ field: "size", headerName: "Total IP's", type: 'number', headerAlign: "right", align: "right", flex: 0.35 },
|
||||
{ field: "used", headerName: "Allocated IP's", type: 'number', headerAlign: "right", align: "right", flex: 0.45 },
|
||||
{ field: "prefixes", headerName: "IP Space", type: 'string', headerAlign: "right", align: "right", flex: 0.75 },
|
||||
],
|
||||
filterSettings: [
|
||||
{ type: "select", title: "vNet Name", dataField: "name" },
|
||||
|
@ -137,12 +137,12 @@ export const subnets = {
|
|||
idFunc: (row) => row.id
|
||||
},
|
||||
columns: [
|
||||
{ field: "name", headerName: "Subnet Name", headerAlign: "left", align: "left", flex: 0.85 },
|
||||
{ field: "utilization", headerName: "Utilization", headerAlign: "left", align: "left", flex: 0.5, renderCell: renderProgress },
|
||||
{ field: "vnet_name", headerName: "Parent vNet", headerAlign: "left", align: "left", flex: 0.85 },
|
||||
{ field: "size", headerName: "Total IP's", headerAlign: "right", align: "right", flex: 0.35 },
|
||||
{ field: "used", headerName: "Assigned IP's", headerAlign: "right", align: "right", flex: 0.45 },
|
||||
{ field: "prefix", headerName: "IP Space", headerAlign: "right", align: "right", flex: 0.75 },
|
||||
{ field: "name", headerName: "Subnet Name", type: 'string', headerAlign: "left", align: "left", flex: 0.85 },
|
||||
{ field: "utilization", headerName: "Utilization", type: 'number', headerAlign: "left", align: "left", flex: 0.5, renderCell: renderProgress },
|
||||
{ field: "vnet_name", headerName: "Parent vNet", type: 'string', headerAlign: "left", align: "left", flex: 0.85 },
|
||||
{ field: "size", headerName: "Total IP's", type: 'number', headerAlign: "right", align: "right", flex: 0.35 },
|
||||
{ field: "used", headerName: "Assigned IP's", type: 'number', headerAlign: "right", align: "right", flex: 0.45 },
|
||||
{ field: "prefix", headerName: "IP Space", type: 'string', headerAlign: "right", align: "right", flex: 0.75 },
|
||||
],
|
||||
filterSettings: [
|
||||
{ type: "select", title: "Subnet Name", dataField: "name" },
|
||||
|
@ -175,11 +175,11 @@ export const endpoints = {
|
|||
idFunc: (row) => `${row.id}@$${row.private_ip}`
|
||||
},
|
||||
columns: [
|
||||
{ field: "name", headerName: "Endpoint Name", headerAlign: "left", align: "left", flex: 0.85 },
|
||||
{ field: "vnet_name", headerName: "Parent vNet", headerAlign: "left", align: "left", flex: 0.5 },
|
||||
{ field: "subnet_name", headerName: "Parent Subnet", headerAlign: "left", align: "left", flex: 0.85 },
|
||||
{ field: "resource_group", headerName: "Resource Group", headerAlign: "left", align: "left", flex: 0.35 },
|
||||
{ field: "private_ip", headerName: "Private IP", headerAlign: "right", align: "right", flex: 0.75, valueGetter: (params) => params.value || "N/A" },
|
||||
{ field: "name", headerName: "Endpoint Name", type: 'string', headerAlign: "left", align: "left", flex: 0.85 },
|
||||
{ field: "vnet_name", headerName: "Parent vNet", type: 'string', headerAlign: "left", align: "left", flex: 0.5 },
|
||||
{ field: "subnet_name", headerName: "Parent Subnet", type: 'string', headerAlign: "left", align: "left", flex: 0.85 },
|
||||
{ field: "resource_group", headerName: "Resource Group", type: 'string', headerAlign: "left", align: "left", flex: 0.35 },
|
||||
{ field: "private_ip", headerName: "Private IP", type: 'string', headerAlign: "right", align: "right", flex: 0.75, valueGetter: (params) => params.value || "N/A" },
|
||||
],
|
||||
filterSettings: [
|
||||
{ type: "select", title: "Resource Group", dataField: "resource_group" },
|
||||
|
|
|
@ -0,0 +1,33 @@
|
|||
const AZURE_ENV = process.env.REACT_APP_AZURE_ENV || window['env'].REACT_APP_AZURE_ENV;
|
||||
|
||||
const AZURE_ENV_MAP = {
|
||||
AZURE_PUBLIC: {
|
||||
AZURE_AD: "login.microsoftonline.com",
|
||||
AZURE_ARM: "management.azure.com",
|
||||
AZURE_PORTAL: "portal.azure.com",
|
||||
MS_GRAPH: "graph.microsoft.com"
|
||||
},
|
||||
AZURE_US_GOV: {
|
||||
AZURE_AD: "login.microsoftonline.us",
|
||||
AZURE_ARM: "management.usgovcloudapi.net",
|
||||
AZURE_PORTAL: "portal.azure.us",
|
||||
MS_GRAPH: "graph.microsoft.us"
|
||||
},
|
||||
AZURE_GERMANY: {
|
||||
AZURE_AD: "login.microsoftonline.de",
|
||||
AZURE_ARM: "management.microsoftazure.de",
|
||||
AZURE_PORTAL: "portal.microsoftazure.de",
|
||||
MS_GRAPH: "graph.microsoft.de"
|
||||
},
|
||||
AZURE_CHINA: {
|
||||
AZURE_AD: "login.chinacloudapi.cn",
|
||||
AZURE_ARM: "management.chinacloudapi.cn",
|
||||
AZURE_PORTAL: "portal.azure.cn",
|
||||
MS_GRAPH: "microsoftgraph.chinacloudapi.cn"
|
||||
}
|
||||
};
|
||||
|
||||
export const AZURE_AD = (AZURE_ENV_MAP[AZURE_ENV] ?? AZURE_ENV_MAP['AZURE_PUBLIC']).AZURE_AD
|
||||
export const AZURE_ARM = (AZURE_ENV_MAP[AZURE_ENV] ?? AZURE_ENV_MAP['AZURE_PUBLIC']).AZURE_ARM
|
||||
export const AZURE_PORTAL = (AZURE_ENV_MAP[AZURE_ENV] ?? AZURE_ENV_MAP['AZURE_PUBLIC']).AZURE_PORTAL
|
||||
export const MS_GRAPH = (AZURE_ENV_MAP[AZURE_ENV] ?? AZURE_ENV_MAP['AZURE_PUBLIC']).MS_GRAPH
|
Загрузка…
Ссылка в новой задаче