Skip to content

Commit

Permalink
[Navigation] Observability Overview and GettingStarted (#1957) (#1964)
Browse files Browse the repository at this point in the history
* Blank getting started page added



* update1



* wireframe progress



* Progress on GettingStarted page



* Filter layout for gettingStarted (Not used)



* Overviewpage started



* Progress on UI



* Skeleton UI



* Update Collection Choices



* updated skeleton



* Update Skeleton



* rename button



* add folder for lior



* Progress on UI + files



* Integration cards for sample data



* adding a sample ndjson call


(cherry picked from commit 5dda1b3)

* Buttons for patterns



* update



* Working buttons update



* Delete message



* UI progress



* UI update



* new ndjsons and snapshots update



---------




(cherry picked from commit 49f0630)

Signed-off-by: Adam Tackett <tackadam@amazon.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Adam Tackett <tackadam@amazon.com>
Co-authored-by: Shenoy Pratik <sgguruda@amazon.com>
  • Loading branch information
4 people committed Jul 23, 2024
1 parent 1354f7e commit 2a1b809
Show file tree
Hide file tree
Showing 186 changed files with 12,565 additions and 30 deletions.
8 changes: 8 additions & 0 deletions common/constants/shared.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,14 @@ export const observabilityID = 'observability-logs';
export const observabilityTitle = 'Observability';
export const observabilityPluginOrder = 1500;

export const observabilityOverviewID = 'observability-overview';
export const observabilityOverviewTitle = 'Observability overview';
export const observabilityOverviewPluginOrder = 5088;

export const observabilityGettingStartedID = 'observability-gettingStarted';
export const observabilityGettingStartedTitle = 'Getting Started';
export const observabilityGettingStartedPluginOrder = 5089;

export const observabilityApplicationsID = 'observability-applications';
export const observabilityApplicationsTitle = 'Applications';
export const observabilityApplicationsPluginOrder = 5090;
Expand Down
Binary file added public/components/.DS_Store
Binary file not shown.
4 changes: 4 additions & 0 deletions public/components/app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ import { Home as IntegrationsHome } from './integrations/home';
import { Home as MetricsHome } from './metrics/index';
import { Main as NotebooksHome } from './notebooks/components/main';
import { Home as TraceAnalyticsHome } from './trace_analytics/home';
import { Home as GettingStartedHome } from './getting_started/home';
import { Home as OverviewHome } from './overview/home';

interface ObservabilityAppDeps {
CoreStartProp: CoreStart;
Expand Down Expand Up @@ -52,6 +54,8 @@ const pages = {
dashboards: CustomPanelsHome,
integrations: IntegrationsHome,
dataconnections: DataConnectionsHome,
gettingStarted: GettingStartedHome,
overview: OverviewHome,
};

export const App = ({
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -571,7 +571,7 @@ exports[`Explorer Search component renders basic component 1`] = `
hasArrow={true}
isOpen={false}
ownFocus={true}
panelPaddingSize="m"
panelPaddingSize="s"
>
<div
className="euiPopover euiPopover--anchorDownLeft"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -303,7 +303,7 @@ exports[`Panels View Component render panel view container and refresh panel 1`]
class="euiToolTipAnchor"
>
<button
class="euiButton euiButton--primary euiButton--fill euiSuperUpdateButton"
class="euiButton euiButton--primary euiSuperUpdateButton"
data-test-subj="superDatePickerApplyTimeButton"
type="button"
>
Expand Down Expand Up @@ -734,7 +734,7 @@ exports[`Panels View Component render panel view so container and reload dashboa
class="euiToolTipAnchor"
>
<button
class="euiButton euiButton--primary euiButton--fill euiSuperUpdateButton"
class="euiButton euiButton--primary euiSuperUpdateButton"
data-test-subj="superDatePickerApplyTimeButton"
type="button"
>
Expand Down Expand Up @@ -2151,7 +2151,7 @@ exports[`Panels View Component renders panel view container with visualizations
hasArrow={true}
isOpen={false}
ownFocus={true}
panelPaddingSize="m"
panelPaddingSize="s"
>
<div
className="euiPopover euiPopover--anchorDownLeft"
Expand Down Expand Up @@ -2334,7 +2334,6 @@ exports[`Panels View Component renders panel view container with visualizations
className="euiSuperUpdateButton"
color="primary"
data-test-subj="superDatePickerApplyTimeButton"
fill={true}
iconType="refresh"
isDisabled={false}
isLoading={false}
Expand All @@ -2354,7 +2353,6 @@ exports[`Panels View Component renders panel view container with visualizations
data-test-subj="superDatePickerApplyTimeButton"
disabled={false}
element="button"
fill={true}
iconType="refresh"
isDisabled={false}
isLoading={false}
Expand All @@ -2369,7 +2367,7 @@ exports[`Panels View Component renders panel view container with visualizations
type="button"
>
<button
className="euiButton euiButton--primary euiButton--fill euiSuperUpdateButton"
className="euiButton euiButton--primary euiSuperUpdateButton"
data-test-subj="superDatePickerApplyTimeButton"
disabled={false}
onBlur={[Function]}
Expand Down Expand Up @@ -4400,7 +4398,7 @@ exports[`Panels View Component renders panel view container without visualizatio
hasArrow={true}
isOpen={false}
ownFocus={true}
panelPaddingSize="m"
panelPaddingSize="s"
>
<div
className="euiPopover euiPopover--anchorDownLeft"
Expand Down Expand Up @@ -4581,7 +4579,6 @@ exports[`Panels View Component renders panel view container without visualizatio
className="euiSuperUpdateButton"
color="primary"
data-test-subj="superDatePickerApplyTimeButton"
fill={true}
iconType="refresh"
isDisabled={false}
isLoading={false}
Expand All @@ -4601,7 +4598,6 @@ exports[`Panels View Component renders panel view container without visualizatio
data-test-subj="superDatePickerApplyTimeButton"
disabled={false}
element="button"
fill={true}
iconType="refresh"
isDisabled={false}
isLoading={false}
Expand All @@ -4616,7 +4612,7 @@ exports[`Panels View Component renders panel view container without visualizatio
type="button"
>
<button
className="euiButton euiButton--primary euiButton--fill euiSuperUpdateButton"
className="euiButton euiButton--primary euiSuperUpdateButton"
data-test-subj="superDatePickerApplyTimeButton"
disabled={false}
onBlur={[Function]}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -303,7 +303,7 @@ exports[`Panels View SO Component render panel view container and refresh panel
class="euiToolTipAnchor"
>
<button
class="euiButton euiButton--primary euiButton--fill euiSuperUpdateButton"
class="euiButton euiButton--primary euiSuperUpdateButton"
data-test-subj="superDatePickerApplyTimeButton"
type="button"
>
Expand Down Expand Up @@ -734,7 +734,7 @@ exports[`Panels View SO Component render panel view so container and reload dash
class="euiToolTipAnchor"
>
<button
class="euiButton euiButton--primary euiButton--fill euiSuperUpdateButton"
class="euiButton euiButton--primary euiSuperUpdateButton"
data-test-subj="superDatePickerApplyTimeButton"
type="button"
>
Expand Down Expand Up @@ -1167,7 +1167,7 @@ exports[`Panels View SO Component renders panels view SO container with visualiz
class="euiToolTipAnchor"
>
<button
class="euiButton euiButton--primary euiButton--fill euiSuperUpdateButton"
class="euiButton euiButton--primary euiSuperUpdateButton"
data-test-subj="superDatePickerApplyTimeButton"
type="button"
>
Expand Down
80 changes: 80 additions & 0 deletions public/components/getting_started/components/getting_started.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

import { EuiPage, EuiPageBody, EuiSpacer } from '@elastic/eui';
import React, { useEffect, useState } from 'react';
import { HomeProps } from 'public/components/getting_started/home';
import { GettingStartedConnectionsHeader } from './getting_started_header';
import { CollectAndShipData } from './getting_started_collectData';
import { QueryAndAnalyze } from './getting_started_queryAndAnalyze';

export const NewGettingStarted = (props: HomeProps) => {
const { chrome } = props;
const [selectedSource, setSelectedSource] = useState('');
const [isPickYourSourceOpen, setIsPickYourSourceOpen] = useState(true);
const [isQueryDataOpen, setIsQueryDataOpen] = useState(false);
const [indexPatterns, setIndexPatterns] = useState<string[]>([]);
const [isSampleDataset, setIsSampleDataset] = useState(false); // New state

useEffect(() => {
chrome.setBreadcrumbs([
{
text: 'Getting Started',
href: '#/',
},
]);
}, []);

const handleSelectSource = (source: string) => {
setSelectedSource(source);
};

const togglePickYourSource = (isOpen: boolean) => {
setIsPickYourSourceOpen(isOpen);
if (isOpen) {
setIsQueryDataOpen(false);
}
};

const toggleQueryData = (isOpen: boolean) => {
setIsQueryDataOpen(isOpen);
};

const setQueryDataOpen = (patterns: string[]) => {
setIsPickYourSourceOpen(false);
setIsQueryDataOpen(true);
setIndexPatterns(patterns);
};

const handleCardSelectionChange = (isSample: boolean) => {
setIsSampleDataset(isSample);
};

return (
<EuiPage>
<EuiPageBody component="div">
<GettingStartedConnectionsHeader />
<EuiSpacer size="l" />
<CollectAndShipData
isOpen={isPickYourSourceOpen}
onToggle={togglePickYourSource}
selectedTechnology={selectedSource}
onMoveToQueryData={setQueryDataOpen}
onSelectSource={handleSelectSource}
onCardSelectionChange={handleCardSelectionChange}
/>
<EuiSpacer size="l" />
{!isSampleDataset && (
<QueryAndAnalyze
isOpen={isQueryDataOpen}
onToggle={toggleQueryData}
selectedTechnology={selectedSource}
indexPatterns={indexPatterns}
/>
)}
</EuiPageBody>
</EuiPage>
);
};
Loading

0 comments on commit 2a1b809

Please sign in to comment.