mirror of
				https://github.com/karl0ss/homepage.git
				synced 2025-11-04 08:20:58 +00:00 
			
		
		
		
	Settle on four fields with free size displayed as Available
This commit is contained in:
		
							parent
							
								
									11ae52df4a
								
							
						
					
					
						commit
						f53f975669
					
				@ -9,7 +9,18 @@ export default function Container({ error = false, children, service }) {
 | 
			
		||||
  const fields = service?.widget?.fields;
 | 
			
		||||
  const type = service?.widget?.type;
 | 
			
		||||
  if (fields && type) {
 | 
			
		||||
    visibleChildren = children.filter(child => fields.some(field => `${type}.${field}` === child?.props?.label));
 | 
			
		||||
    // if the field contains a "." then it most likely contains a common loc value
 | 
			
		||||
    // logic now allows a fields array that can look like:
 | 
			
		||||
    // fields: [ "resources.cpu", "resources.mem", "field"]
 | 
			
		||||
    // or even
 | 
			
		||||
    // fields: [ "resources.cpu", "widget_type.field" ]
 | 
			
		||||
    visibleChildren = children.filter(child => fields.some(field => {
 | 
			
		||||
      let fullField = field;
 | 
			
		||||
      if (!field.includes(".")) {
 | 
			
		||||
        fullField = `${type}.${field}`;
 | 
			
		||||
      }
 | 
			
		||||
      return fullField === child?.props?.label;
 | 
			
		||||
    }));
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  return <div className="relative flex flex-row w-full">{visibleChildren}</div>;
 | 
			
		||||
 | 
			
		||||
@ -35,7 +35,9 @@ export default function Component({ service }) {
 | 
			
		||||
  // storage info
 | 
			
		||||
  // TODO: figure out how to display info for more than one volume
 | 
			
		||||
  const volume = storageData.data.vol_info?.[0];
 | 
			
		||||
  const freeVolume = 100 - (100 * (parseFloat(volume?.used_size) / parseFloat(volume?.total_size)));
 | 
			
		||||
  const usedBytes = parseFloat(volume?.used_size);
 | 
			
		||||
  const totalBytes = parseFloat(volume?.total_size);
 | 
			
		||||
  const freeBytes = totalBytes - usedBytes;
 | 
			
		||||
 | 
			
		||||
  // utilization info
 | 
			
		||||
  const { cpu, memory } = utilizationData.data;
 | 
			
		||||
@ -45,7 +47,7 @@ export default function Component({ service }) {
 | 
			
		||||
  return (
 | 
			
		||||
    <Container service={service}>
 | 
			
		||||
      <Block label="diskstation.uptime" value={ uptime } />
 | 
			
		||||
      <Block label="diskstation.volumeAvailable" value={ t("common.percent", { value: freeVolume }) } />
 | 
			
		||||
      <Block label="diskstation.volumeAvailable" value={ t("common.bbytes", { value: freeBytes, maximumFractionDigits: 1 }) } />
 | 
			
		||||
      <Block label="resources.cpu" value={ t("common.percent", { value: cpuLoad }) } />
 | 
			
		||||
      <Block label="resources.mem" value={ t("common.percent", { value: memoryUsage }) } />
 | 
			
		||||
    </Container>
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user