Component download as CSV does not work for large projects

[3nol]

Current Behavior

When attempting to download components in CSV format (added in v4.12.0 as part of #993) for a large project - in my case 2625 components - the download dialog never shows up.

I checked the logs of my apiserver and frontend Docker containers, but didn't find any ERRORs. Instead, after a while, the following exception shows up in the browser console:

chunk-vendors.c39ed462.js:71 TypeError: n.map is not a function
    at a.buildTableFile (chunk-79441b1c.a2843adb.js:35:85739)
    at a.<anonymous> (chunk-79441b1c.a2843adb.js:35:86202)
    at a.<anonymous> (chunk-79441b1c.a2843adb.js:35:74725)
    at Generator.<anonymous> (chunk-79441b1c.a2843adb.js:35:77467)
    at Generator.next (chunk-79441b1c.a2843adb.js:35:78317)
    at kt (chunk-79441b1c.a2843adb.js:35:78535)
    at a (chunk-79441b1c.a2843adb.js:35:78739)
xr @ chunk-vendors.c39ed462.js:71
_r @ chunk-vendors.c39ed462.js:71
Or @ chunk-vendors.c39ed462.js:71
(anonymous) @ chunk-vendors.c39ed462.js:71
Promise.catch
Sr @ chunk-vendors.c39ed462.js:71
n @ chunk-vendors.c39ed462.js:71
Sr @ chunk-vendors.c39ed462.js:71
t.$emit @ chunk-vendors.c39ed462.js:71
onClick @ chunk-vendors.c39ed462.js:44
Sr @ chunk-vendors.c39ed462.js:71
n @ chunk-vendors.c39ed462.js:71
(anonymous) @ chunk-vendors.c39ed462.js:44
onClick @ chunk-vendors.c39ed462.js:44
Sr @ chunk-vendors.c39ed462.js:71
n @ chunk-vendors.c39ed462.js:71
o._wrapper @ chunk-vendors.c39ed462.js:71

Inspecting the frontend code, this exception indeed seems to be related, and occurs here:

buildTableFile: function(t, e) {
    if ("csv" == e) {
        var n = t.data
          , o = ["name", "version", "group", "internal", "resolvedLicense.licenseId", "lastInheritedRiskScore", "metrics.vulnerabilities"]
          , r = [o.join(",")].concat(At(n.map((function(t) {
            return o.map((function(e) {
                return xt(t, e)
            }
            )).join(",")
        }
        )))).join("\r\n")
          , i = window.URL.createObjectURL(new Blob([r]))
          , a = document.createElement("a");
        a.href = i;
        var s = "componentTable.csv";
        a.setAttribute("download", s),
        document.body.appendChild(a),
        a.click()
    }
}

A different project with only 51 components immediately offers me the download of "componentTable.csv".

Steps to Reproduce

1. Choose a large project and go to its components tab (i.e, https://<DT-URI>/projects/<UUID>/components). In my case larger than 2600 components.
2. Click "Download Components > CSV".
3. The download dialog never shows up.

Expected Behavior

Dependency-Track should offer the download of "componentTable.csv".

Dependency-Track Version

4.13.6

Dependency-Track Distribution

Container Image

Database Server

PostgreSQL

Database Server Version

15.4

Browser

Google Chrome

Checklist

• I have read and understand the contributing guidelines
• I have checked the existing issues for whether this defect was already reported

[3nol]

I can see that the data is being downloaded from /api/v1/component/project/<UUID>?limit=1000000&offset=0 in the background, and the resulting JSON is to be mapped to CSV. It appears as if either a network timeout or a data limit truncates the JSON, making it an invalid object to work with?

N.B. downloading from the apiserver via curl also returns a truncated (i.e, invalid) JSON upon closing the connection.

[nscuro]

Yeah I think the issue is that the frontend bypasses pagination and tries to fetch everything in a single request. Luckily that means the fix is pretty simple: Simply add pagination to the frontend code.