@centreon/ui 24.4.21 → 24.4.23

package/src/components/Tooltip/index.ts

@@ -0,0 +1,2 @@
+export * from './Tooltip';
+export * from './ConfirmationTooltip';

package/src/components/index.ts

@@ -0,0 +1,13 @@
+export * from './Button';
+export * from './Modal';
+export * from './Form';
+export * from './Header';
+export * from './DataTable';
+export * from './Layout';
+export * from './Tooltip';
+export * from './Menu';
+export * from './List';
+export * from './ItemComposition';
+export * from './Avatar';
+export * from './CollapsibleItem';
+export * from './Inputs';

package/src/index.ts

@@ -2,6 +2,8 @@ import type { Props as SingleAutocompleteFieldProps } from './InputField/Select/
 
 export { default as IconButton } from './Button/Icon';
 
+export { Checkbox, CheckboxGroup } from './Checkbox';
+
 export { default as SingleAutocompleteField } from './InputField/Select/Autocomplete';
 export type { SingleAutocompleteFieldProps };
 
@@ -73,7 +75,10 @@ export { default as useCancelTokenSource } from './api/useCancelTokenSource';
 export { getData, patchData, postData, putData, deleteData } from './api';
 export { default as useRequest } from './api/useRequest';
 export { default as buildListingEndpoint } from './api/buildListingEndpoint';
