mirror of
				https://github.com/blakeblackshear/frigate.git
				synced 2025-10-27 10:52:11 +01:00 
			
		
		
		
	Rework storage page to show sizes with relevant units (#5093)
* new getUnitSize function * check if isNaN
This commit is contained in:
		
							parent
							
								
									01b9d4d848
								
							
						
					
					
						commit
						65bc644d03
					
				@ -22,6 +22,13 @@ export default function Storage() {
 | 
			
		||||
    return <ActivityIndicator />;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  const getUnitSize = (MB) => {
 | 
			
		||||
    if (isNaN(MB) || MB < 0) return 'Invalid number';
 | 
			
		||||
    if (MB < 1024) return `${MB} MB`;
 | 
			
		||||
 | 
			
		||||
    return `${(MB / 1024).toFixed(2)} GB`;
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  let storage_usage;
 | 
			
		||||
  if (
 | 
			
		||||
    service &&
 | 
			
		||||
@ -31,13 +38,13 @@ export default function Storage() {
 | 
			
		||||
      <Fragment>
 | 
			
		||||
        <Tr>
 | 
			
		||||
          <Td>Recordings</Td>
 | 
			
		||||
          <Td>{service['storage']['/media/frigate/recordings']['used']}</Td>
 | 
			
		||||
          <Td>{service['storage']['/media/frigate/recordings']['total']}</Td>
 | 
			
		||||
          <Td>{getUnitSize(service['storage']['/media/frigate/recordings']['used'])}</Td>
 | 
			
		||||
          <Td>{getUnitSize(service['storage']['/media/frigate/recordings']['total'])}</Td>
 | 
			
		||||
        </Tr>
 | 
			
		||||
        <Tr>
 | 
			
		||||
          <Td>Snapshots</Td>
 | 
			
		||||
          <Td>{service['storage']['/media/frigate/clips']['used']}</Td>
 | 
			
		||||
          <Td>{service['storage']['/media/frigate/clips']['total']}</Td>
 | 
			
		||||
          <Td>{getUnitSize(service['storage']['/media/frigate/clips']['used'])}</Td>
 | 
			
		||||
          <Td>{getUnitSize(service['storage']['/media/frigate/clips']['total'])}</Td>
 | 
			
		||||
        </Tr>
 | 
			
		||||
      </Fragment>
 | 
			
		||||
    );
 | 
			
		||||
@ -46,8 +53,8 @@ export default function Storage() {
 | 
			
		||||
      <Fragment>
 | 
			
		||||
        <Tr>
 | 
			
		||||
          <Td>Recordings & Snapshots</Td>
 | 
			
		||||
          <Td>{service['storage']['/media/frigate/recordings']['used']}</Td>
 | 
			
		||||
          <Td>{service['storage']['/media/frigate/recordings']['total']}</Td>
 | 
			
		||||
          <Td>{getUnitSize(service['storage']['/media/frigate/recordings']['used'])}</Td>
 | 
			
		||||
          <Td>{getUnitSize(service['storage']['/media/frigate/recordings']['total'])}</Td>
 | 
			
		||||
        </Tr>
 | 
			
		||||
      </Fragment>
 | 
			
		||||
    );
 | 
			
		||||
@ -67,8 +74,8 @@ export default function Storage() {
 | 
			
		||||
                <Thead>
 | 
			
		||||
                  <Tr>
 | 
			
		||||
                    <Th>Location</Th>
 | 
			
		||||
                    <Th>Used MB</Th>
 | 
			
		||||
                    <Th>Total MB</Th>
 | 
			
		||||
                    <Th>Used</Th>
 | 
			
		||||
                    <Th>Total</Th>
 | 
			
		||||
                  </Tr>
 | 
			
		||||
                </Thead>
 | 
			
		||||
                <Tbody>{storage_usage}</Tbody>
 | 
			
		||||
@ -82,20 +89,20 @@ export default function Storage() {
 | 
			
		||||
                <Thead>
 | 
			
		||||
                  <Tr>
 | 
			
		||||
                    <Th>Location</Th>
 | 
			
		||||
                    <Th>Used MB</Th>
 | 
			
		||||
                    <Th>Total MB</Th>
 | 
			
		||||
                    <Th>Used</Th>
 | 
			
		||||
                    <Th>Total</Th>
 | 
			
		||||
                  </Tr>
 | 
			
		||||
                </Thead>
 | 
			
		||||
                <Tbody>
 | 
			
		||||
                  <Tr>
 | 
			
		||||
                    <Td>/dev/shm</Td>
 | 
			
		||||
                    <Td>{service['storage']['/dev/shm']['used']}</Td>
 | 
			
		||||
                    <Td>{service['storage']['/dev/shm']['total']}</Td>
 | 
			
		||||
                    <Td>{getUnitSize(service['storage']['/dev/shm']['used'])}</Td>
 | 
			
		||||
                    <Td>{getUnitSize(service['storage']['/dev/shm']['total'])}</Td>
 | 
			
		||||
                  </Tr>
 | 
			
		||||
                  <Tr>
 | 
			
		||||
                    <Td>/tmp/cache</Td>
 | 
			
		||||
                    <Td>{service['storage']['/tmp/cache']['used']}</Td>
 | 
			
		||||
                    <Td>{service['storage']['/tmp/cache']['total']}</Td>
 | 
			
		||||
                    <Td>{getUnitSize(service['storage']['/tmp/cache']['used'])}</Td>
 | 
			
		||||
                    <Td>{getUnitSize(service['storage']['/tmp/cache']['total'])}</Td>
 | 
			
		||||
                  </Tr>
 | 
			
		||||
                </Tbody>
 | 
			
		||||
              </Table>
 | 
			
		||||
@ -121,7 +128,7 @@ export default function Storage() {
 | 
			
		||||
                  <Tbody>
 | 
			
		||||
                    <Tr>
 | 
			
		||||
                      <Td>{Math.round(camera['usage_percent'] ?? 0)}%</Td>
 | 
			
		||||
                      <Td>{camera['bandwidth'] ? camera['bandwidth'] : 'Calculating...'} MB/hr</Td>
 | 
			
		||||
                      <Td>{camera['bandwidth'] ? getUnitSize(camera['bandwidth']) : 'Calculating...'}/hr</Td>
 | 
			
		||||
                    </Tr>
 | 
			
		||||
                  </Tbody>
 | 
			
		||||
                </Table>
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user