Hello, I'm new to Flyte, but I was wondering how I...
# ask-the-communityb
Benjamin Chew
06/01/2023, 10:46 PMHello, 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 PMHi 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 PMHi 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. 🙂
Frank Flitton
06/02/2023, 4:41 PMHere'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,
}}
/>
);
};149 Views