Design cleanup of Uptime app #31663

snide · 2019-02-21T06:20:21Z

Summary

This does some reworking of the Uptime layouts to get them closer to the rest of Kibana.

Some comments

Turned the refresh button the date picker. You don't want this activating without direction I don't think. Also gives people a nice panic REFRESH button.
Changed coloring to be more normal. Green / red.
Only focus on downtime history in the tables. People likely aren't looking for green here and it can get really busy, they want to scan for the problems.
Removed all the paneling
Tightened up all the paddings / margins
Cleaned up all the tables so they are better sized and formatted.

EDIT: resolves #29841.
also resolves #31831.

I need the following help

@justinkambic would love some help fixing the following. Couldn't find the code immediately to do this. Also, I couldn't get the snapshots to update. It would just hang.

Checklist

Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR.

This was checked for cross-browser compatibility, including a check against IE11
Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
This was checked for keyboard-only and screenreader accessibility

For maintainers

This was checked for breaking API changes and was labeled appropriately
This includes a feature addition or change that requires a release note and was labeled appropriately

elasticmachine · 2019-02-21T06:20:23Z

Pinging @elastic/kibana-design

elasticmachine · 2019-02-21T06:20:24Z

Pinging @elastic/uptime

snide · 2019-02-21T06:22:18Z

x-pack/plugins/uptime/public/uptime_app.tsx

