Make Kibana mobile devices responsive

[hemantmalik]

Making Kibana Dashboards accessible on smaller form factor mobile devices (phones - iPhones, Android):
As of today, the experience of accessing dashboards on smaller form factor mobile devices has a lot of room for improvement. Dashboards and visualizations don't readjust to the reduced form factor.
The enhancement request is a result of a conversation with @alexfrancoeur

[jonsoini]

+1

Our pain points:

• Concerned with Dashboards as a first step, vs the other tabs in Kibana
• Having an optimized login screen + ability to select a dashboard from a 5" iOS/Android device key
• Being able to go from a Slack/PD notification to dashboard in question feels like MVP this day & age
• Primarily concerned with read-only dashboard users in 6.x to start
• Filters and date picker useful to interact with on mobile so that folks can look at a larger context if default dashboard time scope too tight/broad

Especially critical in large enterprises where Elastic/Kibana is up against the other visualization/BI competitors for procurement dollars.

[deanpeters]

Here's the deal, I don't think simply making Kibana responsive is completely the answer.

Not without first taking a step back and taking a page out of Luke Wroblewski's thoughts on organizing mobile.

Specially:

• Align with how people use their mobile devices and why.
• Emphasize content over navigation.
• Provide relevant options for exploration and pivoting.
• Maintain clarity and focus.
• Align with mobile behaviors

So while your request for mobile treatment is spot-on, I'd suggest perhaps conversations along the above bullets points first.

What I suspect will result would be a solution that is partially based in adaptive design for limited and mobile friendly data payload delivery coupled with responsive design based front end more aligned with the mobile needs enumerated in the OP.

[snide]

This is a direct goal of the design system the next version of Kibana is based off of. You can see some of that at https://elastic.github.io/eui/#/

It's not something that will happen overnight. Right now there's a lot of work between 6.x and 7.0 to adopt the design system itself, but once that part is done, we should be in a much better position to make Kibana responsive.

[cjcenizal]

This relates to #2563.

[pjschaafsma]

Can we at least get a view-only (with maybe just a date range selector) mobile friendly mode? It is it seems that in current year it's not all that much to ask.

[alexfrancoeur]

In a recent design update for 7.0 by @cchaos we actually made dashboards responsive. This provides a bit of a better experience for viewing on mobile devices. The full PR can be found in #29896 but I've added a quick GIF below:

For the description of this issue, I believe that PR would close out this issue specifically. What do you think @hemant-elastic @snide @cchaos ?

[cchaos]

I'm good with closing it in favor of more specific mobile issues. Especially since most pages have been updated to EUI layouts and at least block out on smaller screens.

[rameezhandel]

Hello @hemant-elastic , Please have a look at the native iOS Kibana App...
https://discuss.elastic.co/t/octagon-analytics-native-ios-mobile-app-for-kibana/223868

Open Source project: https://github.com/OctagonMobile/Octagon-Analytics

We appreciate your feedback.
Thank you :)

[xdzhou12]

I have been looking for a good user experience on mobile devices for a long time, I do not understand why there is no native ones created. Hopefully there are some traction in the open source community to create one.

[chitransh89]

My edits in the dashboard are reflected in desktop but not on mobile. It is still showing me visualizations of old dashboard. I didn't understand the problem. Any help appreciated.

[rameezhandel]

My edits in the dashboard are reflected in desktop but not on mobile. It is still showing me visualizations of old dashboard. I didn't understand the problem. Any help appreciated.

@chitransh89 Please refresh the dashboard list on mobile and try again.

1. Go back to the dashboard list Page.
2. Pull to refresh the page.
3. Click on your dashboard.