Unverified Commit 52915351 authored by Kevin Duret's avatar Kevin Duret Committed by GitHub
Browse files

fix(git): fix diff between develop/master for frontend (#11097)

parent 162824a1
......@@ -66,7 +66,6 @@ module.exports = merge(baseConfig, devConfig, {
host: '0.0.0.0',
hot: true,
port: devServerPort,
static: modules.map(({ name, getDirectoryPath }) => ({
directory: path.resolve(getDirectoryPath(name)),
publicPath,
......
......@@ -90,6 +90,7 @@ const ExportConfiguration = ({
<>
<Paper className={classes.exportButton}>
<Button
data-testid={labelExportConfiguration}
disabled={disableButton}
size="small"
onClick={askBeforeExportConfiguration}
......
......@@ -85,7 +85,7 @@ const useStyles = makeStyles((theme) => ({
},
}));
const PollerMenu = (): JSX.Element => {
const PollerMenu = (): JSX.Element | null => {
const classes = useStyles();
const { t } = useTranslation();
......@@ -97,10 +97,12 @@ const PollerMenu = (): JSX.Element => {
const [issues, setIssues] = useState<Issues | null>(null);
const [pollerCount, setPollerCount] = useState<PollerData | number>(0);
const [isExporting, setIsExportingConfiguration] = useState<boolean>();
const [isAllowed, setIsAllowed] = useState<boolean>(true);
const [toggled, setToggled] = useState<boolean>(false);
const interval = useRef<number>();
const navigate = useNavigate();
const { sendRequest } = useRequest<PollerData>({
httpCodesBypassErrorSnackbar: [401],
request: getData,
});
const refreshInterval = useAtomValue(refreshIntervalAtom);
......@@ -138,8 +140,11 @@ const PollerMenu = (): JSX.Element => {
})
.catch((error) => {
if (error.response && error.response.status === 401) {
setIssues(null);
setIsAllowed(false);
return;
}
setIssues(null);
});
};
......@@ -147,6 +152,10 @@ const PollerMenu = (): JSX.Element => {
setToggled(!toggled);
};
if (!isAllowed) {
return null;
}
if (isNil(issues)) {
return <MenuLoader width={loaderWidth} />;
}
......@@ -173,8 +182,10 @@ const PollerMenu = (): JSX.Element => {
onClick={toggleDetailedView}
/>
<PollerStatusIcon issues={issues} />
<IconToggleSubmenu
cursor="pointer"
data-testid="submenu-poller"
iconType="arrow"
rotate={toggled}
onClick={toggleDetailedView}
......@@ -217,6 +228,7 @@ const PollerMenu = (): JSX.Element => {
<Paper className={classes.confButton}>
<Button
fullWidth
data-testid={labelConfigurePollers}
size="small"
onClick={redirectToPollerConfiguration}
>
......
......@@ -25,5 +25,5 @@ export const labelDatabaseNotActive =
export const labelDatabaseUpdatesNotActive = 'Database issue';
export const labelPollerNotRunning = 'Pollers not running';
export const labelPollerRunning = 'Everything Ok';
export const labelConfigurePollers = ' Configure pollers';
export const labelConfigurePollers = 'Configure pollers';
export const labelAllPollers = 'All pollers:';
......@@ -202,6 +202,7 @@ const HostStatusCounter = (): JSX.Element => {
<StatusCounter count={data.ok} severityCode={SeverityCode.Ok} />
</Link>
<IconToggleSubmenu
data-testid="submenu-hosts"
iconType="arrow"
rotate={toggled}
onClick={toggleDetailedView}
......@@ -222,8 +223,10 @@ const HostStatusCounter = (): JSX.Element => {
})}
>
<SubmenuItem
countTestId="submenu hosts count all"
submenuCount={numeral(data.total).format()}
submenuTitle={t('All')}
titleTestId="submenu hosts title all"
/>
</Link>
<Link
......@@ -236,11 +239,13 @@ const HostStatusCounter = (): JSX.Element => {
})}
>
<SubmenuItem
countTestId="submenu hosts count down"
dotColored="red"
submenuCount={`${numeral(data.down.unhandled).format(
'0a',
)}/${numeral(data.down.total).format('0a')}`}
submenuTitle={t('Down')}
titleTestId="submenu hosts title down"
/>
</Link>
<Link
......@@ -253,11 +258,13 @@ const HostStatusCounter = (): JSX.Element => {
})}
>
<SubmenuItem
countTestId="submenu hosts count unreachable"
dotColored="gray"
submenuCount={`${numeral(data.unreachable.unhandled).format(
'0a',
)}/${numeral(data.unreachable.total).format('0a')}`}
submenuTitle={t('Unreachable')}
titleTestId="submenu hosts title unreachable"
/>
</Link>
<Link
......@@ -270,9 +277,11 @@ const HostStatusCounter = (): JSX.Element => {
})}
>
<SubmenuItem
countTestId="submenu hosts count ok"
dotColored="green"
submenuCount={numeral(data.ok).format()}
submenuTitle={t('Up')}
titleTestId="submenu hosts title ok"
/>
</Link>
<Link
......@@ -285,9 +294,11 @@ const HostStatusCounter = (): JSX.Element => {
})}
>
<SubmenuItem
countTestId="submenu hosts count pending"
dotColored="blue"
submenuCount={numeral(data.pending).format()}
submenuTitle={t('Pending')}
titleTestId="submenu hosts title pending"
/>
</Link>
</SubmenuItems>
......
......@@ -216,6 +216,7 @@ const ServiceStatusCounter = (): JSX.Element => {
<StatusCounter count={data.ok} severityCode={SeverityCode.Ok} />
</Link>
<IconToggleSubmenu
data-testid="submenu-service"
iconType="arrow"
rotate={toggled}
onClick={toggleDetailedView}
......@@ -228,6 +229,7 @@ const ServiceStatusCounter = (): JSX.Element => {
<SubmenuItems>
<Link
className={classes.link}
data-testid="Services Warning"
to={servicesLink}
onClick={changeFilterAndNavigate({
criterias: servicesCriterias,
......@@ -236,8 +238,10 @@ const ServiceStatusCounter = (): JSX.Element => {
})}
>
<SubmenuItem
countTestId="submenu services count all"
submenuCount={numeral(data.total).format()}
submenuTitle={t('All')}
titleTestId="submenu services title all"
/>
</Link>
<Link
......@@ -250,11 +254,13 @@ const ServiceStatusCounter = (): JSX.Element => {
})}
>
<SubmenuItem
countTestId="submenu services count critical"
dotColored="red"
submenuCount={`${numeral(
data.critical.unhandled,
).format()}/${numeral(data.critical.total).format()}`}
submenuTitle={t('Critical')}
titleTestId="submenu services title critical"
/>
</Link>
<Link
......@@ -267,11 +273,13 @@ const ServiceStatusCounter = (): JSX.Element => {
})}
>
<SubmenuItem
countTestId="submenu services count warning"
dotColored="orange"
submenuCount={`${numeral(
data.warning.unhandled,
).format()}/${numeral(data.warning.total).format()}`}
submenuTitle={t('Warning')}
titleTestId="submenu services title warning"
/>
</Link>
<Link
......@@ -284,11 +292,13 @@ const ServiceStatusCounter = (): JSX.Element => {
})}
>
<SubmenuItem
countTestId="submenu services count unknown"
dotColored="gray"
submenuCount={`${numeral(
data.unknown.unhandled,
).format()}/${numeral(data.unknown.total).format()}`}
submenuTitle={t('Unknown')}
titleTestId="submenu services title unknown"
/>
</Link>
<Link
......@@ -301,9 +311,11 @@ const ServiceStatusCounter = (): JSX.Element => {
})}
>
<SubmenuItem
countTestId="submenu services count ok"
dotColored="green"
submenuCount={numeral(data.ok).format()}
submenuTitle={t('Ok')}
titleTestId="submenu services title ok"
/>
</Link>
<Link
......
......@@ -54,6 +54,7 @@ const RessourceStatusCounter = <
}: Props): JSX.Element | null => {
const [data, setData] = useState<StatusCount>();
const [toggled, setToggled] = useState<boolean>();
const [isAllowed, setIsAllowed] = useState<boolean>(true);
const interval = useRef<number>();
......@@ -69,7 +70,7 @@ const RessourceStatusCounter = <
})
.catch((error) => {
if (error.response && error.response.status === 401) {
setData(undefined);
setIsAllowed(false);
}
});
};
......@@ -90,6 +91,10 @@ const RessourceStatusCounter = <
setToggled(!toggled);
};
if (!isAllowed) {
return null;
}
if (!data) {
return <MenuLoader width={loaderWidth} />;
}
......
......@@ -67,6 +67,7 @@ const RefreshActions = ({ onRefresh }: Props): JSX.Element => {
<Grid item>
<IconButton
ariaLabel={t(labelRefresh)}
data-testid={labelRefresh}
disabled={sending}
size="small"
title={t(labelRefresh)}
......
......@@ -32,6 +32,7 @@ const ResourceActionButton = ({
if (displayCondensed) {
return (
<IconButton
data-testid={label}
disabled={disabled}
size="large"
title={title}
......@@ -46,6 +47,7 @@ const ResourceActionButton = ({
<Tooltip title={permitted ? '' : labelActionNotPermitted}>
<span>
<ActionButton
data-testid={label}
disabled={disabled}
startIcon={icon}
variant="contained"
......
......@@ -27,6 +27,7 @@ import {
labelConfigure,
labelCopyLink,
labelLinkCopied,
labelShortcuts,
labelSomethingWentWrong,
} from '../translatedLabels';
import { Parent, ResourceUris } from '../models';
......@@ -169,6 +170,7 @@ const Header = ({ details, onSelectParent }: Props): JSX.Element => {
<Link
aria-label={`${t(labelConfigure)}_${details.name}`}
className={classes.resourceNameConfigurationLink}
data-testid={labelConfigure}
href={resourceConfigurationUri}
>
<SettingsIcon
......@@ -194,9 +196,13 @@ const Header = ({ details, onSelectParent }: Props): JSX.Element => {
</div>
)}
</div>
<ShortcutsTooltip resourceUris={resourceUris} />
<ShortcutsTooltip
data-testid={labelShortcuts}
resourceUris={resourceUris}
/>
<IconButton
ariaLabel={t(labelCopyLink)}
data-testid={labelCopyLink}
size="small"
title={t(labelCopyLink)}
onClick={copyResourceLink}
......
......@@ -44,11 +44,13 @@ const ShortcutsTooltip = ({ resourceUris }: Props): JSX.Element => {
const shortcuts = [
{
Icon: LogsIcon,
id: 'Logs',
name: labelViewLogs,
uri: prop('logs', resourceUris),
},
{
Icon: ReportIcon,
id: 'Reporting',
name: labelViewReport,
uri: prop('reporting', resourceUris),
},
......@@ -61,12 +63,12 @@ const ShortcutsTooltip = ({ resourceUris }: Props): JSX.Element => {
>
{(): JSX.Element => (
<List dense>
{shortcuts.map(({ Icon, uri, name }) => (
{shortcuts.map(({ Icon, uri, name, id }) => (
<Tooltip
key={name}
title={isNil(uri) ? (t(labelActionNotPermitted) as string) : ''}
>
<div>
<div data-testid={id}>
<Link
aria-label={t(name)}
className={classes.link}
......
......@@ -99,6 +99,8 @@ const Details = (): JSX.Element | null => {
selectedTabId={getTabIndex(openDetailsTabId)}
tabs={getVisibleTabs().map(({ id, title }) => (
<Tab
aria-label={t(title)}
data-testid={id}
disabled={isNil(details)}
key={id}
label={isNil(details) ? <Skeleton width={60} /> : t(title)}
......
......@@ -52,7 +52,7 @@ const CommandLineCard = ({ details }: Props): JSX.Element => {
<Grid item>{t(labelCommand)}</Grid>
<Grid item>
<Tooltip title={labelCopy} onClick={copyCommandLine}>
<IconButton size="small">
<IconButton data-testid={labelCopy} size="small">
<IconCopyFile color="primary" fontSize="small" />
</IconButton>
</Tooltip>
......
......@@ -61,7 +61,7 @@ const GraphTabContent = ({ details }: TabProps): JSX.Element => {
const MemoizedGraphTabContent = memoizeComponent<TabProps>({
Component: GraphTabContent,
memoProps: ['details'],
memoProps: ['details', 'ariaLabel'],
});
const GraphTab = ({ details }: TabProps): JSX.Element => {
......
import * as React from 'react';
import { ReactElement } from 'react';
import { Typography, Tooltip } from '@mui/material';
interface Props {
children: React.ReactElement | string;
children: ReactElement | string;
paddingLeft?: number;
}
......
import * as React from 'react';
import { useCallback, Fragment } from 'react';
import { t } from 'i18next';
import { isEmpty, isNil } from 'ramda';
......@@ -40,7 +40,7 @@ const Contacts = ({
window.location.href = uri as string;
};
const getConfigurationColumn = React.useCallback(
const getConfigurationColumn = useCallback(
({ configuration_uri }): JSX.Element => {
const canGoToConfiguration = !isNil(configuration_uri);
const tooltipTitle = canGoToConfiguration
......@@ -101,10 +101,10 @@ const Contacts = ({
</>
{contacts?.map((contact) => {
return (
<React.Fragment key={contact.alias}>
<Fragment key={contact.alias}>
{getColumns(contact)}
{getConfigurationColumn(contact)}
</React.Fragment>
</Fragment>
);
})}
</Box>
......
import * as React from 'react';
import { styled } from '@mui/material';
import { makeStyles } from '@mui/styles';
......
import * as React from 'react';
import { useState, useCallback, useEffect } from 'react';
import { isNil, path } from 'ramda';
import { useAtomValue } from 'jotai/utils';
......@@ -33,7 +33,7 @@ const Notifications = (): JSX.Element => {
const { t } = useTranslation();
const [notificationContacts, setNotificationContacts] =
React.useState<NotificationContacts | null>(null);
useState<NotificationContacts | null>(null);
const { sendRequest } = useRequest<NotificationContacts>({
request: getData,
......@@ -46,7 +46,7 @@ const Notifications = (): JSX.Element => {
sendRequest({ endpoint }).then(setNotificationContacts);
};
const getContactColumns = React.useCallback((contact): JSX.Element => {
const getContactColumns = useCallback((contact): JSX.Element => {
return (
<>
<ContactCell paddingLeft={1}>{contact.name}</ContactCell>
......@@ -56,7 +56,7 @@ const Notifications = (): JSX.Element => {
);
}, []);
const getContactWithEmailColumns = React.useCallback(
const getContactWithEmailColumns = useCallback(
(contact: Contact): JSX.Element => {
return (
<>
......@@ -68,7 +68,7 @@ const Notifications = (): JSX.Element => {
[],
);
React.useEffect(() => {
useEffect(() => {
if (isNil(details)) {
return;
}
......
import * as React from 'react';
import { isNil } from 'ramda';
import { useAtomValue } from 'jotai/utils';
......
......@@ -38,6 +38,7 @@ export interface TabProps {
const tabs: Array<Tab> = [
{
Component: DetailsTab,
ariaLabel: labelDetails,
getIsActive: (): boolean => true,
id: detailsTabId,
title: labelDetails,
......@@ -86,6 +87,7 @@ const tabs: Array<Tab> = [
},
{
Component: NotificationsTab,
ariaLabel: labelNotification,
getIsActive: (): boolean => true,
id: notificationsTabId,
title: labelNotification,
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment