Skip to content

Commit

Permalink
Add ingest pipeline details and selection
Browse files Browse the repository at this point in the history
  • Loading branch information
@weltenwort
weltenwort committed Jan 12, 2024
1 parent 6b85919 commit eeef832
Show file tree
Hide file tree
Showing 6 changed files with 130 additions and 137 deletions.
36 changes: 32 additions & 4 deletions ...gins/observability_log_explorer/public/components/ingest_pathways/graph_visualization.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,20 +9,47 @@ import { css } from '@emotion/react';
import { useActor } from '@xstate/react';
import cytoscape, { CytoscapeOptions, EdgeSingular, NodeSingular } from 'cytoscape';
import dagre from 'cytoscape-dagre';
import React, { useEffect, useState } from 'react';
import React, { useCallback, useEffect, useState } from 'react';
import { Agent, useIngestPathwaysPageStateContext } from '../../state_machines/ingest_pathways';

export const ConnectedGraphVisualization = React.memo(() => {
const [state] = useActor(useIngestPathwaysPageStateContext());
const [state, send] = useActor(useIngestPathwaysPageStateContext());

return <GraphVisualization graphOptions={state.context.graph} />;
const onSelectPathway = useCallback(
(pathwayId: string) => {
send({
type: 'selectPathway',
pathwayId,
});
},
[send]
);

return (
<GraphVisualization graphOptions={state.context.graph} onSelectPathway={onSelectPathway} />
);
});

