Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Monitor Tab - New look for empty state + make empty state configurable #916

Merged
merged 18 commits into from
Apr 3, 2022
Merged

Monitor Tab - New look for empty state + make empty state configurable #916

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
b68c3c3
Emprty state
Mar 20, 2022
d71b396
Small fixes
Mar 20, 2022
c135e38
Add image
Mar 21, 2022
2ecf9aa
Remove get help
Mar 22, 2022
c2f0e2b
Button text
Mar 22, 2022
7457324
Sett state
Mar 22, 2022
90d05b0
Button config
Mar 22, 2022
af1b4bb
Copy
Mar 27, 2022
1aa44a6
Support error
Mar 27, 2022
87d3db6
Error
Mar 27, 2022
fda8829
New text
Mar 28, 2022
bce459c
Fix bar
Mar 28, 2022
69f2669
Update packages/jaeger-ui/src/constants/default-config.tsx
Apr 3, 2022
048425c
Update packages/jaeger-ui/src/constants/default-config.tsx
Apr 3, 2022
ff40876
Update packages/jaeger-ui/src/constants/default-config.tsx
Apr 3, 2022
99ab45c
Update packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
Apr 3, 2022
c6b882e
Update packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
Apr 3, 2022
fd39826
New copy
Apr 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
267 changes: 61 additions & 206 deletions packages/jaeger-ui/src/components/Monitor/EmptyState/__snapshots__/index.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,217 +1,72 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<MonitorATMEmptyState> partially configured ATM snapshot test 1`] = `
<div
className="ant-row"
>
<div
className="ant-col-12 ant-col-offset-6 center-empty-state"
exports[`<MonitorATMEmptyState> ATM snapshot test 1`] = `
<Col>
<Row
gutter={0}
justify="center"
>
<div
className="ant-list ant-list-vertical ant-list-sm ant-list-something-after-last-item"
<Col
offset={8}
span={8}
>
<div
className="ant-list-header"
>
<h2
className="ub-m0"
>
Get started with Services Monitor
</h2>
</div>
<div
className="ant-spin-nested-loading"
style={null}
>
<div
className="ant-spin-container"
key="container"
>
<div
key="list-item-0/.0"
>
•
Configured

<svg
fill="currentColor"
height="1em"
preserveAspectRatio="xMidYMid meet"
style={
Object {
"color": undefined,
"verticalAlign": "middle",
}
}
viewBox="0 0 40 40"
width="1em"
>
<g>
<path
d="m26.3 13.8l1.4 1.4-10.4 10.6c-0.2 0.1-0.5 0.3-0.8 0.3s-0.5-0.2-0.7-0.3l-4.3-4.4 1.4-1.4 3.6 3.7z m-6.5-10c8.9 0 16.2 7.2 16.2 16.2s-7.3 16.3-16.2 16.3-16.3-7.3-16.3-16.3 7.3-16.2 16.3-16.2z m0 31.1c8.2 0 14.9-6.7 14.9-14.9s-6.7-14.9-14.9-14.9-15 6.7-15 14.9 6.7 14.9 15 14.9z"
/>
</g>
</svg>
</div>
<div
key="list-item-1/.1"
>
•
Sent data

<svg
fill="currentColor"
height="1em"
preserveAspectRatio="xMidYMid meet"
style={
Object {
"color": undefined,
"verticalAlign": "middle",
}
}
viewBox="0 0 40 40"
width="1em"
>
<g>
<path
d="m19.8 3.8c8.9 0 16.2 7.2 16.2 16.2s-7.3 16.3-16.2 16.3-16.3-7.3-16.3-16.3 7.3-16.2 16.3-16.2z m0 31.1c8.2 0 14.9-6.7 14.9-14.9s-6.7-14.9-14.9-14.9-15 6.7-15 14.9 6.7 14.9 15 14.9z"
/>
</g>
</svg>
</div>
</div>
</div>
<div
className="ant-list-footer"
>
<a
className="ant-btn"
href="https://www.jaegertracing.io/docs/latest/frontend-ui/"
onClick={[Function]}
style={
Object {
"backgroundColor": "#199",
"color": "#fff",
}
}
target="_blank"
>
<span
key=".0"
>
Go to documentation
</span>
</a>
</div>
</div>
</div>
</div>
`;

