Regression: Info Page Icon style and usage graph breaking (#20180)

RocketChat · Jan 14, 2021 · ff5e26d · ff5e26d
1 parent 7b864ed
commit ff5e26d
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 27 deletions.
diff --git a/client/components/Card/Card.js b/client/components/Card/Card.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Divider } from '@rocket.chat/fuselage';
+import { Box, Divider, Icon } from '@rocket.chat/fuselage';
 
 export const DOUBLE_COLUMN_CARD_WIDTH = 552;
 
@@ -19,6 +19,16 @@ const CardDivider = () => <Divider width='x1' mi='x24' mb='none' alignSelf='stre
 
 const Card = ({ children, ...props }) => <Box display='flex' flexDirection='column' pi='x16' pb='x8' width='fit-content' bg='neutral-100' {...props}>{children}</Box>;
 
+const CardIcon = ({ name, children, ...props }) => <Box
+	minWidth='x16'
+	display='inline-flex'
+	flexDirection='row'
+	alignItems='flex-end'
+	justifyContent='center'
+>
+	{children || <Icon size='x16' name={name} {...props}/>}
+</Box>;
+
 Object.assign(Col, {
 	Title: ColTitle,
 	Section: ColSection,
@@ -30,6 +40,7 @@ Object.assign(Card, {
 	Col,
 	Footer,
 	Divider: CardDivider,
+	Icon: CardIcon,
 });
 
 export default Card;
diff --git a/client/components/Card/Card.stories.js b/client/components/Card/Card.stories.js
@@ -61,10 +61,10 @@ export const Double = () => <Box p='x40'>
 			<Card.Col>
 				<Box>
 					<Card.Col.Title>A Section</Card.Col.Title>
-					<div>A bunch of stuff</div>
-					<div>A bunch of stuff</div>
-					<div>A bunch of stuff</div>
-					<div>A bunch of stuff</div>
+					<Box display='flex' flexDirection='row' alignItems='center'><Card.Icon name='document-eye'/>A bunch of stuff</Box>
+					<Box display='flex' flexDirection='row' alignItems='center'><Card.Icon name='pencil'/>A bunch of stuff</Box>
+					<Box display='flex' flexDirection='row' alignItems='center'><Card.Icon name='cross'/>A bunch of stuff</Box>
+					<Box display='flex' flexDirection='row' alignItems='center'><Card.Icon name='num-pad'/>A bunch of stuff</Box>
 				</Box>
 				<Box>
 					<Card.Col.Title>Another Section</Card.Col.Title>

diff --git a/client/views/admin/info/InformationRoute.js b/client/views/admin/info/InformationRoute.js
@@ -1,15 +1,20 @@
 import React, { useState, useEffect } from 'react';
+import { Callout, ButtonGroup, Button, Icon } from '@rocket.chat/fuselage';
 
 import { usePermission } from '../../../contexts/AuthorizationContext';
 import NotAuthorizedPage from '../../../components/NotAuthorizedPage';
+import Page from '../../../components/Page';
 import { useMethod, useServerInformation, useEndpoint } from '../../../contexts/ServerContext';
+import { useTranslation } from '../../../contexts/TranslationContext';
 import { downloadJsonAs } from '../../../lib/download';
 import NewInformationPage from './NewInformationPage';
 
 const InformationRoute = React.memo(function InformationRoute() {
+	const t = useTranslation();
 	const canViewStatistics = usePermission('view-statistics');
 
 	const [isLoading, setLoading] = useState(true);
+	const [error, setError] = useState();
 	const [statistics, setStatistics] = useState({});
 	const [instances, setInstances] = useState([]);
 	const [fetchStatistics, setFetchStatistics] = useState(() => () => ({}));
@@ -21,6 +26,7 @@ const InformationRoute = React.memo(function InformationRoute() {
 
 		const fetchStatistics = async ({ refresh = false } = {}) => {
 			setLoading(true);
+			setError(false);
 
 			try {
 				const [statistics, instances] = await Promise.all([
@@ -33,6 +39,8 @@ const InformationRoute = React.memo(function InformationRoute() {
 				}
 				setStatistics(statistics);
 				setInstances(instances);
+			} catch (error) {
+				setError(error);
 			} finally {
 				setLoading(false);
 			}
@@ -65,6 +73,23 @@ const InformationRoute = React.memo(function InformationRoute() {
 		downloadJsonAs(statistics, 'statistics');
 	};
 
+	if (error) {
+		return <Page>
+			<Page.Header title={t('Info')}>
+				<ButtonGroup>
+					<Button primary type='button' onClick={handleClickRefreshButton}>
+						<Icon name='reload' /> {t('Refresh')}
+					</Button>
+				</ButtonGroup>
+			</Page.Header>
+			<Page.ScrollableContentWithShadow>
+				<Callout type='danger'>
+					{t('Error_loading_pages')} {/* : {error.message || error.stack}*/}
+				</Callout>
+			</Page.ScrollableContentWithShadow>
+		</Page>;
+	}
+
 	if (canViewStatistics) {
 		return <NewInformationPage
 			canViewStatistics={canViewStatistics}
@@ -76,6 +101,7 @@ const InformationRoute = React.memo(function InformationRoute() {
 			onClickDownloadInfo={handleClickDownloadInfo}
 		/>;
 	}
+
 	return <NotAuthorizedPage />;
 });
 

diff --git a/client/views/admin/info/LicenseCard.js b/client/views/admin/info/LicenseCard.js
@@ -30,7 +30,7 @@ const LicenseCard = ({ statistics, isLoading }) => {
 	const { value, phase, error } = useEndpointData('licenses.get');
 	const endpointLoading = phase === AsyncStatePhase.LOADING;
 
-	const { maxActiveUsers = 0, modules = [] } = endpointLoading || error ? {} : value.licenses[0];
+	const { maxActiveUsers = 0, modules = [] } = endpointLoading || error || !value.licenses.length ? {} : value.licenses[0];
 
 	const hasEngagement = modules.includes('engagement-dashboard');
 	const hasOmnichannel = modules.includes('livechat-enterprise');

diff --git a/client/views/admin/info/UsageCard.js b/client/views/admin/info/UsageCard.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Skeleton, Icon, ButtonGroup, Button } from '@rocket.chat/fuselage';
+import { Box, Skeleton, ButtonGroup, Button } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 
 import DotLeader from '../../../components/DotLeader';
@@ -11,7 +11,7 @@ import { useRoute } from '../../../contexts/RouterContext';
 import { useHasLicense } from '../../../../ee/client/hooks/useHasLicense';
 
 const TextSeparator = ({ label, value }) => <Box display='flex' flexDirection='row' mb='x4'>
-	<span>{label}</span>
+	<Box display='inline-flex' alignItems='center'>{label}</Box>
 	<DotLeader />
 	<span>{value}</span>
 </Box>;
@@ -36,23 +36,23 @@ const UsageCard = React.memo(function UsageCard({ statistics, isLoading, vertica
 				<Card.Col.Section>
 					<Card.Col.Title>{t('Users')}</Card.Col.Title>
 					<TextSeparator
-						label={<span><Icon name='dialpad' size='x16'/> {t('Total')}</span>}
+						label={<><Card.Icon name='dialpad'/> {t('Total')}</>}
 						value={s(() => statistics.totalUsers)}
 					/>
 					<TextSeparator
-						label={<span><UserStatus status='online'/> {t('Online')}</span>}
+						label={<><Card.Icon><UserStatus status='online'/></Card.Icon> {t('Online')}</>}
 						value={s(() => statistics.onlineUsers)}
 					/>
 					<TextSeparator
-						label={<span><UserStatus status='busy'/> {t('Busy')}</span>}
+						label={<><Card.Icon><UserStatus status='busy'/></Card.Icon> {t('Busy')}</>}
 						value={s(() => statistics.busyUsers)}
 					/>
 					<TextSeparator
-						label={<span><UserStatus status='away'/> {t('Away')}</span>}
+						label={<><Card.Icon><UserStatus status='away'/></Card.Icon> {t('Away')}</>}
 						value={s(() => statistics.awayUsers)}
 					/>
 					<TextSeparator
-						label={<span><UserStatus status='offline'/> {t('Offline')}</span>}
+						label={<><Card.Icon><UserStatus status='offline'/></Card.Icon> {t('Offline')}</>}
 						value={s(() => statistics.offlineUsers)}
 					/>
 				</Card.Col.Section>
@@ -96,54 +96,54 @@ const UsageCard = React.memo(function UsageCard({ statistics, isLoading, vertica
 				<Card.Col.Section>
 					<Card.Col.Title>{t('Rooms')}</Card.Col.Title>
 					<TextSeparator
-						label={<span><Icon name='dialpad' size='x16'/> {t('Stats_Total_Rooms')}</span>}
+						label={<><Card.Icon name='dialpad' size='x16'/> {t('Stats_Total_Rooms')}</>}
 						value={s(() => statistics.totalRooms)}
 					/>
 					<TextSeparator
-						label={<span><Icon name='hash' size='x16'/> {t('Stats_Total_Channels')}</span>}
+						label={<><Card.Icon name='hash' size='x16'/> {t('Stats_Total_Channels')}</>}
 						value={s(() => statistics.totalChannels)}
 					/>
 					<TextSeparator
-						label={<span><Icon name='lock' size='x16'/> {t('Stats_Total_Private_Groups')}</span>}
+						label={<><Card.Icon name='lock' size='x16'/> {t('Stats_Total_Private_Groups')}</>}
 						value={s(() => statistics.totalPrivateGroups)}
 					/>
 					<TextSeparator
-						label={<span><Icon name='team' size='x16'/> {t('Stats_Total_Direct_Messages')}</span>}
+						label={<><Card.Icon name='team' size='x16'/> {t('Stats_Total_Direct_Messages')}</>}
 						value={s(() => statistics.totalDirect)}
 					/>
 					<TextSeparator
-						label={<span><Icon name='discussion' size='x16'/> {t('Total_Discussions')}</span>}
+						label={<><Card.Icon name='discussion' size='x16'/> {t('Total_Discussions')}</>}
 						value={s(() => statistics.totalDiscussions)}
 					/>
 					<TextSeparator
-						label={<span><Icon name='headset' size='x16'/> {t('Stats_Total_Livechat_Rooms')}</span>}
+						label={<><Card.Icon name='headset' size='x16'/> {t('Stats_Total_Livechat_Rooms')}</>}
 						value={s(() => statistics.totalLivechat)}
 					/>
 				</Card.Col.Section>
 				<Card.Col.Section>
 					<Card.Col.Title>{t('Messages')}</Card.Col.Title>
 					<TextSeparator
-						label={<span>{t('Stats_Total_Messages')}</span>}
+						label={t('Stats_Total_Messages')}
 						value={s(() => statistics.totalMessages)}
 					/>
 					<TextSeparator
-						label={<span>{t('Total_Threads')}</span>}
+						label={t('Total_Threads')}
 						value={s(() => statistics.totalThreads)}
 					/>
 					<TextSeparator
-						label={<span>{t('Stats_Total_Messages_Channel')}</span>}
+						label={t('Stats_Total_Messages_Channel')}
 						value={s(() => statistics.totalChannelMessages)}
 					/>
 					<TextSeparator
-						label={<span>{t('Stats_Total_Messages_PrivateGroup')}</span>}
+						label={t('Stats_Total_Messages_PrivateGroup')}
 						value={s(() => statistics.totalPrivateGroupMessages)}
 					/>
 					<TextSeparator
-						label={<span>{t('Stats_Total_Messages_Direct')}</span>}
+						label={t('Stats_Total_Messages_Direct')}
 						value={s(() => statistics.totalDirectMessages)}
 					/>
 					<TextSeparator
-						label={<span>{t('Stats_Total_Messages_Livechat')}</span>}
+						label={t('Stats_Total_Messages_Livechat')}
 						value={s(() => statistics.totalLivechatMessages)}
 					/>
 				</Card.Col.Section>

diff --git a/client/views/admin/info/UsagePieGraph.js b/client/views/admin/info/UsagePieGraph.js
@@ -18,6 +18,8 @@ const UsageGraph = ({ used = 0, total = 0, label, color, size }) => {
 
 	const getColor = useCallback((data) => graphColors(color)[data.id], [color]);
 
+	const unlimited = total === 0;
+
 	return <Box display='flex' flexDirection='column' alignItems='center'>
 		<Box size={`x${ size }`}>
 			<Box position='relative'>
@@ -40,11 +42,11 @@ const UsageGraph = ({ used = 0, total = 0, label, color, size }) => {
 					fontScale='p2'
 					style={{ left: 0, right: 0, top: 0, bottom: 0 }}
 				>
-					<span>{Number((100 / total) * used).toFixed(2)}%</span>
+					{unlimited ? '∞' : `${ Number((100 / total) * used).toFixed(2) }%`}
 				</Box>
 			</Box>
 		</Box>
-		<span><Box is='span' color='default'>{used}</Box> / {total}</span>
+		<span><Box is='span' color='default'>{used}</Box> / {unlimited ? '∞' : total}</span>
 		<span>{label}</span>
 	</Box>;
 };