-
Notifications
You must be signed in to change notification settings - Fork 8.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Adds traces overview with mock data #22628
Changes from all commits
d588f67
b48ea09
2c64840
fa926f6
eea7dca
e62d105
893d936
89c9b3e
a805f4c
0600e6e
531777d
a1df24d
c7a39a3
05a7188
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License; | ||
* you may not use this file except in compliance with the Elastic License. | ||
*/ | ||
|
||
// @ts-ignore | ||
import { EuiTabbedContent } from '@elastic/eui'; | ||
import React from 'react'; | ||
// @ts-ignore | ||
import { KueryBar } from '../../shared/KueryBar'; | ||
import { SetupInstructionsLink } from '../../shared/SetupInstructionsLink'; | ||
// @ts-ignore | ||
import { HeaderContainer } from '../../shared/UIComponents'; | ||
// @ts-ignore | ||
import { ServiceOverview } from '../ServiceOverview'; | ||
import { TraceOverview } from '../TraceOverview'; | ||
|
||
export function Home() { | ||
return ( | ||
<div> | ||
<HeaderContainer> | ||
<h1>APM</h1> | ||
<SetupInstructionsLink /> | ||
</HeaderContainer> | ||
<KueryBar /> | ||
<EuiTabbedContent | ||
className="k6Tab--large" | ||
tabs={[ | ||
{ | ||
id: 'services_overview', | ||
name: 'Services', | ||
content: <ServiceOverview /> | ||
}, | ||
{ id: 'traces_overview', name: 'Traces', content: <TraceOverview /> } | ||
]} | ||
/> | ||
</div> | ||
); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License; | ||
* you may not use this file except in compliance with the Elastic License. | ||
*/ | ||
|
||
import { shallow } from 'enzyme'; | ||
import React from 'react'; | ||
import { Home } from '../Home'; | ||
|
||
describe('Home component', () => { | ||
it('should render', () => { | ||
expect(shallow(<Home />)).toMatchSnapshot(); | ||
}); | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`Home component should render 1`] = ` | ||
<div> | ||
<styled.div> | ||
<h1> | ||
APM | ||
</h1> | ||
<SetupInstructionsLink /> | ||
</styled.div> | ||
<Connect(KueryBarView) /> | ||
<EuiTabbedContent | ||
className="k6Tab--large" | ||
tabs={ | ||
Array [ | ||
Object { | ||
"content": <Connect(ServiceOverview) />, | ||
"id": "services_overview", | ||
"name": "Services", | ||
}, | ||
Object { | ||
"content": <Connect(TraceOverview) />, | ||
"id": "traces_overview", | ||
"name": "Traces", | ||
}, | ||
] | ||
} | ||
/> | ||
</div> | ||
`; |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -6,25 +6,40 @@ | |
|
||
import React from 'react'; | ||
import { Redirect } from 'react-router-dom'; | ||
import ServiceOverview from '../ServiceOverview'; | ||
// @ts-ignore | ||
import { legacyDecodeURIComponent } from '../../../utils/url'; | ||
// @ts-ignore | ||
import ErrorGroupDetails from '../ErrorGroupDetails'; | ||
// @ts-ignore | ||
import ErrorGroupOverview from '../ErrorGroupOverview'; | ||
// @ts-ignore | ||
import TransactionDetails from '../TransactionDetails'; | ||
// @ts-ignore | ||
import TransactionOverview from '../TransactionOverview'; | ||
import { legacyDecodeURIComponent } from '../../../utils/url'; | ||
import { Home } from './Home'; | ||
|
||
interface BreadcrumbArgs { | ||
match: { | ||
params: StringMap<any>; | ||
}; | ||
} | ||
|
||
interface RenderArgs { | ||
location: StringMap<any>; | ||
} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I just saw the third party breadcrumb helper we use does expose some types. Can we build on top of those (haven't checked so maybe the answer is no) There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It seems like we should be able to use these but ... I have no idea how haha |
||
|
||
export const routes = [ | ||
{ | ||
exact: true, | ||
path: '/', | ||
component: ServiceOverview, | ||
component: Home, | ||
breadcrumb: 'APM' | ||
}, | ||
{ | ||
exact: true, | ||
path: '/:serviceName/errors/:groupId', | ||
component: ErrorGroupDetails, | ||
breadcrumb: ({ match }) => match.params.groupId | ||
breadcrumb: ({ match }: BreadcrumbArgs) => match.params.groupId | ||
}, | ||
{ | ||
exact: true, | ||
|
@@ -44,8 +59,8 @@ export const routes = [ | |
{ | ||
exact: true, | ||
path: '/:serviceName', | ||
breadcrumb: ({ match }) => match.params.serviceName, | ||
render: ({ location }) => { | ||
breadcrumb: ({ match }: BreadcrumbArgs) => match.params.serviceName, | ||
render: ({ location }: RenderArgs) => { | ||
return ( | ||
<Redirect | ||
to={{ | ||
|
@@ -68,14 +83,14 @@ export const routes = [ | |
exact: true, | ||
path: '/:serviceName/transactions/:transactionType', | ||
component: TransactionOverview, | ||
breadcrumb: ({ match }) => | ||
breadcrumb: ({ match }: BreadcrumbArgs) => | ||
legacyDecodeURIComponent(match.params.transactionType) | ||
}, | ||
{ | ||
exact: true, | ||
path: '/:serviceName/transactions/:transactionType/:transactionName', | ||
component: TransactionDetails, | ||
breadcrumb: ({ match }) => | ||
breadcrumb: ({ match }: BreadcrumbArgs) => | ||
legacyDecodeURIComponent(match.params.transactionName) | ||
} | ||
]; |
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -8,7 +8,7 @@ import React from 'react'; | |
import { mount } from 'enzyme'; | ||
|
||
import { MemoryRouter } from 'react-router-dom'; | ||
import List from '../index'; | ||
import { ServiceList } from '../index'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I prefer this naming 👍 |
||
import props from './props.json'; | ||
import { | ||
mountWithRouterAndStore, | ||
|
@@ -25,7 +25,7 @@ describe('ErrorGroupOverview -> List', () => { | |
const storeState = {}; | ||
const wrapper = mount( | ||
<MemoryRouter> | ||
<List items={[]} /> | ||
<ServiceList items={[]} /> | ||
</MemoryRouter>, | ||
storeState | ||
); | ||
|
@@ -36,7 +36,7 @@ describe('ErrorGroupOverview -> List', () => { | |
it('should render with data', () => { | ||
const storeState = { location: {} }; | ||
const wrapper = mountWithRouterAndStore( | ||
<List items={props.items} />, | ||
<ServiceList items={props.items} />, | ||
storeState | ||
); | ||
|
||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Problem here: by using
^
for this package, installing another@types/*
package that depends on@types/react
using the*
semver range makes us upgrade to the latest version that our ranges allow, so installing@types/react-router-dom
auto-upgraded this package to 16.4.x, and that version breaks a lot of our types stuff since we still use React 16.3.Switching to
~
didn't help, because even upgrading to 16.3.18 breaks tons of our kibana typescript stuff. I don't think the@types/*
packages really follow semver the same way as other packages do, similarly to how linting rulesets can't really follow semver, because every single change is most likely breaking in some way.tl;dr since newer versions of
@types/react
cause lots of typescript errors in kibana, we should be explicit about the version that works with kibana and specify16.3.14
directly.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Makes sense! Let's just double check with @spalger or @epixa to see if they have any objections.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sounds good, I'm going to merge this now since it's not actually changing anything with the real deps, and if there are objections or considerations we can revert the package.json change later if we need to. Thanks!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No objections. It seems strange that it breaks so much though.