exports[`<MonitorATMEmptyState>not configured ATM snapshot test 1`] = `
<div
className="ant-row"
>
<div
className="ant-col-12 ant-col-offset-6 center-empty-state"
<img
alt="jaeger-monitor-tab-preview"
className="monitor-preview-image-empty-state"
src="monitor.png"
/>
</Col>
</Row>
<Row
gutter={0}
justify="center"
>
<div
className="ant-list ant-list-vertical ant-list-sm ant-list-something-after-last-item"
<Col
className="center-empty-state"
offset={9}
span={6}
>
<div
className="ant-list-header"
<h2
className="main-title-empty-state"
>
<h2
className="ub-m0"
>
Get started with Services Monitor
</h2>
</div>
<div
className="ant-spin-nested-loading"
style={null}
Get started with Service Monitoring
</h2>
<h3
className="sub-title-empty-state"
>
<div
className="ant-spin-container"
key="container"
>
<div
key="list-item-0/.0"
>
•
Configured

<svg
fill="currentColor"
height="1em"
preserveAspectRatio="xMidYMid meet"
style={
Object {
"color": undefined,
"verticalAlign": "middle",
}
}
viewBox="0 0 40 40"
width="1em"
>
<g>
<path
d="m19.8 3.8c8.9 0 16.2 7.2 16.2 16.2s-7.3 16.3-16.2 16.3-16.3-7.3-16.3-16.3 7.3-16.2 16.3-16.2z m0 31.1c8.2 0 14.9-6.7 14.9-14.9s-6.7-14.9-14.9-14.9-15 6.7-15 14.9 6.7 14.9 15 14.9z"
/>
</g>
</svg>
</div>
<div
key="list-item-1/.1"
>
•
Sent data

<svg
fill="currentColor"
height="1em"
preserveAspectRatio="xMidYMid meet"
style={
Object {
"color": undefined,
"verticalAlign": "middle",
}
}
viewBox="0 0 40 40"
width="1em"
>
<g>
<path
d="m19.8 3.8c8.9 0 16.2 7.2 16.2 16.2s-7.3 16.3-16.2 16.3-16.3-7.3-16.3-16.3 7.3-16.2 16.3-16.2z m0 31.1c8.2 0 14.9-6.7 14.9-14.9s-6.7-14.9-14.9-14.9-15 6.7-15 14.9 6.7 14.9 15 14.9z"
/>
</g>
</svg>
</div>
</div>
</div>
<div
className="ant-list-footer"
A high-level monitoring dashboard that helps you cut down the time to identify and resolve anomalies and issues.
</h3>
<h4
className="description-empty-state"
>
Service Performance Monitoring works in conjunction with a Prometheus compatible time series database. The metrics are aggregated from your tracing data through a one-time configuration.
</h4>
<Button
block={false}
className="button-empty-state"
ghost={false}
loading={false}
onClick={[Function]}
prefixCls="ant-btn"
>
Read the Documentation
</Button>
<Row
gutter={0}
justify="center"
>
<a
className="ant-btn"
href="https://www.jaegertracing.io/docs/latest/frontend-ui/"
onClick={[Function]}
style={
Object {
"backgroundColor": "#199",
"color": "#fff",
}
}
target="_blank"
<Col
offset={2}
span={20}
>
<span
key=".0"
>
Go to documentation
</span>
</a>
</div>
</div>
</div>
</div>
<Alert
message="Service Performance Monitoring requires a Prometheus compatible time series database "
showIcon={true}
type="info"
/>
</Col>
</Row>
</Col>
</Row>
</Col>
`;
35 changes: 34 additions & 1 deletion packages/jaeger-ui/src/components/Monitor/EmptyState/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,38 @@ limitations under the License.

.center-empty-state {
text-align: center;
margin-top: calc(100vh / 3.5);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.main-title-empty-state {
font-size: 24px;
line-height: 28px;
margin-top: 40px;
}

.sub-title-empty-state {
line-height: 20px;
margin: 8px 0;
}

.description-empty-state {
font-weight: 400;
color: #575757;
margin-bottom: 24px;
}

.button-empty-state {
background-color: #11939a;
color: white;
float: right;
margin-bottom: 24px;
}

.monitor-preview-image-empty-state {
width: 100%;
height: auto;
margin-top: calc(100vh / 10);
}
43 changes: 3 additions & 40 deletions packages/jaeger-ui/src/components/Monitor/EmptyState/index.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,57 +13,20 @@
// limitations under the License.

import React from 'react';
import { mount } from 'enzyme';
import IoIosCheckmark from 'react-icons/lib/io/ios-checkmark-outline';
import IoIosCloseCircle from 'react-icons/lib/io/ios-circle-outline';
import { shallow } from 'enzyme';
import MonitorATMEmptyState from '.';

const props = {
configureStatus: false,
sendDataStatus: false,
};
describe('<MonitorATMEmptyState>not configured', () => {
describe('<MonitorATMEmptyState>', () => {
let wrapper;

beforeEach(() => {
wrapper = mount(<MonitorATMEmptyState {...props} />);
wrapper = shallow(<MonitorATMEmptyState />);
});

it('does not explode', () => {
expect(wrapper.length).toBe(1);
});

it('shows a loading indicator when loading data', () => {
expect(wrapper.find(IoIosCloseCircle).length).toBe(2);
});

it('ATM snapshot test', () => {
expect(wrapper).toMatchSnapshot();
});
});

describe('<MonitorATMEmptyState> partially configured', () => {
let wrapper;

beforeEach(() => {
wrapper = mount(
<MonitorATMEmptyState
{...{
configureStatus: true,
sendDataStatus: false,
}}
/>
);
});

it('does not explode', () => {
expect(wrapper.length).toBe(1);
});

it('should render checkbox', () => {
expect(wrapper.find(IoIosCheckmark).length).toBe(1);
});

it('ATM snapshot test', () => {
expect(wrapper).toMatchSnapshot();
});
Expand Down
Loading