Skip to content

Commit

Permalink
Updated embeddable
Browse files Browse the repository at this point in the history 
Signed-off-by: Dan Dong <danieldong51@gmail.com>
  • Loading branch information
@danieldong51
danieldong51 committed Sep 4, 2024
1 parent 123ed9a commit ae3a7cf
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 80 deletions.
74 changes: 74 additions & 0 deletions public/components/overview/components/cards.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

import { EuiCard, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
import React, { useEffect, useState } from 'react';
import { coreRefs } from '../../../framework/core_refs';
import { alertsPluginID, anomalyPluginID } from '../../../../common/constants/overview';
import { cardConfigs } from './card_configs';

export const Cards = () => {
const [alertsPluginExists, setAlertsPluginExists] = useState(false);
const [anomalyPluginExists, setAnomalyPluginExists] = useState(false);
const [loading, setLoading] = useState(true); // For loading state

useEffect(() => {
const registerCards = async () => {
try {
const res = await coreRefs.http?.get('/api/status');
if (res) {
for (const status of res.status.statuses) {
if (status.id.includes(alertsPluginID)) {
setAlertsPluginExists(true);
}
if (status.id.includes(anomalyPluginID)) {
setAnomalyPluginExists(true);
}
}
}
} catch (error) {
console.error('Error checking plugin installation status:', error);
} finally {
setLoading(false); // Set loading to false once the request is complete
}
};
registerCards();
}, []);

if (loading) {
return <div>Loading...</div>;
}

return (
<EuiFlexGroup wrap={false} style={{ overflowX: 'auto' }}>
{cardConfigs
.filter((card) => {
if (card.id === 'alerts') {
return alertsPluginExists;
} else if (card.id === 'anomaly') {
return anomalyPluginExists;
}
return true;
})
.map((card, index) => (
<EuiFlexItem key={index} style={{ minWidth: 200 }}>
<EuiCard
title={card.title}
description={card.description}
onClick={() => coreRefs.application?.navigateToApp(card.url, { path: '#/' })}
footer={
<EuiText textAlign="center" size="s">
{card.footer}
</EuiText>
}
titleElement="h4"
titleSize="s"
textAlign="left"
/>
</EuiFlexItem>
))}
</EuiFlexGroup>
);
};
3 changes: 1 addition & 2 deletions public/components/overview/components/dashboard_input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
import { SimpleSavedObject } from '../../../../../../src/core/public';
import { SavedObjectDashboard } from '../../../../../../src/plugins/dashboard/public';
import { DashboardContainerInput } from '../../../../../../src/plugins/dashboard/public/application/embeddable/dashboard_container';
import { ViewMode } from '../../../../../../src/plugins/embeddable/common/types';

export const dashboardInput = (dashboardObject: SimpleSavedObject<SavedObjectDashboard>) => {
const panels: DashboardContainerInput['panels'] = {};
Expand Down Expand Up @@ -39,7 +38,7 @@ export const dashboardInput = (dashboardObject: SimpleSavedObject<SavedObjectDas
panels,
id: 'id',
title: '',
viewMode: ViewMode.VIEW,
viewMode: 'view',
useMargins: true,
isFullScreenMode: false,
filters: [],
Expand Down
88 changes: 10 additions & 78 deletions public/components/overview/home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,86 +3,29 @@
* SPDX-License-Identifier: Apache-2.0
*/

import { EuiText } from '@elastic/eui';
import React, { ReactNode, useEffect, useRef, useState } from 'react';
import { EuiPanel } from '@elastic/eui';
import React, { useEffect, useRef, useState } from 'react';
import { HashRouter, Route, Switch } from 'react-router-dom';
import { alertsPluginID, anomalyPluginID } from '../../../common/constants/overview';
import { DashboardSavedObjectsType } from '../../../common/types/overview';
import { setNavBreadCrumbs } from '../../../common/utils/set_nav_bread_crumbs';
import { coreRefs } from '../../framework/core_refs';
import { HOME_CONTENT_AREAS, HOME_PAGE_ID } from '../../plugin_helpers/plugin_overview';
import { cardConfigs, GettingStartedConfig } from './components/card_configs';
import { HOME_CONTENT_AREAS } from '../../plugin_helpers/plugin_overview';
import { DashboardControls } from './components/dashboard_controls';
import { ObsDashboardStateManager } from './components/obs_dashboard_state_manager';
import { SelectDashboardFlyout } from './components/select_dashboard_flyout';
import { getObservabilityDashboardsId, setObservabilityDashboardsId } from './components/utils';
import './index.scss';
import { EmbeddableInput, EmbeddableRenderer } from '../../../../../src/plugins/embeddable/public';
import { dashboardInput } from './components/dashboard_input';
import { Cards } from './components/cards';

export const Home = () => {
const [homePage, setHomePage] = useState<ReactNode>(<></>);
const [dashboardsSavedObjects, setDashboardsSavedObjects] = useState<DashboardSavedObjectsType>(
{}
);
const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
ObsDashboardStateManager.showFlyout$.next(() => () => setIsFlyoutVisible(true));

const loadHomePage = () => {
setHomePage(coreRefs.contentManagement?.renderPage(HOME_PAGE_ID));
};

const registerCards = async () => {
let alertsPluginExists = false;
let anomalyPluginExists = false;
try {
const res = await coreRefs.http?.get('/api/status');
if (res) {
for (const status of res.status.statuses) {
if (status.id.includes(alertsPluginID)) {
alertsPluginExists = true;
}
if (status.id.includes(anomalyPluginID)) {
anomalyPluginExists = true;
}
}
}
} catch (error) {
console.error('Error checking plugin installation status:', error);
}

cardConfigs
.filter((card) => {
if (card.id === 'alerts') {
return alertsPluginExists;
} else if (card.id === 'anomaly') {
return anomalyPluginExists;
}
return true;
})
.forEach((card: GettingStartedConfig) => {
coreRefs.contentManagement?.registerContentProvider({
id: card.id,
getContent: () => ({
id: card.id,
kind: 'card',
order: card.order,
description: card.description,
title: card.title,
onClick: () => coreRefs.application?.navigateToApp(card.url, { path: '#/' }),
getFooter: () => {
return (
<EuiText size="s" textAlign="center">
{card.footer}
</EuiText>
);
},
}),
getTargetArea: () => HOME_CONTENT_AREAS.GET_STARTED,
});
});
};

const registerDashboardsControl = () => {
coreRefs.contentManagement?.registerContentProvider({
id: 'dashboards_controls',
Expand Down Expand Up @@ -156,9 +99,7 @@ export const Home = () => {
);

useEffect(() => {
registerCards();
registerDashboardsControl();
loadHomePage();
loadDashboard();
}, [dashboardsSavedObjects]);

Expand Down Expand Up @@ -189,20 +130,6 @@ export const Home = () => {
console.log(dashboardsSavedObjects[id]);

setEmbeddable(dashboardInput(dashboardsSavedObjects[id].references));

// @ts-ignore
// const promise = coreRefs.embeddable
// ?.getEmbeddableFactory('dashboard')
// .create(dashboardsSavedObjects[id].references);
//
// if (promise) {
// promise.then((e) => {
// console.log(e);
// if (ref.current) {
// setEmbeddable(e);
// }
// });
// }
}
return () => {
ref.current = false;
Expand All @@ -215,7 +142,12 @@ export const Home = () => {
<Switch>
<Route exact path="/">
<div>
{homePage}
<EuiPanel color="transparent" hasBorder={false}>
<Cards />
</EuiPanel>
<EuiPanel color="transparent" hasBorder={false}>
<DashboardControls />
</EuiPanel>
{coreRefs.embeddable && embeddable && (
<EmbeddableRenderer
factory={coreRefs.embeddable.getEmbeddableFactory('dashboard')}
Expand Down

0 comments on commit ae3a7cf

Please sign in to comment.