You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by GitBox <gi...@apache.org> on 2022/12/19 23:40:03 UTC
[GitHub] [airflow] michaelmicheal opened a new issue, #28483: Issues with Custom Menu Items on Smaller Windows
michaelmicheal opened a new issue, #28483:
URL: https://github.com/apache/airflow/issues/28483
### Apache Airflow version
Other Airflow 2 version (please specify below)
### What happened
We take advantage of the custom menu items with flask appbuilder offer a variety of dropdown menus with custom DAG filters. We've notice two things:
1. When you have too many dropdown menu items in a single category, several menu items are unreachable when using the Airflow UI on a small screen:
<img width="335" alt="Screenshot 2022-12-19 at 6 34 24 PM" src="https://user-images.githubusercontent.com/40223998/208548419-f9d1ff57-6cad-4a40-bc58-dbf20148a92a.png">
2. When you have too many menu categories, multiple rows of dropdown menus are displayed, but cover some other components.
<img width="1077" alt="Screenshot 2022-12-19 at 6 32 05 PM" src="https://user-images.githubusercontent.com/40223998/208548222-44e50717-9040-4899-be06-d503a8c0f69a.png">
### What you think should happen instead
1. When you have too many dropdown menu items in a single category, there should be a scrollbar.
2. When you have too many menu categories, multiple rows of dropdown menus are displayed, the menu shouldn't cover the dag import errors or any part of the UI
### How to reproduce
1. Add a bunch of menu items under the same category in a custom plugin and resize your window smaller
2. Add a large number of menu item categories in a custom plugin and resize your window smaller.
### Operating System
Debian GNU/Linux 10 (buster)
### Versions of Apache Airflow Providers
2.4.3
### Deployment
Official Apache Airflow Helm Chart
### Deployment details
_No response_
### Anything else
I'm happy to make a PR for this. I just don't have the frontend context. If someone can point me in the right direction that'd be great
### Are you willing to submit PR?
- [X] Yes I am willing to submit a PR!
### Code of Conduct
- [X] I agree to follow this project's [Code of Conduct](https://github.com/apache/airflow/blob/main/CODE_OF_CONDUCT.md)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [airflow] michaelmicheal commented on issue #28483: Issues with Custom Menu Items on Smaller Windows
Posted by GitBox <gi...@apache.org>.
michaelmicheal commented on issue #28483:
URL: https://github.com/apache/airflow/issues/28483#issuecomment-1359718366
I was playing around with a patch in our Airflow instance like this, but didn't seem to change the css in the browser. Is there some sort of style rendering that's done in CI or something that prevents me from just changing main.css in our Airflow image to make this change?
```diff
--- /usr/local/lib/python3.9/site-packages/airflow/www/static/css/main.css
+++ /usr/local/lib/python3.9/site-packages/airflow/www/static/css/main.css
@@ -50,6 +50,7 @@ div.container {
width: 98%;
padding-left: 15px;
padding-right: 15px;
+ padding-top: 50px;
}
.navbar a {
@@ -61,6 +62,11 @@ div.container {
color: #e2d2e2;
}
+.navbar li.dropdown .dropdown-menu {
+ overflow-y: auto;
+}
+
+
.navbar-nav li.dropdown:hover > .dropdown-menu,
.navbar-nav li.dropdown:focus-within > .dropdown-menu {
display: block;
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [airflow] bbovenzi commented on issue #28483: Issues with Custom Menu Items on Smaller Windows
Posted by GitBox <gi...@apache.org>.
bbovenzi commented on issue #28483:
URL: https://github.com/apache/airflow/issues/28483#issuecomment-1359726425
The `padding-top` should work. You may need to run the webserver in dev mode `airflow webserver -d`
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [airflow] bbovenzi closed issue #28483: Issues with Custom Menu Items on Smaller Windows
Posted by GitBox <gi...@apache.org>.
bbovenzi closed issue #28483: Issues with Custom Menu Items on Smaller Windows
URL: https://github.com/apache/airflow/issues/28483
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [airflow] michaelmicheal commented on issue #28483: Issues with Custom Menu Items on Smaller Windows
Posted by GitBox <gi...@apache.org>.
michaelmicheal commented on issue #28483:
URL: https://github.com/apache/airflow/issues/28483#issuecomment-1360404531
> You may need to run the webserver in dev mode `airflow webserver -d`
That didn't seem to work. Is dev-mode just a [breeze command option](https://github.com/apache/airflow/blob/7d13b65f53bcd83c5766b21873d8dfb33e593a48/dev/breeze/src/airflow_breeze/commands/developer_commands.py#L223)? -d seems to be debug.
```bash
Start a Airflow webserver instance
optional arguments:
-h, --help show this help message and exit
-A ACCESS_LOGFILE, --access-logfile ACCESS_LOGFILE
The logfile to store the webserver access log. Use '-' to print to stderr
-L ACCESS_LOGFORMAT, --access-logformat ACCESS_LOGFORMAT
The access log format for gunicorn logs
-D, --daemon Daemonize instead of running in the foreground
-d, --debug Use the server that ships with Flask in debug mode
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [airflow] bbovenzi commented on issue #28483: Issues with Custom Menu Items on Smaller Windows
Posted by GitBox <gi...@apache.org>.
bbovenzi commented on issue #28483:
URL: https://github.com/apache/airflow/issues/28483#issuecomment-1359707933
1. We'd need some sort of `overflow-y: auto;` to `.dropdown-menu` and have a max-height never be more than the window height
2. We'd need to set a `max-width` and `overflow-x: auto` to `.navbar-nav`
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [airflow] potiuk commented on issue #28483: Issues with Custom Menu Items on Smaller Windows
Posted by GitBox <gi...@apache.org>.
potiuk commented on issue #28483:
URL: https://github.com/apache/airflow/issues/28483#issuecomment-1358947870
Assigned you - but I am not the one who knows where to point in detail. This is more of an exploration type - and more likely than not it requires Flask App Builder modifications (We are merely exposing Flask Application Builder components for the users). What you can do however you can ask for it in https://github.com/dpgaspar/Flask-AppBuilder/
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [airflow] michaelmicheal commented on issue #28483: Issues with Custom Menu Items on Smaller Windows
Posted by GitBox <gi...@apache.org>.
michaelmicheal commented on issue #28483:
URL: https://github.com/apache/airflow/issues/28483#issuecomment-1364276084
@potiuk I got the css to update using breeze, but when is the `airflow/www/static/dist` directory with assets compiled in production? In our production deployment, I patched `airflow/www/static/css/main.css` when building the image, but the compiled assets aren't updated
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [airflow] potiuk commented on issue #28483: Issues with Custom Menu Items on Smaller Windows
Posted by GitBox <gi...@apache.org>.
potiuk commented on issue #28483:
URL: https://github.com/apache/airflow/issues/28483#issuecomment-1360495019
The --dev-mode of breeze should start the webserver in debug mode (with -d option) and webserver should print out that it is running in dev mode and you should see assets recompiling when they are changed.
But you can do it manually too - you can always control-C in the webserver terminal and start it with -d. Generally speaking breeze makes it easier to automate some stuff, but then it also leaves it free for those who know what they are doing to do more stuff.
If you clearly see that the webserver runs in debug mode and your assets are being recompiled, then this could be another reason - my best guess is that it does come from FAB not Airflow's CSS. But that's purely guess.
But I guess also it's best to just check it - if you made a change you should be able track - whether you see the style in the browser (this is what I remember what I did when I did debug similar things). Inspect in Chrome was always a good friend to help to understand it :). I usually did some stupid changes to see if I can see it in the browser just to see if the "pipeline" is workign - trackign some very straightforward elements and seeing effect of those changes. Then I'd start debugging if I don't see it (usually ending up in finding out who overwrote my change and why).
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [airflow] michaelmicheal commented on issue #28483: Issues with Custom Menu Items on Smaller Windows
Posted by GitBox <gi...@apache.org>.
michaelmicheal commented on issue #28483:
URL: https://github.com/apache/airflow/issues/28483#issuecomment-1364168833
Made a PR for 1: https://github.com/apache/airflow/pull/28561.
Having a hard time dealing with 2. Seems like the suggested solution is to [add padding to the body](https://stackoverflow.com/questions/26402156/put-div-below-navigation-bar-and-dont-overlap-content)
```css
body
{
padding-top: 70px;
}
```
However, the in Airflow, the navbar is part of the body. Any thoughts @bbovenzi ?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
[GitHub] [airflow] bbovenzi commented on issue #28483: Issues with Custom Menu Items on Smaller Windows
Posted by GitBox <gi...@apache.org>.
bbovenzi commented on issue #28483:
URL: https://github.com/apache/airflow/issues/28483#issuecomment-1367680067
Closed via #28561
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org