Added global settings and made Azure Portal link dynamic by cloud

This commit is contained in:
Matthew Garrett 2022-08-15 17:58:47 -07:00
Родитель bd7a79a34d
Коммит b905380da4
5 изменённых файлов: 85 добавлений и 39 удалений

Просмотреть файл

@ -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