Kpi host #35065
Kpi host #35065
Conversation
This comment has been minimized.
This comment has been minimized.
|
Pinging @elastic/secops |
|
Park here and waiting for further discussion about what KPIs we want to show here. https://docs.google.com/document/d/1LwkKY9kv45fEvrlvm72m4Z8km6fRblQ8yWe_4rRBPuo/edit Also waiting for a fix from EUI for spinner |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
| } | ||
| } | ||
| } | ||
| `, |
There was a problem hiding this comment.
nit: I'd pull the tick to the left at column 0
| import React from 'react'; | ||
| import { pure } from 'recompose'; | ||
| import styled from 'styled-components'; | ||
| // @ts-ignore |
There was a problem hiding this comment.
I was able to remove this @ts-ignore and no errors were shown.
There was a problem hiding this comment.
Thanks so much for giving it a try!
| height: number | null | undefined; | ||
| }>(({ data, ...chartConfigs }) => | ||
| chartConfigs.width && chartConfigs.height ? ( | ||
| // @ts-ignore |
There was a problem hiding this comment.
I was able to remove this @ts-ignore and no errors were shown.
| /** | ||
| * Placing ts-ignore here for fillOpacity | ||
| * */ | ||
| // @ts-ignore |
There was a problem hiding this comment.
I was able to remove this @ts-ignore and no errors were shown.
|
|
||
| import React from 'react'; | ||
| import { | ||
| // @ts-ignore |
There was a problem hiding this comment.
Doesn't look like this @ts-ignore is required. I was able to remove it without error.
There was a problem hiding this comment.
mm, mine complains about no exported member EuiSeriesChartUtils after removing ts-ignore here, so keeping this here.
| } from '@elastic/eui'; | ||
| import { pure } from 'recompose'; | ||
| import styled from 'styled-components'; | ||
| // @ts-ignore |
There was a problem hiding this comment.
Doesn't look like this @ts-ignore is required. I was able to remove it without error.
| > | ||
| {data.map(series => { | ||
| return ( | ||
| // @ts-ignore |
There was a problem hiding this comment.
Doesn't look like this @ts-ignore is required. I was able to remove it without error.
| ); | ||
| }); | ||
|
|
||
| export const BarChart = pure<{ barChart: BarChartData[] | [] | null | undefined }>( |
There was a problem hiding this comment.
Is the [] type needed here?
Tracing the usage of BarChart to StatItemsComponent, it looks like the type of barChart will only ever be BarChartData[] | null | undefined:
export interface StatItemsProps extends StatItems {
key: string;
areaChart?: AreaChartData[];
barChart?: BarChartData[];
}
| import { AreaChart } from './areachart'; | ||
| import { EuiHorizontalRule } from '@elastic/eui'; | ||
| // @ts-ignore | ||
| import { EuiAreaSeries, EuiBarSeries } from '@elastic/eui/lib/experimental'; |
There was a problem hiding this comment.
Are these unused imports necessary? I was able to remove them and these tests passed.
| KpiHosts(timerange: $timerange, filterQuery: $filterQuery) { | ||
| hosts | ||
| hostsHistogram { | ||
| ...ChartFields |
There was a problem hiding this comment.
I didn't realize you could use the spread operator in gql templates -- nice!
|
|
||
| const context = { req }; | ||
|
|
||
| describe('Test Source Resolvers', () => { |
There was a problem hiding this comment.
Since you added API Integration tests (awesome!) these resolvers.test.ts tests are no longer necessary -- feel free to remove this entire file :)
| }, | ||
| }; | ||
|
|
||
| describe('SIEM Hosts GQL Schema', () => { |
There was a problem hiding this comment.
Since you added API Integration tests these schema.test.ts tests are no longer necessary -- feel free to remove this entire file :)
| .then(resp => { | ||
| const kpiHosts = resp.data.source.KpiHosts; | ||
| expect(kpiHosts!.hosts).to.equal(1); | ||
| expect(kpiHosts!.hostsHistogram).to.eql([ |
There was a problem hiding this comment.
It might be helpful for readability to pull out these expected results into their own mock objects above the expect's.
There was a problem hiding this comment.
Great work here @angorayc!! Good to see all the collaboration and congrats on bringing in the first charts to the SIEM app! 🎉
I've left a few optionals/cleanup comments if you want to take care of them as part of this, but if not feel free to open an issue and address them in a follow-up. I also provided some answers to the questions you mentioned in the description, but let me know if you come across anything extra.
Anyway, LGTM! 📈 📊 👍
💔 Build Failed |
💔 Build Failed |
|
rest this please |
💚 Build Succeeded |
* init graphql * update KPIs * add charts * isolate charts * fix app crashes on screen resizing * gen types * rename variables * simplify flex groups, add icon var, rm loading * add icon names, change flex grows * rm overlay, enable axes, show first/last ticks * unabbreviate destination * update UI * update histogram data * customize chart axis * update x-axis for area chart * handle no data cases * update unit test * fix lint error fix type error fix unit itest * rename i18n var * fix response data type * add unit test for areachart * add unit test for barchart * fix UI * add more test case for barchart * fix for code review * gathering mock data in kpi_host integration test
* init graphql * update KPIs * add charts * isolate charts * fix app crashes on screen resizing * gen types * rename variables * simplify flex groups, add icon var, rm loading * add icon names, change flex grows * rm overlay, enable axes, show first/last ticks * unabbreviate destination * update UI * update histogram data * customize chart axis * update x-axis for area chart * handle no data cases * update unit test * fix lint error fix type error fix unit itest * rename i18n var * fix response data type * add unit test for areachart * add unit test for barchart * fix UI * add more test case for barchart * fix for code review * gathering mock data in kpi_host integration test
This PR is to add kpi matrix on hosts page: elastic/ingest-dev#352 and apply the latest design.
Questions (Please scroll down to find the detail):
AutoSizer.Host kpi loadingHost kpi with dataHost kpi without dataThis PR updates a shared component
stat_item, and therefore kpis on network page are updated as well:Dark ModeKnown issue:
Charts in EUI is going to be deprecated in June.
Todo: