Convert status page to EUI #21491
Convert status page to EUI #21491
Conversation
💔 Build Failed |
| </div> | ||
| </footer> | ||
| <div class="container"> | ||
| <status-app build-num="{{ui.buildInfo.num}}" build-sha="'{{ui.buildInfo.sha}}'" /> |
There was a problem hiding this comment.
Might be a better way of delivering this info the the React components?
| @@ -0,0 +1 @@ | |||
| {"version": "1.2.3"} | |||
There was a problem hiding this comment.
Not sure where these came from...
💔 Build Failed |
joshdover
force-pushed
the
status-page-eui
branch
2 times, most recently
from
e49200d to
5372dec
Compare
💔 Build Failed |
💔 Build Failed |
💔 Build Failed |
💔 Build Failed |
💔 Build Failed |
💚 Build Succeeded |
joshdover
force-pushed
the
status-page-eui
branch
from
78c713e to
37ab954
Compare
joshdover
added
Team:Operations
💚 Build Succeeded |
💚 Build Succeeded |
|
Note that although this PR includes SCSS. It is not blocked by #21656. The single line of scss in this PR is safe from autoprefixer. https://caniuse.com/#feat=viewport-units |
|
|
||
| <EuiSpacer /> | ||
|
|
||
| <EuiPageContent grow={0}> |
There was a problem hiding this comment.
Does EuiPageContent have a grow attribute?
There was a problem hiding this comment.
This gets passed to the child div, I added this to remove this extra whitespace at the end of the content:
src/server/status/states.js
Outdated
| @@ -62,7 +62,7 @@ export const all = [ | |||
| id: 'disabled', | |||
| title: 'Disabled', | |||
| severity: -1, | |||
| icon: 'toggle-off', | |||
| uiColor: 'subdued', | |||
There was a problem hiding this comment.
Where does subdued come from? I am not seeing it as an available color
There was a problem hiding this comment.
Good catch, originally I was passing this through to EuiIcon which has this color. Will change to default.
|
@jbudz mind taking a look? |
| state: this.state, | ||
| icon: states.get(this.state).icon, | ||
| message: this.message, | ||
| state: { |
There was a problem hiding this comment.
/cc @elastic/kibana-monitoring any idea if this is going to impact the beats module or status poller?
There was a problem hiding this comment.
The only usage I've found besides the status page / checking logic itself is the api_debug CLI dev tool in xpack. It doesn't do anything with the data back from the API besides dump it into the console and I've confirmed it still works.
Dropped in Monitoring's slack to confirm, but I think we will be good to go.
💚 Build Succeeded |
| metrics: PropTypes.arrayOf(MetricPropType).isRequired | ||
| }; | ||
|
|
||
| export default MetricTiles; |
There was a problem hiding this comment.
nit: styleguide convention for no default exports, guess our ci task to lint didn't catch it?
There was a problem hiding this comment.
Hmm yeah it's passing lint. We have almost 1k export defaults, but happy to change it if this is the direction we want to move to.
There was a problem hiding this comment.
Good catch @jbudz - let's go ahead and update this to reflect https://github.com/elastic/kibana/blob/master/style_guides/js_style_guide.md#use-named-exports-only
There was a problem hiding this comment.
@spalger any idea why this wasn't caught by the linter? It doesn't appear to be ignored in https://github.com/elastic/kibana/blob/master/.eslintrc.js#L51
There was a problem hiding this comment.
That rule actually looks like it's allowing default exports, not preventing.
There was a problem hiding this comment.
Probably need to cut a new issue for changing all the existing ones. I'll make sure this PR is good though 👍
* Convert the status_page plugin to EUI * Fix uiColor for disabled state
This reverts commit 33c6ade.
Fixes #20001
This converts Kibana's status page to elastic-ui / React. Shoutout to @snide for the design heavy lifting. This also involved some minor changes to the status API on the server to faciliate making some of the data easier to work with on the frontend.
StatusTable)icon)Screenshot