My JSON data looks like this:

/api/v1/volumes:

[
  {
    "id": "vol1",
    "status": "UP",
    "sto": "sto1",
    "statusTime": 1558525963000,
    "resources": {
      "disk": 20000000
    },
    "used_resources": {
      "disk": 15000000
    },
    "lastUpdated": "2019-05-28T20:15:44.585Z"
  },
  {
    "id": "vol2",
    "status": "UP",
    "sto": "sto1",
    "statusTime": 1558525963000,
    "resources": {
      "disk": 50000000
    },
    "used_resources": {
      "disk": 28000000
    },
    "lastUpdated": "2019-05-28T20:15:44.585Z"
  }
]

I want to process this data and calculate the total space occupied in the used_resources.disk fields across all volumes. Additionally, I need to identify the top 5 largest volumes based on used space.

My attempted solution so far:

let _volumes = {
   lastUpdated: 0,
   results: []
}

export function getCapacityByVolumes() {
  if(_volumes.results.length && Date.now() - _volumes.lastUpdated < 1000 * 60) {
    return Promise.resolve(_volumes)
  }
  return fetch('/api/v1/volumes', {
    credentials: 'same-origin'
  })
    .then(result => result.json())
    .then(result => {
      let volumes = result.map(volume => {
        volume.resources = chain(volume.id)
          .groupBy('sto')
          .values()
          .reduce((memo, volume) => {
            return {
               resources: {
                 disk: (memo.resources.disk || 0) + volume.resources.disk
               },
               used_resources: {
                 disk: (memo.used_resources.disk || 0) + volume.used_resources.disk
               }
            }
       }, { resources: {}, used_resources: {}})
       .value()

     volume.largestDisk = chain(volume.id)
        .values()
        .sortBy(vol => vol.used_resources.disk)
        .reverse()
        .take(5)
        .value()

     return volumes
  })
  .value()

  _volumes = {
       results: volumes,
       lastUpdated: result.lastUpdated
  }
  _lastUpdated = Date.now()
  return _volumes
 })
}

Unfortunately, my code doesn't seem to be working properly :( Could it be an issue with the chaining or mapping logic? Any suggestions on how to fix this?

The output I’m aiming for should include the sum of total disk and total used disk grouped by sto, requiring iteration over all volumes (id).

To consume the above function, I am using the following:

class Capacity extends React.Component {
  constructor(props) {
    super(props)
    this.state = {capacity: {}, lastUpdated: null, volumes: []}
  }

  componentDidMount() {
    getCapacityByVolumes()
    .then(result => {
      this.setState({capacity: result.volumes, lastUpdated: result.lastUpdated})
    })
  }

  render() {
    return (
      <div>
        <div className="breadcrumbs">
          <Link to={ '/capacity' } className="crumb">Capacity Dashboard</Link>
        </div>

        <h1 className="m0">Capacity</h1>
        <div>
        {
          chain(this.state.capacity).mapValues((data, id) => {
            return (
              <div key={id}>
                <h2 className="m0">{id.toUpperCase()}</h2>
                <div className="flex flex-wrap">
                  <div className="col col-4 pr3">
                    <h4>Storage Resources</h4>
                    <div className="mb2">
                      Disk capacity
                      <div className="meta-data right">
                        <span className="value">{data.used_resources.disk}</span> used
                        <span className="separator m1">+</span>
                        <span className="value">{data.resources.disk - data.used_resources.disk}</span> available
                        <span className="separator m1">=</span>
                        <span className="value">{data.resources.disk}</span> total
                      </div>
                      <div className="clearfix"></div>
                      <Range
                        value={data.used_resources.disk}
                        total={data.resources.disk} />
                    </div>
                  </div>

                  <div className="col col-4 pr3">
                    <h4>Top 5 Volumes with highest disk</h4>
                    <table className="volumes-table">
                      <tbody className="h6">
                        <tr>
                          <th>Volume</th>
                          <th>disk</th>
                        </tr>
                        {
                          data.largestDisk.map(volume => {
                            return (
                              <tr key={volume.id}>
                                <td><Link to={ '/volumes/' + volume.id }>{volume.id}</Link></td>
                                <td>{formatMB(volume.resources.disk)}</td>
                              </tr>
                            )
                          })
                        }
                      </tbody>
                    </table>
                  </div>
                  <div className="clearfix"></div>
                <hr />
              </div>
            )
          })
          .values()
          .value()
        }
        </div>
      </div>
    )
  }
}

export default Capacity

As a result, I am encountering this error message:

Uncaught (in promise) TypeError: Cannot read property 'dedicated' of undefined