Skip to content
Snippets Groups Projects
Unverified Commit ff5e26d3 authored by gabriellsh's avatar gabriellsh Committed by GitHub
Browse files

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

parent 7b864ed4
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
client/components/Card/Card.js
+ 12
− 1
View file @ ff5e26d3
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;
client/components/Card/Card.stories.js
+ 4
− 4
View file @ ff5e26d3
......@@ -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>
......
client/views/admin/info/InformationRoute.js
+ 26
− 0
View file @ ff5e26d3
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 />;
});
......
client/views/admin/info/LicenseCard.js
+ 1
− 1
View file @ ff5e26d3
......@@ -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');
......
client/views/admin/info/UsageCard.js
+ 19
− 19
View file @ ff5e26d3
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>
......
client/views/admin/info/UsagePieGraph.js
+ 4
− 2
View file @ ff5e26d3
......@@ -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>;
};
......
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