Feature/custom dns tab (#483)

* custom dns for public for icon * custom dns * custom dns add tab other ui change for in * custom dns add status chips * bug fix in border color bg color * border shadow add * all elint and other fix * remove unuse * commit fix done * icon fix * circle icon fix * remove rect * fix in custom dns multiple show
omnistrate-oss · Jan 7, 2025 · addf1b3 · addf1b3
1 parent 0d845b1
commit addf1b3
Show file tree

Hide file tree

Showing 13 changed files with 1,280 additions and 131 deletions.
diff --git a/pages/access/[serviceId]/[environmentId]/[resourceId]/[resourceInstanceId].js b/pages/access/[serviceId]/[environmentId]/[resourceId]/[resourceInstanceId].js
@@ -43,6 +43,7 @@ import {
   selectInstanceDetailsSummaryVisibility,
   toggleInstanceDetailsSummaryVisibility,
 } from "src/slices/genericSlice";
+import ResourceCustomDNS from "src/components/ResourceInstance/Connectivity/ResourceCustomDNS";
 
 export const getServerSideProps = async () => {
   return {
@@ -148,14 +149,38 @@ function ResourceInstance() {
     [resourceType]
   );
 
+  const checkCustomDNSEndpoint = (resources) => {
+    if (
+      resources.primary?.customDNSEndpoint &&
+      resources.primary?.customDNSEndpoint.enabled === true
+    ) {
+      return true;
+    }
+
+    if (Array.isArray(resources.others)) {
+      return resources.others.some(
+        (resource) =>
+          resource?.customDNSEndpoint &&
+          resource?.customDNSEndpoint.enabled === true
+      );
+    }
+
+    return false;
+  };
+
   const tabs = getTabs(
     resourceInstanceData?.isMetricsEnabled,
     resourceInstanceData?.isLogsEnabled,
     resourceInstanceData?.active,
     isResourceBYOA,
     isCliManagedResource,
     resourceType,
-    resourceInstanceData?.backupStatus?.backupPeriodInHours
+    resourceInstanceData?.backupStatus?.backupPeriodInHours,
+    checkCustomDNSEndpoint(
+      resourceInstanceData
+        ? resourceInstanceData?.connectivity?.globalEndpoints
+        : {}
+    )
   );
 
   let pageTitle = "Resource";
@@ -542,6 +567,15 @@ function ResourceInstance() {
           }
         />
       )}
+      {currentTab === tabs.customDNS && (
+        <ResourceCustomDNS
+          globalEndpoints={resourceInstanceData.connectivity.globalEndpoints}
+          context="access"
+          accessQueryParams={queryData}
+          refetchInstance={resourceInstanceQuery.refetch}
+        />
+      )}
+
       <SideDrawerRight
         size="xlarge"
         open={supportDrawerOpen}
@@ -566,7 +600,8 @@ function getTabs(
   isResourceBYOA,
   isCliManagedResource,
   resourceType,
-  isBackup
+  isBackup,
+  isCustomDNS
 ) {
   const tabs = {
     resourceInstanceDetails: "Resource Instance Details",
@@ -586,6 +621,9 @@ function getTabs(
   if (isBackup) {
     tabs["backups"] = "Backups";
   }
+  if (isCustomDNS) {
+    tabs["customDNS"] = "Custom DNS";
+  }
 
   return tabs;
 }

diff --git a/src/components/CustomStatusChips/CustomStatusChips.tsx b/src/components/CustomStatusChips/CustomStatusChips.tsx
@@ -0,0 +1,57 @@
+import { Stack, SxProps, useTheme, Theme, Box } from "@mui/material";
+import { Text } from "../Typography/Typography";
+import { ReactNode } from "react";
+
+type CustomStatusChipsProps = {
+  icon?: ReactNode;
+  children?: ReactNode;
+  containerStyles?: SxProps<Theme>;
+  textStyles?: SxProps<Theme>;
+  iconStyles?: SxProps<Theme> & { alignItems?: string; display?: string };
+};
+
+export default function CustomStatusChips(props: CustomStatusChipsProps) {
+  const {
+    icon,
+    children,
+    containerStyles = {},
+    textStyles = {},
+    iconStyles = {},
+  } = props;
+  const theme = useTheme();
+
+  return (
+    <Stack
+      direction="row"
+      gap="8px"
+      alignItems="center"
+      marginTop="8px"
+      sx={{
+        borderRadius: "16px",
+        backgroundColor: "rgba(254, 251, 232, 1)",
+        border: "1px solid rgba(254, 247, 195, 1)",
+        padding: "5px 8px",
+        width: "fit-content",
+        ...containerStyles,
+      }}
+    >
+      {icon && (
+        <Box sx={{ display: "flex", alignItems: "center", ...iconStyles }}>
+          {icon}
+        </Box>
+      )}
+      <Text
+        color={theme.palette.warning.main}
+        weight="regular"
+        size="small"
+        sx={{
+          color: "#B54708",
+          display: "inline",
+          ...textStyles,
+        }}
+      >
+        {children}
+      </Text>
+    </Stack>
+  );
+}
diff --git a/src/components/Icons/AlertTrianglePITR/AlertTrianglePITR.jsx b/src/components/Icons/AlertTrianglePITR/AlertTrianglePITR.jsx
@@ -0,0 +1,26 @@
+import React from "react";
+
+function AlertTrianglePITR(props) {
+  const { height = 21, width = 24, color = "#B54708", ...restProps } = props;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      fill="none"
+      viewBox="0 0 21 24"
+      {...restProps}
+    >
+      <path
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M12 8v4m0 4h.01M10.615 2.892 2.39 17.098c-.456.788-.684 1.182-.65 1.506a1 1 0 0 0 .406.705c.263.191.718.191 1.629.191h16.45c.91 0 1.365 0 1.628-.191a1 1 0 0 0 .407-.705c.034-.324-.195-.718-.65-1.506L13.383 2.892c-.454-.785-.681-1.178-.978-1.31a1 1 0 0 0-.813 0c-.296.132-.523.525-.978 1.31Z"
+      />
+    </svg>
+  );
+}
+
+export default AlertTrianglePITR;
diff --git a/src/components/Icons/CircleCheck/CircleCheckWithBorderIcon.jsx b/src/components/Icons/CircleCheck/CircleCheckWithBorderIcon.jsx
@@ -0,0 +1,31 @@
+function CircleCheckWithBorderIcon(props) {
+  const { height = 16, width = 16, ...restProps } = props;
+
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...restProps}
+    >
+      <g clipPath="url(#clip0_6143_51918)">
+        <path
+          d="M4.99967 8.00016L6.99967 10.0002L10.9997 6.00016M14.6663 8.00016C14.6663 11.6821 11.6816 14.6668 7.99967 14.6668C4.31778 14.6668 1.33301 11.6821 1.33301 8.00016C1.33301 4.31826 4.31778 1.3335 7.99967 1.3335C11.6816 1.3335 14.6663 4.31826 14.6663 8.00016Z"
+          stroke="#079455"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_6143_51918">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+export default CircleCheckWithBorderIcon;
diff --git a/src/components/Icons/DNSIcon/PrivateIcon.tsx b/src/components/Icons/DNSIcon/PrivateIcon.tsx
@@ -0,0 +1,131 @@
+const PrivateIcon = (props: any) => (
+  <svg
+    width="36"
+    height="36"
+    viewBox="0 0 36 36"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g filter="url(#filter0_dii_6284_37666)">
+      <path
+        d="M2 7C2 3.68629 4.68629 1 8 1H28C31.3137 1 34 3.68629 34 7V27C34 30.3137 31.3137 33 28 33H8C4.68629 33 2 30.3137 2 27V7Z"
+        fill="#535862"
+      />
+      <path
+        d="M3 7C3 4.23858 5.23858 2 8 2H28C30.7614 2 33 4.23858 33 7V27C33 29.7614 30.7614 32 28 32H8C5.23858 32 3 29.7614 3 27V7Z"
+        stroke="url(#paint0_linear_6284_37666)"
+        strokeWidth="2"
+      />
+      <path
+        d="M25.2972 22.3255H22.5145C22.4285 22.3255 22.346 22.2914 22.2851 22.2306C22.2243 22.1697 22.1902 22.0872 22.1902 22.0012C22.1902 21.9152 22.2243 21.8327 22.2851 21.7719C22.346 21.7111 22.4285 21.6769 22.5145 21.6769H25.2972C26.1572 21.6756 26.985 21.3489 27.6141 20.7625C28.2432 20.176 28.6271 19.3732 28.6887 18.5154C28.7503 17.6575 28.485 16.8081 27.9462 16.1378C27.4073 15.4675 26.6347 15.0259 25.7837 14.9018C25.7367 14.8952 25.6918 14.8785 25.652 14.8527C25.6122 14.8269 25.5785 14.7928 25.5534 14.7526C25.5284 14.7123 25.5126 14.667 25.507 14.62C25.5014 14.5729 25.5061 14.5252 25.521 14.4801C25.7686 13.7486 25.8385 12.9687 25.725 12.2048C25.6114 11.4409 25.3176 10.715 24.8679 10.0872C24.4182 9.45937 23.8255 8.94763 23.1388 8.59429C22.4521 8.24096 21.6911 8.05619 20.9188 8.05527C19.938 8.0479 18.9781 8.33939 18.167 8.89094C17.3559 9.4425 16.732 10.228 16.3783 11.1428C16.3621 11.1843 16.3375 11.222 16.3061 11.2536C16.2747 11.2852 16.2372 11.3099 16.1958 11.3264C16.1544 11.3428 16.1101 11.3505 16.0656 11.3491C16.0211 11.3476 15.9774 11.3371 15.9372 11.318C15.4673 11.0931 14.9532 10.9757 14.4323 10.9742C13.4861 10.9742 12.5787 11.3501 11.9097 12.0191C11.2406 12.6882 10.8647 13.5956 10.8647 14.5418C10.8647 14.6278 10.8306 14.7103 10.7698 14.7711C10.7089 14.8319 10.6264 14.8661 10.5404 14.8661C9.63725 14.8859 8.77893 15.2636 8.15429 15.9163C7.52964 16.5689 7.18983 17.4429 7.20961 18.3461C7.2294 19.2493 7.60715 20.1076 8.25978 20.7322C8.91241 21.3569 9.78644 21.6967 10.6896 21.6769H13.4723C13.5583 21.6769 13.6408 21.7111 13.7016 21.7719C13.7625 21.8327 13.7966 21.9152 13.7966 22.0012C13.7966 22.0872 13.7625 22.1697 13.7016 22.2306C13.6408 22.2914 13.5583 22.3255 13.4723 22.3255H10.7026C9.66531 22.3331 8.66464 21.9425 7.90682 21.2342C7.149 20.5259 6.69178 19.5539 6.62941 18.5184C6.56703 17.483 6.90425 16.4631 7.57156 15.6689C8.23887 14.8748 9.18541 14.3668 10.2161 14.2499C10.2901 13.183 10.7668 12.1841 11.5496 11.4555C12.3324 10.7269 13.3629 10.323 14.4323 10.3255C14.941 10.3246 15.4456 10.4169 15.921 10.598C16.505 9.35351 17.5328 8.37209 18.8029 7.84618C20.073 7.32027 21.4938 7.28781 22.7866 7.75515C24.0794 8.2225 25.151 9.15593 25.7912 10.3724C26.4315 11.5889 26.5942 13.0007 26.2475 14.331C27.2116 14.564 28.0569 15.1425 28.6232 15.9569C29.1895 16.7713 29.4376 17.765 29.3205 18.75C29.2035 19.735 28.7293 20.6429 27.9879 21.3018C27.2464 21.9607 26.2891 22.325 25.2972 22.3255Z"
+        fill="white"
+      />
+      <path
+        d="M22.0638 26.5935H13.9363C13.7307 26.5935 13.5335 26.5118 13.3882 26.3664C13.2428 26.2211 13.1611 26.0239 13.1611 25.8183V20.6291C13.1611 20.4236 13.2428 20.2264 13.3882 20.081C13.5335 19.9357 13.7307 19.854 13.9363 19.854H22.0638C22.2694 19.854 22.4666 19.9357 22.6119 20.081C22.7573 20.2264 22.839 20.4236 22.839 20.6291V25.8183C22.839 26.0239 22.7573 26.2211 22.6119 26.3664C22.4666 26.5118 22.2694 26.5935 22.0638 26.5935ZM13.9363 20.5027C13.9027 20.5027 13.8705 20.516 13.8468 20.5397C13.8231 20.5634 13.8098 20.5956 13.8098 20.6291V25.8183C13.8098 25.8519 13.8231 25.884 13.8468 25.9078C13.8705 25.9315 13.9027 25.9448 13.9363 25.9448H22.0638C22.0804 25.9448 22.0969 25.9415 22.1122 25.9352C22.1276 25.9288 22.1415 25.9195 22.1533 25.9078C22.165 25.896 22.1743 25.8821 22.1807 25.8667C22.1871 25.8514 22.1903 25.8349 22.1903 25.8183V20.6291C22.1903 20.6125 22.1871 20.5961 22.1807 20.5807C22.1743 20.5654 22.165 20.5514 22.1533 20.5397C22.1415 20.528 22.1276 20.5186 22.1122 20.5123C22.0969 20.5059 22.0804 20.5027 22.0638 20.5027H13.9363Z"
+        fill="white"
+      />
+      <path
+        d="M20.9675 20.5028H15.0323C14.9463 20.5028 14.8638 20.4686 14.803 20.4078C14.7422 20.347 14.708 20.2645 14.708 20.1785V17.7201C14.708 16.8471 15.0548 16.0097 15.6722 15.3924C16.2895 14.775 17.1268 14.4282 17.9999 14.4282C18.873 14.4282 19.7103 14.775 20.3276 15.3924C20.945 16.0097 21.2918 16.8471 21.2918 17.7201V20.1785C21.2918 20.2645 21.2576 20.347 21.1968 20.4078C21.136 20.4686 21.0535 20.5028 20.9675 20.5028ZM15.3567 19.8542H20.6431V17.7201C20.6431 17.0191 20.3647 16.3468 19.869 15.8511C19.3733 15.3554 18.7009 15.0769 17.9999 15.0769C17.2989 15.0769 16.6265 15.3554 16.1308 15.8511C15.6351 16.3468 15.3567 17.0191 15.3567 17.7201V19.8542Z"
+        fill="white"
+      />
+      <path
+        d="M18.0002 23.8657C17.7858 23.8657 17.5763 23.8021 17.3981 23.6829C17.2199 23.5637 17.081 23.3944 16.9991 23.1962C16.9172 22.9981 16.896 22.7802 16.938 22.5699C16.9801 22.3597 17.0836 22.1667 17.2354 22.0153C17.3872 21.864 17.5806 21.7611 17.7909 21.7196C18.0012 21.6782 18.2191 21.7001 18.417 21.7826C18.6149 21.8651 18.7839 22.0044 18.9025 22.183C19.0211 22.3616 19.0841 22.5713 19.0835 22.7857C19.0826 23.0724 18.9681 23.3471 18.7651 23.5496C18.562 23.752 18.287 23.8657 18.0002 23.8657ZM18.0002 22.3511C17.9143 22.3511 17.8303 22.3766 17.7588 22.4244C17.6873 22.4721 17.6316 22.54 17.5987 22.6194C17.5658 22.6988 17.5572 22.7862 17.574 22.8705C17.5908 22.9548 17.6321 23.0322 17.6929 23.093C17.7537 23.1538 17.8311 23.1952 17.9154 23.2119C17.9997 23.2287 18.0871 23.2201 18.1665 23.1872C18.246 23.1543 18.3138 23.0986 18.3616 23.0272C18.4093 22.9557 18.4348 22.8717 18.4348 22.7857C18.4348 22.7286 18.4236 22.6721 18.4017 22.6194C18.3799 22.5667 18.3479 22.5188 18.3075 22.4784C18.2672 22.438 18.2193 22.406 18.1665 22.3842C18.1138 22.3624 18.0573 22.3511 18.0002 22.3511Z"
+        fill="white"
+      />
+      <path
+        d="M18.0001 24.7449C17.9141 24.7449 17.8316 24.7107 17.7708 24.6499C17.71 24.589 17.6758 24.5065 17.6758 24.4205V23.5416C17.6758 23.4556 17.71 23.3731 17.7708 23.3123C17.8316 23.2515 17.9141 23.2173 18.0001 23.2173C18.0861 23.2173 18.1686 23.2515 18.2294 23.3123C18.2903 23.3731 18.3244 23.4556 18.3244 23.5416V24.4205C18.3244 24.5065 18.2903 24.589 18.2294 24.6499C18.1686 24.7107 18.0861 24.7449 18.0001 24.7449Z"
+        fill="white"
+      />
+    </g>
+    <defs>
+      <filter
+        id="filter0_dii_6284_37666"
+        x="0"
+        y="0"
+        width="36"
+        height="36"
+        filterUnits="userSpaceOnUse"
+        colorInterpolationFilters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="1" />
+        <feGaussianBlur stdDeviation="1" />
+        <feComposite in2="hardAlpha" operator="out" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.05 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow_6284_37666"
+        />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="effect1_dropShadow_6284_37666"
+          result="shape"
+        />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="-2" />
+        <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.05 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="shape"
+          result="effect2_innerShadow_6284_37666"
+        />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feMorphology
+          radius="1"
+          operator="erode"
+          in="SourceAlpha"
+          result="effect3_innerShadow_6284_37666"
+        />
+        <feOffset />
+        <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.18 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="effect2_innerShadow_6284_37666"
+          result="effect3_innerShadow_6284_37666"
+        />
+      </filter>
+      <linearGradient
+        id="paint0_linear_6284_37666"
+        x1="18"
+        y1="1"
+        x2="18"
+        y2="33"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="white" stopOpacity="0.12" />
+        <stop offset="1" stopColor="white" stopOpacity="0" />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+export default PrivateIcon;