Readme.md

Customize NavBar component

From this point forward you can modify your FlyteConsole navigatio bar by:

• using your company colors
• providing entrypoint navigation to sites, or places inside flyteconsole.

To use it you will need to define FLYTE_NAVIGATION environment variable during the build.

If you are building locally add next or similar export to your .zshrc (or equivalent) file:

export FLYTE_NAVIGATION='{"color":"white","background":"black","items":[{"title":"Hosted","url":"https://hosted.cloud-staging.union.ai/dashboard"}, {"title":"Dashboard","url":"/projects/flytesnacks/executions?domain=development&duration=all"},{"title":"Execution", "url":"/projects/flytesnacks/domains/development/executions/awf2lx4g58htr8svwb7x?duration=all"}]}'

If you are building a docker image - modify Makefile build_prod step to include FLYTE_NAVIGATION setup.

The structure of FLYTE_NAVIGATION

Essentially FLYTE_NAVIGATION is a JSON object

{
    color:"white",          // optional - default NavBar text color, if not provided uses Flyte colors
    background:"black",     // optional - default NavBar background color, if not provided uses Flyte colors
    console:"FlyteConsole"  // optional - name of the default navigation, if not provided uses "Console"
    items:[                 // required - if no dropdown needed provide an empty array
        {title:"Remote", url:"https://remote.site/"},
        {title:"Dashboard", url:"+/projects/flytesnacks/executions?domain=development&duration=all"},
        {title:"Information", url:"/information"}
    ]
}

If at least one item in items array is present the dropdown will appear in NavBar main view. It will contain at least two items:

• default "Console" item which navigates to ${BASE_URL}
• all items you have provided:
  • If item's url starts with + sign, the navigstion would be treated as an internal one. + sign would be stripped and BASE_URL would be added to navigaiton

Feel free to play around with the views in Storybook:

Note

Please let us know in Slack #flyte-console channel if you found bugs or need more support than.