diff --git a/gcp/appengine/frontend3/package-lock.json b/gcp/appengine/frontend3/package-lock.json index 9f1a2b42af8..83e972078ad 100644 --- a/gcp/appengine/frontend3/package-lock.json +++ b/gcp/appengine/frontend3/package-lock.json @@ -10,6 +10,7 @@ "@hotwired/turbo": "^7.1.0", "@material/data-table": "^13.0.0", "@material/layout-grid": "^13.0.0", + "@material/mwc-circular-progress": "^0.25.3", "@material/mwc-icon": "^0.25.3", "@material/mwc-icon-button": "^0.25.3", "@material/mwc-textfield": "^0.25.3", @@ -1862,6 +1863,70 @@ "tslib": "^2.1.0" } }, + "node_modules/@material/circular-progress": { + "version": "14.0.0-canary.261f2db59.0", + "resolved": "https://registry.npmjs.org/@material/circular-progress/-/circular-progress-14.0.0-canary.261f2db59.0.tgz", + "integrity": "sha512-Gi6Ika8MEZQOT3Qei2NfTj+sRWxCDFjchPM7szNjIKgL2DyH03bHmodQFVcyBFiPWEcWMc/mqVYgGf/XJXs85w==", + "dependencies": { + "@material/animation": "14.0.0-canary.261f2db59.0", + "@material/base": "14.0.0-canary.261f2db59.0", + "@material/feature-targeting": "14.0.0-canary.261f2db59.0", + "@material/progress-indicator": "14.0.0-canary.261f2db59.0", + "@material/rtl": "14.0.0-canary.261f2db59.0", + "@material/theme": "14.0.0-canary.261f2db59.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/circular-progress/node_modules/@material/animation": { + "version": "14.0.0-canary.261f2db59.0", + "resolved": "https://registry.npmjs.org/@material/animation/-/animation-14.0.0-canary.261f2db59.0.tgz", + "integrity": "sha512-OjxWJYSRNs4vnPe8NclaNn+TsNc8TR/wHusGtezF5F+wl+5mh+K69BMXAmURtq3idoRg4XaOSC/Ohk1ovD1fMQ==", + "dependencies": { + "tslib": "^2.1.0" + } + }, + "node_modules/@material/circular-progress/node_modules/@material/base": { + "version": "14.0.0-canary.261f2db59.0", + "resolved": "https://registry.npmjs.org/@material/base/-/base-14.0.0-canary.261f2db59.0.tgz", + "integrity": "sha512-vy5SQt+jcwwdRFfBvtpVdpULUBujecVUKOXcopaQoi2XIzI5EBHuR4gPN0cd1yfmVEucD6p2fvVv2FJ3Ngr61w==", + "dependencies": { + "tslib": "^2.1.0" + } + }, + "node_modules/@material/circular-progress/node_modules/@material/feature-targeting": { + "version": "14.0.0-canary.261f2db59.0", + "resolved": "https://registry.npmjs.org/@material/feature-targeting/-/feature-targeting-14.0.0-canary.261f2db59.0.tgz", + "integrity": "sha512-CrVoGNu0ym52OPEKy3kgeNL2oSWOCBYbYxSH3GhERxCq5FwGBN+XmK/ZDLFVQlHYy3v8x4TqVEwXviCeumNTxQ==", + "dependencies": { + "tslib": "^2.1.0" + } + }, + "node_modules/@material/circular-progress/node_modules/@material/progress-indicator": { + "version": "14.0.0-canary.261f2db59.0", + "resolved": "https://registry.npmjs.org/@material/progress-indicator/-/progress-indicator-14.0.0-canary.261f2db59.0.tgz", + "integrity": "sha512-qm+zUMvFYhHuVB2OdgWTO/Dv1hMFEdIT3loX5OJMpvQ66l6rez/3F7blwHkm6W4mfuxRS3zdDdYbP5QdFcuHuA==", + "dependencies": { + "tslib": "^2.1.0" + } + }, + "node_modules/@material/circular-progress/node_modules/@material/rtl": { + "version": "14.0.0-canary.261f2db59.0", + "resolved": "https://registry.npmjs.org/@material/rtl/-/rtl-14.0.0-canary.261f2db59.0.tgz", + "integrity": "sha512-bVnXBbUsHs57+EXdeFbcwaKy3lT/itI/qTLmJ88ar0qaGEujO1GmESHm3ioqkeo4kQpTfDhBwQGeEi1aDaTdFg==", + "dependencies": { + "@material/theme": "14.0.0-canary.261f2db59.0", + "tslib": "^2.1.0" + } + }, + "node_modules/@material/circular-progress/node_modules/@material/theme": { + "version": "14.0.0-canary.261f2db59.0", + "resolved": "https://registry.npmjs.org/@material/theme/-/theme-14.0.0-canary.261f2db59.0.tgz", + "integrity": "sha512-bUqyFT0QF8Nxx02fekt3CXIfC9DEPOPdo2hjgdtvhrNP+vftbkI2tKZ5/uRUnVA+zqQAOyIl5z6FOMg4fyemCA==", + "dependencies": { + "@material/feature-targeting": "14.0.0-canary.261f2db59.0", + "tslib": "^2.1.0" + } + }, "node_modules/@material/data-table": { "version": "13.0.0", "resolved": "https://registry.npmjs.org/@material/data-table/-/data-table-13.0.0.tgz", @@ -2076,6 +2141,35 @@ "tslib": "^2.1.0" } }, + "node_modules/@material/mwc-circular-progress": { + "version": "0.25.3", + "resolved": "https://registry.npmjs.org/@material/mwc-circular-progress/-/mwc-circular-progress-0.25.3.tgz", + "integrity": "sha512-ajgSzfdRfq0/sZg0Z5W/ZpgZwD8Ioj59m5ScCPXXdkRoVHf7+8lsD/2Fh4095GfoYE4PWSkXYVlWsQCx+aJbcA==", + "dependencies": { + "@material/circular-progress": "=14.0.0-canary.261f2db59.0", + "@material/mwc-base": "^0.25.3", + "@material/theme": "=14.0.0-canary.261f2db59.0", + "lit": "^2.0.0", + "tslib": "^2.0.1" + } + }, + "node_modules/@material/mwc-circular-progress/node_modules/@material/feature-targeting": { + "version": "14.0.0-canary.261f2db59.0", + "resolved": "https://registry.npmjs.org/@material/feature-targeting/-/feature-targeting-14.0.0-canary.261f2db59.0.tgz", + "integrity": "sha512-CrVoGNu0ym52OPEKy3kgeNL2oSWOCBYbYxSH3GhERxCq5FwGBN+XmK/ZDLFVQlHYy3v8x4TqVEwXviCeumNTxQ==", + "dependencies": { + "tslib": "^2.1.0" + } + }, + "node_modules/@material/mwc-circular-progress/node_modules/@material/theme": { + "version": "14.0.0-canary.261f2db59.0", + "resolved": "https://registry.npmjs.org/@material/theme/-/theme-14.0.0-canary.261f2db59.0.tgz", + "integrity": "sha512-bUqyFT0QF8Nxx02fekt3CXIfC9DEPOPdo2hjgdtvhrNP+vftbkI2tKZ5/uRUnVA+zqQAOyIl5z6FOMg4fyemCA==", + "dependencies": { + "@material/feature-targeting": "14.0.0-canary.261f2db59.0", + "tslib": "^2.1.0" + } + }, "node_modules/@material/mwc-floating-label": { "version": "0.25.3", "resolved": "https://registry.npmjs.org/@material/mwc-floating-label/-/mwc-floating-label-0.25.3.tgz", @@ -10827,6 +10921,72 @@ "tslib": "^2.1.0" } }, + "@material/circular-progress": { + "version": "14.0.0-canary.261f2db59.0", + "resolved": "https://registry.npmjs.org/@material/circular-progress/-/circular-progress-14.0.0-canary.261f2db59.0.tgz", + "integrity": "sha512-Gi6Ika8MEZQOT3Qei2NfTj+sRWxCDFjchPM7szNjIKgL2DyH03bHmodQFVcyBFiPWEcWMc/mqVYgGf/XJXs85w==", + "requires": { + "@material/animation": "14.0.0-canary.261f2db59.0", + "@material/base": "14.0.0-canary.261f2db59.0", + "@material/feature-targeting": "14.0.0-canary.261f2db59.0", + "@material/progress-indicator": "14.0.0-canary.261f2db59.0", + "@material/rtl": "14.0.0-canary.261f2db59.0", + "@material/theme": "14.0.0-canary.261f2db59.0", + "tslib": "^2.1.0" + }, + "dependencies": { + "@material/animation": { + "version": "14.0.0-canary.261f2db59.0", + "resolved": "https://registry.npmjs.org/@material/animation/-/animation-14.0.0-canary.261f2db59.0.tgz", + "integrity": "sha512-OjxWJYSRNs4vnPe8NclaNn+TsNc8TR/wHusGtezF5F+wl+5mh+K69BMXAmURtq3idoRg4XaOSC/Ohk1ovD1fMQ==", + "requires": { + "tslib": "^2.1.0" + } + }, + "@material/base": { + "version": "14.0.0-canary.261f2db59.0", + "resolved": "https://registry.npmjs.org/@material/base/-/base-14.0.0-canary.261f2db59.0.tgz", + "integrity": "sha512-vy5SQt+jcwwdRFfBvtpVdpULUBujecVUKOXcopaQoi2XIzI5EBHuR4gPN0cd1yfmVEucD6p2fvVv2FJ3Ngr61w==", + "requires": { + "tslib": "^2.1.0" + } + }, + "@material/feature-targeting": { + "version": "14.0.0-canary.261f2db59.0", + "resolved": "https://registry.npmjs.org/@material/feature-targeting/-/feature-targeting-14.0.0-canary.261f2db59.0.tgz", + "integrity": "sha512-CrVoGNu0ym52OPEKy3kgeNL2oSWOCBYbYxSH3GhERxCq5FwGBN+XmK/ZDLFVQlHYy3v8x4TqVEwXviCeumNTxQ==", + "requires": { + "tslib": "^2.1.0" + } + }, + "@material/progress-indicator": { + "version": "14.0.0-canary.261f2db59.0", + "resolved": "https://registry.npmjs.org/@material/progress-indicator/-/progress-indicator-14.0.0-canary.261f2db59.0.tgz", + "integrity": "sha512-qm+zUMvFYhHuVB2OdgWTO/Dv1hMFEdIT3loX5OJMpvQ66l6rez/3F7blwHkm6W4mfuxRS3zdDdYbP5QdFcuHuA==", + "requires": { + "tslib": "^2.1.0" + } + }, + "@material/rtl": { + "version": "14.0.0-canary.261f2db59.0", + "resolved": "https://registry.npmjs.org/@material/rtl/-/rtl-14.0.0-canary.261f2db59.0.tgz", + "integrity": "sha512-bVnXBbUsHs57+EXdeFbcwaKy3lT/itI/qTLmJ88ar0qaGEujO1GmESHm3ioqkeo4kQpTfDhBwQGeEi1aDaTdFg==", + "requires": { + "@material/theme": "14.0.0-canary.261f2db59.0", + "tslib": "^2.1.0" + } + }, + "@material/theme": { + "version": "14.0.0-canary.261f2db59.0", + "resolved": "https://registry.npmjs.org/@material/theme/-/theme-14.0.0-canary.261f2db59.0.tgz", + "integrity": "sha512-bUqyFT0QF8Nxx02fekt3CXIfC9DEPOPdo2hjgdtvhrNP+vftbkI2tKZ5/uRUnVA+zqQAOyIl5z6FOMg4fyemCA==", + "requires": { + "@material/feature-targeting": "14.0.0-canary.261f2db59.0", + "tslib": "^2.1.0" + } + } + } + }, "@material/data-table": { "version": "13.0.0", "resolved": "https://registry.npmjs.org/@material/data-table/-/data-table-13.0.0.tgz", @@ -11043,6 +11203,37 @@ } } }, + "@material/mwc-circular-progress": { + "version": "0.25.3", + "resolved": "https://registry.npmjs.org/@material/mwc-circular-progress/-/mwc-circular-progress-0.25.3.tgz", + "integrity": "sha512-ajgSzfdRfq0/sZg0Z5W/ZpgZwD8Ioj59m5ScCPXXdkRoVHf7+8lsD/2Fh4095GfoYE4PWSkXYVlWsQCx+aJbcA==", + "requires": { + "@material/circular-progress": "=14.0.0-canary.261f2db59.0", + "@material/mwc-base": "^0.25.3", + "@material/theme": "=14.0.0-canary.261f2db59.0", + "lit": "^2.0.0", + "tslib": "^2.0.1" + }, + "dependencies": { + "@material/feature-targeting": { + "version": "14.0.0-canary.261f2db59.0", + "resolved": "https://registry.npmjs.org/@material/feature-targeting/-/feature-targeting-14.0.0-canary.261f2db59.0.tgz", + "integrity": "sha512-CrVoGNu0ym52OPEKy3kgeNL2oSWOCBYbYxSH3GhERxCq5FwGBN+XmK/ZDLFVQlHYy3v8x4TqVEwXviCeumNTxQ==", + "requires": { + "tslib": "^2.1.0" + } + }, + "@material/theme": { + "version": "14.0.0-canary.261f2db59.0", + "resolved": "https://registry.npmjs.org/@material/theme/-/theme-14.0.0-canary.261f2db59.0.tgz", + "integrity": "sha512-bUqyFT0QF8Nxx02fekt3CXIfC9DEPOPdo2hjgdtvhrNP+vftbkI2tKZ5/uRUnVA+zqQAOyIl5z6FOMg4fyemCA==", + "requires": { + "@material/feature-targeting": "14.0.0-canary.261f2db59.0", + "tslib": "^2.1.0" + } + } + } + }, "@material/mwc-floating-label": { "version": "0.25.3", "resolved": "https://registry.npmjs.org/@material/mwc-floating-label/-/mwc-floating-label-0.25.3.tgz", diff --git a/gcp/appengine/frontend3/package.json b/gcp/appengine/frontend3/package.json index 55a3fc3571c..37becfbe79b 100644 --- a/gcp/appengine/frontend3/package.json +++ b/gcp/appengine/frontend3/package.json @@ -11,6 +11,7 @@ "@hotwired/turbo": "^7.1.0", "@material/data-table": "^13.0.0", "@material/layout-grid": "^13.0.0", + "@material/mwc-circular-progress": "^0.25.3", "@material/mwc-icon": "^0.25.3", "@material/mwc-icon-button": "^0.25.3", "@material/mwc-textfield": "^0.25.3", diff --git a/gcp/appengine/frontend3/src/index.js b/gcp/appengine/frontend3/src/index.js index d5af53b6096..9053471a40e 100644 --- a/gcp/appengine/frontend3/src/index.js +++ b/gcp/appengine/frontend3/src/index.js @@ -1,4 +1,5 @@ import './styles.scss'; +import '@material/mwc-circular-progress'; import '@material/mwc-icon'; import '@material/mwc-icon-button'; import '@material/mwc-textfield'; diff --git a/gcp/appengine/frontend3/src/styles.scss b/gcp/appengine/frontend3/src/styles.scss index 9c9cbe8bbdd..55eeed66ed7 100644 --- a/gcp/appengine/frontend3/src/styles.scss +++ b/gcp/appengine/frontend3/src/styles.scss @@ -57,7 +57,7 @@ body { color: $osv-text-color; font-family: $osv-font-family; font-size: 14px; - --mdc-theme-primary: $osv-text-color; + --mdc-theme-primary: #{$osv-text-color}; --mdc-theme-surface: $osv-background; --mdc-theme-background: $osv-background; --mdc-typography-font-family: $osv-font-family; @@ -80,6 +80,17 @@ turbo-frame { display: contents; } +.link-button { + display: inline-flex; + padding: 0 16px; + height: 36px; + background: $osv-accent-color; + color: $osv-text-color; + border-radius: 4px; + align-items: center; + text-decoration: none; +} + /** WIP notice */ .wip-notice { @@ -176,10 +187,34 @@ mwc-icon-button.mdc-data-table__sort-icon-button { .vuln-table-container { // The vulnerability list should be full-width but not overflow the page bounds. - @include full-width; + overflow-x: scroll; + width: 100%; + + // Apply table display etc. .vuln-table { - overflow-x: scroll; - width: 100%; + display: table; + } + .vuln-table-header { + display: table-header-group; + } + .vuln-table-rows { + display: table-row-group; + } + .vuln-table-row { + display: table-row; + } + .vuln-table-cell { + display: table-cell; + vertical-align: middle; + } + + // Swap next page button/loading indicator as needed. + turbo-frame .next-page-indicator, + turbo-frame[busy] .next-page-button { + display: none; + } + turbo-frame[busy] .next-page-indicator { + display: block; } } diff --git a/gcp/appengine/frontend3/src/templates/list.html b/gcp/appengine/frontend3/src/templates/list.html index 50a5408ccb7..c15a3f3cf6e 100644 --- a/gcp/appengine/frontend3/src/templates/list.html +++ b/gcp/appengine/frontend3/src/templates/list.html @@ -2,8 +2,8 @@ {% set active_section = 'vulnerabilities' %} {% macro table_header_cell(column_id, column_name) %} - - + {% endmacro %} {% block content %} -
+
+

Vulnerability Library

@@ -31,56 +32,53 @@

Vulnerability Library

- -
- Pages - 1 - 2 - 3 +
+
+
+
+
+
+ {{ table_header_cell('id', 'ID') }} + {{ table_header_cell('package', 'Packages') }} + {{ table_header_cell('summary', 'Summary') }} + {{ table_header_cell('affected-versions', 'Affected versions') }} + {{ table_header_cell('ecosystem', 'Ecosystem') }} + {{ table_header_cell('last-modified', 'Last modified') }}
-
-
-
- - - - {{ table_header_cell('id', 'ID') }} - {{ table_header_cell('package', 'Packages') }} - {{ table_header_cell('summary', 'Summary') }} - {{ table_header_cell('affected-versions', 'Affected versions') }} - {{ table_header_cell('ecosystem', 'Ecosystem') }} - {{ table_header_cell('last-modified', 'Last modified') }} - - - - {% for vulnerability in vulnerabilities %} - - - - - - - - - {% endfor %} - -
- {{ vulnerability.id }} - - {% for package in vulnerability.packages %} - {{ package }} - {% endfor %} - - {{ vulnerability.summary }} - - {% for version in vulnerability.versions %} - {{ version }} - {% endfor %} -
-
+
+
+ + {% for vulnerability in vulnerabilities %} +
+ + {{ vulnerability.id }} + + + {% for package in vulnerability.packages %} + {{ package }} + {% endfor %} + + + {{ vulnerability.summary }} + + + {% for version in vulnerability.versions %} + {{ version }} + {% endfor %} + + +
-
- + {% endfor %} + +
+ Load more... + +
+ + +
+
{% endblock %} diff --git a/gcp/appengine/frontend_handlers.py b/gcp/appengine/frontend_handlers.py index d0d93a451f0..ebfffd9f4e6 100644 --- a/gcp/appengine/frontend_handlers.py +++ b/gcp/appengine/frontend_handlers.py @@ -100,7 +100,8 @@ def list(): "versions": item['affected'][0]['versions'] }) - return render_template('list.html', vulnerabilities=vulnerabilities) + return render_template( + 'list.html', page=page, vulnerabilities=vulnerabilities) @blueprint.route('/v2/vulnerability/')