Stats page of Settings menu

apps/sensenet/cypress/integration/drawer/drawerItemsNavigation.spec.ts

@@ -1,4 +1,3 @@
-import { globals } from '../../../src/globalStyles'
 import { pathWithQueryParams } from '../../../src/services/query-string-builder'
 
 describe('Drawer items navigation', () => {

apps/sensenet/cypress/integration/users-and-groups.spec.ts

@@ -59,7 +59,7 @@ describe('Users menu', () => {
 
     // Check if the required title exist
     cy.get('[data-test="viewtitle"]').as('Title').should('contain.text', 'Edit Developer Dog')
-    cy.get('form').within(($form) => {
+    cy.get('form').within(() => {
       cy.get('input[name="FullName"]').should('have.value', 'Developer Dog')
     })
     cy.get('[data-test="cancel"]').click()

apps/sensenet/src/components/dashboard/index.tsx

@@ -1,9 +1,8 @@
 import { Group } from '@sensenet/default-content-types'
 import { useLogger, useRepository } from '@sensenet/hooks-react'
-import { Container, createStyles, makeStyles, Theme, Typography } from '@material-ui/core'
+import { Container, createStyles, makeStyles, Typography } from '@material-ui/core'
 import React, { useEffect, useState } from 'react'
 import { useCurrentUser } from '../../context'
-import { globals } from '../../globalStyles'
 import { useLocalization } from '../../hooks'
 import { LearnMoreWidget } from './learn-more-widget'
 import { SubscriptionWidget } from './subscription-widget'
@@ -37,33 +36,6 @@ export const round = (value: number, precision = 1) => {
   return Math.round((value + Number.EPSILON) * multiplier) / multiplier
 }
 
-export const useWidgetStyles = makeStyles((theme: Theme) => {
-  return createStyles({
-    root: {
-      marginBottom: '2rem',
-      width: '100%',
-    },
-    title: {
-      marginBottom: '1rem',
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-      overflow: 'hidden',
-      fontSize: '20px',
-      fontWeight: 500,
-    },
-    container: {
-      padding: '1.5rem',
-      backgroundColor: theme.palette.type === 'light' ? globals.light.drawerBackground : globals.dark.drawerBackground,
-      border: theme.palette.type === 'light' ? '1px solid #E2E2E2' : 0,
-    },
-    subtitle: {
-      fontSize: '20px',
-      fontWeight: 500,
-      marginTop: 0,
-    },
-  })
-})
-
 const Dashboard = () => {
   const classes = useStyles()
   const repository = useRepository()

apps/sensenet/src/components/dashboard/learn-more-widget.tsx

@@ -7,8 +7,8 @@ import plutoOrderCompleted from '../../assets/dashboard/pluto-order-completed.pn
 import plutoOrderCompleted2x from '../../assets/dashboard/[email protected]'
 import plutoWelcome from '../../assets/dashboard/pluto-welcome.png'
 import plutoWelcome2x from '../../assets/dashboard/[email protected]'
+import { useWidgetStyles } from '../../globalStyles'
 import { useLocalization } from '../../hooks'
-import { useWidgetStyles } from '.'
 
 const useStyles = makeStyles((theme: Theme) => {
   return createStyles({

apps/sensenet/src/components/dashboard/subscription-widget.tsx

@@ -1,9 +1,10 @@
 import { Button, createStyles, Grid, Link, makeStyles, Paper, Typography } from '@material-ui/core'
 import React from 'react'
 import logo from '../../assets/sensenet-icon-32.png'
+import { useWidgetStyles } from '../../globalStyles'
 import { useLocalization } from '../../hooks'
 import { DashboardSubscription, DashboardVersion } from './types'
-import { round, useWidgetStyles } from '.'
+import { round } from '.'
 
 const useStyles = makeStyles(() => {
   return createStyles({

apps/sensenet/src/components/dashboard/types.ts

@@ -5,7 +5,7 @@ export interface DashboardData {
   pending: boolean
   version: DashboardVersion
   subscription: DashboardSubscription
-  usage: DashboardLimitations
+  usage: DashboardUsage
 }
 export interface DashboardVersion {
   title: string
@@ -22,10 +22,30 @@ export interface DashboardPlan {
   baseprice?: number
   limitations: DashboardLimitations
 }
+
 export interface DashboardLimitations {
   content: number
   user: number
+  group: number
   storage: number
   workspace: number
   contentType: number
 }
+
+export interface DashboardUsage {
+  content: number
+  user: number
+  group: number
+  storage: StorageUsage
+  workspace: number
+  contentType: number
+}
+
+export interface StorageUsage {
+  available: number
+  files: number
+  content: number
+  oldVersions: number
+  log: number
+  system: number
+}

apps/sensenet/src/components/dashboard/usage-widget.tsx

@@ -1,9 +1,10 @@
 import { createStyles, Grid, LinearProgress, makeStyles, Paper, Theme, Typography } from '@material-ui/core'
 import clsx from 'clsx'
 import React from 'react'
+import { useWidgetStyles } from '../../globalStyles'
 import { useLocalization } from '../../hooks'
-import { DashboardLimitations } from './types'
-import { round, useWidgetStyles } from '.'
+import { DashboardLimitations, DashboardUsage } from './types'
+import { round } from '.'
 
 const useStyles = makeStyles((theme: Theme) => {
   return createStyles({
@@ -31,7 +32,7 @@ const useStyles = makeStyles((theme: Theme) => {
 
 interface UsageWidgetProps {
   limitations: DashboardLimitations
-  used: DashboardLimitations
+  used: DashboardUsage
 }
 
 export const UsageWidget: React.FunctionComponent<UsageWidgetProps> = (props) => {
@@ -40,9 +41,15 @@ export const UsageWidget: React.FunctionComponent<UsageWidgetProps> = (props) =>
   const localization = useLocalization().dashboard
   const { limitations, used } = props
 
+  const allUsageInMB = round(
+    (used.storage.files + used.storage.content + used.storage.oldVersions + used.storage.log + used.storage.system) /
+      1024 /
+      1024,
+  )
+
   const userPercentage = (used.user / limitations.user) * 100
   const contentPercentage = (used.content / limitations.content) * 100
-  const storagePercentage = (used.storage / limitations.storage) * 100
+  const storagePercentage = (allUsageInMB / limitations.storage) * 100
   const limits = {
     warning: 50,
     danger: 85,
@@ -109,7 +116,7 @@ export const UsageWidget: React.FunctionComponent<UsageWidgetProps> = (props) =>
             />
             <div className={classes.progressCaption} data-test="usage-storage-space">
               {localization.used(
-                numberFormatter.format(round(used.storage / 1024)),
+                numberFormatter.format(round(allUsageInMB / 1024)),
                 `${numberFormatter.format(round(limitations.storage / 1024))} GB`,
               )}
             </div>

apps/sensenet/src/components/dashboard/your-project-widget.tsx

@@ -6,8 +6,8 @@ import { PATHS, resolvePathParams } from '../../application-paths'
 import plutoSuccess from '../../assets/dashboard/pluto-success-1.png'
 import plutoSuccess2x from '../../assets/dashboard/[email protected]'
 import { ResponsivePersonalSettings } from '../../context'
+import { useWidgetStyles } from '../../globalStyles'
 import { useLocalization } from '../../hooks'
-import { useWidgetStyles } from '.'
 
 const useStyles = makeStyles((theme: Theme) => {
   return createStyles({

apps/sensenet/src/components/field-controls/webhook-trigger.tsx

@@ -38,9 +38,8 @@ import {
 import { red } from '@material-ui/core/colors'
 import { Close } from '@material-ui/icons'
 import React, { useEffect, useState } from 'react'
-import { globals } from '../../globalStyles'
+import { globals, useWidgetStyles } from '../../globalStyles'
 import { useLocalization } from '../../hooks'
-import { useWidgetStyles } from '../dashboard'
 
 const ITEM_HEIGHT = 48
 const DEFAULT_CONTAINER = '/Root'

apps/sensenet/src/components/settings/index.tsx

@@ -7,11 +7,12 @@ import { PATHS, resolvePathParams } from '../../application-paths'
 import { globals, useGlobalStyles } from '../../globalStyles'
 import { useLocalization } from '../../hooks'
 import { ApiKeys } from './api-keys'
+import { Stats } from './stats'
 
 const ContentComponent = lazy(() => import(/* webpackChunkName: "content" */ '../content'))
 const SetupComponent = lazy(() => import(/* webpackChunkName: "setup" */ './setup'))
 const PersonalSettingsEditor = lazy(
-  () => import(/* webpackChunkName: "PersonalSettingsEditor" */ './PersonalSettingsEditor'),
+  () => import(/* webpackChunkName: "PersonalSettingsEditor" */ './personal-settings-editor'),
 )
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -91,6 +92,8 @@ export const Settings: React.FunctionComponent = () => {
         return <SetupComponent />
       case 'adminui':
         return <PersonalSettingsEditor />
+      case 'stats':
+        return <Stats />
       case 'apikeys':
         return <ApiKeys />
       case 'webhooks':

apps/sensenet/src/components/settings/multi-part-progress-line.tsx

@@ -0,0 +1,71 @@
+import { createStyles, makeStyles } from '@material-ui/core'
+import { Stop } from '@material-ui/icons'
+import React from 'react'
+import { useLocalization } from '../../hooks'
+
+const useStyles = makeStyles(() => {
+  return createStyles({
+    progressVisualFull: {
+      display: 'flex',
+      height: '30px',
+      margin: '20px 0',
+    },
+    legend: {
+      marginRight: '20px',
+      display: 'flex',
+      alignItems: 'center',
+    },
+  })
+})
+
+export interface VisualPartsType {
+  percentage: string
+  color: string
+  title: string
+}
+
+export interface MultiPartProgressLineProps {
+  backgroundColor: string
+  visualParts: VisualPartsType[]
+}
+
+export const MultiPartProgressLine: React.FunctionComponent<MultiPartProgressLineProps> = (props) => {
+  const classes = useStyles()
+  const localization = useLocalization()
+
+  return (
+    <>
+      <div
+        className={classes.progressVisualFull}
+        style={{
+          backgroundColor: props.backgroundColor,
+        }}>
+        {props.visualParts.map((item: VisualPartsType, index) => {
+          return (
+            <div
+              key={index}
+              style={{
+                width: item.percentage ?? '0px',
+                backgroundColor: item.color,
+              }}
+            />
+          )
+        })}
+      </div>
+      <div className={classes.progressVisualFull}>
+        {props.visualParts.map((item: VisualPartsType, index) => {
+          return (
+            <div key={index} className={classes.legend}>
+              <Stop style={{ fill: item.color }} />
+              {item.title}
+            </div>
+          )
+        })}
+        <div className={classes.legend}>
+          <Stop style={{ fill: props.backgroundColor }} />
+          {localization.multiPartProgressLine.available}
+        </div>
+      </div>
+    </>
+  )
+}

apps/sensenet/src/components/settings/stats-components-widget.tsx

@@ -0,0 +1,63 @@
+import { VersionInfo } from '@sensenet/hooks-react'
+import {
+  createStyles,
+  makeStyles,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from '@material-ui/core'
+import React from 'react'
+import { useWidgetStyles } from '../../globalStyles'
+import { useLocalization } from '../../hooks'
+
+const useStyles = makeStyles(() => {
+  return createStyles({
+    rowContainer: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      padding: '10px 0',
+    },
+  })
+})
+
+export interface ComponentsWidgetProps {
+  data: VersionInfo
+}
+
+export const ComponentsWidget: React.FunctionComponent<ComponentsWidgetProps> = (props) => {
+  const classes = useStyles()
+  const widgetClasses = useWidgetStyles()
+  const localization = useLocalization().settings
+
+  return (
+    <div className={widgetClasses.root}>
+      <Paper elevation={0} className={widgetClasses.container}>
+        <div className={classes.rowContainer}>{localization.components}</div>
+        <TableContainer>
+          <Table size="small" aria-label="stats-components">
+            <TableHead>
+              <TableRow>
+                <TableCell align="left">{localization.componentId}</TableCell>
+                <TableCell align="left">{localization.version}</TableCell>
+                <TableCell align="left">{localization.description}</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {props.data.Components.map((row) => (
+                <TableRow key={row.ComponentId}>
+                  <TableCell align="left">{row.ComponentId}</TableCell>
+                  <TableCell align="left">{row.Version}</TableCell>
+                  <TableCell align="left">{row.Description}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </Paper>
+    </div>
+  )
+}