search

nebari-dev / nebari

🪴 Nebari - your open source data science platform
https://nebari.dev
BSD 3-Clause "New" or "Revised" License
274 stars 88 forks source link

[Qhub] - Customization for navigation bar does not take effect #1277

Closed ychen-ot closed 1 year ago

ychen-ot commented 2 years ago

OS system and architecture in which you are running QHub

Digital Ocean Kubenetes deployment with QHub 0.4.1

Expected behavior

Adding a theme for jupyter hub does takes effect.

Actual behavior

When deployed, I see:

image

If I highlight the text - I can see that all menu items are available.

image

How to Reproduce the problem?

Adding a theme in yaml.

theme:
  jupyterhub:
    hub_title: QHUB Studio
    hub_subtitle: subtitle 
    primary_color: '#FFFFFF'
    secondary_color: '#FFFFFF'
    accent_color: '#0C88FF'
    text_color: '#000000'
    h1_color: '#000000'
    h2_color: '#000000'
    navbar_text_color: '#000000'
    navbar_hover_color: '#0C88FF'

Command output

No response

Versions and dependencies used.

Qhub - 0.4.1

Compute environment

Digital Ocean

Integrations

dashboards

Anything else?

Qhub version starts at v0.4 , then upgrade to v0.4.1 For the 0.4 version, we did customize the theme. Maybe this is an upgrade issue.

viniciusdc commented 2 years ago

Hi, @ychen-ot thanks for opening this issue, and letting us know about this usage. Just to be sure the problem is the visibility of the navbar text correct, is there any other theme weird behavior as well? Are there any other extra settings to style/layout/theme that you did besides the ones present in your qhub-config above?

ychen-ot commented 2 years ago

The other piece that looks weird is the radio button. The selected button disappeared.

image

We had customized it in the 0.3.x then 0.4 release., The customization was below, and that worked properly. No other customization that I am aware of / or remember

theme:
  jupyterhub:
    hub_title: Title
    hub_subtitle: subtitle
    logo: path_to_logo
    primary_color: '#FFFFFF'
    secondary_color: '#FFFFFF'
    accent_color: '#0C88FF'
    text_color: '#000000'
    h1_color: '#000000'
    h2_color: '#000000'
viniciusdc commented 2 years ago

Very strange indeed, I will have a look. Thanks for the details, btw, just to be sure, what are the current docker image versions in your qhub-config right now? does it match the currently installed version?

viniciusdc commented 2 years ago

Hi @ychen-ot, I've made deployment of qhub with the mentioned style changes, but I wasn't able to replicate the mentioned behavior. Which Browser are you using, maybe there might be a version incompatibility with the CSS styles?

image

ychen-ot commented 2 years ago

@viniciusdc I tested in both Chrome and FF / and both are showing the problem. Is there something to check in the deployed code? Maybe there were some leftover thing from previous installation?

viniciusdc commented 2 years ago

@viniciusdc I tested in both Chrome and FF / and both are showing the problem. Is there something to check in the deployed code? Maybe there were some leftover thing from previous installation?

uhm, I see. Are you using remote as the terraform state type? or is it local?

terraform_state:
  type: remote
ychen-ot commented 2 years ago

It is remote.

viniciusdc commented 2 years ago

It is remote.

So in this case, we should be able to delete (make a copy just in case, and move to another location) your local files inside /stages and do a qhub deploy again to re-render those files (this should remove any remaining config from the previous deploy). If the error still persists, I would also recommend switching the theme config to the default one 

    hub_title: QHub Studio
    logo: /hub/custom/images/jupyter_qhub_logo.svg
    primary_color: '#4f4173'
    secondary_color: '#957da6'
    accent_color: '#32C574'
    text_color: '#111111'
    h1_color: '#652e8e'
    h2_color: '#652e8e'

and replace each style one by one, to inspect if these changes are being correctly propagated during deployment.

Let me know if the errors still persists even after the re-deploy.

viniciusdc commented 2 years ago

