Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Log Explorer] Enhance flyout customization extension point to support content replacement #169394

Closed
tonyghiani opened this issue Oct 19, 2023 · 0 comments · Fixed by #169634
Closed
Assignees
Labels
Feature:LogsExplorer Logs Explorer feature Team:obs-ux-logs Observability Logs User Experience Team

Comments

@tonyghiani
Copy link
Contributor

tonyghiani commented Oct 19, 2023

📓 Summary

In our ongoing effort to improve the Log Explorer, we need to enhance the existing flyout customization extension point.
Currently, this extension point allows for customizing the actions displayed on the flyout menu, but it lacks the ability to replace the entire content of the flyout, which is an essential requirement for implementing the newly proposed design.

✔️ Acceptance criteria

  • Should be an incremental change and should keep the existing customization options.
  • Should replace the flyout body with the passed function component.
  • Should provide access to some internal details, such as the currently viewed document and the default flyout content.
  • Should keep the pagination item to move between log entries.

💡 Implementation hints

This customization is made to allow consumers to customize the flyout content using the currently previewed document.
A possible API could be the following, where we provide the currently selected document and the previously existing content, in case the customization still wants to use it or move it around.

customizations.set({
  id: 'flyout',
  actions: {
    /* ... */
  },
  content: ({ doc, currentContent, onFilter }) => {
    return (
      <>
        <AgentInfo doc={doc} />
        {currentContent}
        <HostInfo doc={doc} />
      </>
    );
  },
});
@tonyghiani tonyghiani added Team:obs-ux-logs Observability Logs User Experience Team Feature:Logs UI Logs UI feature labels Oct 19, 2023
@tonyghiani tonyghiani self-assigned this Oct 23, 2023
tonyghiani added a commit that referenced this issue Oct 27, 2023
## 📓 Summary

Closes #169394 

This PR extends the `flyout` customization extension point to support
updating/replacing the content shown in the document flyout.
A consumer would need to show/hide/highlight details related to the
expanded document, and it might also want to control whether the default
content (currently only the UnifiedDocViewer) is shown/hidden. Finally,
it could be necessary to perform imperative actions such as
adding/removing columns or filter.

To get this flexibility at the moment of customizing the content, the
existing extension point takes now a `Content` component, where some
props are injected.

```
export interface FlyoutContentProps {
  actions: {
    setFilter?: DocViewFilterFn;
    addColumn: (column: string) => void;
    removeColumn: (column: string) => void;
  };
  doc: DataTableRecord;
  renderDefaultContent: () => React.ReactNode;
}
```
N.B. `renderDefaultContent` is passed as a function instead of a React
element to avoid its creation in the Discover flyout in case the
consumer doesn't want to display it.

Here is a usage example of the new extension point property.

```
customizations.set({
  id: 'flyout',
  Content: ({ actions, doc, renderDefaultContent }) => {
    return (
      <Panel>
        <HighlightComponent timestamp={doc.flattened['@timestamp']} />
        <Columns onAddColumn={actions.addColumns} onAddColumn={actions.removeColumn} />
        <Filters onFilter={actions.setFilter} />
        {renderDefaultContent()}
      </Panel>
    );
  },
});
```

---------

Co-authored-by: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
fkanout pushed a commit to fkanout/kibana that referenced this issue Oct 30, 2023
…9634)

## 📓 Summary

Closes elastic#169394 

This PR extends the `flyout` customization extension point to support
updating/replacing the content shown in the document flyout.
A consumer would need to show/hide/highlight details related to the
expanded document, and it might also want to control whether the default
content (currently only the UnifiedDocViewer) is shown/hidden. Finally,
it could be necessary to perform imperative actions such as
adding/removing columns or filter.

To get this flexibility at the moment of customizing the content, the
existing extension point takes now a `Content` component, where some
props are injected.

```
export interface FlyoutContentProps {
  actions: {
    setFilter?: DocViewFilterFn;
    addColumn: (column: string) => void;
    removeColumn: (column: string) => void;
  };
  doc: DataTableRecord;
  renderDefaultContent: () => React.ReactNode;
}
```
N.B. `renderDefaultContent` is passed as a function instead of a React
element to avoid its creation in the Discover flyout in case the
consumer doesn't want to display it.

