From ff5e26d3b4c5c24a8a93409c08bb5430fcfb8500 Mon Sep 17 00:00:00 2001 From: gabriellsh <40830821+gabriellsh@users.noreply.github.com> Date: Thu, 14 Jan 2021 09:10:58 -0300 Subject: [PATCH] Regression: Info Page Icon style and usage graph breaking (#20180) --- client/components/Card/Card.js | 13 ++++++- client/components/Card/Card.stories.js | 8 ++--- client/views/admin/info/InformationRoute.js | 26 ++++++++++++++ client/views/admin/info/LicenseCard.js | 2 +- client/views/admin/info/UsageCard.js | 38 ++++++++++----------- client/views/admin/info/UsagePieGraph.js | 6 ++-- 6 files changed, 66 insertions(+), 27 deletions(-) diff --git a/client/components/Card/Card.js b/client/components/Card/Card.js index 01200cfc13c3..56be7526e96a 100644 --- 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 = () => {children}; +const CardIcon = ({ name, children, ...props }) => + {children || } +; + 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 index c950beba69e3..0f36f8911a15 100644 --- a/client/components/Card/Card.stories.js +++ b/client/components/Card/Card.stories.js @@ -61,10 +61,10 @@ export const Double = () => A Section -
A bunch of stuff
-
A bunch of stuff
-
A bunch of stuff
-
A bunch of stuff
+ A bunch of stuff + A bunch of stuff + A bunch of stuff + A bunch of stuff Another Section diff --git a/client/views/admin/info/InformationRoute.js b/client/views/admin/info/InformationRoute.js index bcc2f565ddb4..bcf671a1715c 100644 --- 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 + + + + + + + + {t('Error_loading_pages')} {/* : {error.message || error.stack}*/} + + + ; + } + if (canViewStatistics) { return ; } + return ; }); diff --git a/client/views/admin/info/LicenseCard.js b/client/views/admin/info/LicenseCard.js index 12feeea07325..fe42b59d37ed 100644 --- 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 index d9c494c1f806..e784c5787f78 100644 --- 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 }) => - {label} + {label} {value} ; @@ -36,23 +36,23 @@ const UsageCard = React.memo(function UsageCard({ statistics, isLoading, vertica {t('Users')} {t('Total')}} + label={<> {t('Total')}} value={s(() => statistics.totalUsers)} /> {t('Online')}} + label={<> {t('Online')}} value={s(() => statistics.onlineUsers)} /> {t('Busy')}} + label={<> {t('Busy')}} value={s(() => statistics.busyUsers)} /> {t('Away')}} + label={<> {t('Away')}} value={s(() => statistics.awayUsers)} /> {t('Offline')}} + label={<> {t('Offline')}} value={s(() => statistics.offlineUsers)} /> @@ -96,54 +96,54 @@ const UsageCard = React.memo(function UsageCard({ statistics, isLoading, vertica {t('Rooms')} {t('Stats_Total_Rooms')}} + label={<> {t('Stats_Total_Rooms')}} value={s(() => statistics.totalRooms)} /> {t('Stats_Total_Channels')}} + label={<> {t('Stats_Total_Channels')}} value={s(() => statistics.totalChannels)} /> {t('Stats_Total_Private_Groups')}} + label={<> {t('Stats_Total_Private_Groups')}} value={s(() => statistics.totalPrivateGroups)} /> {t('Stats_Total_Direct_Messages')}} + label={<> {t('Stats_Total_Direct_Messages')}} value={s(() => statistics.totalDirect)} /> {t('Total_Discussions')}} + label={<> {t('Total_Discussions')}} value={s(() => statistics.totalDiscussions)} /> {t('Stats_Total_Livechat_Rooms')}} + label={<> {t('Stats_Total_Livechat_Rooms')}} value={s(() => statistics.totalLivechat)} /> {t('Messages')} {t('Stats_Total_Messages')}} + label={t('Stats_Total_Messages')} value={s(() => statistics.totalMessages)} /> {t('Total_Threads')}} + label={t('Total_Threads')} value={s(() => statistics.totalThreads)} /> {t('Stats_Total_Messages_Channel')}} + label={t('Stats_Total_Messages_Channel')} value={s(() => statistics.totalChannelMessages)} /> {t('Stats_Total_Messages_PrivateGroup')}} + label={t('Stats_Total_Messages_PrivateGroup')} value={s(() => statistics.totalPrivateGroupMessages)} /> {t('Stats_Total_Messages_Direct')}} + label={t('Stats_Total_Messages_Direct')} value={s(() => statistics.totalDirectMessages)} /> {t('Stats_Total_Messages_Livechat')}} + label={t('Stats_Total_Messages_Livechat')} value={s(() => statistics.totalLivechatMessages)} /> diff --git a/client/views/admin/info/UsagePieGraph.js b/client/views/admin/info/UsagePieGraph.js index 7c64474cc652..902548047803 100644 --- 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 @@ -40,11 +42,11 @@ const UsageGraph = ({ used = 0, total = 0, label, color, size }) => { fontScale='p2' style={{ left: 0, right: 0, top: 0, bottom: 0 }} > - {Number((100 / total) * used).toFixed(2)}% + {unlimited ? '∞' : `${ Number((100 / total) * used).toFixed(2) }%`} - {used} / {total} + {used} / {unlimited ? '∞' : total} {label} ; };