[backend/frontend] Add Import from XTM Hub button in Custom Dashboards #10100

jbanety · 2025-02-27T10:43:49Z

Proposed changes

Add a xtm:xtmhub_url config value
Create a GradientButton component to add a gradient bordered button to show Import from Hub with theme colors.
Update Settings GraphQL type to add platform_xtmhub_url
Update WorkspaceCreation component to add the Import from Hub button opening a new tab with a forged URL based on platform_xtmhub_url root URI.
Add XTM Hub logo in Top Bar and remove OpenERM and OpenMTD.

Related issues

XTM Hub launch - Add XTM Hub CTAs #10027

Checklist

I consider the submitted work as finished
I tested the code for its functionality
I wrote test cases for the relevant uses case (coverage and e2e)
I added/update the relevant documentation (either on github or on notion)
Where necessary I refactored code to improve the overall quality

Further comments

Kedae · 2025-02-27T14:42:15Z

opencti-platform/opencti-front/src/private/components/workspaces/WorkspaceCreation.jsx

@@ -123,6 +127,17 @@ const WorkspaceCreation = ({ paginationOptions, type }) => {

  const createDashboardButton = FAB_REPLACED ? (props) => (
    <>
+      <GradientButton


Personally I find it better to always have this button and no speeddial

Hmm.
Does that mean we're going to change the UI all the time?
I admit that I don't really know how feature flags are managed.

I changed the behavior to always show the button on top of the datatable

Kedae · 2025-02-27T14:44:20Z

opencti-platform/opencti-front/src/components/GradientButton.tsx

+  withShadow?: boolean;
+}
+
+const GradientButton = styled(Button, {


It's better to have a Button with style props I think. You could check with Landry

This is the regular way to customize MUI button.

https://mui.com/material-ui/react-button/#customization

https://mui.com/material-ui/customization/how-to-customize/#2-reusable-component

@lndrtrbn any thoughts on this ?

We have decided in OCTI to not use this because even if it is categorized in their doc as the way to do Reusable component, this syntax is horrible to read.

We can achieve exactly the same (i.e. creating reusable component) with the first bloc of the documentation you shared using sx props which is better in terms of readability (imo)

Oki doki. I'll change that

Kedae · 2025-02-27T14:44:45Z

opencti-platform/opencti-front/src/components/GradientButton.tsx

+  lightModeEndColor?: string;
+  darkModeStartColor?: string;
+  darkModeEndColor?: string;
+  withShadow?: boolean;


I made it for the example in Filigran-UI, we need to choose only one in OCTI and remove that boolean

labo-flg · 2025-02-27T15:15:53Z

opencti-platform/opencti-front/src/private/components/nav/TopBar.tsx

@@ -337,6 +335,15 @@ const TopBarComponent: FunctionComponent<TopBarProps> = ({
              <Box sx={{ width: '300px', padding: '15px', textAlign: 'center' }}>
                <div className={classes.subtitle}>{t_i18n('Filigran eXtended Threat Management')}</div>
                <Grid container={true} spacing={3}>
+                  <Grid item xs={12}>
+                    <Tooltip title="XTM Hub">
+                      <a className={classes.xtmItem} href="https://xtmhub.filigran.io" target="_blank" rel="noreferrer" onClick={handleCloseXtm}>


hardcoded link ?
not from config ?

Nice catch 😁

codecov · 2025-02-27T15:36:29Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 64.35%. Comparing base (e1fee54) to head (dba676e).
Report is 21 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #10100      +/-   ##
==========================================
+ Coverage   64.30%   64.35%   +0.04%     
==========================================
  Files         656      656              
  Lines       63046    63086      +40     
  Branches     6988     7038      +50     
==========================================
+ Hits        40541    40597      +56     
+ Misses      22505    22489      -16

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Kedae · 2025-02-27T16:09:10Z

opencti-platform/opencti-front/src/components/GradientButton.tsx

+}) => {
+  const theme = useTheme();
+  const isDarkMode = theme.palette.mode === 'dark';
+  const startColor = isDarkMode ? darkModeStartColor : lightModeStartColor;


You should add them in the theme (ThemeDark.ts and ThemeLight.ts) and remove all the props.

Done.
I created a single xtmhub gradientVariant on the gradientButton.
In the future we could add some other variants.

Kedae · 2025-02-27T16:11:33Z

opencti-platform/opencti-front/src/private/components/workspaces/Workspaces.tsx

@@ -102,6 +106,10 @@ const Workspaces: FunctionComponent<WorkspacesProps> = ({
  const { isFeatureEnable } = useHelper();
  const FAB_REPLACED = isFeatureEnable('FAB_REPLACEMENT');

+  const theme = useTheme();
+  const { settings } = useContext(UserContext);
+  const importFromHubUrl = isNotEmptyField(settings) ? `${settings.platform_xtmhub_url}/redirect/custom_dashboard?octi_instance_id=${settings.id}`.replaceAll('//', '/') : '';


We should decide what to do if the url si not present. Display the button with no href ? Hide the button ? I can't recall what we have decided regarded airgapped platform (that could have a conf with no xtmhub url)

I added this because settings can be undefined during the loading time.

Anyway I can only show the button if the value is not empty

Done. The button is hidden if url is empty.

Kedae · 2025-02-27T16:13:15Z

opencti-platform/opencti-graphql/config/default.json

@@ -188,7 +214,8 @@
    "openerm_url": "",
    "openrm_token": "",
    "openmtd_url": "",
-    "openmtd_token": ""
+    "openmtd_token": "",
+    "xtmhub_url": "https://xtmhub.filigran.io"


Do we want it easily removable ? I can't recall what we discussed

This value is more to be able to align apps between different environments.
i.e. locahost:3000 > localhost:3001 or my-octi-instance.prod.fr > xtmhub.filigran.io

Kedae · 2025-02-27T16:24:21Z

opencti-platform/opencti-front/src/private/components/workspaces/WorkspaceCreation.jsx

      >
-        {t_i18n('Import dashboard')}
+        <FileUploadOutlined />


We need to check that with Product team. @romain-filigran

This is what was requested in Ellyn's brief => #10027

@Kedae @jbanety : Can we schedule a demonstration to understand ?

@Kedae : Seen with JB. Ok with a FileUpload icon button once the FAB replacement is merged.

[backend/frontend] Add Import from Hub button in Custom Dashboards

cf0e436

jbanety added feature use for describing a new feature to develop filigran team use to identify PR from the Filigran team labels Feb 27, 2025

jbanety self-assigned this Feb 27, 2025

jbanety linked an issue Feb 27, 2025 that may be closed by this pull request

XTM Hub launch - Add XTM Hub CTAs #10027

Closed

5 tasks

jbanety marked this pull request as draft February 27, 2025 10:44

jbanety added 3 commits February 27, 2025 15:07

fix build

1358853

fix translation

30df22e

add XTM Hub

7f5617e

jbanety marked this pull request as ready for review February 27, 2025 14:29

jbanety changed the title ~~Draft: [backend/frontend] Add Import from XTM Hub button in Custom Dashboards~~ [backend/frontend] Add Import from XTM Hub button in Custom Dashboards Feb 27, 2025

jbanety requested review from labo-flg and Kedae February 27, 2025 14:34

Kedae reviewed Feb 27, 2025

View reviewed changes

remove withShadow

94c7c2f

labo-flg reviewed Feb 27, 2025

View reviewed changes

requested changes

a0bf693

jbanety requested review from lndrtrbn and Kedae February 27, 2025 16:05

always show the button

314cc23

jbanety force-pushed the issue/10027 branch from 641ad5c to 314cc23 Compare February 27, 2025 16:07

Kedae reviewed Feb 27, 2025

View reviewed changes

jbanety force-pushed the issue/10027 branch 2 times, most recently from 34084c2 to aaa69d1 Compare February 27, 2025 16:46

add xtmhub variant based on theme

aeeac8d

jbanety force-pushed the issue/10027 branch from aaa69d1 to aeeac8d Compare February 27, 2025 16:46

hide button if no url

a2cd280

jbanety force-pushed the issue/10027 branch from 8ba6137 to a2cd280 Compare February 28, 2025 07:55

fix theme and typescript errors

b511838

jbanety requested review from Kedae, romain-filigran and labo-flg February 28, 2025 12:38

jbanety and others added 3 commits March 3, 2025 09:08

Update redirection URL path

dba676e

[frontend] adjust styling

11e2a5f

[frontend] adjust styling

485b65d

labo-flg approved these changes Mar 4, 2025

View reviewed changes

jbanety merged commit fbfcc97 into master Mar 4, 2025
5 of 7 checks passed

labo-flg deleted the issue/10027 branch March 4, 2025 09:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[backend/frontend] Add Import from XTM Hub button in Custom Dashboards #10100

[backend/frontend] Add Import from XTM Hub button in Custom Dashboards #10100

jbanety commented Feb 27, 2025 •

edited

Loading

Kedae Feb 27, 2025

jbanety Feb 27, 2025

jbanety Feb 27, 2025

Kedae Feb 27, 2025

jbanety Feb 27, 2025 •

edited

Loading

jbanety Feb 27, 2025

lndrtrbn Feb 27, 2025 •

edited

Loading

jbanety Feb 27, 2025

Kedae Feb 27, 2025

jbanety Feb 27, 2025

labo-flg Feb 27, 2025

jbanety Feb 27, 2025

codecov bot commented Feb 27, 2025 •

edited

Loading

Kedae Feb 27, 2025

jbanety Feb 27, 2025

Kedae Feb 27, 2025

jbanety Feb 27, 2025

jbanety Feb 27, 2025

jbanety Feb 27, 2025

Kedae Feb 27, 2025

jbanety Feb 27, 2025

Kedae Feb 27, 2025

jbanety Feb 27, 2025

romain-filigran Feb 27, 2025

romain-filigran Feb 28, 2025

[backend/frontend] Add Import from XTM Hub button in Custom Dashboards #10100

[backend/frontend] Add Import from XTM Hub button in Custom Dashboards #10100

Conversation

jbanety commented Feb 27, 2025 • edited Loading

Proposed changes

Related issues

Checklist

Further comments

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jbanety Feb 27, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lndrtrbn Feb 27, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codecov bot commented Feb 27, 2025 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jbanety commented Feb 27, 2025 •

edited

Loading

jbanety Feb 27, 2025 •

edited

Loading

lndrtrbn Feb 27, 2025 •

edited

Loading

codecov bot commented Feb 27, 2025 •

edited

Loading