Also, if you have access to your cluster deployment (k9s) you can inspect if the theme settings are correctly assigned to Jupyterhub by inspecting the hub configmap.

ychen-ot commented 2 years ago

Thanks. I'll try the suggestion relating to redeploy. Tho, does it impact the applications that I currently have deployed ?

viniciusdc commented 2 years ago

Thanks. I'll try the suggestion relating to redeploy. Tho, does it impact the applications that I currently have deployed ?

No, if you are not changing the state of the files (this is, not changing any config) it will just refresh the files with the same state.

viniciusdc commented 2 years ago

Thanks. I'll try the suggestion relating to redeploy. Tho, does it impact the applications that I currently have deployed ?

I would first switch back to the default theme, then redeploy to check if that works (doing this first would show us if there is any issue with Qhub itself). If there is no issue with the theme then we will not need to delete anything

MaxTechniche commented 2 years ago

@viniciusdc @ychen-ot I've done the steps above. In terms of the color, I believe we just had bad colors set up. We had the title bar being white with white text... yeah. So I was able to fix that.

I'm unsure about the subtitle, logo, and welcome message. I'm not sure where they are supposed to show up or what they change.

ychen-ot commented 2 years ago

@MaxTechniche Thank you for testing. What you are saying is that - b/c the text color is white , and b/c nav bar itself is white, that it was a bad color setup. 

navbar_text_color: '#000000'

@viniciusdc - qq for you - is there documentation on themes / adjustment ? We also still not able to see logo and welcome messages. If you need that in a separate defect , I can create one

Thanks

viniciusdc commented 2 years ago

@MaxTechniche Thank you for testing. What you are saying is that - b/c the text color is white , and b/c nav bar itself is white, that it was a bad color setup.

navbar_text_color: '#000000'

@viniciusdc - qq for you - is there documentation on themes / adjustment ? We also still not able to see logo and welcome messages. If you need that in a separate defect , I can create one

Thanks

@ychen-ot @MaxTechniche sorry for the late reply, my current understanding of the issue is that the ent-qhub-jupyterhub-theme installed within your Qhub version might be conflicting with the default configuration of Qhub. We are working on obtaining more information on this end c.c @iameskild.

@viniciusdc - qq for you - is there documentation on themes / adjustment ? We also still not able to see logo and welcome messages. If you need that in a separate defect , I can create one

@ychen-ot About this, we only have a short mention about customization here in the docs, there is also an advance section for direct customization with the configurations citted here (but I think this might generate a conflicting behavior)

About the logo and welcome message you commented, are you passing the variables in the qhub-config.yaml with the appropriate values? e.g.

theme:
  jupyterhub:
    hub_title: <content>
    hub_subtitle: <content>
    welcome: |
      <your welcome message>
    logo: <https://your-domain/url-to-your-logo>
ychen-ot commented 2 years ago

@viniciusdc Thanks. Didn't realized that it was impacted by ent-qhub-jupyterhub-theme conflict. We'll open the defect in appropriate location next time.

For the themes - we did provide the values - but without quotes (not sure if "" are needed) The only thing that is different is that we do welcome in this syntax without the | (see below).

Currently: 

welcome: This is the welcome
message

I can fix that and see if that is the issue.

viniciusdc commented 2 years ago

@viniciusdc Thanks. Didn't realized that it was impacted by ent-qhub-jupyterhub-theme conflict. We'll open the defect in appropriate location next time.

For the themes - we did provide the values - but without quotes (not sure if "" are needed) The only thing that is different is that we do welcome in this syntax without the | (see below).

Currently:

welcome: This is the welcome
message

I can fix that and see if that is the issue.

I don't think the usage of quotes nor the | are interfering here (but it's worth trying), thanks for the reply :slightly_smiling_face:. This might be a conflicting config from the ent. theme. I will check this and come back here once I have a config that works or a way to set theme priority.

viniciusdc commented 1 year ago

As this was an issue related to ent-qhub-jupyterhub-theme package conflicts with Qhub, this will be closed and marked as resolved.