forked from opensearch-project/dashboards-observability
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Feature] Enable ppl visualization in Chatbot (opensearch-project#1304)
Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
- Loading branch information
1 parent
f31d969
commit 1110e0c
Showing
9 changed files
with
230 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -19,6 +19,7 @@ | |
"visualizations" | ||
], | ||
"optionalPlugins": [ | ||
"managementOverview" | ||
"managementOverview", | ||
"assistantDashboards" | ||
] | ||
} |
78 changes: 78 additions & 0 deletions
78
public/dependencies/components/ppl_visualization_model.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,78 @@ | ||
/* | ||
* Copyright OpenSearch Contributors | ||
* SPDX-License-Identifier: Apache-2.0 | ||
*/ | ||
|
||
import { | ||
EuiButton, | ||
EuiButtonEmpty, | ||
EuiCodeBlock, | ||
EuiModalBody, | ||
EuiModalFooter, | ||
EuiModalHeader, | ||
EuiModalHeaderTitle, | ||
} from '@elastic/eui'; | ||
import React from 'react'; | ||
import { SavedVisualization } from '../../../common/types/explorer'; | ||
import { SavedObjectVisualization } from '../../components/visualizations/saved_object_visualization'; | ||
import { PPLSavedVisualizationClient } from '../../services/saved_objects/saved_object_client/ppl'; | ||
|
||
interface PPLVisualizationModelProps { | ||
savedVisualization: SavedVisualization; | ||
onClose: () => void; | ||
} | ||
|
||
export const PPLVisualizationModal: React.FC<PPLVisualizationModelProps> = (props) => { | ||
return ( | ||
<> | ||
<EuiModalHeader> | ||
<EuiModalHeaderTitle style={{ fontSize: '1.25rem' }}> | ||
{props.savedVisualization.name} | ||
</EuiModalHeaderTitle> | ||
</EuiModalHeader> | ||
|
||
<EuiModalBody> | ||
<div> | ||
<EuiCodeBlock isCopyable>{props.savedVisualization.query}</EuiCodeBlock> | ||
<SavedObjectVisualization | ||
savedVisualization={props.savedVisualization} | ||
timeRange={{ | ||
from: props.savedVisualization.selected_date_range.start, | ||
to: props.savedVisualization.selected_date_range.end, | ||
}} | ||
/> | ||
</div> | ||
</EuiModalBody> | ||
|
||
<EuiModalFooter> | ||
<EuiButton | ||
onClick={async () => { | ||
const response = await savePPLVisualization(props.savedVisualization); | ||
props.onClose(); | ||
window.open(`./observability-logs#/explorer/${response.objectId}`, '_blank'); | ||
}} | ||
fill | ||
> | ||
Save | ||
</EuiButton> | ||
<EuiButtonEmpty onClick={props.onClose}>Close</EuiButtonEmpty> | ||
</EuiModalFooter> | ||
</> | ||
); | ||
}; | ||
|
||
const savePPLVisualization = (savedVisualization: SavedVisualization) => { | ||
const createParams = { | ||
query: savedVisualization.query, | ||
name: savedVisualization.name, | ||
dateRange: [ | ||
savedVisualization.selected_date_range.start, | ||
savedVisualization.selected_date_range.end, | ||
], | ||
fields: [], | ||
timestamp: '', | ||
type: savedVisualization.type, | ||
sub_type: 'visualization', | ||
}; | ||
return PPLSavedVisualizationClient.getInstance().create(createParams); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
/* | ||
* Copyright OpenSearch Contributors | ||
* SPDX-License-Identifier: Apache-2.0 | ||
*/ | ||
|
||
import { merge } from 'lodash'; | ||
import React from 'react'; | ||
import { toMountPoint } from '../../../../src/plugins/opensearch_dashboards_react/public'; | ||
import { SavedVisualization } from '../../common/types/explorer'; | ||
import { SavedObjectVisualization } from '../components/visualizations/saved_object_visualization'; | ||
import { coreRefs } from '../framework/core_refs'; | ||
import { AssistantSetup } from '../types'; | ||
import { PPLVisualizationModal } from './components/ppl_visualization_model'; | ||
|
||
export const registerAsssitantDependencies = (setup?: AssistantSetup) => { | ||
if (!setup) return; | ||
|
||
setup.registerContentRenderer('ppl_visualization', (content) => { | ||
const params = content as Partial<SavedVisualization>; | ||
const savedVisualization = createSavedVisualization(params); | ||
return ( | ||
<SavedObjectVisualization | ||
savedVisualization={savedVisualization} | ||
timeRange={{ | ||
from: savedVisualization.selected_date_range.start, | ||
to: savedVisualization.selected_date_range.end, | ||
}} | ||
/> | ||
); | ||
}); | ||
|
||
setup.registerActionExecutor('view_ppl_visualization', async (params) => { | ||
const savedVisualization = createSavedVisualization(params as Partial<SavedVisualization>); | ||
const modal = coreRefs.core!.overlays.openModal( | ||
toMountPoint( | ||
<PPLVisualizationModal | ||
savedVisualization={savedVisualization} | ||
onClose={() => modal.close()} | ||
/> | ||
) | ||
); | ||
}); | ||
}; | ||
|
||
const createSavedVisualization = (params: Partial<SavedVisualization>) => { | ||
return merge( | ||
{ | ||
query: params.query, | ||
selected_date_range: { start: 'now-14d', end: 'now', text: '' }, | ||
selected_timestamp: { name: 'timestamp', type: 'timestamp' }, | ||
selected_fields: { tokens: [], text: '' }, | ||
name: params.name, | ||
description: '', | ||
type: 'line', | ||
sub_type: 'visualization', | ||
}, | ||
{ | ||
selected_date_range: params.selected_date_range, | ||
selected_timestamp: params.selected_timestamp, | ||
type: params.type, | ||
} | ||
) as SavedVisualization; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
/* | ||
* Copyright OpenSearch Contributors | ||
* SPDX-License-Identifier: Apache-2.0 | ||
*/ | ||
|
||
import { MessageParser } from '../types'; | ||
|
||
const extractPPLQueries = (content: string) => { | ||
return Array.from(content.matchAll(/(^|[\n\r]|:)\s*(source\s*=\s*.+)/gi)).map( | ||
(match) => match[2] | ||
); | ||
}; | ||
|
||
export const PPLParsers: MessageParser = { | ||
id: 'ppl_visualization_message', | ||
async parserProvider(interaction) { | ||
const ppls: string[] = (interaction.additional_info?.["PPLTool.output"] as string[] | null)?.flatMap((item: string) => { | ||
let ppl: string = "" | ||
try { | ||
const outputResp = JSON.parse(item); | ||
ppl = outputResp.ppl; | ||
} catch (e) { | ||
ppl = item; | ||
} | ||
|
||
return extractPPLQueries(ppl); | ||
}) || []; | ||
|
||
if (!ppls.length) return []; | ||
|
||
const statsPPLs = ppls.filter((ppl) => /\|\s*stats\s+[^|]+\sby\s/i.test(ppl)); | ||
if (!statsPPLs.length) { | ||
return []; | ||
} | ||
|
||
return statsPPLs.map((query) => { | ||
const finalQuery = query | ||
.replace(/`/g, '') // workaround for https://github.com/opensearch-project/dashboards-observability/issues/509, https://github.com/opensearch-project/dashboards-observability/issues/557 | ||
.replace(/\bSPAN\(/g, 'span('); // workaround for https://github.com/opensearch-project/dashboards-observability/issues/759 | ||
return ({ | ||
type: 'output', | ||
content: finalQuery, | ||
contentType: 'ppl_visualization', | ||
suggestedActions: [ | ||
{ | ||
message: 'View details', | ||
actionType: 'view_ppl_visualization', | ||
metadata: { query: finalQuery, question: interaction.input }, | ||
}, | ||
], | ||
}); | ||
}); | ||
}, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters