https://flyte.org logo
Powered by
#ask-the-community
Title
# ask-the-community
b

Benjamin Chew

06/01/2023, 10:46 PM
Hello, I'm new to Flyte, but I was wondering how I might go about customizing the flyte console. I am considering adding a button to it. The reason would be to add additional links to a logs sink when errors surface. I do understand that there is a specific way to configure logging links via the Helm chart, but I was wondering if I'd be able to modify the UI on my end to achieve that functionality instead. Is that possible, and if so, would someone be able to point me in the right direction with regard to that?
t

Tim Sheiner

06/01/2023, 11:15 PM
Hi Benjamin. I'm a designer for Union, the commercial sponsor for Flyte. I can't help you with your technical question but I am very interested to hear your feedback on the Flyte UI and why you want to add a button?
k

Ketan (kumare3)

06/02/2023, 1:10 PM
Cc @Frank Flitton
b

Benjamin Chew

06/02/2023, 4:26 PM
@Tim Sheiner, edited my original post above with more details!
t

Tim Sheiner

06/02/2023, 4:34 PM
@Benjamin Chew Thanks! Got the reason, makes sense. Would you mind dropping in a screenshot where you mark where you wish the button could be?
f

Frank Flitton

06/02/2023, 4:40 PM
Hi Benjamin, this may be possible in the UI via a UI component registry entry - assuming you can build the link to your logs. You can find the UI registry here: https://github.com/flyteorg/flyteconsole/blob/master/packages/console/src/basics/ExternalConfigurationProvider/ExternalConfigurationProvider.tsx Then swap to your custom log component: https://github.com/flyteorg/flyteconsole/blob/master/packages/console/src/components/common/ExpandableMonospaceText.tsx Example of this approach in the nav bar: https://github.com/flyteorg/flyteconsole/blob/master/packages/console/src/components/Navigation/NavBar.tsx Then you can override the monospace log component globally... or contribute the log URL as a feature if its done generically. 🙂
Here's an example of how you would add the registry to the console locally/build your own flavor.
Copy code
import { App as OSSApp } from '@flyteorg/console';
import { CustomNavBar } from './myCustomCode.tsx';


const WrappedApp = () => {
  return (
    <OSSApp
        registry={{
            nav: CustomNavBar,
        }}
    />
  );
};
Powered by