Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add footer and review doc to customize UI #182

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Add footer and review doc to customize UI #182

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
51a3dfd
feat(ui) add footer
PaulinCharliquart Feb 22, 2023
5b001d4
doc: rewrite UI customization
PaulinCharliquart Feb 22, 2023
5c48394
feat(api) set api url with Flask
PaulinCharliquart Feb 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion director/__init__.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ def create_app(
home_path=os.getenv("DIRECTOR_HOME"), config_path=os.getenv("DIRECTOR_CONFIG")
):
app = DirectorFlask(__name__)
c = Config(home_path, config_path)
c = Config(home_path, config_path, __version__)
app.config.from_object(c)

# Init User's config
Expand Down
1 change: 0 additions & 1 deletion director/commands/init.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@


# ---------- Frontend ----------
DIRECTOR_API_URL="http://127.0.0.1:8000/api"
DIRECTOR_FLOWER_URL="http://127.0.0.1:5555"
DIRECTOR_ENABLE_HISTORY_MODE=false
DIRECTOR_REFRESH_INTERVAL=30000
Expand Down
5 changes: 2 additions & 3 deletions director/settings.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
HIDDEN_CONFIG = [
"DIRECTOR_ENABLE_HISTORY_MODE",
"DIRECTOR_REFRESH_INTERVAL",
"DIRECTOR_API_URL",
"DIRECTOR_FLOWER_URL",
"DIRECTOR_DATABASE_URI",
"DIRECTOR_DATABASE_POOL_RECYCLE",
Expand All @@ -18,7 +17,7 @@


class Config(object):
def __init__(self, home_path=None, config_path=None):
def __init__(self, home_path=None, config_path=None, version=None):
if not home_path or not Path(home_path).resolve().exists():
raise ValueError("environment variable DIRECTOR_HOME is not set correctly")

Expand All @@ -35,12 +34,12 @@ def __init__(self, home_path=None, config_path=None):
env = Env()
env.read_env(env_path)

self.VERSION = env.str("DIRECTOR_VERSION", version)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why would you like to let the user override the installed version value?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hi @ncrocfer,
It will allow user to customize the footer. For my case, I can pass GIT_TAG from my CI/CD pipeline and see it in the UI.
regards,

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok I see, indeed it seems to be a very good use case ! You can for instance reference celery-director==x.y.z in your own requirements.txt file, then display your hash commit or git tag in the footer.

But I'm not sure the DIRECTOR_VERSION is a good name for that (because the real director version doesn't change, so it brings confusion). I will check what is done by other similar tools for this kind of needs and I will answer you.

self.ENABLE_HISTORY_MODE = env.bool("DIRECTOR_ENABLE_HISTORY_MODE", False)
self.ENABLE_CDN = env.bool("DIRECTOR_ENABLE_CDN", True)
self.STATIC_FOLDER = env.str(
"DIRECTOR_STATIC_FOLDER", str(Path(self.DIRECTOR_HOME).resolve() / "static")
)
self.API_URL = env.str("DIRECTOR_API_URL", "http://127.0.0.1:8000/api")
self.FLOWER_URL = env.str("DIRECTOR_FLOWER_URL", "http://127.0.0.1:5555")
self.WORKFLOWS_PER_PAGE = env.int("DIRECTOR_WORKFLOWS_PER_PAGE", 1000)
self.REFRESH_INTERVAL = env.int("DIRECTOR_REFRESH_INTERVAL", 30000)
Expand Down
10 changes: 9 additions & 1 deletion director/templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -730,11 +730,19 @@
</v-card>
</v-dialog>
<!-- Definitions Ends -->
<v-footer padless>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The idea of having the version displayed in the UI is nice but unfortunately the rendering is not really good:
image

Can you simply add this information somewhere else? Maybe at the bottom of the navigation menu?

image

It seems you can use the append slot of vuetify for that: https://vuetifyjs.com/en/components/navigation-drawers/#misc (didn't try it).

<v-col
class="text-center"
cols="12"
>
Celery Director - %% config.VERSION %%
</v-col>
</v-footer>
</v-app>
</div>
<script type="text/javascript">
const HISTORY_MODE =%% config.ENABLE_HISTORY_MODE | int %%;
const API_URL = "%% config.API_URL %%";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure simply concatenating request.url_root and api is a really good idea. My feedling is we can have some problems if a user is behind a reverse proxy or something like that.

By allowing him to fully customize its API_URL, we're safe.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hi @ncrocfer,

Or do you think it can work with this js code?
const API_URL = window.location.origin + "/api"

regards,

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, I insist: don't concatenate please. A single API_URL is enough to customize the url ;)

const API_URL = "%% request.url_root + 'api' %%";
const FLOWER_URL = "%% config.FLOWER_URL %%";
const REFRESH_INTERVAL =%% config.REFRESH_INTERVAL | int %%;
const REPO_LINK="%% config.REPO_LINK %%";
Expand Down
9 changes: 7 additions & 2 deletions docs/docs/guides/custom-configuration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,13 @@ def extract(*args, **kwargs):
Note the `DIRECTOR_` prefix has to be removed in your tasks (we define the `DIRECTOR_MY_URL` setting and we access it using `MY_URL`).


In addition, the github repository link in the webUI can be customized in `.env`:
## Customize UI

In addition, `.env` allows to customize the UI with the following variables:

```
DIRECTOR_REPO_LINK="https://github.com/ovh/celery-director"
DIRECTOR_REPO_LINK="https://github.com/ovh/celery-director" # optional: overwrite default repository link
DIRECTOR_DOCUMENTATION_LINK="https://my-own-docs" # optional: overwrite default documentation link
DIRECTOR_VERSION # optional: overwrite celery director version displayed in the footer
DIRECTOR_WORKFLOWS_PER_PAGE=15 # optional: numbers of rows to show
```
1 change: 0 additions & 1 deletion tests/workflows/.env
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
DIRECTOR_API_URL="http://127.0.0.1:8000/api"
DIRECTOR_DATABASE_URI=${DIRECTOR_DATABASE_URI:-sqlite:////tmp/tests.db}
DIRECTOR_BROKER_URI="redis://localhost:6379/0"
DIRECTOR_RESULT_BACKEND_URI="redis://localhost:6379/1"
Expand Down