Skip to content

Commit

Permalink
Notebook / ParaOuput - move OutputBody sub-component outside of neste…
Browse files Browse the repository at this point in the history
…d React FC

Signed-off-by: Peter Fitzgibbons <peter.fitzgibbons@gmail.com>
  • Loading branch information
pjfitzgibbons committed Sep 26, 2023
1 parent b583044 commit b0cf917
Showing 1 changed file with 112 additions and 78 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,18 @@ import { Media } from '@nteract/outputs';
import moment from 'moment';
import React, { useState } from 'react';
import { VisualizationContainer } from '../../../../components/custom_panels/panel_modules/visualization_container';
import PPLService from '../../../../services/requests/ppl';
import { CoreStart } from '../../../../../../../src/core/public';
import {
DashboardContainerInput,
DashboardStart,
} from '../../../../../../../src/plugins/dashboard/public';
import { ParaType } from '../../../../../common/types/notebooks';
import { uiSettingsService } from '../../../../../common/utils';
import { QueryDataGridMemo } from './para_query_grid';
import { coreRefs } from '../../../../framework/core_refs';

const QueryOutput = ({ typeOut, val }: { typeOut: string; val: string }) => {
const { http, pplService } = coreRefs;

const QueryOutput = ({ typeOut, val, para }: { typeOut: string; val: string; para: ParaType }) => {
const createQueryColumns = (jsonColumns: any[]) => {
let index = 0;
const datagridColumns = [];
Expand Down Expand Up @@ -81,96 +82,129 @@ const QueryOutput = ({ typeOut, val }: { typeOut: string; val: string }) => {
}
};

const OutputBody = ({ typeOut, val }: { typeOut: string; val: string }) => {
/* Returns a component to render paragraph outputs using the para.typeOut property
* Currently supports HTML, TABLE, IMG
* TODO: add table rendering
*/
const dateFormat = uiSettingsService.get('dateFormat');
const OutputBody = ({
para,
typeOut,
val,
visInput,
setVisInput,
DashboardContainerByValueRenderer,
}: {
para: ParaType;
typeOut: string;
val: string;
visInput: DashboardContainerInput;
setVisInput: (input: DashboardContainerInput) => void;
DashboardContainerByValueRenderer: DashboardStart['DashboardContainerByValueRenderer'];
}) => {
/* Returns a component to render paragraph outputs using the para.typeOut property
* Currently supports HTML, TABLE, IMG
* TODO: add table rendering
*/
const dateFormat = uiSettingsService.get('dateFormat');

if (typeOut !== undefined) {
switch (typeOut) {
case 'QUERY':
return <QueryOutput typeOut={typeOut} val={val} />;
case 'MARKDOWN':
return (
<EuiText className="wrapAll markdown-output-text">
<MarkdownRender source={val} />
if (typeOut !== undefined) {
switch (typeOut) {
case 'QUERY':
return <QueryOutput para={para} typeOut={typeOut} val={val} />;
case 'MARKDOWN':
return (
<EuiText className="wrapAll markdown-output-text">
<MarkdownRender source={val} />
</EuiText>
);
case 'VISUALIZATION':
let from = moment(visInput?.timeRange?.from).format(dateFormat);
let to = moment(visInput?.timeRange?.to).format(dateFormat);
from = from === 'Invalid date' ? visInput.timeRange.from : from;
to = to === 'Invalid date' ? visInput.timeRange.to : to;
return (
<>
<EuiText size="s" style={{ marginLeft: 9 }}>
{`${from} - ${to}`}
</EuiText>
);
case 'VISUALIZATION':
let from = moment(visInput?.timeRange?.from).format(dateFormat);
let to = moment(visInput?.timeRange?.to).format(dateFormat);
from = from === 'Invalid date' ? visInput.timeRange.from : from;
to = to === 'Invalid date' ? visInput.timeRange.to : to;
return (
<>
<EuiText size="s" style={{ marginLeft: 9 }}>
{`${from} - ${to}`}
</EuiText>
<DashboardContainerByValueRenderer input={visInput} onInputUpdated={setVisInput} />
</>
);
case 'OBSERVABILITY_VISUALIZATION':
let fromObs = moment(visInput?.timeRange?.from).format(dateFormat);
let toObs = moment(visInput?.timeRange?.to).format(dateFormat);
fromObs = fromObs === 'Invalid date' ? visInput.timeRange.from : fromObs;
toObs = toObs === 'Invalid date' ? visInput.timeRange.to : toObs;
const onEditClick = (savedVisualizationId: string) => {
window.location.assign(`observability-logs#/explorer/${savedVisualizationId}`);
};
return (
<>
<EuiText size="s" style={{ marginLeft: 9 }}>
{`${fromObs} - ${toObs}`}
</EuiText>
<div style={{ height: '300px', width: '100%' }}>
<VisualizationContainer
http={props.http}
editMode={false}
visualizationId={''}
onEditClick={onEditClick}
savedVisualizationId={para.visSavedObjId}
pplService={props.pplService}
fromTime={para.visStartTime}
toTime={para.visEndTime}
onRefresh={false}
pplFilterValue={''}
usedInNotebooks={true}
/>
</div>
</>
);
case 'HTML':
return (
<EuiText>
{/* eslint-disable-next-line react/jsx-pascal-case */}
<Media.HTML data={val} />
<DashboardContainerByValueRenderer input={visInput} onInputUpdated={setVisInput} />
</>
);
case 'OBSERVABILITY_VISUALIZATION':
let fromObs = moment(visInput?.timeRange?.from).format(dateFormat);
let toObs = moment(visInput?.timeRange?.to).format(dateFormat);
fromObs = fromObs === 'Invalid date' ? visInput.timeRange.from : fromObs;
toObs = toObs === 'Invalid date' ? visInput.timeRange.to : toObs;
const onEditClick = (savedVisualizationId: string) => {
window.location.assign(`observability-logs#/explorer/${savedVisualizationId}`);
};
return (
<>
<EuiText size="s" style={{ marginLeft: 9 }}>
{`${fromObs} - ${toObs}`}
</EuiText>
);
case 'TABLE':
return <pre>{val}</pre>;
case 'IMG':
return <img alt="" src={'data:image/gif;base64,' + val} />;
default:
return <pre>{val}</pre>;
}
} else {
console.log('output not supported', typeOut);
return <pre />;
<div style={{ height: '300px', width: '100%' }}>
<VisualizationContainer
http={http}
editMode={false}
visualizationId={''}
onEditClick={onEditClick}
savedVisualizationId={para.visSavedObjId}
pplService={pplService}
fromTime={para.visStartTime}
toTime={para.visEndTime}
onRefresh={false}
pplFilterValue={''}
usedInNotebooks={true}
/>
</div>
</>
);
case 'HTML':
return (
<EuiText>
{/* eslint-disable-next-line react/jsx-pascal-case */}
<Media.HTML data={val} />
</EuiText>
);
case 'TABLE':
return <pre>{val}</pre>;
case 'IMG':
return <img alt="" src={'data:image/gif;base64,' + val} />;
default:
return <pre>{val}</pre>;
}
};
} else {
console.log('output not supported', typeOut);
return <pre />;
}
};

/*
* "ParaOutput" component is used by notebook to populate paragraph outputs for an open notebook.
*
* Props taken in as params are:
* para - parsed paragraph from notebook
*
* Outputs component of nteract used as a container for notebook UI.
* https://components.nteract.io/#outputs
*/
export const ParaOutput = (props: {
para: ParaType;
visInput: DashboardContainerInput;
setVisInput: (input: DashboardContainerInput) => void;
DashboardContainerByValueRenderer: DashboardStart['DashboardContainerByValueRenderer'];
}) => {
const { para, DashboardContainerByValueRenderer, visInput, setVisInput } = props;

return !para.isOutputHidden ? (
<>
{para.typeOut.map((typeOut: string, tIdx: number) => {
return (
<OutputBody
para={para}
key={para.uniqueId + '_paraOutputBody_' + tIdx}
typeOut={typeOut}
val={para.out[tIdx]}
visInput={visInput}
setVisInput={setVisInput}
DashboardContainerByValueRenderer={DashboardContainerByValueRenderer}
/>
);
})}
Expand Down

0 comments on commit b0cf917

Please sign in to comment.