add detail disk usage

src/Components/Bootstrap/components/index.tsx

@@ -1,29 +1,31 @@
+import { Cards } from '@/Components/Card/components'
+import '@/Components/ColorScheme/components/config.scss'
+import { Container } from '@/Components/Container/components'
+import { DatabaseBootstrap } from '@/Components/Database/bootstrap'
+import { DiskUsageBootstrap } from '@/Components/DiskUsage/bootstrap'
+import { Footer } from '@/Components/Footer/components'
+import { Forkme } from '@/Components/Forkme/components'
+import { MyInfoBootstrap } from '@/Components/MyInfo/bootstrap'
+import { Nav } from '@/Components/Nav/components'
+import { NetworkStatsBoostrap } from '@/Components/NetworkStats/bootstrap'
+import { NodesBoostrap } from '@/Components/Nodes/bootstrap'
+import { PhpExtensionsBootstrap } from '@/Components/PhpExtensions/bootstrap'
+import { PhpInfoBootstrap } from '@/Components/PhpInfo/bootstrap'
+import { PingBootstrap } from '@/Components/Ping/bootstrap'
+import { ServerBenchmarkBoostrap } from '@/Components/ServerBenchmark/bootstrap'
+import { ServerInfoBoostrap } from '@/Components/ServerInfo/bootstrap'
+import { ServerStatusBoostrap } from '@/Components/ServerStatus/bootstrap'
+import { TemperatureSensorBoostrap } from '@/Components/TemperatureSensor/bootstrap'
+import { Title } from '@/Components/Title/components'
+import { Toast } from '@/Components/Toast/components'
+import { ready } from '@/Components/Utils/components/ready'
 import { FC } from 'react'
 import { createRoot } from 'react-dom/client'
-import { Cards } from '../../Card/components'
-import '../../ColorScheme/components/config.scss'
-import { Container } from '../../Container/components'
-import { DatabaseBootstrap } from '../../Database/bootstrap'
-import { Footer } from '../../Footer/components'
-import { Forkme } from '../../Forkme/components'
-import { MyInfoBootstrap } from '../../MyInfo/bootstrap'
-import { Nav } from '../../Nav/components'
-import { NetworkStatsBoostrap } from '../../NetworkStats/bootstrap'
-import { NodesBoostrap } from '../../Nodes/bootstrap'
-import { PhpExtensionsBootstrap } from '../../PhpExtensions/bootstrap'
-import { PhpInfoBootstrap } from '../../PhpInfo/bootstrap'
-import { PingBootstrap } from '../../Ping/bootstrap'
-import { ServerBenchmarkBoostrap } from '../../ServerBenchmark/bootstrap'
-import { ServerInfoBoostrap } from '../../ServerInfo/bootstrap'
-import { ServerStatusBoostrap } from '../../ServerStatus/bootstrap'
-import { TemperatureSensorBoostrap } from '../../TemperatureSensor/bootstrap'
-import { Title } from '../../Title/components'
-import { Toast } from '../../Toast/components'
-import { ready } from '../../Utils/components/ready'
 import './global.scss'
 import styles from './styles.module.scss'
 DatabaseBootstrap()
 MyInfoBootstrap()
+DiskUsageBootstrap()
 NetworkStatsBoostrap()
 NodesBoostrap()
 PhpExtensionsBootstrap()

src/Components/DiskUsage/Conf.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace InnStudio\Prober\Components\DiskUsage;
+
+use InnStudio\Prober\Components\Events\EventsApi;
+use InnStudio\Prober\Components\Utils\UtilsDisk;
+use InnStudio\Prober\Components\Xconfig\XconfigApi;
+
+final class Conf extends DiskUsageConstants
+{
+    public function __construct()
+    {
+        EventsApi::on('conf', function (array $conf) {
+            if (XconfigApi::isDisabled($this->ID)) {
+                return $conf;
+            }
+
+            $conf[$this->ID] = array(
+                'items' => UtilsDisk::getItems(),
+            );
+
+            return $conf;
+        });
+    }
+}

src/Components/DiskUsage/DiskUsage.php

