added ip lookup

OITApps · Oct 23, 2024 · 1d18206 · 1d18206
1 parent 701c5bf
commit 1d18206
Show file tree

Hide file tree

Showing 3 changed files with 158 additions and 8 deletions.
diff --git a/src/components/CippCards/CippDomainCards.jsx b/src/components/CippCards/CippDomainCards.jsx
@@ -24,7 +24,6 @@ import CippButtonCard from "/src/components/CippCards/CippButtonCard";
 import { CippCodeBlock } from "/src/components/CippComponents/CippCodeBlock";
 import { CippOffCanvas } from "../CippComponents/CippOffCanvas";
 import { CippPropertyListCard } from "./CippPropertyListCard";
-import { getCippTranslation } from "../../utils/get-cipp-translation";
 import { getCippFormatting } from "../../utils/get-cipp-formatting";
 
 const ResultList = ({ passes = [], warns = [], fails = [] }) => (
@@ -244,7 +243,6 @@ function DomainResultCard({ title, data, isFetching, info, type }) {
                       value: rec.Message,
                     }))}
                   />
-
                 </>
               )}
 

diff --git a/src/pages/tenant/tools/geoiplookup/index.js b/src/pages/tenant/tools/geoiplookup/index.js
@@ -1,14 +1,164 @@
-
+import {
+  Box,
+  Button,
+  Container,
+  Grid,
+  Typography,
+  CircularProgress,
+  Skeleton,
+  Link,
+} from "@mui/material";
 import { Layout as DashboardLayout } from "/src/layouts/index.js";
+import { useForm, useWatch } from "react-hook-form";
+import CippButtonCard from "../../../../components/CippCards/CippButtonCard";
+import { Search } from "@mui/icons-material";
+import CippFormComponent from "../../../../components/CippComponents/CippFormComponent";
+import { ApiGetCall } from "../../../../api/ApiCall";
+import { getCippValidator } from "../../../../utils/get-cipp-validator";
+import { CippDataTable } from "../../../../components/CippTable/CippDataTable";
 
 const Page = () => {
-  const pageTitle = "IP Database";
+  const actions = [];
+  const formControl = useForm({ mode: "onBlur" });
+  const ip = useWatch({ control: formControl.control, name: "ipAddress" });
+  const getGeoIP = ApiGetCall({
+    url: "/api/ExecGeoIPLookup",
+    data: { ip },
+    queryKey: `geoiplookup-${ip}`,
+    waiting: false,
+  });
+
+  const handleAddToWhitelist = () => {
+    console.log(`Add IP ${ip} to Whitelist`);
+  };
+
+  const handleRemoveFromWhitelist = () => {
+    console.log(`Remove IP ${ip} from Whitelist`);
+  };
 
   return (
-    <div>
-      <h1>{pageTitle}</h1>
-      <p>This is a placeholder page for the ip database section.</p>
-    </div>
+    <Box
+      sx={{
+        flexGrow: 1,
+        py: 4,
+      }}
+    >
+      <Container maxWidth={false}>
+        <Grid container spacing={3}>
+          <Grid item xs={4}>
+            <CippButtonCard
+              title="Geo IP Check"
+              cardSx={{ display: "flex", flexDirection: "column", height: "100%" }}
+            >
+              <Grid container spacing={2}>
+                <Grid item xs={8}>
+                  <CippFormComponent
+                    formControl={formControl}
+                    name="ipAddress"
+                    type="textField"
+                    validators={{
+                      validate: (value) => getCippValidator(value, "ip"),
+                    }}
+                    placeholder="Enter IP Address"
+                    required
+                  />
+                </Grid>
+                <Grid item xs={4}>
+                  <Button
+                    type="submit"
+                    onClick={() => getGeoIP.refetch()}
+                    variant="contained"
+                    startIcon={<Search />}
+                  >
+                    Check
+                  </Button>
+                </Grid>
+              </Grid>
+            </CippButtonCard>
+          </Grid>
+
+          {/* Results Card */}
+          {getGeoIP.isFetching ? (
+            <Grid item xs={8}>
+              <CippButtonCard title="Fetching Results">
+                <Grid container spacing={2}>
+                  <Grid item xs={12} textAlign="center">
+                    <Skeleton width={"100%"} />
+                  </Grid>
+                </Grid>
+              </CippButtonCard>
+            </Grid>
+          ) : getGeoIP.data ? (
+            <Grid item xs={8}>
+              <CippButtonCard title="Geo IP Results">
+                <Grid container spacing={2}>
+                  <Grid item xs={6}>
+                    <Typography variant="body1">
+                      <strong>IP Address:</strong> {ip}
+                    </Typography>
+                    <Typography variant="body1">
+                      <strong>Country:</strong> {getGeoIP.data?.country}
+                    </Typography>
+                    <Typography variant="body1">
+                      <strong>Region:</strong> {getGeoIP.data?.region}
+                    </Typography>
+                    <Typography variant="body1">
+                      <strong>City:</strong> {getGeoIP.data?.city}
+                    </Typography>
+                  </Grid>
+                  <Grid item xs={6}>
+                    <Typography variant="body1">
+                      <strong>ISP:</strong> {getGeoIP.data?.isp}
+                    </Typography>
+                    <Typography variant="body1">
+                      <strong>Latitude:</strong> {getGeoIP.data?.lat}
+                    </Typography>
+                    <Typography variant="body1">
+                      <strong>Longitude:</strong> {getGeoIP.data?.lon}
+                    </Typography>
+                    <Typography variant="body1">
+                      <strong>Organization:</strong> {getGeoIP.data?.org}
+                    </Typography>
+                    <Typography variant="body1">
+                      <strong>Map Location:</strong>{" "}
+                      <Link
+                        href={`https://www.google.com/maps/search/${getGeoIP.data?.lat}+${getGeoIP.data?.lon}`}
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        View on Map
+                      </Link>
+                    </Typography>
+                  </Grid>
+                </Grid>
+                <Grid container spacing={2} mt={2}>
+                  <Grid item xs={6}>
+                    <Button variant="contained" color="primary" onClick={handleAddToWhitelist}>
+                      Add to Whitelist
+                    </Button>
+                  </Grid>
+                  <Grid item xs={6}>
+                    <Button variant="outlined" color="error" onClick={handleRemoveFromWhitelist}>
+                      Remove from Whitelist
+                    </Button>
+                  </Grid>
+                </Grid>
+              </CippButtonCard>
+            </Grid>
+          ) : null}
+          <Grid item xs={12}>
+            <CippDataTable
+              title={"IP Whitelist"}
+              api={{ url: "/api/ListIPWhitelist" }}
+              queryKey={"ListIPWhitelist"}
+              simple={false}
+              simpleColumns={["tenantfilter", "trustedIps", "state"]}
+              actions={actions}
+            />
+          </Grid>
+        </Grid>
+      </Container>
+    </Box>
   );
 };
 

diff --git a/src/utils/get-cipp-validator.js b/src/utils/get-cipp-validator.js
@@ -17,6 +17,8 @@ export const getCippValidator = (value, type) => {
       return /^(http|https):\/\/[^ "]+$/.test(value) || "This is not a valid URL";
     case "string":
       return typeof value === "string" || "This is not a valid string";
+    case "ip":
+      return /^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$/.test(value) || "This is not a valid IP address";
     default:
       return true;
   }