OU-269: Add TempoStack Dropdown #1
Conversation
Add Select example from patternfly to project then pass in LokiStack list. Add some todo's to direct progress
Since name aren't unique across other namespaces, the namespace is needed as well. We are encoding it as another query parameter, but not showing the data underneath unless the combination exists
openshift-ci-robot
added
the
jira/valid-reference
|
@PeterYurkovich: This pull request references OU-269 which is a valid jira issue. Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the story to target the "4.16.0" version, but no target version was set. In response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository. |
|
/jira refresh |
|
@PeterYurkovich: This pull request references OU-269 which is a valid jira issue. In response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository. |
src/hooks/useTempoStack.ts
Outdated
| const tempoList: Array<K8sResourceCommon> = []; | ||
| if (Array.isArray(list)) { | ||
| list.forEach((tempoStack) => { | ||
| tempoList.push(tempoStack); | ||
| }); | ||
| } else { | ||
| list.items.forEach((tempoStack) => { | ||
| tempoList.push(tempoStack); | ||
| }); | ||
| } |
There was a problem hiding this comment.
| const tempoList: Array<K8sResourceCommon> = []; | |
| if (Array.isArray(list)) { | |
| list.forEach((tempoStack) => { | |
| tempoList.push(tempoStack); | |
| }); | |
| } else { | |
| list.items.forEach((tempoStack) => { | |
| tempoList.push(tempoStack); | |
| }); | |
| } | |
| let tempoList: Array<K8sResourceCommon> = []; | |
| if (Array.isArray(list)) { | |
| tempoList = list; | |
| } else { | |
| tempoList = list.items; | |
| } |
src/components/TracingPage.tsx
Outdated
| ); | ||
|
|
||
| if (!tempoStackList) { | ||
| return <div>Loading...</div>; |
There was a problem hiding this comment.
This text might need translation
src/components/TempoDropdown.tsx
Outdated
| ) => void; | ||
| }; | ||
|
|
||
| export const TempoDropdown = (props: TempoDropdownProps) => { |
There was a problem hiding this comment.
| export const TempoDropdown = (props: TempoDropdownProps) => { | |
| export const TempoStackDropdown = (props: TempoDropdownProps) => { |
There was a problem hiding this comment.
Renamed function and file to TempoStackDropdown
src/components/TempoDropdown.tsx
Outdated
| if (value && value !== 'no results') { | ||
| setSelected(value as string); | ||
| } | ||
| const [namespace, tempoStackName] = String(value).split(' / '); |
There was a problem hiding this comment.
Is there a better way to get this data from an object rather than splitting a string?
There was a problem hiding this comment.
Used the SelectOptionObject interface from PatternFly to use an object directly as the value in the Dropdown List
src/components/TempoDropdown.tsx
Outdated
| isDisabled={option.disabled} | ||
| key={index} | ||
| value={option.value} | ||
| {...(option.description && { description: option.description })} |
There was a problem hiding this comment.
Would this be the same?
| {...(option.description && { description: option.description })} | |
| description={option.description ?? undefined} |
There was a problem hiding this comment.
Description wasn't needed after changes
…n concatenated string
3 participants
Background
Issue: https://issues.redhat.com/browse/OU-269
Any number of TempoStack instances may exist within a cluster, including those in different namespaces or with the same name. This PR looks to add a dropdown to allow the user to select which TempoStack instance they would like to have apply to the rest of the tracing UI components.
Implementation
Once selected the namespace and name are added to the URL as query parameters for reproducibility as is standard within the OpenShift Observability ecosystem. A new useTempoStack hook has been provided to retrieve the various tempo instances.
Image