-export { default as getSearchQueryParameterValue } from './api/buildListingEndpoint/getSearchQueryParameterValue';
+export {
+  getSearchQueryParameterValue,
+  getFoundFields
+} from './api/buildListingEndpoint/getSearchQueryParameterValue';
 export type {
   Parameters as ListingParameters,
   BuildListingEndpointParameters,
@@ -82,15 +87,6 @@ export type {
 } from './api/buildListingEndpoint/models';
 export { default as buildListingDecoder } from './api/buildListingDecoder';
 
-export {
-  default as useLocaleDateTimeFormat,
-  dateTimeFormat,
-  dateFormat,
-  timeFormat
-} from './utils/useLocaleDateTimeFormat';
-
-export { default as useDebounce } from './utils/useDebounce';
-export { default as useIntersectionObserver } from './utils/useIntersectionObserver';
 export { default as ContentWithCircularLoading } from './ContentWithCircularProgress';
 export {
   setUrlQueryParameters,
@@ -102,12 +98,6 @@ export type {
   ListsSearchParameter
 } from './api/buildListingEndpoint/models';
 
-export {
-  default as useMemoComponent,
-  useDeepCompare
-} from './utils/useMemoComponent';
-export { default as useCopyToClipboard } from './utils/useCopyToClipboard';
-
 export { default as MenuSkeleton } from './MenuSkeleton';
 export { default as PopoverMenu } from './PopoverMenu';
 
@@ -126,7 +116,7 @@ export { default as Module } from './Module/index';
 export { default as LicensedModule } from './Module/LicensedModule';
 export { default as SnackbarProvider } from './Snackbar/SnackbarProvider';
 export { default as PersistentTooltip } from './InputField/Search/PersistentTooltip';
-export { default as Form, GroupDirection } from './Form';
+export * from './Form';
 export { InputType } from './Form/Inputs/models';
 export type {
   InputProps,
@@ -136,6 +126,10 @@ export type {
 export { default as Responsive } from './Responsive';
 export { default as useFetchQuery } from './api/useFetchQuery';
 export { default as useMutationQuery, Method } from './api/useMutationQuery';
+export {
+  default as useGraphQuery,
+  resourceTypeQueryParameter
+} from './api/useGraphQuery';
 export { default as QueryProvider } from './api/QueryProvider';
 export {
   default as FileDropZone,
@@ -143,17 +137,33 @@ export {
 } from './FileDropZone';
 export type { CustomDropZoneContentProps } from './FileDropZone';
 export { default as TestQueryProvider } from './api/TestQueryProvider';
-export * from './utils/useThemeMode';
-export * from './utils/typedMemo';
 export * from './FallbackPage/FallbackPage';
 export * from './Logo/CentreonLogo';
 export * from './TopCounterElements';
 export { default as Image, ImageVariant } from './Image/Image';
 export { default as WallpaperPage } from './WallpaperPage';
 export { RichTextEditor } from './RichTextEditor';
-export { default as ActionsList } from './ActionsList';
-export { getStatusColors, SeverityCode } from './utils/statuses';
+export {
+  default as ActionsList,
+  ActionsListActionDivider
+} from './ActionsList';
+export type { ActionsListActions } from './ActionsList';
+export type { ActionVariants } from './ActionsList/models';
 
 export type { ResponseError, CatchErrorProps } from './api/customFetch';
+
+export * from './utils';
+export { default as FluidTypography } from './Typography/FluidTypography';
+export { default as EllipsisTypography } from './Typography/EllipsisTypography';
+export * from './Dashboard';
+export * from './Graph';
+export type { LineChartData } from './Graph/common/models';
+export * from './Graph/common/timeSeries';
+
+export { default as TimePeriods } from './TimePeriods';
+export { default as SimpleCustomTimePeriod } from './TimePeriods/CustomTimePeriod/SimpleCustomTimePeriod';
+export * from './ParentSize';
+
 export { default as TablePagination } from './Listing/ActionBar/Pagination';
 export { default as PaginationActions } from './Listing/ActionBar/PaginationActions';
+export { default as Subtitle } from './Typography/Subtitle';

package/src/screens/dashboard/DashboardsDetail.stories.tsx

@@ -0,0 +1,108 @@
+/* eslint-disable  @typescript-eslint/no-non-null-assertion */
+import React, { ReactElement } from 'react';
+
+import { Meta } from '@storybook/react';
+
+import {
+  Add as AddIcon,
+  Settings as SettingsIcon,
+  Share as ShareIcon
+} from '@mui/icons-material';
+
+import {
+  Button,
+  IconButton,
+  Menu,
+  PageHeader,
+  PageLayout
+} from '../../components';
+
+const meta: Meta = {
+  args: {
+    actions: {}
+  },
+  parameters: {
+    layout: 'fullscreen'
+  },
+  title: 'screens/Dashboards detail'
+};
+
+export default meta;
+
+const DefaultView = (args): ReactElement => {
+  const { data } = args;
+
+  return (
+    <PageLayout>
+      <PageLayout.Header>
+        <PageHeader>
+          <PageHeader.Main>
+            <PageHeader.Menu>
+              <Menu>
+                <Menu.Button />
+                <Menu.Items>
+                  <Menu.Item>Menu Item</Menu.Item>
+                  <Menu.Item>Menu Item</Menu.Item>
+                  <Menu.Item>Menu Item</Menu.Item>
+                  <Menu.Divider />
+                  <Menu.Item>
+                    <Button
+                      icon={<AddIcon />}
+                      iconVariant="start"
+                      variant="ghost"
+                    >
+                      Add item
+                    </Button>
+                  </Menu.Item>
+                </Menu.Items>
+              </Menu>
+            </PageHeader.Menu>
+            <PageHeader.Title
+              description={data.dashboard.description}
+              title={data.dashboard.name}
+            />
+          </PageHeader.Main>
+        </PageHeader>
+      </PageLayout.Header>
+      <PageLayout.Body>
+        <PageLayout.Actions>
+          <IconButton
+            aria-label="edit"
+            data-testid="edit"
+            icon={<SettingsIcon />}
+            size="small"
+            variant="ghost"
+          />
+          <IconButton
+            aria-label="share"
+            data-testid="share"
+            icon={<ShareIcon />}
+            size="small"
+            variant="ghost"
+          />
+        </PageLayout.Actions>
+      </PageLayout.Body>
+    </PageLayout>
+  );
+};
+
+export const Default = {
+  args: {
+    data: {
+      dashboard: {
+        description:
+          'Description et culpa sit commodo ea enim excepteur elit. Velit irure velit tempor culpa commodo eu adipisicing eu proident ullamco.',
+        id: 1,
+        name: 'Dashboard 1'
+      }
+    }
+  },
+  render: DefaultView
+};
+
+export const AsEditLayoutState = {
+  args: {
+    ...Default.args
+  },
+  render: DefaultView
+};

package/src/screens/dashboard/DashboardsOverview.stories.tsx

@@ -0,0 +1,281 @@
+/* eslint-disable  @typescript-eslint/no-non-null-assertion */
+import { useEffect } from 'react';
+
+import { Meta } from '@storybook/react';
+import { atom, useAtom } from 'jotai';
+
+import { Add as AddIcon } from '@mui/icons-material';
+
+import {
+  Button,
+  DashboardForm,
+  DashboardFormProps,
+  DataTable,
+  Modal,
+  PageHeader,
+  PageLayout
+} from '../../components';
+import { Default as DashboardFormDefaultStory } from '../../components/Form/Dashboard/DashboardForm.stories';
+
+const meta: Meta = {
+  args: {
+    actions: {
+      create: {
+        label: 'Create a dashboard'
+      }
+    },
+    deleteConfirmation: {
+      labels: {
+        actions: {
+          cancel: 'Cancel',
+          confirm: 'Delete'
+        },
+        description: (name) => (
+          <>
+            Are you sure you want to delete <strong>{name}</strong> ?
+          </>
+        ),
+        title: 'Delete dashboard'
+      }
+    },
+    form: {
+      labels: {
+        ...DashboardFormDefaultStory.args!.labels,
+        title: {
+          create: 'Create dashboard',
+          update: 'Update dashboard'
+        }
+      }
+    },
+    list: {
+      emptyState: {
+        labels: {
+          actions: {
+            create: 'Create dashboard'
+          },
+          title: 'No dashboards found'
+        }
+      }
+    },
+    title: 'Dashboards overview'
+  },
+  parameters: {
+    layout: 'fullscreen'
+  },
+  title: 'screens/Dashboards overview'
+};
+
+export default meta;
+
+interface dashboardItem {
+  description: string;
+  id: number;
+  name: string;
+}
+
+const dialogStateAtom = atom<{
+  item: dashboardItem | null;
+  open: boolean;
+  variant: DashboardFormProps['variant'];
+}>({
+  item: null,
+  open: false,
+  variant: 'create'
+});
+
+const deleteDialogStateAtom = atom<{
+  item: dashboardItem | null;
+  open: boolean;
+}>({
+  item: null,
+  open: false
+});
+
+const dataDashboardsAtom = atom<Array<dashboardItem>>([]);
+
+const DefaultView = (args): JSX.Element => {
+  const { data, title, actions, list, form, deleteConfirmation } = args;
+  const [dialogState, setDialogState] = useAtom(dialogStateAtom);
+  const [deleteDialogState, setDeleteDialogState] = useAtom(
+    deleteDialogStateAtom
+  );
+  const [dataDashboards, setDataDashboards] = useAtom(dataDashboardsAtom);
+
+  useEffect(() => {
+    setDataDashboards(data.dashboards);
+  }, [data.dashboards]);
+
+  const createDashboard = (d): void => {
+    const dashboard = { ...d };
+    dashboard.id = dataDashboards.length
+      ? Math.max(...dataDashboards.map((db) => db.id)) + 1
+      : 0;
+    setDataDashboards((prev) =>
+      [...prev, dashboard].sort((a, b) => a.name.localeCompare(b.name))
+    );
+    setDialogState({ item: null, open: false, variant: 'create' });
+  };
+
+  const updateDashboard = (d): void => {
+    setDataDashboards((prev) =>
+      prev
+        .map((dashboard) => (dashboard.id === d.id ? d : dashboard))
+        .sort((a, b) => a.name.localeCompare(b.name))
+    );
+    setDialogState({ item: null, open: false, variant: 'update' });
+  };
+
+  const deleteDashboard = (id): void => {
+    setDataDashboards((prev) =>
+      prev.filter((dashboard) => dashboard.id !== id)
+    );
+  };
+
+  return (
+    <PageLayout>
+      <PageLayout.Header>
+        <PageHeader>
+          <PageHeader.Main>
+            <PageHeader.Title title={title} />
+          </PageHeader.Main>
+        </PageHeader>
+      </PageLayout.Header>
+      <PageLayout.Body>
+        <PageLayout.Actions>
+          {dataDashboards.length !== 0 && (
+            <Button
+              aria-label="add"
+              icon={<AddIcon />}
+              iconVariant="start"
+              onClick={() =>
+                setDialogState({ item: null, open: true, variant: 'create' })
+              }
+            >
+              {actions.create.label}
+            </Button>
+          )}
+        </PageLayout.Actions>
+
+        <DataTable isEmpty={dataDashboards.length === 0}>
+          {dataDashboards.length === 0 ? (
+            <DataTable.EmptyState
+              labels={list.emptyState.labels}
+              onCreate={() =>
+                setDialogState({
+                  item: null,
+                  open: true,
+                  variant: 'create'
+                })
+              }
+            />
+          ) : (
+            dataDashboards.map((dashboard) => (
+              <DataTable.Item
+                hasActions
+                hasCardAction
+                description={dashboard.description}
+                key={dashboard.id}
+                title={dashboard.name}
+                onDelete={() =>
+                  setDeleteDialogState({ item: dashboard, open: true })
+                }
+                onEdit={() =>
+                  setDialogState({
+                    item: dashboard,
+                    open: true,
+                    variant: 'update'
+                  })
+                }
+              />
+            ))
+          )}
+        </DataTable>
+      </PageLayout.Body>
+
+      <Modal
+        open={dialogState.open}
+        onClose={() =>
+          setDialogState({
+            item: null,
+            open: false,
+            variant: dialogState.variant
+          })
+        }
+      >
+        <Modal.Header>
+          {form.labels.title[dialogState.variant ?? 'create']}
+        </Modal.Header>
+        <Modal.Body>
+          <DashboardForm
+            labels={DashboardFormDefaultStory!.args!.labels!}
+            resource={dialogState.item || undefined}
+            variant={dialogState.variant}
+            onCancel={() =>
+              setDialogState({
+                item: null,
+                open: false,
+                variant: dialogState.variant
+              })
+            }
+            onSubmit={(values) =>
+              dialogState.variant === 'create'
+                ? createDashboard(values)
+                : updateDashboard(values)
+            }
+          />
+        </Modal.Body>
+      </Modal>
+      <Modal
+        open={deleteDialogState.open}
+        onClose={() =>
+          setDeleteDialogState({
+            ...deleteDialogState,
+            open: false
+          })
+        }
+      >
+        <Modal.Header>{deleteConfirmation.labels.title}</Modal.Header>
+        <Modal.Body>
+          <p>
+            {deleteConfirmation.labels.description(
+              deleteDialogState.item?.name
+            )}
+          </p>
+        </Modal.Body>
+        <Modal.Actions
+          isDanger
+          labels={deleteConfirmation.labels.actions}
+          onCancel={() => setDeleteDialogState({ item: null, open: false })}
+          onConfirm={() => {
+            deleteDashboard(deleteDialogState.item?.id);
+            setDeleteDialogState({ item: null, open: false });
+          }}
+        />
+      </Modal>
+    </PageLayout>
+  );
+};
+
+export const Default = {
+  args: {
+    data: {
+      dashboards: [
+        { description: 'Dashboard 1 description', id: 1, name: 'Dashboard 1' },
+        { description: 'Dashboard 2 description', id: 2, name: 'Dashboard 2' },
+        { description: 'Dashboard 3 description', id: 3, name: 'Dashboard 3' },
+        { description: 'Dashboard 4 description', id: 4, name: 'Dashboard 4' },
+        { description: 'Dashboard 5 description', id: 5, name: 'Dashboard 5' }
+      ]
+    }
+  },
+  render: DefaultView
+};
+
+export const AsInitialState = {
+  args: {
+    data: {
+      dashboards: []
+    }
+  },
+  render: DefaultView
+};