Skip to content
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

Jump to bottom

Disable duplicate visualization and enable edit panel #554

Merged
merged 14 commits into from
Mar 9, 2022
Merged

Disable duplicate visualization and enable edit panel #554

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
4f2182d
Correct constant file import
eugenesk24 Mar 9, 2022
e7d3e14
Allow edit in panel tab
eugenesk24 Mar 9, 2022
f20f452
Reenable duplicate visualization
eugenesk24 Mar 9, 2022
7d5b747
Fetch all visualizations and filter after
eugenesk24 Mar 9, 2022
c589233
Update snapshots
eugenesk24 Mar 9, 2022
b294d87
Move import to constant file
eugenesk24 Mar 9, 2022
80f8bea
Bring import back to cypress test
eugenesk24 Mar 9, 2022
724aa50
Suppress resize observer
eugenesk24 Mar 9, 2022
0004c4c
Fix merge conflict
eugenesk24 Mar 9, 2022
bb3eda2
Decode trace group name in dashboard table
eugenesk24 Mar 9, 2022
af831df
Merge remote-tracking branch 'origin/main' into no-duplicate-fix-dele…
eugenesk24 Mar 9, 2022
350f555
Fix handleChange for thresholds
eugenesk24 Mar 9, 2022
0ab72bb
Process query with set time before fetching data
eugenesk24 Mar 9, 2022
561fe4a
Change min height to 48px to not see scrollbar when empty
eugenesk24 Mar 9, 2022
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
3 changes: 2 additions & 1 deletion dashboards-observability/.cypress/integration/app_analytics.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import {
visName,
composition,
newName,
} from '../utils/panel_constants';
} from '../utils/app_constants';
import { supressResizeObserverIssue } from '../utils/constants';

