Skip to content

Feature/operational panel UI #132

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.

Sign up for GitHub

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

Merged
ps48 merged 13 commits into from
Oct 14, 2021
Merged

Feature/operational panel UI #132

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
9314d85
modified panels home, table and view
ps48 Oct 12, 2021
59bb947
added new panel modules
ps48 Oct 12, 2021
3c8b8d6
moved modules to folders with css
ps48 Oct 13, 2021
0a11f48
css edits and removed time regex check
ps48 Oct 13, 2021
db5547b
removed time and fields regex checks
ps48 Oct 13, 2021
840ce40
minor doc changes
ps48 Oct 13, 2021
48104c2
adding visualization charts
ps48 Oct 13, 2021
d6c8819
added delete panelList functionality
ps48 Oct 13, 2021
6844c3f
edited delete custom panel function, beautified
ps48 Oct 13, 2021
43604f9
changed console log to error
ps48 Oct 13, 2021
c9f97bb
removed time/fields regex
ps48 Oct 13, 2021
1c61e09
removed length check, combined optionalArgs in custom modal, prettier…
ps48 Oct 14, 2021
8399009
Merge branch 'feature/observability' into feature/operational_panel_ui
ps48 Oct 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions common/types/custom_panels.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,13 @@
* GitHub history for details.
*/

export type CustomPanelListType = {
name: string;
id: string;
dateCreated: string;
dateModified: string;
};

export type VisualizationType = {
id: string;
title: string;
Expand Down
34 changes: 13 additions & 21 deletions public/components/custom_panels/custom_panel_table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,29 +54,30 @@ const pageStyles: CSSProperties = {

/*
* "CustomPanelTable" module, used to view all the saved panels
*
* Props taken in as params are:
* loading: loader bool for the table
* fetchCustomPanels: fetch panels function
* customPanels: List of panels available
* createCustomPanel: create panel function
* setBreadcrumbs: setter for breadcrumbs on top panel
* parentBreadcrumb: parent breadcrumb
* renameCustomPanel: delete function for the panel
* renameCustomPanel: rename function for the panel
* cloneCustomPanel: clone function for the panel
* deleteCustomPanel: delete function for the panel
* deleteCustomPanelList: delete function for the panels
* setToast: create Toast function
*/

type Props = {
loading: boolean;
fetchCustomPanels: () => void;
fetchCustomPanels: () => Promise<void>;
customPanels: Array<CustomPanelListType>;
createCustomPanel: (newCustomPanelName: string) => void;
setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void;
parentBreadcrumb: EuiBreadcrumb[];
renameCustomPanel: (newCustomPanelName: string, customPanelId: string) => void;
cloneCustomPanel: (newCustomPanelName: string, customPanelId: string) => void;
deleteCustomPanel: (customPanelId: string, customPanelName?: string, showToast?: boolean) => void;
setToast: (title: string, color?: string, text?: string) => void;
deleteCustomPanelList: (customPanelIdList: string[], toastMessage: string) => any;
};

export const CustomPanelTable = ({
Expand All @@ -88,8 +89,7 @@ export const CustomPanelTable = ({
parentBreadcrumb,
renameCustomPanel,
cloneCustomPanel,
deleteCustomPanel,
setToast,
deleteCustomPanelList,
}: Props) => {
const [isModalVisible, setIsModalVisible] = useState(false); // Modal Toggle
const [modalLayout, setModalLayout] = useState(<EuiOverlayMask></EuiOverlayMask>); // Modal Layout
Expand Down Expand Up @@ -129,17 +129,8 @@ export const CustomPanelTable = ({
const toastMessage = `Custom Panels ${
selectedCustomPanels.length > 1 ? 's' : ' ' + selectedCustomPanels[0].name
} successfully deleted!`;
Promise.all(
selectedCustomPanels.map((customPanel) => deleteCustomPanel(customPanel.id, undefined, false))
)
.then(() => setToast(toastMessage))
.catch((err) => {
setToast(
'Error deleting Operational Panels, please make sure you have the correct permission.',
'danger'
);
console.error(err.body.message);
});
const PanelList = selectedCustomPanels.map((panel) => panel.id);
deleteCustomPanelList(PanelList, toastMessage);
closeModal();
};

Expand Down Expand Up @@ -263,13 +254,13 @@ export const CustomPanelTable = ({
field: 'dateModified',
name: 'Last updated',
sortable: true,
render: (value) => moment(value).format(UI_DATE_FORMAT),
render: (value) => moment(new Date(value)).format(UI_DATE_FORMAT),
},
{
field: 'dateCreated',
name: 'Created',
sortable: true,
render: (value) => moment(value).format(UI_DATE_FORMAT),
render: (value) => moment(new Date(value)).format(UI_DATE_FORMAT),
},
] as Array<
EuiTableFieldDataColumnType<{
Expand All @@ -296,7 +287,8 @@ export const CustomPanelTable = ({
<EuiPageContentHeaderSection>
<EuiTitle size="s">
<h3>
Panels<span className="panel-header-count"> ({customPanels.length})</span>
Panels
<span className="panel-header-count"> ({customPanels.length})</span>
</h3>
</EuiTitle>
<EuiSpacer size="s" />
Expand Down
Loading