diff --git a/package-lock.json b/package-lock.json index 426e9f1bb..ce14a73c5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6365,8 +6365,7 @@ "@popperjs/core": { "version": "2.5.4", "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.5.4.tgz", - "integrity": "sha512-ZpKr+WTb8zsajqgDkvCEWgp6d5eJT6Q63Ng2neTbzBO76Lbe91vX/iVIW9dikq+Fs3yEo+ls4cxeXABD2LtcbQ==", - "dev": true + "integrity": "sha512-ZpKr+WTb8zsajqgDkvCEWgp6d5eJT6Q63Ng2neTbzBO76Lbe91vX/iVIW9dikq+Fs3yEo+ls4cxeXABD2LtcbQ==" }, "@reach/router": { "version": "1.3.3", @@ -14929,9 +14928,9 @@ } }, "eslint": { - "version": "7.16.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.16.0.tgz", - "integrity": "sha512-iVWPS785RuDA4dWuhhgXTNrGxHHK3a8HLSMBgbbU59ruJDubUraXN8N5rn7kb8tG6sjg74eE0RA3YWT51eusEw==", + "version": "7.17.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.17.0.tgz", + "integrity": "sha512-zJk08MiBgwuGoxes5sSQhOtibZ75pz0J35XTRlZOk9xMffhpA9BTbQZxoXZzOl5zMbleShbGwtw+1kGferfFwQ==", "dev": true, "requires": { "@babel/code-frame": "^7.0.0", @@ -15113,6 +15112,12 @@ "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", "dev": true }, + "json-schema-traverse": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", + "dev": true + }, "levn": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", @@ -15232,26 +15237,26 @@ } }, "table": { - "version": "6.0.4", - "resolved": "https://registry.npmjs.org/table/-/table-6.0.4.tgz", - "integrity": "sha512-sBT4xRLdALd+NFBvwOz8bw4b15htyythha+q+DVZqy2RS08PPC8O2sZFgJYEY7bJvbCFKccs+WIZ/cd+xxTWCw==", + "version": "6.0.7", + "resolved": "https://registry.npmjs.org/table/-/table-6.0.7.tgz", + "integrity": "sha512-rxZevLGTUzWna/qBLObOe16kB2RTnnbhciwgPbMMlazz1yZGVEgnZK762xyVdVznhqxrfCeBMmMkgOOaPwjH7g==", "dev": true, "requires": { - "ajv": "^6.12.4", + "ajv": "^7.0.2", "lodash": "^4.17.20", "slice-ansi": "^4.0.0", "string-width": "^4.2.0" }, "dependencies": { "ajv": { - "version": "6.12.6", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", - "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-7.0.3.tgz", + "integrity": "sha512-R50QRlXSxqXcQP5SvKUrw8VZeypvo12i2IX0EeR5PiZ7bEKeHWgzgo264LDadUsCU42lTJVhFikTqJwNeH34gQ==", "dev": true, "requires": { "fast-deep-equal": "^3.1.1", - "fast-json-stable-stringify": "^2.0.0", - "json-schema-traverse": "^0.4.1", + "json-schema-traverse": "^1.0.0", + "require-from-string": "^2.0.2", "uri-js": "^4.2.2" } } @@ -15447,9 +15452,9 @@ } }, "eslint-plugin-prettier": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.3.0.tgz", - "integrity": "sha512-tMTwO8iUWlSRZIwS9k7/E4vrTsfvsrcM5p1eftyuqWH25nKsz/o6/54I7jwQ/3zobISyC7wMy9ZsFwgTxOcOpQ==", + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.3.1.tgz", + "integrity": "sha512-Rq3jkcFY8RYeQLgk2cCwuc0P7SEFwDravPhsJZOQ5N4YI4DSg50NyqJ/9gdZHzQlHf8MvafSesbNJCcP/FF6pQ==", "dev": true, "requires": { "prettier-linter-helpers": "^1.0.0" @@ -26776,9 +26781,9 @@ "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==" }, "postcss": { - "version": "8.2.1", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.1.tgz", - "integrity": "sha512-RhsqOOAQzTgh1UB/IZdca7F9WDb7SUCR2Vnv1x7DbvuuggQIpoDwjK+q0rzoPffhYvWNKX5JSwS4so4K3UC6vA==", + "version": "8.2.4", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.4.tgz", + "integrity": "sha512-kRFftRoExRVXZlwUuay9iC824qmXPcQQVzAjbCCgjpXnkdMCJYBu2gTwAaFBzv8ewND6O8xFb3aELmEkh9zTzg==", "requires": { "colorette": "^1.2.1", "nanoid": "^3.1.20", @@ -27787,9 +27792,9 @@ } }, "reduce-css-calc": { - "version": "2.1.7", - "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.7.tgz", - "integrity": "sha512-fDnlZ+AybAS3C7Q9xDq5y8A2z+lT63zLbynew/lur/IR24OQF5x98tfNwf79mzEdfywZ0a2wpM860FhFfMxZlA==", + "version": "2.1.8", + "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz", + "integrity": "sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==", "requires": { "css-unit-converter": "^1.1.1", "postcss-value-parser": "^3.3.0" @@ -28036,6 +28041,12 @@ "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=", "dev": true }, + "require-from-string": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz", + "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==", + "dev": true + }, "require-main-filename": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz", @@ -28136,9 +28147,9 @@ } }, "rollup": { - "version": "2.35.1", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.35.1.tgz", - "integrity": "sha512-q5KxEyWpprAIcainhVy6HfRttD9kutQpHbeqDTWnqAFNJotiojetK6uqmcydNMymBEtC4I8bCYR+J3mTMqeaUA==", + "version": "2.36.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.36.1.tgz", + "integrity": "sha512-eAfqho8dyzuVvrGqpR0ITgEdq0zG2QJeWYh+HeuTbpcaXk8vNFc48B7bJa1xYosTCKx0CuW+447oQOW8HgBIZQ==", "dev": true, "requires": { "fsevents": "~2.1.2" @@ -30255,6 +30266,14 @@ } } }, + "sveltejs-tippy": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/sveltejs-tippy/-/sveltejs-tippy-3.0.0.tgz", + "integrity": "sha512-LAfQikm61AeqZW1hCFWUsmGEMmhMHDvrPV0JhbT38Ell9SqBjmFaY//+YKUxaJvx6nLMxGQdlcHA1rDg2Ml8tQ==", + "requires": { + "tippy.js": "~6.0.1" + } + }, "svgo": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz", @@ -30995,6 +31014,14 @@ "resolved": "https://registry.npmjs.org/tinydate/-/tinydate-1.3.0.tgz", "integrity": "sha512-7cR8rLy2QhYHpsBDBVYnnWXm8uRTr38RoZakFSW7Bs7PzfMPNZthuMLkwqZv7MTu8lhQ91cOFYS5a7iFj2oR3w==" }, + "tippy.js": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.0.3.tgz", + "integrity": "sha512-buQF6HugTA4YeSA/s9xBhu0ferEAx7sRSn45G+Juh3p+Dz3vEKfxtqdg6JUnHIWDCV/r0u8Lrobs9AB4dtYcUQ==", + "requires": { + "@popperjs/core": "^2.1.0" + } + }, "tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", diff --git a/package.json b/package.json index a39b7f434..3bfe2f1d2 100644 --- a/package.json +++ b/package.json @@ -28,12 +28,12 @@ "@testing-library/svelte": "^3.0.3", "babel-jest": "^26.6.3", "babel-loader": "8.2.2", - "eslint": "7.16.0", + "eslint": "7.17.0", "eslint-config-airbnb-base": "14.2.1", "eslint-config-prettier": "6.15.0", "eslint-plugin-import": "2.22.1", "eslint-plugin-jest": "24.1.3", - "eslint-plugin-prettier": "3.3.0", + "eslint-plugin-prettier": "3.3.1", "eslint-plugin-svelte3": "3.0.0", "jest": "^26.6.3", "lerna": "3.22.1", @@ -41,7 +41,7 @@ "page": "1.11.6", "prettier": "^2.2.1", "prettier-plugin-svelte": "^1.4.2", - "rollup": "2.35.1", + "rollup": "2.36.1", "rollup-plugin-livereload": "2.0.0", "rollup-plugin-postcss": "3.1.8", "rollup-plugin-svelte": "6.0.1", @@ -61,6 +61,7 @@ "postcss-load-config": "^3.0.0", "sirv-cli": "1.0.10", "svelte-preprocess": "^4.6.1", + "sveltejs-tippy": "^3.0.0", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1" } } diff --git a/rollup.config.js b/rollup.config.js index d8b4ccef1..fe55b3b01 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,5 +1,6 @@ import replace from "@rollup/plugin-replace"; import svelte from "rollup-plugin-svelte"; +import postcss from "rollup-plugin-postcss"; import resolve from "@rollup/plugin-node-resolve"; import commonjs from "@rollup/plugin-commonjs"; import livereload from "rollup-plugin-livereload"; @@ -39,6 +40,9 @@ export default { file: "public/build/bundle.js", }, plugins: [ + postcss({ + plugins: [], + }), svelte({ // enable run-time checks when not in production dev: !production, @@ -56,6 +60,9 @@ export default { __VERSION__: execSync("git rev-list HEAD --max-count=1") .toString() .trim(), + "process.env.NODE_ENV": JSON.stringify( + production ? "production" : "development" + ), }), // If you have external dependencies installed from // npm, you'll most likely need these plugins. In diff --git a/scripts/build-glean-metadata.py b/scripts/build-glean-metadata.py index 458e15d33..4eea47123 100755 --- a/scripts/build-glean-metadata.py +++ b/scripts/build-glean-metadata.py @@ -43,6 +43,9 @@ def _serialize_sets(obj): app_data = dict(app.repo, pings=[], metrics=[]) + app_id = app.app_id + app_id_snakecase = stringcase.snakecase(app_id) + # metrics data metrics = app.get_metrics() metric_pings = dict(data=[]) @@ -62,12 +65,28 @@ def _serialize_sets(obj): "description": metric.description, } ) + + stable_ping_table_names = [] + for ping in metric.definition["send_in_pings"]: + stable_ping_table_names.append( + [ping, f"{app_id_snakecase}.{stringcase.snakecase(ping)}"] + ) + + metric_type = metric.definition["type"] + metric_name_snakecase = stringcase.snakecase(metric.identifier) + bigquery_names = dict( + stable_ping_table_names=stable_ping_table_names, + metric_type=metric_type, + metric_table_name=f"metrics.{metric_type}.{metric_name_snakecase}", + ) + open(os.path.join(app_metrics_dir, f"{metric.identifier}.json"), "w").write( json.dumps( dict( metric.definition, name=metric.identifier, history=metric.definition_history, + bigquery_names=bigquery_names, ), default=_serialize_sets, ) @@ -79,8 +98,6 @@ def _serialize_sets(obj): ) # write table description - app_id = app.app_id - app_id_snakecase = stringcase.snakecase(app_id) ping_name_snakecase = stringcase.snakecase(ping.identifier) stable_ping_table_name = f"{app_id_snakecase}.{ping_name_snakecase}" live_ping_table_name = f"{app_id_snakecase}_live_v1.{ping_name_snakecase}" diff --git a/src/__snapshots__/storyshots.test.js.snap b/src/__snapshots__/storyshots.test.js.snap index 5fff6d9fa..544406454 100644 --- a/src/__snapshots__/storyshots.test.js.snap +++ b/src/__snapshots__/storyshots.test.js.snap @@ -645,6 +645,7 @@ exports[`Storyshots ItemList Default 1`] = ` + `; @@ -681,7 +682,7 @@ exports[`Storyshots Pagination Default 1`] = ` of - 21 + 11 ( @@ -692,13 +693,13 @@ exports[`Storyshots Pagination Default 1`] = ` - - 8 + 20 on - 204 + 210 items) @@ -761,7 +762,7 @@ exports[`Storyshots Pagination Default 1`] = ` @@ -788,6 +789,7 @@ exports[`Storyshots Pagination Default 1`] = ` + `; @@ -796,7 +798,7 @@ exports[`Storyshots Pill Deprecated 1`] = ` class="storybook-snapshot-container" >
Deprecated diff --git a/src/components/HelpHoverable.svelte b/src/components/HelpHoverable.svelte new file mode 100644 index 000000000..7648df05c --- /dev/null +++ b/src/components/HelpHoverable.svelte @@ -0,0 +1,23 @@ + + + + +
+ + + +
diff --git a/src/components/ItemList.svelte b/src/components/ItemList.svelte index 13581c50f..897faf19d 100644 --- a/src/components/ItemList.svelte +++ b/src/components/ItemList.svelte @@ -1,36 +1,39 @@ + +
{message}
diff --git a/src/components/icons/InfoIcon.svelte b/src/components/icons/InfoIcon.svelte new file mode 100644 index 000000000..69c8fb0dd --- /dev/null +++ b/src/components/icons/InfoIcon.svelte @@ -0,0 +1,10 @@ + + + diff --git a/src/data/help.js b/src/data/help.js new file mode 100644 index 000000000..9867c1e25 --- /dev/null +++ b/src/data/help.js @@ -0,0 +1,18 @@ +export default { + bugs: { + text: + "Required. A list of bugs (e.g. Bugzilla or GitHub) that are relevant to this metric. For example, bugs that track its original implementation or later changes to it.", + link: "https://mozilla.github.io/glean/book/user/metric-parameters.html", + }, + lifetime: { + text: + "Defines the lifetime of the metric. Different lifetimes affect when the metrics value is reset.", + link: "https://mozilla.github.io/glean/book/user/metric-parameters.html", + }, + send_in_pings: { + text: + "Defines which pings the metric should be sent on. If not specified, the metric is sent on the 'default ping', which is the events ping for events and the metrics ping for everything else. Most metrics don't need to specify this unless they are sent on custom pings.", + // link: + // "https://mozilla.github.io/glean/book/user/metric-parameters.html", + }, +}; diff --git a/src/pages/MetricDetail.svelte b/src/pages/MetricDetail.svelte index a522d8e0f..adcfe107e 100644 --- a/src/pages/MetricDetail.svelte +++ b/src/pages/MetricDetail.svelte @@ -1,8 +1,11 @@ + +

+ Page + {currentPage} + of + {lastPage} + ({from} + - + {to} + on + {totalItems} + items) +

+ +{#if itemsPerPage < totalItems} +
+
+
changePage(currentPage !== 1 ? currentPage - 1 : 1)} + class="h-12 w-12 mr-1 flex justify-center items-center rounded-full bg-gray-200 cursor-pointer {currentPage === 1 ? 'bg-teal-600 text-white' : ''}"> + +
+
+ {#each truncatedPagination(currentPage, lastPage) as page} +
changePage(Number.isInteger(page) ? page : currentPage)} + class="w-12 md:flex justify-center items-center hidden cursor-pointer {page === currentPage ? 'bg-teal-600 text-white' : ''}"> + {page} +
+ {/each} +
+
changePage(currentPage !== lastPage ? currentPage + 1 : lastPage)} + class="h-12 w-12 ml-1 flex justify-center items-center rounded-full bg-gray-200 cursor-pointer {currentPage === lastPage ? 'bg-teal-600 text-white' : ''}"> + +
+
+
+{/if} diff --git a/stories/pagination.stories.js b/stories/pagination.stories.js index 4d012e2cc..6d711cbaf 100644 --- a/stories/pagination.stories.js +++ b/stories/pagination.stories.js @@ -1,12 +1,9 @@ import { text } from "@storybook/addon-knobs"; -import Pagination from "../src/components/Pagination.svelte"; +import Pagination from "./Pagination.svelte"; -const paginationState = { - total: 204, - currentPage: 1, - lastPage: 21, - from: 1, - to: 8, +const items = { + total: 210, + perPage: 20, }; export default { @@ -16,10 +13,7 @@ export default { export const Default = () => ({ Component: Pagination, props: { - currentPage: text("Current page number", paginationState.currentPage), - lastPage: text("Last page number", paginationState.lastPage), - from: text("From item", paginationState.from), - to: text("To item", paginationState.to), - total: text("Total number of items", paginationState.total), + itemsPerPage: items.perPage, + totalItems: text("Total number of items", items.total), }, });