From 064b01b850b317ff547f2b9e4714bdaa1011a58b Mon Sep 17 00:00:00 2001
From: cjenkscybercom <christina.jenks@knowit.se>
Date: Wed, 1 Nov 2023 16:21:36 +0100
Subject: [PATCH] CE-2205: move ioc host links into KeyValueTable, as external
links
---
src/components/IOC/GitRefLink/GitRefLink.js | 22 +--
src/components/common/Link/ExternalLink.js | 34 +++++
src/components/common/Link/index.js | 3 +
src/views/host/HostDetailsView.js | 145 +++++++++-----------
4 files changed, 104 insertions(+), 100 deletions(-)
create mode 100644 src/components/common/Link/ExternalLink.js
create mode 100644 src/components/common/Link/index.js
diff --git a/src/components/IOC/GitRefLink/GitRefLink.js b/src/components/IOC/GitRefLink/GitRefLink.js
index 54e07f24..2c69f37b 100644
--- a/src/components/IOC/GitRefLink/GitRefLink.js
+++ b/src/components/IOC/GitRefLink/GitRefLink.js
@@ -3,9 +3,9 @@
* Component providing link (and tag) to gitlab
*/
import React from "react";
-import { Typography, Link as MuiLink, Stack } from "@mui/material";
+import { Typography } from "@mui/material";
import { string } from "prop-types";
-import LaunchIcon from "@mui/icons-material/Launch";
+import { ExternalLink, ExternalLinkContents } from "../../common/Link";
const propTypes = {
/** String containing url to gitlab template */
@@ -15,16 +15,7 @@ const propTypes = {
};
const defaultRenderLinkContents = (revision) => {
- return (
- <Stack
- flexDirection="row"
- alignItems="center"
- gap={0.5}
- >
- {revision}
- <LaunchIcon fontSize="small" />
- </Stack>
- );
+ return <ExternalLinkContents>{revision}</ExternalLinkContents>;
};
export default function GitRefLink({
@@ -53,16 +44,13 @@ export default function GitRefLink({
return (
<Typography display="inline">
- <MuiLink
+ <ExternalLink
href={url}
- target="_blank"
- rel="noreferrer"
- underline="hover"
aria-label={`External Git Link, revision ${revision}`}
{...LinkProps}
>
{renderLinkContents(revision)}
- </MuiLink>
+ </ExternalLink>
</Typography>
);
}
diff --git a/src/components/common/Link/ExternalLink.js b/src/components/common/Link/ExternalLink.js
new file mode 100644
index 00000000..21296d00
--- /dev/null
+++ b/src/components/common/Link/ExternalLink.js
@@ -0,0 +1,34 @@
+import React from "react";
+import { Link, Stack, styled } from "@mui/material";
+import LaunchIcon from "@mui/icons-material/Launch";
+
+export const ExternalLinkContents = ({ children }) => {
+ return (
+ <Stack
+ flexDirection="row"
+ alignItems="center"
+ gap={0.5}
+ flexWrap="wrap"
+ >
+ {children}
+ <LaunchIcon fontSize="small" />
+ </Stack>
+ );
+};
+
+const ExternalLink = styled(({ href, children, className, ...props }) => {
+ return (
+ <Link
+ href={href}
+ target="_blank"
+ rel="noreferrer"
+ underline="hover"
+ className={className}
+ {...props}
+ >
+ {children}
+ </Link>
+ );
+})({});
+
+export default ExternalLink;
diff --git a/src/components/common/Link/index.js b/src/components/common/Link/index.js
new file mode 100644
index 00000000..be361d8e
--- /dev/null
+++ b/src/components/common/Link/index.js
@@ -0,0 +1,3 @@
+import ExternalLink, { ExternalLinkContents } from "./ExternalLink";
+
+export { ExternalLinkContents, ExternalLink };
diff --git a/src/views/host/HostDetailsView.js b/src/views/host/HostDetailsView.js
index 4cd13a71..f591e47c 100644
--- a/src/views/host/HostDetailsView.js
+++ b/src/views/host/HostDetailsView.js
@@ -1,11 +1,7 @@
import React, { useEffect, useCallback, useContext, useMemo } from "react";
import {
Box,
- Link,
- Container,
IconButton,
- Card,
- CardContent,
Typography,
Link as MuiLink,
Stack
@@ -34,6 +30,10 @@ import {
import { apiContext } from "../../api/DeployApi";
import { usePagination } from "../../hooks/pagination";
import IOCTable from "../../components/IOC/IOCTable";
+import {
+ ExternalLink,
+ ExternalLinkContents
+} from "../../components/common/Link";
export function HostDetailsView({ id, host }) {
const { setTitle } = useContext(GlobalAppBarContext);
@@ -164,7 +164,7 @@ export function HostDetailsView({ id, host }) {
}
}
- let renderHost = {
+ const renderHost = {
"registered by": (
<MuiLink
component={ReactRouterLink}
@@ -186,29 +186,24 @@ export function HostDetailsView({ id, host }) {
};
return (
- <>
- <IconButton
- color="inherit"
- onClick={handleClick}
- size="large"
- >
- <ArrowBackIcon />
- </IconButton>
-
- {host && <AlertBannerList alerts={host.alerts} />}
- {host && (
- <HostBadge
- host={host}
- sx={{ mt: 2.5 }}
- />
- )}
- <Box sx={{ pt: 2 }}>
- <Typography
- sx={{ my: 2.5 }}
- variant="h3"
+ <Stack gap={2}>
+ <Box>
+ <IconButton
+ color="inherit"
+ onClick={handleClick}
+ size="large"
>
- IOCs
- </Typography>
+ <ArrowBackIcon />
+ </IconButton>
+ </Box>
+ {host ? (
+ <>
+ <AlertBannerList alerts={host?.alerts ?? []} />
+ <HostBadge host={host} />
+ </>
+ ) : null}
+ <Stack gap={2}>
+ <Typography variant="h3">IOCs</Typography>
<IOCTable
iocs={iocs?.deployedIocs}
loading={loading || !dataReady}
@@ -216,83 +211,67 @@ export function HostDetailsView({ id, host }) {
pagination={pagination}
onPage={onPage}
/>
- </Box>
+ </Stack>
<AccessControl
allowedRoles={["DeploymentToolAdmin", "DeploymentToolIntegrator"]}
renderNoAccess={() => <></>}
>
- <SimpleAccordion
- summary="Host details"
- expanded={deserialize(urlState.details_open)}
- onChange={(event, expanded) =>
- setUrlState({ details_open: serialize(expanded) })
- }
- >
- {host && (
+ {host ? (
+ <SimpleAccordion
+ summary="Host details"
+ expanded={deserialize(urlState.details_open)}
+ onChange={(event, expanded) =>
+ setUrlState({ details_open: serialize(expanded) })
+ }
+ sx={{ marginTop: "0 !important" }}
+ >
<KeyValueTable
obj={renderHost}
variant="overline"
- sx={{ border: 0 }}
- valueOptions={{ headerName: "" }}
/>
- )}
- </SimpleAccordion>
+ </SimpleAccordion>
+ ) : null}
</AccessControl>
<AccessControl
allowedRoles={["DeploymentToolAdmin", "DeploymentToolIntegrator"]}
renderNoAccess={() => <></>}
>
- <Box sx={{ pt: 2 }}>
- <Typography
- sx={{ my: 2.5 }}
- variant="h3"
- >
- Host log stream
- </Typography>
- {host && (
+ <Stack gap={2}>
+ <Typography variant="h3">Host log stream</Typography>
+ {host ? (
<LokiPanel
host={host}
isSyslog
isDeployed
/>
- )}
- </Box>
+ ) : null}
+ </Stack>
</AccessControl>
- <Card
- variant="outlined"
- sx={{ mt: 2 }}
- >
- <CardContent>
- <Container>
- <Typography
- variant="body2"
- fontWeight="bold"
- >
- Open in CSEntry
- </Typography>
- <Link
+ <KeyValueTable
+ obj={{
+ "Host Configuration": (
+ <ExternalLink
href={`https://csentry.esss.lu.se/network/hosts/view/${host?.csEntryHost.name}`}
- target="_blank"
- rel="noreferrer"
- underline="hover"
- >{`https://csentry.esss.lu.se/network/hosts/view/${host?.csEntryHost?.name}`}</Link>
-
- <Typography
- variant="body2"
- fontWeight="bold"
- sx={{ marginTop: 2 }}
+ aria-label="Host Configuration"
>
- Open in Grafana
- </Typography>
- <Link
+ <ExternalLinkContents>
+ {`https://csentry.esss.lu.se/network/hosts/view/${host?.csEntryHost?.name}`}
+ </ExternalLinkContents>
+ </ExternalLink>
+ ),
+ "Host Metrics": (
+ <ExternalLink
href={`https://grafana.tn.esss.lu.se/d/5zJT23xWz/node-exporter-full?orgId=1&var-node=${host?.csEntryHost.fqdn}`}
- target="_blank"
- rel="noreferrer"
- underline="hover"
- >{`https://grafana.tn.esss.lu.se/d/5zJT23xWz/node-exporter-full?orgId=1&var-node=${host?.csEntryHost.fqdn}`}</Link>
- </Container>
- </CardContent>
- </Card>
- </>
+ aria-label="Host Metrics"
+ >
+ <ExternalLinkContents>
+ {`https://grafana.tn.esss.lu.se/d/5zJT23xWz/node-exporter-full?orgId=1&var-node=${host?.csEntryHost.fqdn}`}
+ </ExternalLinkContents>
+ </ExternalLink>
+ )
+ }}
+ variant="overline"
+ />
+ </Stack>
);
}
--
GitLab