describe('Creating application', () => {
Expand Down Expand Up @@ -214,6 +214,7 @@ describe('Viewing application', () => {

it('Opens trace detail flyout when Trace ID is clicked', () => {
cy.get('.euiTab').contains('Traces & Spans').click();
supressResizeObserverIssue();
cy.wait(delay);
cy.get('[title="03f9c770db5ee2f1caac0afc36db49ba"]').click();
cy.get('.euiFlyout').contains('Trace detail').should('be.visible');
Expand Down
2 changes: 2 additions & 0 deletions dashboards-observability/.cypress/utils/app_constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
* SPDX-License-Identifier: Apache-2.0
*/

import { supressResizeObserverIssue } from './constants';

export const delay = 700;

export const moveToHomePage = () => {
Expand Down
1 change: 1 addition & 0 deletions dashboards-observability/common/types/custom_panels.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ export interface SavedVisualizationType {
name: string;
query: string;
type: string;
selected_date_range: { start: string; end: string; text: string };
timeField: string;
application_id?: string;
user_configs: any;
Expand Down
18 changes: 13 additions & 5 deletions dashboards-observability/public/components/application_analytics/helpers/utils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { FilterType } from 'public/components/trace_analytics/components/common/
import React, { Dispatch, ReactChild } from 'react';
import { batch } from 'react-redux';
import PPLService from 'public/services/requests/ppl';
import { preprocessQuery } from '../../../../common/utils/query_utils';
import { SPAN_REGEX } from '../../../../common/constants/shared';
import { fetchVisualizationById } from '../../../components/custom_panels/helpers/utils';
import { CUSTOM_PANELS_API_PREFIX } from '../../../../common/constants/custom_panels';
Expand Down Expand Up @@ -210,10 +211,17 @@ export const calculateAvailability = async (
// If there are thresholds, we get the current value
if (visData.user_configs.dataConfig?.hasOwnProperty('thresholds')) {
const thresholds = visData.user_configs.dataConfig.thresholds.reverse();
let currValue = '';
let currValue = Number.MIN_VALUE;
const finalQuery = preprocessQuery({
rawQuery: visData.query,
startTime: visData.selected_date_range.start,
endTime: visData.selected_date_range.end,
timeField: visData.timeField,
isLiveQuery: false,
});
await pplService
.fetch({
query: visData.query,
query: finalQuery,
format: 'viz',
})
.then((res) => {
Expand All @@ -237,7 +245,7 @@ export const calculateAvailability = async (
const expression = threshold.expression;
switch (expression) {
case '>':
if (currValue > threshold.value) {
if (currValue > parseFloat(threshold.value)) {
availability = {
name: threshold.name,
color: threshold.color,
Expand All @@ -247,7 +255,7 @@ export const calculateAvailability = async (
}
break;
case '<':
if (currValue < threshold.value) {
if (currValue < parseFloat(threshold.value)) {
availability = {
name: threshold.name,
color: threshold.color,
Expand All @@ -257,7 +265,7 @@ export const calculateAvailability = async (
}
break;
case '=':
if (currValue === threshold.value) {
if (currValue === parseFloat(threshold.value)) {
availability = {
name: threshold.name,
color: threshold.color,
Expand Down
2 changes: 1 addition & 1 deletion dashboards-observability/public/components/common/search/search.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
#autocomplete-textarea {
width: 100%;
outline: none;
min-height: 45px;
min-height: 48px;
max-width: unset;
height: 45px;
resize: vertical;
Expand Down
39 changes: 30 additions & 9 deletions dashboards-observability/public/components/custom_panels/custom_panel_view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -462,6 +462,8 @@ export const CustomPanelView = ({
setPanelVisualizations={setPanelVisualizations}
isFlyoutReplacement={isFlyoutReplacement}
replaceVisualizationId={replaceVisualizationId}
appPanel={appPanel}
appId={appId}
/>
);
}
Expand Down Expand Up @@ -678,15 +680,34 @@ export const CustomPanelView = ({
</EuiFlexItem>
{appPanel && (
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will keeping this as && restrict the edit button to be run only in app-panels?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is another one above that includes the edit button, etc. with the condition appPanel ||. I had to do them separately because they are in different places. appPanel will not need a header area.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍🏽 Got it we can create a more modular header for panels later.

<>
<EuiFlexItem grow={false}>
<EuiButton
iconType="pencil"
onClick={() => editPanel('edit')}
isDisabled={editDisabled}
>
Edit
</EuiButton>
</EuiFlexItem>
{editMode ? (
<>
<EuiFlexItem grow={false}>
<EuiButton
iconType="cross"
color="danger"
onClick={() => editPanel('cancel')}
>
Cancel
</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton iconType="save" onClick={() => editPanel('save')}>
Save
</EuiButton>
</EuiFlexItem>
</>
) : (
<EuiFlexItem grow={false}>
<EuiButton
iconType="pencil"
onClick={() => editPanel('edit')}
disabled={editDisabled}
>
Edit
</EuiButton>
</EuiFlexItem>
)}
<EuiFlexItem grow={false}>
<EuiButton
iconType="plusInCircle"
Expand Down
2 changes: 2 additions & 0 deletions ...l_modules/visualization_flyout/__tests__/__snapshots__/visualization_flyout.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
<VisaulizationFlyout
appPanel={false}
closeFlyout={[MockFunction]}
end="now"
http={[MockFunction]}
Expand Down Expand Up @@ -1061,6 +1062,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `

exports[`Visualization Flyout Component renders replace visualization Flyout 1`] = `
<VisaulizationFlyout
appPanel={false}
closeFlyout={[MockFunction]}
end="2011-08-12T01:23:45.678Z"
http={[MockFunction]}
Expand Down
2 changes: 2 additions & 0 deletions .../custom_panels/panel_modules/visualization_flyout/__tests__/visualization_flyout.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ describe('Visualization Flyout Component', () => {
http={httpClientMock}
pplService={pplService}
isFlyoutReplacement={isFlyoutReplacement}
appPanel={false}
/>
);

Expand Down Expand Up @@ -68,6 +69,7 @@ describe('Visualization Flyout Component', () => {
pplService={pplService}
isFlyoutReplacement={isFlyoutReplacement}
replaceVisualizationId={replaceVisualizationId}
appPanel={false}
/>
);

Expand Down
33 changes: 23 additions & 10 deletions ...blic/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/
/* eslint-disable no-console */
/* eslint-disable react-hooks/exhaustive-deps */

import {
EuiButton,
Expand Down Expand Up @@ -56,7 +58,7 @@ import { uiSettingsService } from '../../../../../common/utils';
* replaceVisualizationId: string id of the visualization to be replaced
*/

type Props = {
interface VisualizationFlyoutProps {
panelId: string;
pplFilterValue: string;
closeFlyout: () => void;
Expand All @@ -73,10 +75,14 @@ type Props = {
setPanelVisualizations: React.Dispatch<React.SetStateAction<VisualizationType[]>>;
isFlyoutReplacement?: boolean | undefined;
replaceVisualizationId?: string | undefined;
};
appPanel: boolean;
appId?: string;
}

export const VisaulizationFlyout = ({
panelId,
appId,
appPanel,
pplFilterValue,
closeFlyout,
start,
Expand All @@ -87,11 +93,11 @@ export const VisaulizationFlyout = ({
setPanelVisualizations,
isFlyoutReplacement,
replaceVisualizationId,
}: Props) => {
}: VisualizationFlyoutProps) => {
const [newVisualizationTitle, setNewVisualizationTitle] = useState('');
const [newVisualizationType, setNewVisualizationType] = useState('');
const [newVisualizationTimeField, setNewVisualizationTimeField] = useState('');
const [previewMetaData, setPreviewMetaData] = useState();
const [previewMetaData, setPreviewMetaData] = useState<SavedVisualizationType>();
const [pplQuery, setPPLQuery] = useState('');
const [previewData, setPreviewData] = useState<pplResponse>({} as pplResponse);
const [previewArea, setPreviewArea] = useState(<></>);
Expand Down Expand Up @@ -125,7 +131,7 @@ export const VisaulizationFlyout = ({
http
.post(`${CUSTOM_PANELS_API_PREFIX}/visualizations/replace`, {
body: JSON.stringify({
panelId: panelId,
panelId,
savedVisualizationId: selectValue,
oldVisualizationId: replaceVisualizationId,
}),
Expand All @@ -142,7 +148,7 @@ export const VisaulizationFlyout = ({
http
.post(`${CUSTOM_PANELS_API_PREFIX}/visualizations`, {
body: JSON.stringify({
panelId: panelId,
panelId,
savedVisualizationId: selectValue,
}),
})
Expand Down Expand Up @@ -259,7 +265,7 @@ export const VisaulizationFlyout = ({
) : (
<EuiFlyoutBody banner={emptySavedVisualizations}>
<>
<div>Please use the "create new visualization" option in add visualization menu.</div>
<div>{'Please use the "create new visualization" option in add visualization menu.'}</div>
</>
</EuiFlyoutBody>
);
Expand All @@ -286,8 +292,15 @@ export const VisaulizationFlyout = ({
.then((res) => {
if (res.visualizations.length > 0) {
setSavedVisualizations(res.visualizations);
const filterAppVis = res.visualizations.filter((vis: SavedVisualizationType) => {
return appPanel
? vis.hasOwnProperty('application_id')
? vis.application_id === appId
: false
: !vis.hasOwnProperty('application_id');
});
setVisualizationOptions(
res.visualizations.map((visualization: SavedVisualizationType) => {
filterAppVis.map((visualization: SavedVisualizationType) => {
return { value: visualization.id, text: visualization.name };
})
);
Expand All @@ -306,7 +319,7 @@ export const VisaulizationFlyout = ({
<EuiFlexItem>
{previewLoading ? (
<EuiLoadingChart size="xl" mono className="visualization-loading-chart-preview" />
) : isPreviewError != '' ? (
) : isPreviewError !== '' ? (
<div className="visualization-error-div-preview">
<EuiIcon type="alert" color="danger" size="s" />
<EuiSpacer size="s" />
Expand All @@ -328,7 +341,7 @@ export const VisaulizationFlyout = ({

// On change of selected visualization change options
useEffect(() => {
for (var i = 0; i < savedVisualizations.length; i++) {
for (let i = 0; i < savedVisualizations.length; i++) {
const visualization = savedVisualizations[i];
if (visualization.id === selectValue) {
setPPLQuery(visualization.query);
Expand Down
4 changes: 2 additions & 2 deletions .../explorer/visualizations/config_panel/config_editor/config_controls/config_thresholds.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export const ConfigThresholds = ({
if (thrId !== th.thid) return th;
return {
...th,
[thrName]: event?.target?.value || '',
[thrName]: (thrName === 'color' ? event : event?.target?.value) || '',
};
}),
]);
Expand Down Expand Up @@ -139,7 +139,7 @@ export const ConfigThresholds = ({
<EuiFieldNumber
fullWidth
placeholder="threshold value"
value={thr.value || 0}
value={thr.value}
onChange={handleThresholdChange(thr.thid, 'value')}
aria-label="Input threshold value"
data-test-subj="valueFieldNumber"
Expand Down
5 changes: 4 additions & 1 deletion ...-observability/public/components/notebooks/components/paragraph_components/paragraphs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,10 @@ export const Paragraphs = forwardRef((props: ParagraphProps, ref) => {
await http
.get(`${CUSTOM_PANELS_API_PREFIX}/visualizations`)
.then((res) => {
opt2 = res.visualizations.map((vizObject) => ({
const noAppVisualizations = res.visualizations.filter((vis) => {
return !!!vis.application_id;
});
opt2 = noAppVisualizations.map((vizObject) => ({
label: vizObject.name,
key: vizObject.id,
className: 'OBSERVABILITY_VISUALIZATION',
Expand Down
6 changes: 5 additions & 1 deletion ...-observability/public/components/trace_analytics/components/dashboard/dashboard_table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,11 @@ export function DashboardTable(props: {
})
}
>
{item.length < 48 ? item : <div title={item}>{_.truncate(item, { length: 48 })}</div>}
{item.length < 48 ? (
decodeURI(item)
) : (
<div title={item}>{_.truncate(decodeURI(item), { length: 48 })}</div>
)}
</EuiLink>
) : (
'-'
Expand Down
Loading