) => (
11 |
12 | {value === index && {children}}
13 |
14 | );
15 |
--------------------------------------------------------------------------------
/frontend/src/components/WorkspaceSettings/WorkspaceSettings.helpers.ts:
--------------------------------------------------------------------------------
1 | type Selected = readonly number[];
2 |
3 | export const selectMultiple = (
4 | event: React.MouseEvent,
5 | id: number,
6 | selected: Selected,
7 | setSelected: React.Dispatch>
8 | ) => {
9 | const selectedIndex = selected.indexOf(id);
10 | let newSelected: readonly number[] = [];
11 |
12 | if (selectedIndex === -1) {
13 | newSelected = newSelected.concat(selected, id);
14 | } else if (selectedIndex === 0) {
15 | newSelected = newSelected.concat(selected.slice(1));
16 | } else if (selectedIndex === selected.length - 1) {
17 | newSelected = newSelected.concat(selected.slice(0, -1));
18 | } else if (selectedIndex > 0) {
19 | newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));
20 | }
21 |
22 | setSelected(newSelected);
23 | };
24 |
25 | export const isSelected = (id: number, selected: Selected) => selected.indexOf(id) !== -1;
26 |
--------------------------------------------------------------------------------
/frontend/src/components/WorkspaceSettings/components/Members/Members.type.ts:
--------------------------------------------------------------------------------
1 | import { MemberSchema } from 'api/generated';
2 |
3 | export interface MembersActionDialog {
4 | open: boolean;
5 | closeDialog: () => void;
6 | }
7 |
8 | export interface MembersActionDialogWithRefetch extends MembersActionDialog {
9 | refetchMembers: () => void;
10 | }
11 |
12 | export interface MembersActionDialogWithMember extends MembersActionDialogWithRefetch {
13 | member: MemberSchema;
14 | }
15 |
16 | export enum MembersActionDialogOptions {
17 | invite = 'invite',
18 | edit = 'edit',
19 | remove = 'remove',
20 | removeSelected = 'removeSelected',
21 | assignModels = 'assignModels',
22 | deleteWorkspace = 'deleteWorkspace'
23 | }
24 |
--------------------------------------------------------------------------------
/frontend/src/components/WorkspaceSettings/components/Members/components/MembersActionDialogContentLayout.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { Stack, StackProps } from '@mui/material';
4 |
5 | interface MembersActionDialogContentLayoutProps extends StackProps {
6 | children: React.ReactNode;
7 | }
8 |
9 | export const MembersActionDialogContentLayout = ({
10 | children,
11 | ...otherProps
12 | }: MembersActionDialogContentLayoutProps) => (
13 |
14 | {children}
15 |
16 | );
17 |
--------------------------------------------------------------------------------
/frontend/src/components/WorkspaceSettings/components/ModelsTab/components/ModelsTabTable/ModelsTabTableHead.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import TableHead, { TableHeadProps } from '@mui/material/TableHead';
4 |
5 | import { StyledTableRow, StyledTableCellBold } from '../../../../WorkspaceSettings.styles';
6 |
7 | import { constants } from '../../modelsTab.constants';
8 |
9 | const { actions, members, name } = constants.table;
10 |
11 | export const ModelsTabTableHead = ({ ...props }: TableHeadProps) => (
12 |
13 |
14 | {name}
15 | {members}
16 |
17 | {actions}
18 |
19 |
20 |
21 | );
22 |
--------------------------------------------------------------------------------
/frontend/src/components/WorkspaceSettings/components/ModelsTab/modelsTab.constants.ts:
--------------------------------------------------------------------------------
1 | export const constants = {
2 | searchFieldPlaceholder: 'Search Models...',
3 | table: {
4 | ariaLabel: 'workspace settings models table',
5 | name: 'Model name',
6 | members: 'Members',
7 | actions: 'Actions'
8 | },
9 | editMembers: 'Edit members',
10 | dialog: {
11 | inputPlaceholder: 'Search members...',
12 | submitButtonLabel: 'Save'
13 | }
14 | };
15 |
--------------------------------------------------------------------------------
/frontend/src/components/WorkspaceSettings/components/PermissionError/NotAdminDialog.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useNavigate } from 'react-router-dom';
3 |
4 | import { DeletionDialog } from 'components/lib/components/Dialog/DeletionDialog/DeletionDialog';
5 |
6 | const constants = {
7 | notAdminTitle: 'Access Forbidden',
8 | notAdminBtnLabel: 'Return',
9 | notAdminText: 'Your user does not have admin rights,\n please contact your admin to get permissions'
10 | };
11 |
12 | const NotAdminDialog = () => {
13 | const navigate = useNavigate();
14 |
15 | return (
16 | navigate('/')}
20 | submitButtonLabel={constants.notAdminBtnLabel}
21 | closeDialog={() => navigate('/')}
22 | messageStart={constants.notAdminText}
23 | />
24 | );
25 | };
26 |
27 | export default NotAdminDialog;
28 |
--------------------------------------------------------------------------------
/frontend/src/components/WorkspaceSettings/useOrganizationMembers.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 |
3 | import { useRetrieveOrganizationMembersApiV1OrganizationMembersGet } from 'api/generated';
4 |
5 | export const useOrganizationMembers = () => {
6 | const {
7 | data: organizationMembers = [],
8 | isLoading: isOrganizationMembersLoading,
9 | refetch
10 | } = useRetrieveOrganizationMembersApiV1OrganizationMembersGet();
11 |
12 | useEffect(() => {
13 | organizationMembers.length && setOrganizationMembersList(organizationMembers);
14 | }, [organizationMembers]);
15 |
16 | const [organizationMembersList, setOrganizationMembersList] = useState(organizationMembers);
17 |
18 | const refetchOrganizationMembers = () => refetch();
19 |
20 | return {
21 | isOrganizationMembersLoading,
22 | refetchOrganizationMembers,
23 | organizationMembersList,
24 | setOrganizationMembersList
25 | };
26 | };
27 |
--------------------------------------------------------------------------------
/frontend/src/components/base/Button/Button.styles.tsx:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import { Button } from '@mui/material';
3 | import { theme } from 'components/lib/theme';
4 |
5 | interface ButtonProps {
6 | fontSize?: string;
7 | margin?: string;
8 | }
9 |
10 | const WhiteGrayButton = styled(Button)`
11 | && {
12 | background: ${theme.palette.grey[300]};
13 | color: ${theme.palette.grey[300]};
14 | margin: ${p => p.margin};
15 | font-size: ${p => p.fontSize};
16 | border: none;
17 | box-shadow: none;
18 | justify-content: center;
19 |
20 | :hover {
21 | background: ${theme.palette.grey[300]};
22 | color: ${theme.palette.grey[300]};
23 | box-shadow: none;
24 | }
25 | }
26 | `;
27 |
28 | export { WhiteGrayButton };
29 |
--------------------------------------------------------------------------------
/frontend/src/components/base/Button/MUIBaseButton.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import Button, { ButtonProps } from '@mui/material/Button';
4 |
5 | interface MUIBaseButtonProps extends ButtonProps {
6 | children: React.ReactNode;
7 | }
8 |
9 | export const MUIBaseButton = ({ children, sx, ...props }: MUIBaseButtonProps) => (
10 |
20 | );
21 |
--------------------------------------------------------------------------------
/frontend/src/components/base/DatePicker/DatePicker.style.ts:
--------------------------------------------------------------------------------
1 | import { Theme } from '@mui/material';
2 |
3 | export const DesktopDatePickerStyle = {
4 | '& button': {
5 | backgroundColor: 'transparent',
6 | '& svg': {
7 | color: (theme: Theme) => theme.palette.text.primary
8 | }
9 | },
10 | '& .MuiOutlinedInput-root button:hover': {
11 | background: 'rgba(157, 96, 251, 0.04)'
12 | }
13 | };
14 |
15 | export const InputStyle = {
16 | width: 160,
17 | '& button': {
18 | backgroundColor: 'transparent',
19 | borderRadius: '50%',
20 | padding: '4px',
21 | '& svg': {
22 | color: (theme: Theme) => theme.palette.text.primary
23 | }
24 | }
25 | };
26 |
--------------------------------------------------------------------------------
/frontend/src/components/base/DatePicker/DatePicker.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { DesktopDatePicker } from '@mui/x-date-pickers';
3 | import { Calendar } from '../../../assets/icon/icon';
4 | import { DesktopDatePickerStyle, InputStyle } from './DatePicker.style';
5 |
6 | // TODO - This Implementation relevant to @mui/x-date-pickers version ^5.0.0-beta.7, need to be replaced with the new one
7 | export function DatePicker({ ...props }: any) {
8 | return (
9 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/frontend/src/components/base/DateRange/DateRange.style.tsx:
--------------------------------------------------------------------------------
1 | import { Box, styled } from '@mui/material';
2 | import { theme } from 'components/lib/theme';
3 |
4 | export const StyledButtonContainer = styled(Box)({
5 | padding: '10px 0',
6 | display: 'flex',
7 | justifyContent: 'center',
8 | alignItems: 'center',
9 | borderTop: theme.palette.grey.light
10 | });
11 |
--------------------------------------------------------------------------------
/frontend/src/components/base/DateRange/index.ts:
--------------------------------------------------------------------------------
1 | export { DateRange } from './DateRange';
2 |
--------------------------------------------------------------------------------
/frontend/src/components/base/Dialog/ActionDialog/ActionDialogHeader.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { RowAutoGap } from '../../Container/Container.styles';
4 | import { StyledH2 } from '../../Text/Header.styles';
5 | import { StyledDialogCloseIconButton } from './ActionDialog.styles';
6 |
7 | import { CloseIcon } from 'assets/icon/icon';
8 |
9 | interface ActionDialogHeaderProps {
10 | title: string;
11 | onClose: () => void;
12 | }
13 |
14 | export const ActionDialogHeader = ({ title, onClose }: ActionDialogHeaderProps) => (
15 |
16 | {title}
17 |
18 |
19 |
20 |
21 | );
22 |
--------------------------------------------------------------------------------
/frontend/src/components/base/Dialog/ActionDialog/DeleteActionDialog.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { Typography, Box } from '@mui/material';
4 |
5 | import ActionDialog, { ActionDialogProps } from 'components/base/Dialog/ActionDialog/ActionDialog';
6 |
7 | interface DeleteActionDialogProps extends ActionDialogProps {
8 | messageStart: string;
9 | itemNameToDelete: string;
10 | messageEnd: string;
11 | }
12 |
13 | export const DeleteActionDialog = ({
14 | messageStart,
15 | itemNameToDelete,
16 | messageEnd,
17 | ...props
18 | }: DeleteActionDialogProps) => (
19 |
20 |
21 |
22 | {messageStart}
23 |
24 | {itemNameToDelete}
25 |
26 | {messageEnd}
27 |
28 |
29 |
30 | );
31 |
--------------------------------------------------------------------------------
/frontend/src/components/base/Input/Input.styles.tsx:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import { Input } from '@mui/material';
3 | import { theme } from 'components/lib/theme';
4 |
5 | const StyledTextInput = styled(Input)`
6 | font-size: 1rem;
7 | width: 100%;
8 | border-radius: 16px;
9 | border: 1px solid ${theme.palette.grey[300]};
10 | gap: 12px;
11 | padding: 8px 12px;
12 | `;
13 |
14 | export { StyledTextInput };
15 |
--------------------------------------------------------------------------------
/frontend/src/components/base/InputDropdown/InputDropdown.styles.tsx:
--------------------------------------------------------------------------------
1 | import { TextField, Typography, styled, Select, IconButton } from '@mui/material';
2 |
3 | export const StyledLabel = styled(Typography)({
4 | fontWeight: 600,
5 | textAlign: 'left',
6 | marginBottom: '8px'
7 | });
8 |
9 | export const StyledTextfield = styled(TextField)({
10 | '.MuiInputBase-root': {
11 | height: '52px',
12 | borderRadius: '5px'
13 | }
14 | });
15 |
16 | export const StyledSelect = styled(Select)({
17 | height: '52px',
18 | borderRadius: '5px'
19 | });
20 |
21 | interface StyledIconButtonProps {
22 | active: boolean;
23 | }
24 |
25 | export const StyledIconButton = styled(IconButton, {
26 | shouldForwardProp: prop => prop !== 'active'
27 | })(({ active }) => ({
28 | visibility: active ? 'visible' : 'hidden',
29 | display: active ? 'auto' : 'none',
30 | transform: 'translateX(-5px)',
31 | transition: 'opacity 0.3s',
32 |
33 | '&:hover': {
34 | background: 'transparent',
35 | opacity: 0.5
36 | }
37 | }));
38 |
--------------------------------------------------------------------------------
/frontend/src/components/base/Loader/Loader.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import CircularProgress from '@mui/material/CircularProgress';
3 | import Box from '@mui/material/Box';
4 | import { SxProps } from '@mui/system';
5 |
6 | export type LoaderProps = {
7 | sx?: SxProps;
8 | };
9 |
10 | export const Loader = ({ sx = {} }: LoaderProps) => (
11 |
21 |
22 |
23 | );
24 |
--------------------------------------------------------------------------------
/frontend/src/components/base/MarkedSelect/index.ts:
--------------------------------------------------------------------------------
1 | export { MarkedSelect } from './MarkedSelect';
2 |
--------------------------------------------------------------------------------
/frontend/src/components/base/RangePicker/RangePicker.style.tsx:
--------------------------------------------------------------------------------
1 | import { Stack, styled, Typography, TextField } from '@mui/material';
2 |
3 | export const StyledInputsWrapper = styled(Stack)({
4 | flexDirection: 'row',
5 | justifyContent: 'space-between',
6 | alignItems: 'center'
7 | });
8 |
9 | export const StyledTextField = styled(TextField)({
10 | '& .MuiOutlinedInput-input': {
11 | padding: '4px 8px',
12 | width: 85
13 | }
14 | });
15 |
16 | export const StyledLabel = styled(Typography)(({ theme }) => ({
17 | fontSize: 12,
18 | lineHeight: 1.57,
19 | letterSpacing: '0.1px',
20 | marginBottom: '10px',
21 | color: theme.palette.text.disabled
22 | }));
23 |
--------------------------------------------------------------------------------
/frontend/src/components/base/RangePicker/index.ts:
--------------------------------------------------------------------------------
1 | export { RangePicker } from './RangePicker';
2 |
--------------------------------------------------------------------------------
/frontend/src/components/base/Tooltip/Tooltip.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { styled } from '@mui/material/styles';
3 | import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
4 |
5 | export const NoMaxWidthTooltip = styled(({ className, ...props }: TooltipProps) => (
6 |
7 | ))({
8 | [`& .${tooltipClasses.tooltip}`]: {
9 | maxWidth: 'none'
10 | }
11 | });
12 |
--------------------------------------------------------------------------------
/frontend/src/components/lib/assets/chart/select-all-checkbox-unchecked.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/frontend/src/components/lib/assets/chart/select-all-checkbox.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/frontend/src/components/lib/assets/css/fonts.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800&family=Plus+Jakarta+Sans:wght@700&display=swap');
2 |
--------------------------------------------------------------------------------
/frontend/src/components/lib/assets/severity/critical.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/frontend/src/components/lib/assets/severity/high.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/frontend/src/components/lib/assets/severity/low.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/frontend/src/components/lib/assets/severity/medium.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/frontend/src/components/lib/assets/severity/purple.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/frontend/src/components/lib/components/Container/CodeSnippet/CodeSnippet.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { Prism } from 'react-syntax-highlighter';
4 | import { materialDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
5 |
6 | export interface CodeSnippetProps {
7 | code: string;
8 | width?: string;
9 | margin?: string;
10 | maxWidth?: string;
11 | }
12 |
13 | export const CodeSnippet = ({ code, maxWidth = '770px', width = '100%', margin = '24px 0 18px' }: CodeSnippetProps) => (
14 |
29 | {code}
30 |
31 | );
32 |
--------------------------------------------------------------------------------
/frontend/src/components/lib/components/Container/ToolTip/ToolTip.styles.tsx:
--------------------------------------------------------------------------------
1 | import { Stack, styled } from '@mui/material';
2 |
3 | export const StyledDescriptionsContainer = styled(Stack)({
4 | marginBottom: '6px',
5 | alignItems: 'center'
6 | });
7 |
--------------------------------------------------------------------------------
/frontend/src/components/lib/components/DateTimePicker/DateTimePicker.utils.ts:
--------------------------------------------------------------------------------
1 | import dayjs, { Dayjs } from 'dayjs';
2 |
3 | export function convertDate(date: Date | Dayjs | null) {
4 | return dayjs(date).format('llll');
5 | }
6 |
--------------------------------------------------------------------------------
/frontend/src/components/lib/components/DateTimePicker/DropdownArrowComponent.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
4 | import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp';
5 |
6 | interface DropdownArrowComponentProps {
7 | isDropdownOpen: boolean;
8 | }
9 |
10 | export const DropdownArrowComponent = ({ isDropdownOpen }: DropdownArrowComponentProps) =>
11 | isDropdownOpen ? : ;
12 |
--------------------------------------------------------------------------------
/frontend/src/components/lib/components/Dialog/DeletionDialog/DeletionDialog.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactNode } from 'react';
2 |
3 | import { Dialog, DialogProps } from '../Dialog';
4 | import { Text } from '../../Text/Text';
5 |
6 | interface DeletionDialogProps extends DialogProps {
7 | messageStart?: string;
8 | itemToDelete?: string | number;
9 | messageEnd?: string;
10 | loading?: boolean;
11 | children?: ReactNode | ReactNode[];
12 | }
13 |
14 | export const DeletionDialog = ({
15 | messageStart,
16 | messageEnd,
17 | itemToDelete,
18 | loading,
19 | children,
20 | ...otherProps
21 | }: DeletionDialogProps) => {
22 | return (
23 |
35 | );
36 | };
37 |
--------------------------------------------------------------------------------
/frontend/src/components/lib/components/Dialog/DialogBase.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { DialogProps, Dialog, DialogContent } from '@mui/material';
4 |
5 | export const DialogBase = (props: DialogProps) => {
6 | const { open, children, sx, ...otherProps } = props;
7 |
8 | const handleKeyDown = (event: React.KeyboardEvent) => {
9 | if (event.key === 'Escape' && otherProps?.onClose) {
10 | otherProps?.onClose(event, 'escapeKeyDown');
11 | }
12 | };
13 |
14 | return (
15 |
23 | );
24 | };
25 |
--------------------------------------------------------------------------------
/frontend/src/components/lib/components/DistributionChart/DistributionChart.styles.tsx:
--------------------------------------------------------------------------------
1 | import { styled } from '@mui/material';
2 | import { Text } from '../Text/Text';
3 |
4 | export const StyledTitleText = styled(Text)(({ theme }) => ({
5 | display: 'flex',
6 | justifyContent: 'center',
7 | height: '20px',
8 | color: theme.palette.grey[600]
9 | }));
10 |
--------------------------------------------------------------------------------
/frontend/src/components/lib/components/DoughnutChart/DoughnutChart.styles.tsx:
--------------------------------------------------------------------------------
1 | import { Box, styled } from '@mui/material';
2 |
3 | export const StyledScoresBox = styled(Box)(({ theme }) => ({
4 | display: 'flex',
5 | flexDirection: 'row',
6 | gap: '34px',
7 | justifyContent: 'center',
8 | margin: '16px auto',
9 | textAlign: 'center',
10 |
11 | '.MuiTypography-root': { color: theme.palette.grey[300] }
12 | }));
13 |
14 | export const StyledDoughnutChartContainer = styled(Box)({
15 | position: 'relative'
16 | });
17 |
18 | export const doughnutChartImageStyle: React.CSSProperties = {
19 | position: 'absolute',
20 | left: '0px',
21 | top: '200px',
22 | zIndex: '-1',
23 | cursor: 'pointer'
24 | };
25 |
--------------------------------------------------------------------------------
/frontend/src/components/lib/components/Loader/Loader.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { SxProps } from '@mui/system';
4 | import CircularProgress from '@mui/material/CircularProgress';
5 | import Box from '@mui/material/Box';
6 |
7 | export type LoaderProps = {
8 | sx?: SxProps;
9 | };
10 |
11 | export const Loader = ({ sx }: LoaderProps) => (
12 |
22 |
23 |
24 | );
25 |
--------------------------------------------------------------------------------
/frontend/src/components/lib/components/Logo/Logo.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export interface LogoProps {
4 | withLabel?: boolean;
5 | margin?: string;
6 | width?: string;
7 | }
8 |
9 | export const Logo = (props: LogoProps) => {
10 | const { withLabel, margin = '8px' } = props;
11 |
12 | const logoWithoutLabel = require('../../assets/logo/logo.svg').default;
13 | const logoWithLabel = require('../../assets/logo/monitoring.svg').default;
14 |
15 | const imgWidth = withLabel ? '200px' : '40px';
16 |
17 | const logoToUse = () => {
18 | switch (withLabel) {
19 | case true:
20 | return logoWithLabel;
21 | default:
22 | return logoWithoutLabel;
23 | }
24 | };
25 |
26 | return })
;
27 | };
28 |
--------------------------------------------------------------------------------
/frontend/src/components/lib/theme/ThemeProvider.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactNode } from 'react';
2 |
3 | import { CssBaseline } from '@mui/material';
4 | import { ThemeProvider as MUIThemeProvider } from '@mui/material/styles';
5 | import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
6 | import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
7 |
8 | import { darkTheme, theme } from '.';
9 |
10 | interface Props {
11 | children: ReactNode | ReactNode[];
12 | darkMode?: boolean;
13 | }
14 |
15 | export const ThemeProvider = ({ children, darkMode }: Props) => {
16 | return (
17 |
18 |
19 | {children}
20 |
21 | );
22 | };
23 |
--------------------------------------------------------------------------------
/frontend/src/components/lib/theme/breakpoints.ts:
--------------------------------------------------------------------------------
1 | import { BreakpointsOptions } from '@mui/material';
2 |
3 | export const breakpointOptions: BreakpointsOptions = {
4 | values: {
5 | xs: 600,
6 | sm: 900,
7 | md: 1200,
8 | lg: 1536,
9 | xl: 1900
10 | }
11 | };
12 |
--------------------------------------------------------------------------------
/frontend/src/components/lib/theme/index.tsx:
--------------------------------------------------------------------------------
1 | import { createTheme, Theme } from '@mui/material';
2 |
3 | import { typographyOptions } from './typography';
4 | import { darkModePalette, paletteOptions } from './palette';
5 | import { breakpointOptions } from './breakpoints';
6 |
7 | const theme: Theme = createTheme({
8 | palette: paletteOptions,
9 | breakpoints: breakpointOptions,
10 | typography: typographyOptions
11 | });
12 |
13 | const darkTheme: Theme = createTheme({
14 | palette: darkModePalette,
15 | breakpoints: breakpointOptions,
16 | typography: typographyOptions
17 | });
18 |
19 | export { theme, darkTheme };
20 |
--------------------------------------------------------------------------------
/frontend/src/helpers/base/alertFilters.ts:
--------------------------------------------------------------------------------
1 | import { handleSetParams } from 'helpers/utils/getParams';
2 |
3 | export function getAlertFilters() {
4 | const urlSearchParams = new URLSearchParams(window.location.search);
5 | const params = Object.fromEntries(urlSearchParams.entries());
6 | const modelId = +params?.modelId;
7 | const severity = params?.severity;
8 | const alertFilters = { models: [] as number[], severity: [] as string[] };
9 | if (severity) alertFilters['severity'] = [severity];
10 | if (modelId) alertFilters['models'] = [modelId];
11 | return alertFilters;
12 | }
13 |
14 | export function resetAlertFilters(setAlertFilters: any) {
15 | setAlertFilters({ models: [], severity: [] });
16 | handleSetParams('modelId');
17 | handleSetParams('severity');
18 | }
19 |
--------------------------------------------------------------------------------
/frontend/src/helpers/base/conditionOperator.ts:
--------------------------------------------------------------------------------
1 | export const OperatorsEnumMap = {
2 | greater_than_equals: '>=',
3 | greater_than: '>',
4 | less_than_equals: '<=',
5 | less_than: '<',
6 | in: 'in',
7 | equals: '==',
8 | not_equals: '!='
9 | } as const;
10 |
--------------------------------------------------------------------------------
/frontend/src/helpers/base/groupParamsByKey.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-param-reassign */
2 | export const groupParamsByKey = (params: URLSearchParams) =>
3 | [...params.entries()].reduce((acc, tuple) => {
4 | const [key, val] = tuple;
5 |
6 | if (Object.prototype.hasOwnProperty.call(acc, key)) {
7 | if (Array.isArray(acc[key])) {
8 | acc[key] = [...acc[key], val];
9 | } else {
10 | acc[key] = [acc[key] as string, val];
11 | }
12 | } else {
13 | acc[key] = val;
14 | }
15 |
16 | return acc;
17 | }, {} as Record);
18 |
--------------------------------------------------------------------------------
/frontend/src/helpers/base/severityColor.ts:
--------------------------------------------------------------------------------
1 | import { AlertSeverity } from 'api/generated';
2 | import { theme } from 'components/lib/theme';
3 |
4 | const { low, medium, high, critical } = AlertSeverity;
5 |
6 | export function severityColor(severity: AlertSeverity) {
7 | switch (severity) {
8 | case low:
9 | return theme.palette.severity.low;
10 |
11 | case medium:
12 | return theme.palette.severity.medium;
13 |
14 | case high:
15 | return theme.palette.severity.high;
16 |
17 | case critical:
18 | return theme.palette.severity.critical;
19 |
20 | default:
21 | return theme.palette.severity.critical;
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/frontend/src/helpers/base/time.tsx:
--------------------------------------------------------------------------------
1 | export const timeValues = {
2 | hour: 60 * 60,
3 | day: 60 * 60 * 24,
4 | week: 60 * 60 * 24 * 7,
5 | month: 60 * 60 * 24 * 30,
6 | threeMonths: 60 * 60 * 24 * 30 * 3,
7 | year: 60 * 60 * 24 * 30 * 12
8 | };
9 |
10 | export const timeMap = {
11 | day: timeValues.day * 1000,
12 | week: timeValues.week * 1000,
13 | month: timeValues.month * 1000,
14 | year: timeValues.year * 1000
15 | };
16 |
17 | export const ONE_MINUTE = 60000;
18 | export const THIRTY_SECONDS = 30000;
19 |
--------------------------------------------------------------------------------
/frontend/src/helpers/context/GlobalProvider.tsx:
--------------------------------------------------------------------------------
1 | import React, { createContext, FC, useContext } from 'react';
2 |
3 | import { PathInfo, pathsInfo } from 'helpers/routes';
4 |
5 | export interface IContext {
6 | dashboard_id: number;
7 | models?: [];
8 | monitors?: [];
9 | currMonitor?: null;
10 | isLoggedIn: boolean;
11 | pathsInfo: PathInfo[];
12 | flags: { [key: string]: boolean };
13 | }
14 |
15 | const initialValue: IContext = {
16 | dashboard_id: 1,
17 | isLoggedIn: false,
18 | pathsInfo: [],
19 | flags: {}
20 | };
21 |
22 | export const GlobalStateContext = createContext(initialValue);
23 |
24 | export const GlobalStateProvider: FC<{ children: JSX.Element }> = ({ children }) => (
25 |
31 | {children}
32 |
33 | );
34 |
35 | const useGlobalState = () => useContext(GlobalStateContext);
36 | export default useGlobalState;
37 |
--------------------------------------------------------------------------------
/frontend/src/helpers/hooks/useDebounce.ts:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 |
3 | export function useDebounce(value: T, delay = 500): T {
4 | const [debouncedValue, setDebouncedValue] = useState(value);
5 |
6 | useEffect(() => {
7 | const handler = setTimeout(() => {
8 | setDebouncedValue(value);
9 | }, delay);
10 |
11 | return () => {
12 | clearTimeout(handler);
13 | };
14 | }, [value, delay]);
15 |
16 | return debouncedValue;
17 | }
18 |
--------------------------------------------------------------------------------
/frontend/src/helpers/hooks/useElementOnScreen.ts:
--------------------------------------------------------------------------------
1 | import { useRef, useState, useEffect } from 'react';
2 |
3 | const defaultObserverOptions: IntersectionObserverInit = {
4 | root: null,
5 | rootMargin: '0px',
6 | threshold: 0
7 | };
8 |
9 | export const useElementOnScreen = (options = defaultObserverOptions) => {
10 | const [isVisible, setIsVisible] = useState(false);
11 |
12 | const observedContainerRef = useRef(null);
13 |
14 | const callback = (entries: IntersectionObserverEntry[]) => {
15 | const [entry] = entries;
16 | if (entry.isIntersecting) setIsVisible(true);
17 | };
18 |
19 | useEffect(() => {
20 | const observer = new IntersectionObserver(callback, options);
21 | const currentRef = observedContainerRef.current;
22 |
23 | if (currentRef) observer.observe(currentRef);
24 |
25 | return () => {
26 | if (currentRef) observer.unobserve(currentRef);
27 | };
28 | }, [observedContainerRef, options]);
29 |
30 | return { observedContainerRef, isVisible };
31 | };
32 |
--------------------------------------------------------------------------------
/frontend/src/helpers/hooks/useListSearchField.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 |
3 | export function useListSearchField(
4 | initialList: T[],
5 | setList: React.Dispatch>,
6 | searchBy: keyof T
7 | ) {
8 | const [searchFieldValue, setSearchFieldValue] = useState('');
9 |
10 | const handleSearchFieldChange = (event: React.ChangeEvent) => {
11 | const { value } = event.target;
12 |
13 | setSearchFieldValue(value);
14 | setList(
15 | initialList.filter(model =>
16 | (model[searchBy] as unknown as string)?.toLowerCase().includes(value.trim().toLowerCase())
17 | )
18 | );
19 | };
20 |
21 | const resetSearchField = () => {
22 | setSearchFieldValue('');
23 | setList(initialList);
24 | };
25 |
26 | return { searchFieldValue, handleSearchFieldChange, resetSearchField };
27 | }
28 |
--------------------------------------------------------------------------------
/frontend/src/helpers/hooks/useRunCheckLookback.ts:
--------------------------------------------------------------------------------
1 | import { useRunStandaloneCheckPerWindowInRangeApiV1ChecksCheckIdRunLookbackPost } from 'api/generated';
2 |
3 | import { parseDataForBarChart, parseDataForLineChart } from 'helpers/utils/parseDataForChart';
4 |
5 | export const useRunCheckLookback = (type: 'line' | 'bar' = 'line') => {
6 | const checkRun = useRunStandaloneCheckPerWindowInRangeApiV1ChecksCheckIdRunLookbackPost();
7 |
8 | const chartData = () => {
9 | if (checkRun && checkRun.data) {
10 | if (type === 'line') {
11 | return parseDataForLineChart(checkRun.data);
12 | }
13 |
14 | if (type === 'bar') {
15 | return parseDataForBarChart(checkRun.data);
16 | }
17 | }
18 |
19 | return { datasets: [], labels: [] };
20 | };
21 |
22 | return { chartData, ...checkRun };
23 | };
24 |
--------------------------------------------------------------------------------
/frontend/src/helpers/hooks/useRunMonitorLookback.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | import { useRunMonitorLookbackApiV1MonitorsMonitorIdRunPost, ModelManagmentSchema } from 'api/generated';
3 |
4 | const useRunMonitorLookback = (monitorId: number | null, currentModel: ModelManagmentSchema | null) => {
5 | const { mutateAsync } = useRunMonitorLookbackApiV1MonitorsMonitorIdRunPost();
6 |
7 | useEffect(() => {
8 | if (!currentModel || !monitorId) return;
9 |
10 | const end_time = currentModel.latest_time ? new Date(currentModel.latest_time * 1000).toISOString() : '';
11 | mutateAsync({ monitorId, data: { end_time } });
12 | }, [currentModel, monitorId, mutateAsync]);
13 | };
14 |
15 | export default useRunMonitorLookback;
16 |
--------------------------------------------------------------------------------
/frontend/src/helpers/hooks/windowResize.ts:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 |
3 | function useWindowResize() {
4 | const [windowResize, setWindowResize] = useState(window.innerWidth);
5 | useEffect(() => {
6 | const handleResize = () => setWindowResize(window.innerWidth);
7 | window.addEventListener('resize', handleResize);
8 | return () => {
9 | window.removeEventListener('resize', handleResize);
10 | };
11 | }, [windowResize]);
12 |
13 | return windowResize;
14 | }
15 |
16 | export default useWindowResize;
17 |
--------------------------------------------------------------------------------
/frontend/src/helpers/services/logger.ts:
--------------------------------------------------------------------------------
1 | import pino from 'pino';
2 |
3 | const logger = (() =>
4 | pino({
5 | level: 'silent',
6 | browser: {
7 | asObject: true,
8 | transmit: {
9 | level: 'debug',
10 | send: async (level: pino.Level, logEvent: pino.LogEvent) => {
11 | const { messages } = logEvent;
12 | const translatedLevel = level === 'fatal' ? 'error' : level;
13 | const isDebug = window.location.host.includes('local');
14 |
15 | if (isDebug) {
16 | console[translatedLevel](...messages);
17 | }
18 | }
19 | }
20 | }
21 | }))();
22 |
23 | export default logger;
24 |
--------------------------------------------------------------------------------
/frontend/src/helpers/services/mixPanel.ts:
--------------------------------------------------------------------------------
1 | import mixpanel from 'mixpanel-browser';
2 |
3 | import { getStorageItem, storageKeys } from 'helpers/utils/localStorage';
4 |
5 | export const reportEvent = (eventName: string, eventData?: { [param: string]: any }) => {
6 | const superProperties = getStorageItem(storageKeys.user);
7 |
8 | mixpanel.track(eventName, { ...eventData, ...superProperties });
9 | };
10 |
11 | export const events = {
12 | onBoarding: {
13 | onboarding: 'onboarding'
14 | }
15 | };
16 |
--------------------------------------------------------------------------------
/frontend/src/helpers/types/alert.ts:
--------------------------------------------------------------------------------
1 | import { ID } from '.';
2 |
3 | export type Criticality = 'low' | 'medium' | 'high' | 'critical';
4 |
5 | export type SortBy = 'severity:asc' | 'severity:sesc' | 'alert-window: asc' | 'alert-window:desc';
6 |
7 | export interface Alert {
8 | id: ID;
9 | alert_rule_id: ID;
10 | failed_values: {
11 | [key: string]: string[];
12 | };
13 | start_time: Date | string;
14 | end_time: Date | string;
15 | resolved: boolean;
16 | created_at: Date | string;
17 | }
18 |
19 | export interface AlertRule {
20 | id: ID;
21 | name: string;
22 | monitor_id: ID;
23 | repeat_every: number;
24 | condition: {
25 | operator: 'greater_than_equals';
26 | value: 0;
27 | };
28 | alert_severity: Criticality;
29 | alerts_count: 0;
30 | }
31 |
32 | export interface AlertRulesParams {
33 | start?: Date | string;
34 | end?: Date | string;
35 | models?: number;
36 | severity?: Criticality;
37 | sortby?: SortBy;
38 | }
39 |
40 | export type AlertsCount = {
41 | [key in Criticality]: number;
42 | };
43 |
--------------------------------------------------------------------------------
/frontend/src/helpers/types/check.ts:
--------------------------------------------------------------------------------
1 | import { ID, Filter } from '.';
2 |
3 | export interface Check {
4 | config: {
5 | class_name: string;
6 | module_name: string;
7 | params: object;
8 | };
9 | model_id: number;
10 | id: ID;
11 | name?: string;
12 | }
13 |
14 | export interface RunCheckRequest {
15 | start_time: Date | string;
16 | end_time: Date | string;
17 | filter?: {
18 | filters: Filter[];
19 | };
20 | }
21 |
22 | export enum CheckTypeOptions {
23 | Feature = 'Feature',
24 | Class = 'Class'
25 | }
26 |
27 | export type CheckType = CheckTypeOptions.Feature | CheckTypeOptions.Class | null;
28 |
--------------------------------------------------------------------------------
/frontend/src/helpers/types/index.ts:
--------------------------------------------------------------------------------
1 | export type ID = number | string;
2 |
3 | export interface Filter {
4 | column: string;
5 | operator: string;
6 | value: string | number;
7 | }
8 |
9 | export interface ChartResponse {
10 | output: {
11 | [key: string]: { [key: string]: number | null }[];
12 | };
13 | time_labels: string[];
14 | }
15 |
16 | export type GraphData = (number | null)[] | string[] | { x: string; y: number }[] | { x: number; y: number }[];
17 |
18 | export type WindowTimeout = ReturnType;
19 | export type WindowInterval = ReturnType;
20 |
21 | export type SetStateType = React.Dispatch>;
22 |
23 | export type SelectValues = string | number | undefined;
24 |
--------------------------------------------------------------------------------
/frontend/src/helpers/types/monitor.ts:
--------------------------------------------------------------------------------
1 | import { ID, Filter } from '.';
2 |
3 | export interface Monitor {
4 | id: ID;
5 | name: string;
6 | check: {
7 | config: {
8 | class_name: string;
9 | module_name: string;
10 | params: {
11 | reduce: string;
12 | };
13 | };
14 | model_id: number;
15 | id: number;
16 | name: string;
17 | };
18 | lookback: number;
19 | description?: string;
20 | dashboard_id: number;
21 | data_filters: {
22 | filters: Filter[];
23 | };
24 | }
25 |
26 | export interface MonitorRequest {
27 | name: string;
28 | lookback: number;
29 | description?: string;
30 | data_filter?: {
31 | filters: Filter[];
32 | };
33 | dashboard_id?: number;
34 | }
35 |
36 | export interface DashboardType {
37 | id: ID;
38 | name: string;
39 | monitors: Monitor[];
40 | }
41 |
--------------------------------------------------------------------------------
/frontend/src/helpers/types/resError.ts:
--------------------------------------------------------------------------------
1 | export interface resError {
2 | error_message: string;
3 | additional_information?: { [key: string]: any };
4 | }
5 |
--------------------------------------------------------------------------------
/frontend/src/helpers/utils/arrDictConverter.ts:
--------------------------------------------------------------------------------
1 | export const convertDictionaryToArray = (dictionary: Record): any[] => {
2 | const headers: any[] = [];
3 | for (const [name, value] of Object.entries(dictionary)) {
4 | name !== '' && headers.push({ name, value });
5 | }
6 | return headers;
7 | };
8 |
9 | export const convertArrayToDictionary = (headers: any): Record => {
10 | const dictionary: Record = {};
11 | headers.forEach((header: any) => {
12 | const { name, value } = header;
13 | dictionary[name] = value;
14 | });
15 | return dictionary;
16 | };
17 |
--------------------------------------------------------------------------------
/frontend/src/helpers/utils/capitalizeFirstChar.ts:
--------------------------------------------------------------------------------
1 | export function capitalizeFirstChar(str: string) {
2 | return str.charAt(0).toUpperCase() + str.slice(1);
3 | }
4 |
--------------------------------------------------------------------------------
/frontend/src/helpers/utils/frequency.ts:
--------------------------------------------------------------------------------
1 | import { Frequency } from 'api/generated';
2 |
3 | export const frequencyValues = {
4 | HOUR: 3600,
5 | DAY: 86400,
6 | WEEK: 604800,
7 | MONTH: 2592000
8 | };
9 |
10 | export const FrequencyMap = {
11 | [Frequency.HOUR]: 3600,
12 | [Frequency.DAY]: 86400,
13 | [Frequency.WEEK]: 604800,
14 | [Frequency.MONTH]: 2592000
15 | } as const;
16 |
17 | export const FrequencyNumberMap = {
18 | 3600: Frequency.HOUR,
19 | 86400: Frequency.DAY,
20 | 604800: Frequency.WEEK,
21 | 2592000: Frequency.MONTH
22 | } as const;
23 |
24 | export interface FrequencyNumberType {
25 | type: 3600 | 86400 | 604800 | 2592000;
26 | }
27 |
--------------------------------------------------------------------------------
/frontend/src/helpers/utils/localStorage.ts:
--------------------------------------------------------------------------------
1 | export const storageKeys = {
2 | dataIngestionTimeFilter: 'data_ingestion_time_filter',
3 | analysisFrequency: 'analysis_frequency',
4 | analysisPeriod: 'analysis_period',
5 | environment: 'environment',
6 | user: 'user',
7 | loggedIn: 'logged_in',
8 | is_onboarding: 'is_onboarding'
9 | };
10 |
11 | export const getStorageItem = (key: string) => {
12 | const item = localStorage.getItem(key);
13 | return item ? JSON.parse(item) : null;
14 | };
15 |
16 | export const setStorageItem = (key: string, value: T) => {
17 | localStorage.setItem(key, JSON.stringify(value));
18 | };
19 |
20 | export const removeStorageItem = (key: string) => {
21 | localStorage.removeItem(key);
22 | };
23 |
--------------------------------------------------------------------------------
/frontend/src/helpers/utils/mapToOptionsList.ts:
--------------------------------------------------------------------------------
1 | import { sentenceCase } from 'change-case';
2 |
3 | const mapToOptionsList = (map: Record, valuesToFilter?: string[] | undefined) =>
4 | Object.entries(map)
5 | .filter(([label]) => !valuesToFilter || !valuesToFilter.includes(label))
6 | .map(([label, value]) => ({
7 | label: sentenceCase(label),
8 | value
9 | }));
10 |
11 | export default mapToOptionsList;
12 |
--------------------------------------------------------------------------------
/frontend/src/helpers/utils/truncateString.ts:
--------------------------------------------------------------------------------
1 | export function truncateString(str: string, limit: number) {
2 | return str.slice(0, limit) + '...';
3 | }
4 |
--------------------------------------------------------------------------------
/frontend/src/helpers/utils/validateEmail.ts:
--------------------------------------------------------------------------------
1 | // taken from: https://stackoverflow.com/questions/46155/how-can-i-validate-an-email-address-in-javascript
2 | export const validateEmail = (email: string) =>
3 | /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
4 | email
5 | );
6 |
--------------------------------------------------------------------------------
/frontend/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 |
4 | import App from './App';
5 |
6 | const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
7 |
8 | root.render();
9 |
--------------------------------------------------------------------------------
/frontend/src/pages/APIKeyPage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { APIKey } from 'components/APIKey';
4 | import { StyledText } from 'components/lib';
5 |
6 | export const APIKeyPage = function () {
7 | return (
8 | <>
9 |
10 |
11 |
12 | );
13 | };
14 |
15 | export default APIKeyPage;
16 |
--------------------------------------------------------------------------------
/frontend/src/pages/IntegrationsPage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import Integrations from 'components/Integrations/Integrations';
4 |
5 | const IntegrationsPage = () => ;
6 |
7 | export default IntegrationsPage;
8 |
--------------------------------------------------------------------------------
/frontend/src/pages/NotFoundPage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import NotFound from 'components/NotFound/NotFound';
4 |
5 | const NotFoundPage = () => ;
6 |
7 | export default NotFoundPage;
8 |
--------------------------------------------------------------------------------
/frontend/src/pages/OnBoardingPage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import FirstOnBoarding from 'components/OnBoarding/components/FirstOnBoarding';
4 |
5 | const OnBoardingPage = () => {
6 | return ;
7 | };
8 |
9 | export default OnBoardingPage;
10 |
--------------------------------------------------------------------------------
/frontend/src/pages/WorkspaceSettingsPage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import WorkspaceSettings from 'components/WorkspaceSettings/WorkspaceSettings';
4 |
5 | const WorkspaceSettingsPage = () => ;
6 |
7 | export default WorkspaceSettingsPage;
8 |
--------------------------------------------------------------------------------
/frontend/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/frontend/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES6",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "esModuleInterop": true,
8 | "allowSyntheticDefaultImports": true,
9 | "strict": true,
10 | "forceConsistentCasingInFileNames": true,
11 | "noFallthroughCasesInSwitch": true,
12 | "module": "esnext",
13 | "moduleResolution": "node",
14 | "resolveJsonModule": true,
15 | "isolatedModules": true,
16 | "noEmit": true,
17 | "jsx": "react-jsx",
18 | "baseUrl": "./src"
19 | },
20 | "include": ["src"]
21 | }
22 |
--------------------------------------------------------------------------------
/security_scan.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 | brew list aquasecurity/trivy/trivy || brew install aquasecurity/trivy/trivy
3 | docker build -t deepchecks/mon .
4 | trivy image --scanners vuln --severity CRITICAL,HIGH,MEDIUM --ignore-unfixed deepchecks/mon
--------------------------------------------------------------------------------