export const GraphVisualization = React.memo(
({ graphOptions }: { graphOptions: CytoscapeOptions }) => {
({
graphOptions,
onSelectPathway,
}: {
graphOptions: CytoscapeOptions;
onSelectPathway: (pathwayId: string) => void;
}) => {
const [cytoscapeInstance] = useState(() => {
cytoscape.use(dagre);
const newCytoscapeInstance = cytoscape(initialGraphOptions);
newCytoscapeInstance.on('select', 'edge[pathwayId]', (evt) => {
const pathwayId = evt.target.data('pathwayId');
// onSelectPathway(pathwayId);
// console.log(evt);
const edges = evt.cy.$(`edge[pathwayId="${pathwayId}"]`);
const nodes = edges.connectedNodes();
edges.select();
nodes.select();
});
return newCytoscapeInstance;
});

Expand All @@ -48,6 +75,7 @@ export const GraphVisualization = React.memo(

const initialGraphOptions: CytoscapeOptions & { layout: Record<string, any> } = {
elements: [],
autoungrabify: true,
style: [
{
selector: '*',
Expand Down
3 changes: 3 additions & 0 deletions ...observability_log_explorer/public/state_machines/ingest_pathways/graph/calculate_graph.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ const convertAgentToGraphElements =
classes: 'shipsTo agentShipsTo',
data: {
id: `relation-${source}-ships-to-${target}`,
pathwayId: `pathway-${source}-to-${target}`,
source,
target,
agent,
Expand All @@ -100,6 +101,7 @@ const convertAgentToGraphElements =
classes: lastEdge.classes,
data: {
id: `relation-${lastEdge.data.source}-ships-to-${ingestPipelineElementId}`,
pathwayId: lastEdge.data.pathwayId,
source: lastEdge.data.source,
target: ingestPipelineElementId,
shipsTo: lastEdge.data.shipsTo,
Expand All @@ -111,6 +113,7 @@ const convertAgentToGraphElements =
classes: 'shipsTo',
data: {
id: `relation-${ingestPipelineElementId}-ships-to-${lastEdge.data.target}`,
pathwayId: lastEdge.data.pathwayId,
source: ingestPipelineElementId,
target: lastEdge.data.target,
shipsTo: {},
Expand Down
62 changes: 44 additions & 18 deletions ...ility_log_explorer/public/state_machines/ingest_pathways/ingest_pathways_state_machine.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,13 @@ import { ActionTypes, assign, createMachine } from 'xstate';
import { calculateGraph } from './graph';
import { loadDataStreams } from './services/load_data_streams';
import { loadIndexTemplates } from './services/load_index_templates';
import { loadIngestPipelines } from './services/load_ingest_pipelines';
import { loadSignalData } from './services/load_signal_data';
import {
Agent,
DataStream,
DataStreamStub,
GraphSelection,
IndexTemplate,
IngestPathwaysData,
IngestPathwaysParameters,
Expand All @@ -30,26 +32,25 @@ import { mergeIngestPathwaysData } from './utils';
export const createPureIngestPathwaysStateMachine = (initialContext: IngestPathwaysContext) =>
createMachine(
{
/** @xstate-layout N4IgpgJg5mDOIC5QEkB2NYBcAKBDTAFgO64CesAdAK6oCWdmtuANrQF6QDEA2gAwC6iUAAcA9rFqNRqISAAeiAGwB2CgA4VARjXKArABoQpRJoAspigE5r15crUaATGs2OAvm8NoMOfMTKUzKK4EPRQ3nA4tMJgrKhwnBDSYBT0AG6iANYpQSERWNjRsfRwfIJIIGISUjIVCgi86pa8io4GRiaOvADMFKY2lnYOrWruniD5voQk5BS5oegAyrRQqCwAIvi4icmpqBnZc8EQy6sbW2WyVZK00rL1Zn263a7txgjdpppWA0NOLh4vOhInhpgEjiEwmgIGA5AAVMAAW2EzHwCSS8T2Bxyx2hsIRyNRmFKAiu4hudzqiAAtI1FKY1KZunpDO9LG0KMp+pZGVzXJpeJZARNgQU-DNAscwptMLhFpgAE5gXCI2A7THpLI4kIyuWK5Wqy4Va41e6IVTKSyKHRvJSPLnWUyKXSWUyObpqbrCyag-yzebSrbypUqtXzI0icmmqkIZzfRyOJ2J3QC3S6OyKVmIFO9PS8fOmFrOLljIE+X0SiELcKoGHwpEotFh44RypR261UD1F6WCiOTRpj3u7qWMyOLMIezfB2Wbou3h2bqlkXl8XggPoH1FOIJcOk43tyldxBztQUbqKAdtS1MvRqCeaR+NXT53iJ5Qj626NTe0VTP2SiEXB7uUkbVB2ZofFafSmDmajsqMXwXg+c6qAMrQvCml5jOMqCiDC8AVD6a7kGS4FHvINKuL2s4sh0CDUooFCvrwT7dC0Ni6MuxFgrMND0DcLDsJAZEUp2lEIG6E4uH0vz2P8ri-quvGATCECidGx4ICmVhmEW3IDBoKHpj81gYQOmjYUpIIkapUJ-oUMQ7oRYFiZB1L2OoWg2g+vAaKZtjySM3EObZVZhKcazMLqGkQTG1I6SW2h0e8CbfAZgxBXG1liip4WbrW+INkScCxRR9TUjJtG2pO359tyvJfP2go5f+lYblAurBgaLltuR4kVc6zG6E6Pn0f0jSJoFj7aJZpgeB4QA */
/** @xstate-layout N4IgpgJg5mDOIC5QEkB2NYBcAKBDTAFgO64CesAdAK6oCWdmtuANrQF6QDEA2gAwC6iUAAcA9rFqNRqISAAeiAGwB2CgA4VARjXKArABoQpRJoAspigE5r15crUaATGs2OAvm8NoMOfMTKUzKK4EPRQ3nA4tMJgrKhwnBDSYBT0AG6iANYpQSERWNjRsfRwfIJIIGISUjIVCgi86pa8io4GRiaOvADMFKY2lnYOrWruniD5voQk5BS5oegAyrRQqCwAIvi4icmpqBnZc8EQy6sbW2WyVZK00rL1Zn263a7txgjdpppWA0NOLh4vOhInhpgEjiEwmgIGA5AAVMAAW2EzHwCSS8T2Bxyx2hsIRyNRmFKAiu4hudzqiAAtI1FKY1KZunpDO9LG0KMp+pZGVzXJpeJZARNgQU-DNAscwptMLhFpgAE5gXCI2A7THpLI4kIyuWK5Wqy4Va41e6IVTKSyKHRvJSPLnWUyKXSWUyObpqbrCyag-zkTjzI0icmmqkfRwWN3siM9ZnOtSsxAR3QUXhptPdXSObSOCOKb2iqZ+tWwWJgADGRZmQcqIdutVA9V0ml6VpeTtMujsildiYQWd6PczjkUmcsuhU+eFqFEMPgFR94oCZOq9bNCGprksVmZto3ilT6ZaujTX26Ly940XYNmNHoNxY7EgK4pDfkiDdfZcfV+9n+rgLHxfQlCEYQgF9Q0bRBmysMwWgjAZrA0PsWy7H5rFaF5m0UACr0LYDwXmKF8KKOI4Agtcw2pex1C0G0UN4DR0NsP8RjGIEgKXWYiKWFY1mYXUKMpKCNxgrls3ojoEFzb5uRY4ZnE0QCQS4yVIXQPF4SRFE0XnYNV2E98N2-Sxdz7PQ1AoBCeVMPls0FZSxRvNSFigXV5SVFU9NrAy33qalnVTXQnUk95+kaay7E0aKXHpDwPCAA */
context: initialContext,

predictableActionArguments: true,
id: 'IngestPathways',
initial: 'uninitialized',

schema: {
context: {} as IngestPathwaysContext,
events: {} as IngestPathwaysEvent,
services: {} as IngestPathwaysServices,
},

states: {
uninitialized: {
always: 'loadingSignalData',
},

loaded: {
on: {
load: 'loadingSignalData',
},
},
loaded: {},

loadingIngestPipelines: {
invoke: {
Expand All @@ -62,10 +63,6 @@ export const createPureIngestPathwaysStateMachine = (initialContext: IngestPathw

id: 'loadIngestPipelines',
},

on: {
load: 'loadingSignalData',
},
},

loadingSignalData: {
Expand All @@ -91,10 +88,6 @@ export const createPureIngestPathwaysStateMachine = (initialContext: IngestPathw
actions: ['storeIndexTemplates', 'updateGraph'],
},
},

on: {
load: 'loadingSignalData',
},
},

loadingDataStreams: {
Expand All @@ -107,10 +100,16 @@ export const createPureIngestPathwaysStateMachine = (initialContext: IngestPathw
actions: 'storeDataStreams',
},
},
},
},

on: {
load: 'loadingSignalData',
},
on: {
load: '.loadingSignalData',

selectPathway: {
target: '#IngestPathways',
internal: true,
actions: 'storeSelectedPathway',
},
},
},
Expand Down Expand Up @@ -163,7 +162,25 @@ export const createPureIngestPathwaysStateMachine = (initialContext: IngestPathw
graph: (context, event) => {
const graph = calculateGraph(context.data);

return graph;
return {
...context.graph,
...graph,
};
},
}),
storeSelectedPathway: assign({
graph: (context, event) => {
if (event.type !== 'selectPathway') {
return context.graph;
}

return {
...context.graph,
selection: {
...context.graph.selection,
pathwayId: event.pathwayId,
},
};
},
}),
},
Expand Down Expand Up @@ -201,12 +218,16 @@ export const createIngestPathwaysStateMachine = ({
},
graph: {
elements: [],
selection: {
pathwayId: null,
},
},
}).withConfig({
services: {
loadSignalData: loadSignalData({ dataStreamsStatsClient, search }),
loadDataStreams: loadDataStreams({ http }),
loadIndexTemplates: loadIndexTemplates({ http }),
loadIngestPipelines: loadIngestPipelines({ http }),
},
});
};
Expand All @@ -216,6 +237,7 @@ export interface IngestPathwaysContext {
data: IngestPathwaysData;
graph: {
elements: ElementDefinition[];
selection: GraphSelection;
};
}

Expand Down Expand Up @@ -247,6 +269,10 @@ export type IngestPathwaysEvent =
| {
type: 'load';
}
| {
type: 'selectPathway';
pathwayId: string;
}
| {
type: `${ActionTypes.DoneInvoke}.loadSignalData`;
data: IngestPathwaysServices['loadSignalData']['data'];
Expand Down
Loading

0 comments on commit eeef832

Please sign in to comment.