@@ -0,0 +1,12 @@
+<?php
+
+namespace InnStudio\Prober\Components\DiskUsage;
+
+final class DiskUsage
+{
+    public function __construct()
+    {
+        new Conf();
+        new Fetch();
+    }
+}

src/Components/DiskUsage/DiskUsageConstants.php

@@ -0,0 +1,8 @@
+<?php
+
+namespace InnStudio\Prober\Components\DiskUsage;
+
+class DiskUsageConstants
+{
+    protected $ID = 'diskUsage';
+}

src/Components/DiskUsage/Fetch.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace InnStudio\Prober\Components\DiskUsage;
+
+use InnStudio\Prober\Components\Events\EventsApi;
+use InnStudio\Prober\Components\Utils\UtilsDisk;
+use InnStudio\Prober\Components\Xconfig\XconfigApi;
+
+final class Fetch extends DiskUsageConstants
+{
+    public function __construct()
+    {
+        EventsApi::on('fetch', array($this, 'filter'));
+        EventsApi::on('nodes', array($this, 'filter'));
+    }
+
+    public function filter(array $items)
+    {
+        if (XconfigApi::isDisabled($this->ID)) {
+            return $items;
+        }
+
+        $items[$this->ID] = array(
+            'diskUsage' => UtilsDisk::getItems(),
+        );
+
+        return $items;
+    }
+}

src/Components/DiskUsage/bootstrap.ts

@@ -0,0 +1,15 @@
+import { CardStore } from '../Card/stores'
+import { gettext } from '../Language'
+import { DiskUsage as component } from './components'
+import { DiskUsageConstants } from './constants'
+export const DiskUsageBootstrap = (): void => {
+  const { id, isEnable } = DiskUsageConstants
+  isEnable &&
+    CardStore.addCard({
+      id,
+      title: gettext('Disk usage'),
+      tinyTitle: gettext('Disk'),
+      priority: 250,
+      component,
+    })
+}

src/Components/DiskUsage/components/index.tsx

@@ -0,0 +1,23 @@
+import { ProgressBar } from '@/Components/ProgressBar/components'
+import { observer } from 'mobx-react-lite'
+import { FC } from 'react'
+import { CardGrid } from '../../Card/components/card-grid'
+import { GridContainer } from '../../Grid/components/container'
+import { DiskUsageConstants } from '../constants'
+import { DiskUsageItemProps } from './typings'
+export const DiskUsage: FC = observer(() => {
+  const { conf } = DiskUsageConstants
+  const items = (conf?.items ?? []) as DiskUsageItemProps[]
+  if (!items.length) {
+    return null
+  }
+  return (
+    <GridContainer>
+      {items.map(({ id, free, total }) => (
+        <CardGrid key={id} name={id}>
+          <ProgressBar value={total - free} max={total} isCapacity />
+        </CardGrid>
+      ))}
+    </GridContainer>
+  )
+})

src/Components/DiskUsage/components/typings.ts

@@ -0,0 +1,5 @@
+export interface DiskUsageItemProps {
+  id: string
+  total: number
+  free: number
+}

src/Components/DiskUsage/constants.ts

@@ -0,0 +1,7 @@
+import { conf } from '../Utils/components/conf'
+class Main {
+  public readonly id = 'diskUsage'
+  public readonly conf = conf?.[this.id]
+  public readonly isEnable: boolean = Boolean(this.conf)
+}
+export const DiskUsageConstants = new Main()

src/Components/DiskUsage/stores/index.ts

@@ -0,0 +1,18 @@
+import { configure, makeAutoObservable } from 'mobx'
+configure({
+  enforceActions: 'observed',
+})
+class Main {
+  public latestPhpVersion = ''
+  public latestPhpDate = ''
+  public constructor() {
+    makeAutoObservable(this)
+  }
+  public setLatestPhpVersion = (latestPhpVersion: string) => {
+    this.latestPhpVersion = latestPhpVersion
+  }
+  public setLatestPhpDate = (latestPhpDate: string) => {
+    this.latestPhpDate = latestPhpDate
+  }
+}
+export const PhpInfoStore = new Main()