Here is a usage example of the new extension point property.

```
customizations.set({
  id: 'flyout',
  Content: ({ actions, doc, renderDefaultContent }) => {
    return (
      <Panel>
        <HighlightComponent timestamp={doc.flattened['@timestamp']} />
        <Columns onAddColumn={actions.addColumns} onAddColumn={actions.removeColumn} />
        <Filters onFilter={actions.setFilter} />
        {renderDefaultContent()}
      </Panel>
    );
  },
});
```

---------

Co-authored-by: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
bryce-b pushed a commit to bryce-b/kibana that referenced this issue Oct 30, 2023
…9634)

## 📓 Summary

Closes elastic#169394 

This PR extends the `flyout` customization extension point to support
updating/replacing the content shown in the document flyout.
A consumer would need to show/hide/highlight details related to the
expanded document, and it might also want to control whether the default
content (currently only the UnifiedDocViewer) is shown/hidden. Finally,
it could be necessary to perform imperative actions such as
adding/removing columns or filter.

To get this flexibility at the moment of customizing the content, the
existing extension point takes now a `Content` component, where some
props are injected.

```
export interface FlyoutContentProps {
  actions: {
    setFilter?: DocViewFilterFn;
    addColumn: (column: string) => void;
    removeColumn: (column: string) => void;
  };
  doc: DataTableRecord;
  renderDefaultContent: () => React.ReactNode;
}
```
N.B. `renderDefaultContent` is passed as a function instead of a React
element to avoid its creation in the Discover flyout in case the
consumer doesn't want to display it.

Here is a usage example of the new extension point property.

```
customizations.set({
  id: 'flyout',
  Content: ({ actions, doc, renderDefaultContent }) => {
    return (
      <Panel>
        <HighlightComponent timestamp={doc.flattened['@timestamp']} />
        <Columns onAddColumn={actions.addColumns} onAddColumn={actions.removeColumn} />
        <Filters onFilter={actions.setFilter} />
        {renderDefaultContent()}
      </Panel>
    );
  },
});
```

---------

Co-authored-by: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
@tonyghiani tonyghiani added Feature:LogsExplorer Logs Explorer feature and removed Feature:Logs UI Logs UI feature labels Oct 31, 2023
awahab07 pushed a commit to awahab07/kibana that referenced this issue Oct 31, 2023
…9634)

## 📓 Summary

Closes elastic#169394 

This PR extends the `flyout` customization extension point to support
updating/replacing the content shown in the document flyout.
A consumer would need to show/hide/highlight details related to the
expanded document, and it might also want to control whether the default
content (currently only the UnifiedDocViewer) is shown/hidden. Finally,
it could be necessary to perform imperative actions such as
adding/removing columns or filter.

To get this flexibility at the moment of customizing the content, the
existing extension point takes now a `Content` component, where some
props are injected.

```
export interface FlyoutContentProps {
  actions: {
    setFilter?: DocViewFilterFn;
    addColumn: (column: string) => void;
    removeColumn: (column: string) => void;
  };
  doc: DataTableRecord;
  renderDefaultContent: () => React.ReactNode;
}
```
N.B. `renderDefaultContent` is passed as a function instead of a React
element to avoid its creation in the Discover flyout in case the
consumer doesn't want to display it.

Here is a usage example of the new extension point property.

```
customizations.set({
  id: 'flyout',
  Content: ({ actions, doc, renderDefaultContent }) => {
    return (
      <Panel>
        <HighlightComponent timestamp={doc.flattened['@timestamp']} />
        <Columns onAddColumn={actions.addColumns} onAddColumn={actions.removeColumn} />
        <Filters onFilter={actions.setFilter} />
        {renderDefaultContent()}
      </Panel>
    );
  },
});
```

---------

Co-authored-by: Marco Antonio Ghiani <marcoantonio.ghiani@elastic.co>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature:LogsExplorer Logs Explorer feature Team:obs-ux-logs Observability Logs User Experience Team
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant