From 672dcce00a5c1c0dca06f46da04007902363926f Mon Sep 17 00:00:00 2001 From: Kartik Gupta Date: Tue, 1 Aug 2023 12:35:03 +0530 Subject: [PATCH 1/2] login routes changed & about page --- src/@types/parseable/api/about.ts | 11 ++ src/api/about.ts | 8 ++ src/api/auth.ts | 4 +- src/api/constants.ts | 2 +- src/components/Navbar/index.tsx | 63 +---------- src/components/Navbar/infoModal.tsx | 166 ++++++++++++++++++++++++++++ src/components/Navbar/styles.tsx | 101 +++++++++++++++-- src/hooks/useGetAbout.ts | 41 +++++++ 8 files changed, 321 insertions(+), 75 deletions(-) create mode 100644 src/@types/parseable/api/about.ts create mode 100644 src/api/about.ts create mode 100644 src/components/Navbar/infoModal.tsx create mode 100644 src/hooks/useGetAbout.ts diff --git a/src/@types/parseable/api/about.ts b/src/@types/parseable/api/about.ts new file mode 100644 index 00000000..c83321a7 --- /dev/null +++ b/src/@types/parseable/api/about.ts @@ -0,0 +1,11 @@ +export type AboutData ={ + commit : string; + deploymentId : string; + latestVersion : string; + license : string; + mode : string; + staging : string; + store : string; + updateAvailable : boolean; + version : string; +} \ No newline at end of file diff --git a/src/api/about.ts b/src/api/about.ts new file mode 100644 index 00000000..8fcb1258 --- /dev/null +++ b/src/api/about.ts @@ -0,0 +1,8 @@ + +import { AboutData } from "@/@types/parseable/api/about"; +import { Axios } from "./axios"; +import { ABOUT_URL } from "./constants"; + +export const getCurrentAbout = () => { + return Axios().get(ABOUT_URL); +} \ No newline at end of file diff --git a/src/api/auth.ts b/src/api/auth.ts index fd980bde..5ea63030 100644 --- a/src/api/auth.ts +++ b/src/api/auth.ts @@ -1,10 +1,10 @@ import { Axios } from './axios'; -import { HEALTH_LIVENESS_URL } from './constants'; +import { LOG_STREAM_LIST_URL } from './constants'; export const loginIn = (username: string, password: string) => { const credentials = btoa(`${username}:${password}`); - return Axios().get(HEALTH_LIVENESS_URL, { + return Axios().get(LOG_STREAM_LIST_URL, { headers: { Authorization: `Basic ${credentials}`, }, diff --git a/src/api/constants.ts b/src/api/constants.ts index 3e244fae..e1b33403 100644 --- a/src/api/constants.ts +++ b/src/api/constants.ts @@ -8,4 +8,4 @@ export const LOG_STREAMS_ALERTS_URL = (streamName: string) => `${LOG_STREAM_LIST export const LOG_STREAMS_RETRNTION_URL = (streamName: string) => `${LOG_STREAM_LIST_URL}/${streamName}/retention`; export const LOG_STREAMS_STATS_URL = (streamName: string) => `${LOG_STREAM_LIST_URL}/${streamName}/stats`; export const DELETE_STREAMS_URL = (streamName: string) => `${LOG_STREAM_LIST_URL}/${streamName}`; - +export const ABOUT_URL = `${API_V1}/about`; diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx index 24008153..deaff28f 100644 --- a/src/components/Navbar/index.tsx +++ b/src/components/Navbar/index.tsx @@ -3,12 +3,9 @@ import { Navbar as MantineNavbar, NavLink, Select, - Anchor, - Card, Box, Modal, Text, - Image, Button, TextInput, } from '@mantine/core'; @@ -26,9 +23,6 @@ import { IconTrash, } from '@tabler/icons-react'; import { FC, useEffect } from 'react'; -import docImage from '@/assets/images/doc.webp'; -import githubLogo from '@/assets/images/github-logo.webp'; -import slackLogo from '@/assets/images/slack-logo.webp'; import { useNavbarStyles } from './styles'; import { useParams } from 'react-router-dom'; import { useGetLogStreamList } from '@/hooks/useGetLogStreamList'; @@ -40,6 +34,7 @@ import dayjs from 'dayjs'; import { useDisclosure, useLocalStorage } from '@mantine/hooks'; import { LOGIN_ROUTE } from '@/constants/routes'; import { useDeleteLogStream } from '@/hooks/useDeleteLogStream'; +import InfoModal from './infoModal'; const links = [ { icon: IconZoomCode, label: 'Query', pathname: '/query' }, @@ -70,7 +65,7 @@ const Navbar: FC = (props) => { const [disableLink, setDisableLink] = useMountedState(false); const [isSubNavbarOpen, setIsSubNavbarOpen] = useMountedState(false); - const [opened, { open, close }] = useDisclosure(false); + const [opened, { open, close }] = useDisclosure(true); const [openedDelete, { close: closeDelete, open: openDelete }] = useDisclosure(); const { data: streams, error, getData, resetData: resetStreamArray } = useGetLogStreamList(); @@ -177,8 +172,6 @@ const Navbar: FC = (props) => { streamsBtn, lowerContainer, actionBtn, - helpTitle, - helpDescription, userBtn, } = classes; return ( @@ -275,61 +268,11 @@ const Navbar: FC = (props) => { - - Need any help? - Here you can find useful resources and information. - - {helpResources.map((data) => ( - - ))} - - + ); }; -const helpResources = [ - { - image: slackLogo, - title: 'Slack', - description: 'Connect with us', - href: 'https://launchpass.com/parseable', - }, - { - image: githubLogo, - title: 'GitHub', - description: 'Find resources', - href: 'https://github.com/parseablehq/parseable', - }, - { - image: docImage, - title: 'Documentation', - description: 'Learn more', - href: 'https://www.parseable.io/docs/introduction', - }, -]; - -type HelpCardProps = { - data: (typeof helpResources)[number]; -}; - -const HelpCard: FC = (props) => { - const { data } = props; - const { classes } = useNavbarStyles(); - const { helpCard, helpCardTitle, helpCardDescription } = classes; - - return ( - - - - {data.title} - {data.description} - - {data.title} - - - ); -}; export default Navbar; diff --git a/src/components/Navbar/infoModal.tsx b/src/components/Navbar/infoModal.tsx new file mode 100644 index 00000000..c85440f9 --- /dev/null +++ b/src/components/Navbar/infoModal.tsx @@ -0,0 +1,166 @@ +import { Anchor, Box, Card, Image, Modal, Table, Text } from '@mantine/core'; +import { FC, useEffect } from 'react'; +import { useInfoModalStyles } from './styles'; +import docImage from '@/assets/images/doc.webp'; +import githubLogo from '@/assets/images/github-logo.webp'; +import slackLogo from '@/assets/images/slack-logo.webp'; +import { useGetAbout } from '@/hooks/useGetAbout'; + + +const helpResources = [ + { + image: slackLogo, + title: 'Slack', + description: 'Connect with us', + href: 'https://launchpass.com/parseable', + }, + { + image: githubLogo, + title: 'GitHub', + description: 'Find resources', + href: 'https://github.com/parseablehq/parseable', + }, + { + image: docImage, + title: 'Documentation', + description: 'Learn more', + href: 'https://www.parseable.io/docs/introduction', + }, +]; + +type HelpCardProps = { + data: (typeof helpResources)[number]; +}; + +const HelpCard: FC = (props) => { + const { data } = props; + + const { classes } = useInfoModalStyles(); + const { helpCard, helpCardTitle, helpCardDescription } = classes; + + return ( + + + + {data.title} + {data.description} + + {data.title} + + + ); +}; + +type InfoModalProps = { + opened: boolean; + close(): void; +}; + +const InfoModal: FC = (props) => { + const { opened, close } = props; + + const { data, loading, error, getAbout, resetData } = useGetAbout(); + useEffect(() => { + if (data) { + resetData(); + } + getAbout(); + return () => { + resetData(); + }; + }, []); + + const { classes } = useInfoModalStyles(); + const { + container, + innerContainer, + infoModal, + infoModalTitle, + infoModalDescription, + helpTitle, + helpDescription, + aboutText, + aboutTitle, + } = classes; + + return ( + + + Welcome to Parseable! + + + We are a new kind of log management platform that helps you understand your logs in seconds. We are currently in + beta and would love your feedback. + + + + {error ? ( + Error... + ) : loading ? ( + Loading... + ) : data ? ( + <> + Information + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Commit{data.commit}
Deployment Id{data.deploymentId}
Latest Version{data.latestVersion}
License{data.license}
Mode{data.mode}
Staging{data.staging}
Store{data.store}
Version{data.version}
+ + ) : null} + + + Need any help? + Here you can find useful resources and information. + + + {helpResources.map((data) => ( + + ))} + + + + + ); +}; + +export default InfoModal; diff --git a/src/components/Navbar/styles.tsx b/src/components/Navbar/styles.tsx index e1ec5295..7b8db198 100644 --- a/src/components/Navbar/styles.tsx +++ b/src/components/Navbar/styles.tsx @@ -2,7 +2,7 @@ import { createStyles } from '@mantine/core'; import { heights, widths } from '../Mantine/sizing'; export const useNavbarStyles = createStyles((theme) => { - const { colors, radius, fontSizes, shadows, spacing } = theme; + const { colors, radius, fontSizes } = theme; const { fontWeights, sizing } = theme.other; const white = colors.white[0]; const sColor = colors.brandSecondary[0]; @@ -81,11 +81,96 @@ export const useNavbarStyles = createStyles((theme) => { background: white, }, }, + userContainer: { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, + userText: { + fontSize: fontSizes.sm, + }, + }; +}); + +//infoModal, infoModalTitle, infoModalDescription +export const useInfoModalStyles = createStyles((theme) => { + const { colors, radius, fontSizes, shadows, spacing } = theme; + const { fontWeights } = theme.other; + const white = colors.white[0]; + const sColor = colors.brandSecondary[0]; + const defaultRadius = radius[theme.defaultRadius as string]; + + return { + container:{ + height: '100%', + width: '100%', + display: 'flex', + + }, + innerContainer: { + height: '100%', + width: '50%', + padding: spacing.md, + + }, + infoModal: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + background: white, + color: theme.colors.gray[7], + fontFamily: theme.fontFamily, + fontSize: fontSizes.md, + fontWeight: fontWeights.normal, + lineHeight: 'normal', + padding: '24px', + borderRadius: defaultRadius, + boxShadow: shadows.sm, + }, + infoModalTitle: { + fontSize: fontSizes.md, + textAlign: 'center', + color: colors.gray[7], + fontWeight: fontWeights.bold, + }, + infoModalDescription: { + fontSize: fontSizes.sm, + textAlign: 'center', + color: colors.dimmed[0], + marginTop: spacing.xs, + + '&::after': { + content: '""', + borderRadius: defaultRadius, + display: 'block', + backgroundColor: sColor, + width: widths[14], + height: heights['0.5'], + marginTop: theme.spacing.sm, + marginLeft: 'auto', + marginRight: 'auto', + }, + }, + + aboutTitle: { + fontSize: fontSizes.md, + textAlign: 'center', + color: colors.gray[7], + fontWeight: fontWeights.bold, + }, + aboutText: { + "& tr>td:last-of-type":{ + fontSize: fontSizes.sm, + color: colors.dimmed[0], + marginTop: spacing.xs, + } + }, helpTitle: { fontSize: fontSizes.md, textAlign: 'center', - color: white, + color: colors.gray[7], fontWeight: fontWeights.bold, }, @@ -139,14 +224,6 @@ export const useNavbarStyles = createStyles((theme) => { color: colors.dimmed[0], fontSize: fontSizes.sm, }, - - userContainer: { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - }, - userText: { - fontSize: fontSizes.sm, - }, }; -}); +} +); diff --git a/src/hooks/useGetAbout.ts b/src/hooks/useGetAbout.ts new file mode 100644 index 00000000..1ec78fb3 --- /dev/null +++ b/src/hooks/useGetAbout.ts @@ -0,0 +1,41 @@ +import { StatusCodes } from 'http-status-codes'; +import useMountedState from './useMountedState'; +import { getCurrentAbout } from '@/api/about'; +import { AboutData } from '@/@types/parseable/api/about'; + +export const useGetAbout = () => { + const [data, setData] = useMountedState(null); + const [error, setError] = useMountedState(null); + const [loading, setLoading] = useMountedState(false); + + const getAbout = async () => { + try { + setLoading(true); + setError(null); + const res = await getCurrentAbout(); + + switch (res.status) { + case StatusCodes.OK: { + + setData(res.data); + break; + } + default: { + setError('Failed to get ALert'); + console.error(res); + } + } + } catch(error) { + setError('Failed to get ALert'); + console.error(error); + } finally { + setLoading(false); + } + }; + + const resetData = () => { + setData(null); + }; + + return { data, error, loading, getAbout, resetData }; +}; From 5f48fc4676ab39eeb712e323373e57cf904d71b9 Mon Sep 17 00:00:00 2001 From: Kartik Gupta Date: Tue, 1 Aug 2023 12:57:37 +0530 Subject: [PATCH 2/2] About Icon added --- src/components/Navbar/index.tsx | 6 +- src/components/Navbar/infoModal.tsx | 45 ++++++--------- src/components/Navbar/styles.tsx | 89 ++++++++++++++--------------- 3 files changed, 64 insertions(+), 76 deletions(-) diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx index deaff28f..bbe1f343 100644 --- a/src/components/Navbar/index.tsx +++ b/src/components/Navbar/index.tsx @@ -14,13 +14,13 @@ import { IconReportAnalytics, IconFileAlert, IconReload, - IconHelpCircle, IconLogout, IconUser, IconBinaryTree2, IconTableShortcut, IconSettings, IconTrash, + IconInfoCircle, } from '@tabler/icons-react'; import { FC, useEffect } from 'react'; import { useNavbarStyles } from './styles'; @@ -230,8 +230,8 @@ const Navbar: FC = (props) => { } className={userBtn} component="a" /> } + label="About" + icon={} className={actionBtn} component="a" onClick={open} diff --git a/src/components/Navbar/infoModal.tsx b/src/components/Navbar/infoModal.tsx index c85440f9..e5cfe3f9 100644 --- a/src/components/Navbar/infoModal.tsx +++ b/src/components/Navbar/infoModal.tsx @@ -1,4 +1,4 @@ -import { Anchor, Box, Card, Image, Modal, Table, Text } from '@mantine/core'; +import { Anchor, Box, Image, Modal, Table, Text, Tooltip } from '@mantine/core'; import { FC, useEffect } from 'react'; import { useInfoModalStyles } from './styles'; import docImage from '@/assets/images/doc.webp'; @@ -6,7 +6,6 @@ import githubLogo from '@/assets/images/github-logo.webp'; import slackLogo from '@/assets/images/slack-logo.webp'; import { useGetAbout } from '@/hooks/useGetAbout'; - const helpResources = [ { image: slackLogo, @@ -36,18 +35,16 @@ const HelpCard: FC = (props) => { const { data } = props; const { classes } = useInfoModalStyles(); - const { helpCard, helpCardTitle, helpCardDescription } = classes; + const { HelpIconBox, helpToolip } = classes; return ( - - - - {data.title} - {data.description} - - {data.title} - - + + + + {data.title} + + + ); }; @@ -75,12 +72,12 @@ const InfoModal: FC = (props) => { container, innerContainer, infoModal, - infoModalTitle, - infoModalDescription, helpTitle, helpDescription, aboutText, aboutTitle, + aboutDescription, + helpIconContainer, } = classes; return ( @@ -92,24 +89,20 @@ const InfoModal: FC = (props) => { withCloseButton={false} size="xl" centered> - - Welcome to Parseable! - - - We are a new kind of log management platform that helps you understand your logs in seconds. We are currently in - beta and would love your feedback. - + About {error ? ( - Error... + Error... ) : loading ? ( - Loading... + Loading... ) : data ? ( <> - Information + + Here you can find useful information about your Parseable instance. + - +
@@ -152,7 +145,7 @@ const InfoModal: FC = (props) => { Need any help? Here you can find useful resources and information. - + {helpResources.map((data) => ( ))} diff --git a/src/components/Navbar/styles.tsx b/src/components/Navbar/styles.tsx index 7b8db198..8ec68ca5 100644 --- a/src/components/Navbar/styles.tsx +++ b/src/components/Navbar/styles.tsx @@ -1,5 +1,5 @@ import { createStyles } from '@mantine/core'; -import { heights, widths } from '../Mantine/sizing'; +import { heights, sizing, widths } from '../Mantine/sizing'; export const useNavbarStyles = createStyles((theme) => { const { colors, radius, fontSizes } = theme; @@ -92,7 +92,7 @@ export const useNavbarStyles = createStyles((theme) => { }; }); -//infoModal, infoModalTitle, infoModalDescription +//infoModal, infoModalTitle, infoModalDescription export const useInfoModalStyles = createStyles((theme) => { const { colors, radius, fontSizes, shadows, spacing } = theme; const { fontWeights } = theme.other; @@ -101,17 +101,13 @@ export const useInfoModalStyles = createStyles((theme) => { const defaultRadius = radius[theme.defaultRadius as string]; return { - container:{ + container: { height: '100%', width: '100%', - display: 'flex', }, innerContainer: { - height: '100%', - width: '50%', padding: spacing.md, - }, infoModal: { display: 'flex', @@ -128,14 +124,13 @@ export const useInfoModalStyles = createStyles((theme) => { borderRadius: defaultRadius, boxShadow: shadows.sm, }, - infoModalTitle: { + aboutTitle: { fontSize: fontSizes.md, textAlign: 'center', color: colors.gray[7], fontWeight: fontWeights.bold, }, - - infoModalDescription: { + aboutDescription: { fontSize: fontSizes.sm, textAlign: 'center', color: colors.dimmed[0], @@ -151,21 +146,30 @@ export const useInfoModalStyles = createStyles((theme) => { marginTop: theme.spacing.sm, marginLeft: 'auto', marginRight: 'auto', + marginBottom: spacing.sm, }, }, - - aboutTitle: { - fontSize: fontSizes.md, - textAlign: 'center', - color: colors.gray[7], - fontWeight: fontWeights.bold, - }, aboutText: { - "& tr>td:last-of-type":{ - fontSize: fontSizes.sm, - color: colors.dimmed[0], - marginTop: spacing.xs, - } + '& tr': { + transition: 'transform .2s ease-in-out', + '&: hover': { + transform: 'scale(1.05)', + " & td " : { + border: `${sizing.px} solid ${colors.gray[2]}`, + } + + }, + }, + + + '& tr>td:last-of-type': { + fontSize: fontSizes.sm, + color: colors.dimmed[0], + lineHeight: 'normal', + '&: hover': { + color: sColor, + } + }, }, helpTitle: { fontSize: fontSizes.md, @@ -190,40 +194,31 @@ export const useInfoModalStyles = createStyles((theme) => { marginTop: theme.spacing.sm, marginLeft: 'auto', marginRight: 'auto', + marginBottom: '31px', }, }, - helpCard: { - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', - boxShadow: shadows.sm, - marginTop: spacing.sm, + HelpIconBox: { + marginLeft: spacing.md, transition: 'transform .2s ease-in-out', - '&:hover': { transform: 'scale(1.05)', }, }, - helpCardTitle: { - fontWeight: fontWeights.semibold, - - '&::after': { - content: '""', - display: 'block', - backgroundColor: white, - width: widths[14], - height: heights['0.5'], - marginTop: spacing.xs, - marginBottom: spacing.xs, - }, + helpToolip: { + "& .mantine-Tooltip-tooltip": { + fontWeight: fontWeights.semibold, + fontSize: fontSizes.sm, + color: colors.gray[7], + backgroundColor: colors.black[0], + } }, - - helpCardDescription: { - color: colors.dimmed[0], - fontSize: fontSizes.sm, + helpIconContainer: { + display: 'flex', + alignItems: 'center', + width: '100%', + justifyContent: 'center', }, }; -} -); +});
Commit