diff --git a/graylog2-web-interface/packages/graylog-web-plugin/package.json b/graylog2-web-interface/packages/graylog-web-plugin/package.json index ef3f85aa55d3..12e364146bf3 100644 --- a/graylog2-web-interface/packages/graylog-web-plugin/package.json +++ b/graylog2-web-interface/packages/graylog-web-plugin/package.json @@ -59,7 +59,7 @@ "reflux": "0.2.13", "styled-components": "5.2.3", "stylelint-config-graylog": "file:../stylelint-config-graylog", - "typescript": "4.3.2", + "typescript": "4.4.2", "webpack": "4.44.2", "webpack-cleanup-plugin": "0.5.1", "webpack-cli": "3.3.12", diff --git a/graylog2-web-interface/src/views/components/datatable/DataTable.tsx b/graylog2-web-interface/src/views/components/datatable/DataTable.tsx index 0c6e83a7ce79..ac3c53881283 100644 --- a/graylog2-web-interface/src/views/components/datatable/DataTable.tsx +++ b/graylog2-web-interface/src/views/components/datatable/DataTable.tsx @@ -94,7 +94,7 @@ const DataTable = ({ config, currentView, data, fields }: Props) => { useEffect(onRenderComplete, [onRenderComplete]); const { columnPivots, rowPivots, series, rollup } = config; - const rows = data.chart || Object.values(data)[0] || []; + const rows = (data.chart ?? Object.values(data)[0] ?? []) as Rows; const rowFieldNames = rowPivots.map((pivot) => pivot.field); const columnFieldNames = columnPivots.map((pivot) => pivot.field); @@ -103,7 +103,7 @@ const DataTable = ({ config, currentView, data, fields }: Props) => { const effectiveFields = Immutable.OrderedSet(rowFieldNames.map((field) => ({ field, source: field }))) .merge(seriesToMerge.map((s) => ({ field: s.effectiveName, source: s.function }))); - const expandedRows = expandRows(rowFieldNames.slice(), columnFieldNames.slice(), rows.filter((r) => r.source === 'leaf') as Array); + const expandedRows = expandRows(rowFieldNames.slice(), columnFieldNames.slice(), rows.filter((r): r is Leaf => r.source === 'leaf')); const actualColumnPivotFields = _extractColumnPivotValues(rows); diff --git a/graylog2-web-interface/src/views/components/visualizations/area/AreaVisualization.tsx b/graylog2-web-interface/src/views/components/visualizations/area/AreaVisualization.tsx index 555190e57bdd..df0292e2834d 100644 --- a/graylog2-web-interface/src/views/components/visualizations/area/AreaVisualization.tsx +++ b/graylog2-web-interface/src/views/components/visualizations/area/AreaVisualization.tsx @@ -23,6 +23,7 @@ import type { VisualizationComponentProps } from 'views/components/aggregationbu import { AggregationType, AggregationResult } from 'views/components/aggregationbuilder/AggregationBuilderPropTypes'; import AreaVisualizationConfig from 'views/logic/aggregationbuilder/visualizations/AreaVisualizationConfig'; import { makeVisualization } from 'views/components/aggregationbuilder/AggregationBuilder'; +import { Rows } from 'views/logic/searchtypes/pivot/PivotHandler'; import type { ChartDefinition } from '../ChartData'; import XYPlot from '../XYPlot'; @@ -54,7 +55,9 @@ const AreaVisualization = makeVisualization(({ config, data, effectiveTimerange, line: { shape: toPlotly(interpolation) }, }), [interpolation]); - const chartDataResult = chartData(config, data.chart || Object.values(data)[0], 'scatter', chartGenerator); + const rows = (data.chart ?? Object.values(data)[0]) as Rows; + + const chartDataResult = chartData(config, rows, 'scatter', chartGenerator); const layout: { shapes?: Shapes } = {}; if (config.eventAnnotation && data.events) { diff --git a/graylog2-web-interface/src/views/components/visualizations/bar/BarVisualization.tsx b/graylog2-web-interface/src/views/components/visualizations/bar/BarVisualization.tsx index 98dec99b8ea6..5c90425c2b56 100644 --- a/graylog2-web-interface/src/views/components/visualizations/bar/BarVisualization.tsx +++ b/graylog2-web-interface/src/views/components/visualizations/bar/BarVisualization.tsx @@ -23,6 +23,7 @@ import EventHandler, { Shapes } from 'views/logic/searchtypes/events/EventHandle import { DateType } from 'views/logic/aggregationbuilder/Pivot'; import { makeVisualization } from 'views/components/aggregationbuilder/AggregationBuilder'; import BarVisualizationConfig from 'views/logic/aggregationbuilder/visualizations/BarVisualizationConfig'; +import { Rows } from 'views/logic/searchtypes/pivot/PivotHandler'; import { chartData } from '../ChartData'; import XYPlot from '../XYPlot'; @@ -91,7 +92,7 @@ const BarVisualization = makeVisualization(({ config, data, effectiveTimerange, const _seriesGenerator = (type, name, labels, values): ChartDefinition => ({ type, name, x: labels, y: values, opacity }); - const rows = data.chart || Object.values(data)[0]; + const rows = (data.chart ?? Object.values(data)[0]) as Rows; const chartDataResult = chartData(config, rows, 'bar', _seriesGenerator); if (config.eventAnnotation && data.events) { diff --git a/graylog2-web-interface/src/views/components/visualizations/heatmap/HeatmapVisualization.tsx b/graylog2-web-interface/src/views/components/visualizations/heatmap/HeatmapVisualization.tsx index 0bcab25ce0df..80284bc0a067 100644 --- a/graylog2-web-interface/src/views/components/visualizations/heatmap/HeatmapVisualization.tsx +++ b/graylog2-web-interface/src/views/components/visualizations/heatmap/HeatmapVisualization.tsx @@ -21,6 +21,7 @@ import { AggregationType, AggregationResult } from 'views/components/aggregation import type { VisualizationComponentProps } from 'views/components/aggregationbuilder/AggregationBuilder'; import { makeVisualization } from 'views/components/aggregationbuilder/AggregationBuilder'; import HeatmapVisualizationConfig from 'views/logic/aggregationbuilder/visualizations/HeatmapVisualizationConfig'; +import { Rows } from 'views/logic/searchtypes/pivot/PivotHandler'; import type { ChartDefinition, ExtractedSeries } from '../ChartData'; import GenericPlot from '../GenericPlot'; @@ -130,7 +131,7 @@ const _leafSourceMatcher = ({ source }) => source.endsWith('leaf') && source !== const HeatmapVisualization = makeVisualization(({ config, data }: VisualizationComponentProps) => { const visualizationConfig = (config.visualizationConfig || HeatmapVisualizationConfig.empty()) as HeatmapVisualizationConfig; - const rows = data.chart || Object.values(data)[0]; + const rows = (data.chart ?? Object.values(data)[0]) as Rows; const heatmapData = chartData(config, rows, 'heatmap', _generateSeries(visualizationConfig), _formatSeries(visualizationConfig), _leafSourceMatcher); const layout = _chartLayout(heatmapData); diff --git a/graylog2-web-interface/src/views/components/visualizations/line/LineVisualization.tsx b/graylog2-web-interface/src/views/components/visualizations/line/LineVisualization.tsx index 5615599f6b3c..f594026ad7be 100644 --- a/graylog2-web-interface/src/views/components/visualizations/line/LineVisualization.tsx +++ b/graylog2-web-interface/src/views/components/visualizations/line/LineVisualization.tsx @@ -23,6 +23,7 @@ import LineVisualizationConfig from 'views/logic/aggregationbuilder/visualizatio import toPlotly from 'views/logic/aggregationbuilder/visualizations/Interpolation'; import EventHandler, { Shapes } from 'views/logic/searchtypes/events/EventHandler'; import { makeVisualization } from 'views/components/aggregationbuilder/AggregationBuilder'; +import { Rows } from 'views/logic/searchtypes/pivot/PivotHandler'; import type { ChartDefinition } from '../ChartData'; import { chartData } from '../ChartData'; @@ -53,7 +54,8 @@ const LineVisualization = makeVisualization(({ config, data, effectiveTimerange, line: { shape: toPlotly(interpolation) }, }), [interpolation]); - const chartDataResult = chartData(config, data.chart || Object.values(data)[0], 'scatter', chartGenerator); + const rows = (data.chart ?? Object.values(data)[0]) as Rows; + const chartDataResult = chartData(config, rows, 'scatter', chartGenerator); const layout: { shapes?: Shapes } = {}; if (config.eventAnnotation && data.events) { diff --git a/graylog2-web-interface/src/views/components/visualizations/number/NumberVisualization.tsx b/graylog2-web-interface/src/views/components/visualizations/number/NumberVisualization.tsx index 97accfb848aa..70b1eb19f80a 100644 --- a/graylog2-web-interface/src/views/components/visualizations/number/NumberVisualization.tsx +++ b/graylog2-web-interface/src/views/components/visualizations/number/NumberVisualization.tsx @@ -109,7 +109,7 @@ const NumberVisualization = ({ config, currentView, fields, data }: Props) => { useEffect(onRenderComplete, [onRenderComplete]); const { activeQuery } = currentView; - const chartRows = data.chart || Object.values(data)[0]; + const chartRows = (data.chart ?? Object.values(data)[0]) as Rows; const trendRows = data.trend; const { value } = _extractValueAndField(chartRows); const { value: previousValue } = _extractValueAndField(trendRows || []); diff --git a/graylog2-web-interface/src/views/components/visualizations/pie/PieVisualization.tsx b/graylog2-web-interface/src/views/components/visualizations/pie/PieVisualization.tsx index d4ee18372595..8a65cf6b1fc8 100644 --- a/graylog2-web-interface/src/views/components/visualizations/pie/PieVisualization.tsx +++ b/graylog2-web-interface/src/views/components/visualizations/pie/PieVisualization.tsx @@ -21,6 +21,7 @@ import { AggregationType, AggregationResult } from 'views/components/aggregation import type { VisualizationComponentProps } from 'views/components/aggregationbuilder/AggregationBuilder'; import { makeVisualization } from 'views/components/aggregationbuilder/AggregationBuilder'; import PlotLegend from 'views/components/visualizations/PlotLegend'; +import { Rows } from 'views/logic/searchtypes/pivot/PivotHandler'; import GenericPlot from '../GenericPlot'; import { chartData } from '../ChartData'; @@ -82,7 +83,8 @@ const labelMapper = (data: Array<{ labels: Array}>) => data.reduce((acc, }, []); const PieVisualization = makeVisualization(({ config, data }: VisualizationComponentProps) => { - const transformedData = chartData(config, data.chart || Object.values(data)[0], 'pie', _generateSeries); + const rows = (data.chart ?? Object.values(data)[0]) as Rows; + const transformedData = chartData(config, rows, 'pie', _generateSeries); return ( diff --git a/graylog2-web-interface/src/views/components/visualizations/scatter/ScatterVisualization.tsx b/graylog2-web-interface/src/views/components/visualizations/scatter/ScatterVisualization.tsx index 4b8726621527..1764ccc32f85 100644 --- a/graylog2-web-interface/src/views/components/visualizations/scatter/ScatterVisualization.tsx +++ b/graylog2-web-interface/src/views/components/visualizations/scatter/ScatterVisualization.tsx @@ -21,6 +21,7 @@ import EventHandler, { Shapes } from 'views/logic/searchtypes/events/EventHandle import { AggregationType, AggregationResult } from 'views/components/aggregationbuilder/AggregationBuilderPropTypes'; import type { VisualizationComponentProps } from 'views/components/aggregationbuilder/AggregationBuilder'; import { makeVisualization } from 'views/components/aggregationbuilder/AggregationBuilder'; +import { Rows } from 'views/logic/searchtypes/pivot/PivotHandler'; import { chartData } from '../ChartData'; import XYPlot from '../XYPlot'; @@ -30,7 +31,8 @@ const seriesGenerator = (type, name, labels, values) => ({ type, name, x: labels const setChartColor = (chart, colors) => ({ marker: { color: colors.get(chart.name) } }); const ScatterVisualization = makeVisualization(({ config, data, effectiveTimerange, height }: VisualizationComponentProps) => { - const chartDataResult = chartData(config, data.chart || Object.values(data)[0], 'scatter', seriesGenerator); + const rows = (data.chart ?? Object.values(data)[0]) as Rows; + const chartDataResult = chartData(config, rows, 'scatter', seriesGenerator); const layout: { shapes?: Shapes } = {}; if (config.eventAnnotation && data.events) { diff --git a/graylog2-web-interface/yarn.lock b/graylog2-web-interface/yarn.lock index 4a352d1ad1f5..efab932ece4a 100644 --- a/graylog2-web-interface/yarn.lock +++ b/graylog2-web-interface/yarn.lock @@ -5153,10 +5153,10 @@ concat-stream@~2.0.0: readable-stream "^3.0.2" typedarray "^0.0.6" -confusing-browser-globals@^1.0.9: - version "1.0.9" - resolved "https://registry.yarnpkg.com/confusing-browser-globals/-/confusing-browser-globals-1.0.9.tgz#72bc13b483c0276801681871d4898516f8f54fdd" - integrity sha512-KbS1Y0jMtyPgIxjO7ZzMAuUpAKMt1SzCL9fsrKsX6b0zJPTaT0SiSPmewwVZg9UAO83HVIlEhZF84LIjZ0lmAw== +confusing-browser-globals@^1.0.10: + version "1.0.10" + resolved "https://registry.yarnpkg.com/confusing-browser-globals/-/confusing-browser-globals-1.0.10.tgz#30d1e7f3d1b882b25ec4933d1d1adac353d20a59" + integrity sha512-gNld/3lySHwuhaVluJUKLePYirM3QNCKzVxqAdhJII9/WXKVX5PURzMVJspS1jTslSqjeuG4KMVTSouit5YPHA== connect-history-api-fallback@^1.4.0, connect-history-api-fallback@^1.6.0: version "1.6.0" @@ -6706,22 +6706,22 @@ escodegen@^2.0.0: optionalDependencies: source-map "~0.6.1" -eslint-config-airbnb-base@^14.2.0: - version "14.2.0" - resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-14.2.0.tgz#fe89c24b3f9dc8008c9c0d0d88c28f95ed65e9c4" - integrity sha512-Snswd5oC6nJaevs3nZoLSTvGJBvzTfnBqOIArkf3cbyTyq9UD79wOk8s+RiL6bhca0p/eRO6veczhf6A/7Jy8Q== +eslint-config-airbnb-base@^14.2.1: + version "14.2.1" + resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-14.2.1.tgz#8a2eb38455dc5a312550193b319cdaeef042cd1e" + integrity sha512-GOrQyDtVEc1Xy20U7vsB2yAoB4nBlfH5HZJeatRXHleO+OS5Ot+MWij4Dpltw4/DyIkqUfqz1epfhVR5XWWQPA== dependencies: - confusing-browser-globals "^1.0.9" - object.assign "^4.1.0" + confusing-browser-globals "^1.0.10" + object.assign "^4.1.2" object.entries "^1.1.2" -eslint-config-airbnb@18.2.0: - version "18.2.0" - resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-18.2.0.tgz#8a82168713effce8fc08e10896a63f1235499dcd" - integrity sha512-Fz4JIUKkrhO0du2cg5opdyPKQXOI2MvF8KUvN2710nJMT6jaRUpRE2swrJftAjVGL7T1otLM5ieo5RqS1v9Udg== +eslint-config-airbnb@18.2.1: + version "18.2.1" + resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-18.2.1.tgz#b7fe2b42f9f8173e825b73c8014b592e449c98d9" + integrity sha512-glZNDEZ36VdlZWoxn/bUR1r/sdFKPd1mHPbqUtkctgNG4yT2DLLtJ3D+yCV+jzZCc2V1nBVkmdknOJBZ5Hc0fg== dependencies: - eslint-config-airbnb-base "^14.2.0" - object.assign "^4.1.0" + eslint-config-airbnb-base "^14.2.1" + object.assign "^4.1.2" object.entries "^1.1.2" "eslint-config-graylog@file:packages/eslint-config-graylog": @@ -6731,12 +6731,12 @@ eslint-config-airbnb@18.2.0: "@typescript-eslint/eslint-plugin" "4.29.1" "@typescript-eslint/parser" "4.29.1" eslint "7.32.0" - eslint-config-airbnb "18.2.0" + eslint-config-airbnb "18.2.1" eslint-import-resolver-webpack "0.13.1" eslint-plugin-compat "3.12.0" eslint-plugin-import "2.24.0" eslint-plugin-jest "24.4.0" - eslint-plugin-jest-dom "3.8.1" + eslint-plugin-jest-dom "3.9.0" eslint-plugin-jest-formatting "2.0.1" eslint-plugin-jsx-a11y "6.4.1" eslint-plugin-react "7.24.0" @@ -6811,10 +6811,10 @@ eslint-plugin-import@2.24.0: resolve "^1.20.0" tsconfig-paths "^3.9.0" -eslint-plugin-jest-dom@3.8.1: - version "3.8.1" - resolved "https://registry.yarnpkg.com/eslint-plugin-jest-dom/-/eslint-plugin-jest-dom-3.8.1.tgz#699691b4de4df572bfdf544db37f576d33eddc62" - integrity sha512-Qcx1XTy4VCJPOkCynRIzPl67az3pj8EJgfRZYGIBxbp4nxtulWFRzWrkD7nNag5JWAWiujgJS44SCjNyFzl1fQ== +eslint-plugin-jest-dom@3.9.0: + version "3.9.0" + resolved "https://registry.yarnpkg.com/eslint-plugin-jest-dom/-/eslint-plugin-jest-dom-3.9.0.tgz#dab0b532f1a3e2285b74e3a6d32f7ce197975dcf" + integrity sha512-Ou3cuAAY9s6pYZv+KKPa9XquSzUAWW2CgE5al7cQ0yew25w/kp5kNsUJgESb3Pj00Y6pzvznepppL2sk7UOQKg== dependencies: "@babel/runtime" "^7.9.6" "@testing-library/dom" "^7.28.1" @@ -8638,11 +8638,11 @@ graceful-fs@^4.2.4: "@babel/preset-env" "7.13.10" "@babel/preset-typescript" "7.13.0" create-react-class "15.7.0" - eslint-config-graylog "file:packages/eslint-config-graylog" + eslint-config-graylog "file:../../../../.cache/yarn/v6/npm-graylog-web-plugin-4.2.0-SNAPSHOT-13e91f90-d825-4366-905f-493507ab71aa-1630048752648/node_modules/eslint-config-graylog" formik "2.2.6" html-webpack-plugin "^4.2.0" javascript-natural-sort "0.7.1" - jest-preset-graylog "file:packages/jest-preset-graylog" + jest-preset-graylog "file:../../../../.cache/yarn/v6/npm-graylog-web-plugin-4.2.0-SNAPSHOT-13e91f90-d825-4366-905f-493507ab71aa-1630048752648/node_modules/jest-preset-graylog" jquery "3.5.1" moment "2.29.1" moment-timezone "0.5.31" @@ -8656,8 +8656,8 @@ graceful-fs@^4.2.4: react-router-dom "5.2.0" reflux "0.2.13" styled-components "5.2.3" - stylelint-config-graylog "file:packages/stylelint-config-graylog" - typescript "4.3.2" + stylelint-config-graylog "file:../../../../.cache/yarn/v6/npm-graylog-web-plugin-4.2.0-SNAPSHOT-13e91f90-d825-4366-905f-493507ab71aa-1630048752648/node_modules/stylelint-config-graylog" + typescript "4.4.2" webpack "4.44.2" webpack-cleanup-plugin "0.5.1" webpack-cli "3.3.12" @@ -16805,10 +16805,10 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= -typescript@4.3.2: - version "4.3.2" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.2.tgz#399ab18aac45802d6f2498de5054fcbbe716a805" - integrity sha512-zZ4hShnmnoVnAHpVHWpTcxdv7dWP60S2FsydQLV8V5PbS3FifjWFFRiHSWpDJahly88PRyV5teTSLoq4eG7mKw== +typescript@4.4.2: + version "4.4.2" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.4.2.tgz#6d618640d430e3569a1dfb44f7d7e600ced3ee86" + integrity sha512-gzP+t5W4hdy4c+68bfcv0t400HVJMMd2+H9B7gae1nQlBzCqvrXX+6GL/b3GAgyTH966pzrZ70/fRjwAtZksSQ== ua-parser-js@^0.7.12: version "0.7.22"