Adding sass lint to Monitoring #44148

andreadelrio · 2019-08-27T20:08:59Z

Summary

Added sass lint to Monitoring
Cleaned up unused sass code
Removed Bootstrap wherever possible and replaced with Eui
Improved Shard Legend (related to (Accessibility) - Dark Mode - Shard Allocation #39408)

Light mode (before)

Light mode (after)

Dark mode (before)

Dark mode (after)

Checklist

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

[x ] 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-08-27T21:19:02Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-09-10T19:43:16Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

…th null filterQuery (elastic#45218) ## Summary Changes the ML drill-downs to use the tabs and re-direct to the Anomalies table when drilled down. elastic#45080 Tests for this were both by playing with the Anomalies as well as hand testing that these clickable links below do what I would expect them to do based on the conditional rules of: * Split comma separated values into OR clauses within KQL. * Redirect from multiple hosts/ips on the details page to the host over view/detail overview page with a new KQL added as a filter since comma separated values on details would just be errors. * Remove/Replace any $value$ dollar values that did not have a value as before. Manual testing is from either the test cases below or by using the ML Anomalies explorerand clicking on the drill down links using the action menu items from Host or IP jobs which look like this: <img width="352" alt="Screen Shot 2019-09-06 at 4 17 05 PM" src="https://user-images.githubusercontent.com/1151048/64576200-c1852780-d334-11e9-8270-ef97569a2e78.png"> URL manual test cases I used: Testing conditional ml-network links: ----- Single IP with a null for the KQL: http://localhost:5601/app/siem#/ml-network/ip/127.0.0.1?kqlQuery=(filterQuery:!n,queryLocation:network.details,type:details)&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z'))) Single IP with kqlQuery: http://localhost:5601/app/siem#/ml-network/ip/127.0.0.1?kqlQuery=(filterQuery:(expression:'process.name%20:%20%22conhost.exe,sc.exe%22',kind:kuery),queryLocation:network.details,type:details)&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z'))) Multiple IP's with a null for the filterQuery: http://localhost:5601/app/siem#/ml-network/ip/127.0.0.1,127.0.0.2?kqlQuery=(filterQuery:!n,queryLocation:network.details,type:details)&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z'))) Multiple IP's with a value for the filterQuery: http://localhost:5601/app/siem#/ml-network/ip/127.0.0.1,127.0.0.2?kqlQuery=(filterQuery:(expression:'process.name%20:%20%22conhost.exe,sc.exe%22',kind:kuery),queryLocation:network.details,type:details)&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z'))) Undefined/null IP and a null filterQuery: http://localhost:5601/app/siem#/ml-network/ip/$ip$?kqlQuery=(filterQuery:!n,queryLocation:network.details,type:details)&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z'))) Undefined/null IP but a value for the filterQuery: http://localhost:5601/app/siem#/ml-network/ip/$ip$?kqlQuery=(filterQuery:(expression:'process.name%20:%20%22conhost.exe,sc.exe%22',kind:kuery),queryLocation:network.details,type:details)&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-08-28T11:00:00.000Z',kind:absolute,to:'2019-08-28T13:59:59.999Z'))) Testing conditional host links: Single host name with a null for the KQL: http://localhost:5601/app/siem#/ml-hosts/siem-windows?_g=()&kqlQuery=(filterQuery:!n,queryLocation:hosts.details,type:details)&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z'))) Single host name with a variable left in the KQL http://localhost:5601/app/siem#/ml-hosts/siem-windows?_g=()&kqlQuery=(filterQuery:(expression:'process.name%20:%20%22$process.name$%22',kind:kuery),queryLocation:hosts.details,type:details)&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z'))) Single host name with a value for filterQuery: http://localhost:5601/app/siem#/ml-hosts/siem-windows?_g=()&kqlQuery=(filterQuery:(expression:'process.name%20:%20%22conhost.exe,sc.exe%22',kind:kuery),queryLocation:hosts.details,type:details)&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z'))) Multiple host names with null for filterQuery http://localhost:5601/app/siem#/ml-hosts/siem-windows,siem-suricata?_g=()&kqlQuery=(filterQuery:!n,queryLocation:hosts.details,type:details)&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z'))) Multiple host names with a value for filterQuery http://localhost:5601/app/siem#/ml-hosts/siem-windows,siem-suricata?_g=()&kqlQuery=(filterQuery:(expression:'process.name%20:%20%22conhost.exe,sc.exe%22',kind:kuery),queryLocation:hosts.details,type:details)&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z'))) Undefined/null host name with a null for the KQL: http://localhost:5601/app/siem#/ml-hosts/$host.name$?_g=()&kqlQuery=(filterQuery:!n,queryLocation:hosts.details,type:details)&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z'))) Undefined/null host name but with a value for filterQuery http://localhost:5601/app/siem#/ml-hosts/$host.name$?_g=()&kqlQuery=(filterQuery:(expression:'process.name%20:%20%22conhost.exe,sc.exe%22',kind:kuery),queryLocation:hosts.details,type:details)&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-06-06T06:00:00.000Z',kind:absolute,to:'2019-06-07T05:59:59.999Z'))) ---- Extra misc tests: 3 host names http://localhost:5601/app/siem#/ml-hosts/suricata-iowa,siem-windows,siem-fake?_g=()&kqlQuery=(filterQuery:(expression:'process.name%20:%20%22snapd%22',kind:kuery),queryLocation:hosts.details,type:details)&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-09-09T18:00:00.000Z',kind:absolute,to:'2019-09-09T20:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-09-09T18:00:00.000Z',kind:absolute,to:'2019-09-09T20:59:59.999Z'))) 3 ips http://localhost:5601/app/siem#/ml-network/ip/127.0.0.1,127.0.0.2,127.0.0.3?_g=()&kqlQuery=(filterQuery:!n,queryLocation:network.details,type:details)&timerange=(global:(linkTo:!(timeline),timerange:(from:'2019-08-28T06:00:00.000Z',kind:absolute,to:'2019-08-29T05:59:59.999Z')),timeline:(linkTo:!(global),timerange:(from:'2019-08-28T06:00:00.000Z',kind:absolute,to:'2019-08-29T05:59:59.999Z'))) ### Checklist Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR. - [x] This was checked for cross-browser compatibility, [including a check against IE11](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#cross-browser-compatibility) - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/master/packages/kbn-i18n/README.md) - [x] [Documentation](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#writing-documentation) was added for features that require explanation or tutorials - [x] [Unit or functional tests](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#cross-browser-compatibility) were updated or added to match the most common scenarios - [ ] This was checked for [keyboard-only and screenreader accessibility](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Accessibility_testing_checklist) ### For maintainers - [x] This was checked for breaking API changes and was [labeled appropriately](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#release-notes-process) - [x] This includes a feature addition or change that requires a release note and was [labeled appropriately](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#release-notes-process)

elasticmachine · 2019-09-10T23:39:40Z

Pinging @elastic/stack-monitoring

elasticmachine · 2019-09-11T01:11:13Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-09-17T18:19:51Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-09-17T19:05:51Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

…o/kibana into sass-lint-monitoring

andreadelrio · 2019-09-27T00:49:14Z

New layout for Shard Legend following @snide's proposal. One big advantage of this layout is that using the same UI to represent health (i.e. red/yellow/green dot) which adds consistency.

@snide I stuck with EuiBadge instead of making custom made blocks because the legend is using EuiBadges and I wanted to be able to use the same colors (primary, warning, etc) for both. Let me know if you think creating custom made blocks would make more sense.

elasticmachine · 2019-09-27T02:21:55Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-10-03T02:45:48Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 4131d13

chrisronline · 2019-10-03T18:01:10Z

@elastic/stack-monitoring

We need to assist @andreadelrio here. Based on the most recent screenshots, it look like there will be a scalability problem. Currently, we show a group of boxes for each shard that is on the node/in the index (based on which page we're looking at) and that group is theoretically unbounded since I don't think there is an upper limit to the amount of shards per index.

I'm proposing a change to this behavior in the shard legend.

Instead of showing a group of boxes for each shard, why don't we always/only show 6 boxes - a box for each shard state. Then, inside of the box, we show the number of shards in this state. If the user hovers over the box, they will see the list of shards that make up that number in that state.

The only downside to this is a user can't easily scan the legend to see where all the individual shards exist, but I'm not sure how valuable that really is. My guess is most users just care about the state of the shards and how many shards are in that state.

Thoughts?

BTW, this will be a change in behavior, as the number inside the box will represent something different than it currently does so that will need to be communicated somehow.

igoristic · 2019-10-03T18:25:28Z

@chrisronline

Instead of showing a group of boxes for each shard, why don't we always/only show 6 boxes - a box for each shard state

Yeah, that's not a bad alternative.

I was thinking maybe it would be easier to leave it the way it is now and if the amount is over a specific threshold (lets say 50) then we show another legend that states something like:
[ ... ] and clicking it loads the next 50 and so on...

cachedout · 2019-10-09T18:25:40Z

Instead of showing a group of boxes for each shard, why don't we always/only show 6 boxes - a box for each shard state.

I really like this idea and I'm wondering if we can't take it even further. There are two types of shards (primary/replica) and those shards can be in one of three states (relocating/initializing/unassigned). Could we do something like two boxes for the two types of shards and in each, just show the number of shards in each state? I could do a quick sketch of what I'm thinking if that's helpful.

chrisronline · 2019-10-09T20:13:00Z

Maybe we should take a step back and talk through why a user would be looking at this shard legend, and what they are looking for.

I'd imagine the most common thing is to spot any anomalies - which would be unallocated shards. Next, maybe the other important state is relocating. The other state(s) suggest everything is fine and nothing is really happening that requires the user's attention.

So a priority order might be:

Unallocated primary shards
Unallocated replica shards
Relocating primary shards
Relocating replica shards
Everything else

If we agree on that, maybe that will help us figure out what we should be highlighting in this UI.

But, I don't want to hold up this PR with a larger discussion. I don't think we can merge this PR as is because I think the UI will completely break at some small number of shards (sounds like maybe 5 or 6).

@cachedout What do you think is a good stop-gap solution for this?

cachedout · 2019-10-10T10:43:11Z

But, I don't want to hold up this PR with a larger discussion.

I agree. I wrote a long comment and then I set it aside because I think it's best to open a new issue to discuss this further.

What do you think is a good stop-gap solution for this?

I propose that we make the following changes to the shard legend on the node page:

For each index in the table, partially adopt Chris' suggestion to display only the number of shards. Therefore, each index should contain an indication that there are X number of primary shards and Y number of replica shards. (This is a change in behavior.) These would be displayed in two boxes, one blue and one green, to the left of the index name, somewhat similar to how it is now.
As we have it in this PR, display a green dot to the right indicating a lack of problems. Concretely, this means that no shards in the index are unassigned and no shards are relocating or initializing.
If any of the conditions in step 2 do exist for shards in the index, remove the green dot. If the index contains unassigned shards, display a red dot. Hovering over a dot shows the number of shards in a given state. Additionally, add a colored bar below the box indicating the number of shards of a given type, indicating that some of the shards of that type are unassigned.
If one or more shards in an index are relocating, do not display the green dot and display a purple dot indicating that at least one shard is relocating. Hovering over the dot shows the user how many shards are relocating. Add a colored bar similar to the approach in step 3.
If one or more shards are initializing, do not display the green dot and display a purple dot. Add a colored bar similar to the approach in step 3.
Hovering over any dot or colored bar would give details about the number of shards in that state.

Forgive my terrible mock-up skills, but here's a rough idea of what I mean:

What that would show would indicate that the first index (.apm-agent-configuration) has one or more unassigned replica shard.

For .monitoring-es-7-2019.10.10, there are one or more replica shards which are relocating and also one one or more replica shards which are unassigned.

I think we can implement this relatively quickly on top of this PR and that would give the user the ability to quickly scan and see any signs of unusual activity.

That said, I think the entire shard legend could use a refresh and this is only a stopgap proposal to get this PR out the door. Let me know if this seems reasonable. If it's just much easier to go with Chris' proposal of six boxes, that's fine by me, but I wanted to toss this out there is another path that might get us what we're looking for without too many immediate changes being necessary.

chrisronline · 2019-10-14T19:10:50Z

@cachedout I think that makes sense, but I'm not sure @andreadelrio feels confident making these types of changes (please correct me if I'm making a bad assumption here). I think one of us will have to step in and write this logic inside of this PR. Did you want to take a stab at it @cachedout since you have a pretty clear picture of what we should do (which sounds right to me too)?

cachedout · 2019-10-14T21:43:10Z

Did you want to take a stab at it @cachedout since you have a pretty clear picture of what we should do (which sounds right to me too)?

@chrisronline Can do!

@andreadelrio Do you have a timetable for these changes? I'm just trying to gauge the priority in relation to other tasks.

andreadelrio · 2019-10-15T00:15:16Z

Chris is right that I’d prefer assistance implementing those changes. Once they’re in I can do a design cleanup if needed.

I’d like to be able to merge this PR as soon as possible as it’s been under review for a while but we don't a have a strict timetable.

chrisronline · 2019-11-18T14:25:55Z

Quick ping here. This PR is getting old/stale quickly. @cachedout Do you still have plans to address the work here? Perhaps we should close out this PR, and re-open it once we're ready to begin again?

cachedout · 2019-11-18T16:45:02Z

@chrisronline Thanks for the bump. This is on my list but it's not at the top right now. I would be OK if we closed this for the time being.

chrisronline · 2020-02-27T16:06:22Z

Closing this due to inactivity

andreadelrio added 5 commits August 21, 2019 11:48

basic cleanup

eee283c

will try to use EuiIcons for status

25923f0

replaced fa-circle with EuiIcon dot

cb70628

made flexitem and flexgroup available

7ebd6b6

chart legend overlaps

bd8e8c7

andreadelrio added 5 commits August 28, 2019 15:26

Merge remote-tracking branch 'upstream/master' into sass-lint-monitoring

1a2c015

some changes

f67df41

Merge remote-tracking branch 'upstream/master' into sass-lint-monitoring

03cb97f

no sass lint warnings

d0c1a36

Merge remote-tracking branch 'upstream/master' into sass-lint-monitoring

c0da56d

andreadelrio and others added 3 commits September 10, 2019 16:15

Merge remote-tracking branch 'upstream/master' into sass-lint-monitoring

b81d49e

replaced number with eui variable

b58e43b

andreadelrio force-pushed the sass-lint-monitoring branch from 446daa3 to b58e43b Compare September 10, 2019 23:37

andreadelrio added release_note:skip Skip the PR/issue when compiling release notes EUI Team:Monitoring Stack Monitoring team labels Sep 10, 2019

andreadelrio added the v8.0.0 label Sep 10, 2019

andreadelrio added 5 commits September 11, 2019 22:18

Merge remote-tracking branch 'upstream/master' into sass-lint-monitoring

3c00e62

Merge remote-tracking branch 'upstream/master' into sass-lint-monitoring

93c0966

using euiBorderColor for charts

58d717c

Merge remote-tracking branch 'upstream/master' into sass-lint-monitoring

dcaeb4d

fix lint error

62b3d54

Fix tests

b66c3d7

andreadelrio added 3 commits September 25, 2019 16:14

trying new layout

eb6fbf2

new layout for shard legend

4835224

Merge branch 'sass-lint-monitoring' of https://github.com/andreadelri…

0b4bc8b

…o/kibana into sass-lint-monitoring

andreadelrio added 3 commits September 26, 2019 17:50

flexgrid for unassigned

950afee

fix conflict

fb1e478

snapshots

47e294c

andreadelrio requested a review from a team as a code owner September 27, 2019 01:09

andreadelrio requested a review from snide October 2, 2019 14:35

andreadelrio added 2 commits October 2, 2019 18:28

refining layout

40aea9a

fixed conflict

4131d13

andreadelrio mentioned this pull request Nov 19, 2019

[Monitoring] Sass cleanup #51100

Merged

2 tasks

chrisronline closed this Feb 27, 2020

chrisronline mentioned this pull request Apr 21, 2020

Single index shard legend spans way off to the right for nodes holding many shards #63387

Closed

chrisronline mentioned this pull request May 4, 2020

[Monitoring] [Meta] Improve shard legend #65103

Open

neptunian mentioned this pull request Oct 13, 2021

[Stack Monitoring] Unskip broken shard allocation functional tests #114875

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adding sass lint to Monitoring #44148

Adding sass lint to Monitoring #44148

andreadelrio commented Aug 27, 2019 •

edited

Loading

elasticmachine commented Aug 27, 2019

elasticmachine commented Sep 10, 2019

elasticmachine commented Sep 10, 2019

elasticmachine commented Sep 11, 2019

elasticmachine commented Sep 17, 2019

elasticmachine commented Sep 17, 2019

andreadelrio commented Sep 27, 2019

elasticmachine commented Sep 27, 2019

elasticmachine commented Oct 3, 2019

chrisronline commented Oct 3, 2019

igoristic commented Oct 3, 2019

cachedout commented Oct 9, 2019

chrisronline commented Oct 9, 2019

cachedout commented Oct 10, 2019

chrisronline commented Oct 14, 2019

cachedout commented Oct 14, 2019

andreadelrio commented Oct 15, 2019

chrisronline commented Nov 18, 2019

cachedout commented Nov 18, 2019

chrisronline commented Feb 27, 2020

Adding sass lint to Monitoring #44148

Adding sass lint to Monitoring #44148

Conversation

andreadelrio commented Aug 27, 2019 • edited Loading

Summary

Checklist

For maintainers

elasticmachine commented Aug 27, 2019

💔 Build Failed

elasticmachine commented Sep 10, 2019

💔 Build Failed

elasticmachine commented Sep 10, 2019

elasticmachine commented Sep 11, 2019

💔 Build Failed

elasticmachine commented Sep 17, 2019

💔 Build Failed

elasticmachine commented Sep 17, 2019

💔 Build Failed

andreadelrio commented Sep 27, 2019

elasticmachine commented Sep 27, 2019

💔 Build Failed

elasticmachine commented Oct 3, 2019

💔 Build Failed

chrisronline commented Oct 3, 2019

igoristic commented Oct 3, 2019

cachedout commented Oct 9, 2019

chrisronline commented Oct 9, 2019

cachedout commented Oct 10, 2019

chrisronline commented Oct 14, 2019

cachedout commented Oct 14, 2019

andreadelrio commented Oct 15, 2019

chrisronline commented Nov 18, 2019

cachedout commented Nov 18, 2019

chrisronline commented Feb 27, 2020

andreadelrio commented Aug 27, 2019 •

edited

Loading