@@ -106,15 +106,17 @@ class Application extends React.Component<UptimeAppProps, UptimeAppState> {
    let colors: UptimeAppColors;
    if (darkMode) {


@cchaos Do you have a pattern for this kind of thing I could steal. I mostly just recolored what they had here, but it seems like a silly way to do this when the colors vars themselves are the same outside of the theme.

I have not run into any theme vars imported via JSON in any of my fixes yet. You could ask SIEM or APM since I'm pretty sure they do. My initial thought would be to set the import path based on the global theme but I'm not exactly sure the way to do this.

elasticmachine · 2019-02-21T06:32:37Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

snide · 2019-02-21T06:40:36Z

Cleaned up the gray coloring of that graph and played with the strokes a bit. For the status check I couldn't figure out why this graph was delivered as an area graph (the others are bars) and why it outputs 8 for up and down?

elasticmachine · 2019-02-21T06:51:04Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

cchaos · 2019-02-21T15:51:31Z

Looking at your last comment, you can see that the white line indicating your hover point is lined up with the peaks of both the green and red series. There are a couple reasons for confusion but I'm not exactly sure what yours is.

The curve types of the red and green series are different and so even though they have the same values, they don't line up.
How could it be both up and down at the same time? Depends on what the 8 (count) signifies.... And by glancing at the graph, I have no clue 😉

snide · 2019-02-21T17:47:26Z

Heh. Yeah, I was mostly questioning the data in the graph to your second point

How could it be both up and down at the same time? Depends on what the 8 (count) signifies.... And by glancing at the graph, I have no clue

This seems like a bug or is a really confusing way to present the data?

elasticmachine · 2019-02-22T02:02:04Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-03-29T03:49:54Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

…ers.

elasticmachine · 2019-03-29T14:53:52Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-03-29T18:00:32Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-04-01T14:34:01Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-04-03T16:32:06Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-04-03T16:39:39Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

mattapperson · 2019-04-03T19:38:08Z

x-pack/plugins/uptime/server/lib/adapters/pings/__tests__/elasticsearch_pings_adapter.test.ts

+    it('returns expected result for no status filter', async () => {
+      expect.assertions(2);
+      const search = jest.fn();
+      search.mockReturnValue({


snapshot rather than mock? might make maintenance easier

mattapperson

Approved but would like to see component names not have Query in the name, and query object not having a prefix of "get" making it look like a method/getter

elasticmachine · 2019-04-04T14:04:44Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-04-04T14:44:25Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-04-04T15:55:28Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

justinkambic · 2019-04-05T15:51:39Z

Backported to:
7.x/7.1.0 840b788
#34574

* uptime design cleanup * uptime design cleanup * test * errorlist now styled * errorlist now styled * errorlist now styled * cleanup * replace color vars with correct naming * some titles * more cleanup * clean up silly gray graph * Address problems with UI update. * Refresh jest snapshots. * Fix busted types. * Refresh jest snapshots broken by busted type fix. * Rename duplicate localization key. * Use same curve type for both check series on monitors page. * Remove unused translations. * Display name instead of ID in ErrorList component. * Update x-pack/plugins/uptime/public/components/functional/ping_list.tsx Co-Authored-By: snide <dave.snider@gmail.com> * Update x-pack/plugins/uptime/public/components/functional/ping_list.tsx Co-Authored-By: snide <dave.snider@gmail.com> * Modify updated code to avoid flooding console log with errors. * Get functional and unit tests passing. * Fix busted unit test. * Update jest snapshots. * Add panel to empty state. * Avoid rendering monitor list sparkline charts when downSeries has no values. * Remove crosshair synchronization from monitor charts because of display bug. Provide default 0 value to series for check chart. * Fix broken snapshot. * Update monitor list and errors list to handle simple_query_string filters. * Make FilterBar component incremental to avoid overwriting queries that are in progress of being edited. * Update histogram query to support simple_text_query. * Delete hardcoded height prop that was breaking UI in mobile-sized windows. * Fix bug in check histogram function and add tests. * Update API tests and functional UI tests. * Fix type error in test file. * Last few fixes - Center empty prompt - remove crosshairs from sparkline - reconcile styles of text in table * Update snaps * WIP. * Update snapshot query to avoid Apollo Query class and allow manual fetching. * Update SnapshotLoading component to better reflect the actual shape of the Snapshot component. * Introduce HOC to manage GraphQL querying. * Remove unneeded code. * Update monitor page query components to use new query paradigm. * Remove remaining references to apollo query component. * Update filter bar snapshot. * Update empty state. * Fix busted type in test. * Update schema type to avoid server error. * Remove obsolete translations. * Remove more obsolete translations. * Remove obsolete code from Snapshot component. Rewrite graphql HOC with hooks. * Change loading state condition for filter bar. * Simplify app refresh process. * Update loading state for several components to avoid unnecessary renders. * Add default sort order for getAll pings function. * Add translation to bare UI string. * Update API fixtures to handle new default sort direction. * Fix type errors. * Remove unused import. * Change the way component passes children prop. * Fix typing error.

snide added 13 commits February 15, 2019 11:18

uptime design cleanup

9b3d911

uptime design cleanup

704cf13

merge master

5bafda3

test

2d3a1f9

errorlist now styled

a22dcb9

errorlist now styled

e401ae8

errorlist now styled

00076a2

Merge remote-tracking branch 'upstream/master' into d/uptime

317d45b

cleanup

18923de

Merge remote-tracking branch 'upstream/master' into d/uptime

3a70065

replace color vars with correct naming

e61fa6b

some titles

36d2b4f

more cleanup

664a634

snide added Team:Platform-Design Team Label for Kibana Design Team. Support the Analyze group of plugins. Team:Uptime - DEPRECATED Synthetics & RUM sub-team of Application Observability labels Feb 21, 2019

snide requested a review from justinkambic February 21, 2019 06:20

snide commented Feb 21, 2019

View reviewed changes

clean up silly gray graph

80da365

justinkambic added 4 commits February 21, 2019 20:19

Address problems with UI update.

d6cdce4

Refresh jest snapshots.

6b9dd4a

Fix busted types.

69b57f2

Refresh jest snapshots broken by busted type fix.

07417e7

justinkambic added 3 commits March 29, 2019 08:59

Update loading state for several components to avoid unnecessary rend…

b7b949d

…ers.

Add default sort order for getAll pings function.

e70c7d6

Add translation to bare UI string.

181a5db

Merge master.

239f5d8

justinkambic added 2 commits April 1, 2019 09:42

Update API fixtures to handle new default sort direction.

0ac3606

Fix type errors.

98d0ccd

justinkambic requested a review from mattapperson April 1, 2019 14:41

justinkambic added 3 commits April 3, 2019 11:50

Merge branch 'master' into d/uptime

adde363

Merge branch 'master' into d/uptime

6d3f89b

Remove unused import.

3f838af

mattapperson reviewed Apr 3, 2019

View reviewed changes

mattapperson approved these changes Apr 3, 2019

View reviewed changes

Change the way component passes children prop.

687cce3

justinkambic mentioned this pull request Apr 4, 2019

[Uptime] Refactor names and tests #34552

Closed

3 tasks

Merge branch 'master' into d/uptime

d5da784

Fix typing error.

9c0d0ac

justinkambic merged commit f9bdf89 into elastic:master Apr 4, 2019

justinkambic mentioned this pull request Apr 4, 2019

[Uptime] [Backport] Design cleanup #34574

Merged

7 tasks

snide added the release_note:enhancement label May 7, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Design cleanup of Uptime app #31663

Design cleanup of Uptime app #31663

snide commented Feb 21, 2019 •

edited by justinkambic

Loading

elasticmachine commented Feb 21, 2019

elasticmachine commented Feb 21, 2019

snide Feb 21, 2019

cchaos Feb 21, 2019

elasticmachine commented Feb 21, 2019

snide commented Feb 21, 2019

elasticmachine commented Feb 21, 2019

cchaos commented Feb 21, 2019

snide commented Feb 21, 2019

elasticmachine commented Feb 22, 2019

elasticmachine commented Mar 29, 2019

elasticmachine commented Mar 29, 2019

elasticmachine commented Mar 29, 2019

elasticmachine commented Apr 1, 2019

elasticmachine commented Apr 3, 2019

elasticmachine commented Apr 3, 2019

mattapperson Apr 3, 2019

mattapperson left a comment

elasticmachine commented Apr 4, 2019

elasticmachine commented Apr 4, 2019

elasticmachine commented Apr 4, 2019

justinkambic commented Apr 5, 2019

		@@ -106,15 +106,17 @@ class Application extends React.Component<UptimeAppProps, UptimeAppState> {
		let colors: UptimeAppColors;
		if (darkMode) {

Design cleanup of Uptime app #31663

Design cleanup of Uptime app #31663

Conversation

snide commented Feb 21, 2019 • edited by justinkambic Loading

Summary

I need the following help

Checklist

For maintainers

elasticmachine commented Feb 21, 2019

elasticmachine commented Feb 21, 2019

snide Feb 21, 2019

Choose a reason for hiding this comment

cchaos Feb 21, 2019

Choose a reason for hiding this comment

elasticmachine commented Feb 21, 2019

💔 Build Failed

snide commented Feb 21, 2019

elasticmachine commented Feb 21, 2019

💔 Build Failed

cchaos commented Feb 21, 2019

snide commented Feb 21, 2019

elasticmachine commented Feb 22, 2019

💔 Build Failed

elasticmachine commented Mar 29, 2019

💔 Build Failed

elasticmachine commented Mar 29, 2019

💔 Build Failed

elasticmachine commented Mar 29, 2019

💔 Build Failed

elasticmachine commented Apr 1, 2019

💚 Build Succeeded

elasticmachine commented Apr 3, 2019

💔 Build Failed

elasticmachine commented Apr 3, 2019

💚 Build Succeeded

mattapperson Apr 3, 2019

Choose a reason for hiding this comment

mattapperson left a comment

Choose a reason for hiding this comment

elasticmachine commented Apr 4, 2019

💔 Build Failed

elasticmachine commented Apr 4, 2019

💔 Build Failed

elasticmachine commented Apr 4, 2019

💚 Build Succeeded

justinkambic commented Apr 5, 2019

snide commented Feb 21, 2019 •

edited by justinkambic

Loading