Skip to content

Instantly share code, notes, and snippets.

@judell
Created May 27, 2023 19:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save judell/74b7ecd50c3d7b74931a167a52990c2a to your computer and use it in GitHub Desktop.
Save judell/74b7ecd50c3d7b74931a167a52990c2a to your computer and use it in GitHub Desktop.
cody-steampipe-01

Me how does the dashboard server receive the results of sql queries and render them as tables and charts?

Cody

Read 13 files The Steampipe dashboard server receives SQL query results and renders them as tables and charts in the following way:

When a dashboard is loaded, the dashboard server parses the dashboard definition file (dashboard.sp). This includes parsing any SQL queries defined in the dashboard.

The dashboard server executes each SQL query and caches the results.

When a table, chart, or other widget is rendered, the dashboard server retrieves the cached query results for that widget.

For a table, the dashboard server formats the query results into columns and rows to display in the table. It handles pagination, filtering, and sorting within the table.

For a chart, the dashboard server passes the query results to the charting library (Apache ECharts) as the dataset for the chart. It also passes chart configuration options like title, legend, axes, series type, etc.

ECharts renders the chart using the data and options provided by the dashboard server.

When query results change (from a refresh or input change), the dashboard server re-runs the queries, caches the new results, and tells the widgets to re-render using the updated data.

Widgets like tables, charts, flows, and graphs re-render themselves using the new data provided by the dashboard server.

So in summary, the dashboard server:

Executes SQL queries and caches the results Passes query results to widgets as their data source Re-runs queries and provides updated data to widgets when results change Handles the rendering and interactivity of tables Delegates the rendering of charts, flows, and graphs to their respective libraries (ECharts, vis.js, etc.) Coordinates the data flow to keep all widgets in a dashboard in sync The dashboard server acts as the "middleman" between the SQL queries, data sources, and frontend widgets. It executes queries, caches and updates data, and passes data to the widgets for rendering - keeping the entire dashboard interface dynamic and in sync.

Please let me know if you have any other questions!

Me how does the dashboard server communicate with steampipe cli?

Cody

Read 14 files The Steampipe dashboard server communicates with the Steampipe CLI in the following ways:

When the dashboard server starts up, it launches the Steampipe CLI in "service mode" using the steampipe service start command. This starts Steampipe as a background process and exposes it as a Postgres database server.

The dashboard server connects to the Steampipe service as a Postgres client, using the connection credentials provided by steampipe service status. It uses this connection to execute queries and retrieve data.

When a user runs a query or loads a dashboard in the UI, the dashboard server constructs the SQL query and sends it to the Steampipe service over the Postgres connection.

Steampipe executes the query and returns the results to the dashboard server. The dashboard server then renders the results in the UI.

When a user refreshes data or changes an input in the UI, the dashboard server re-runs the necessary queries against the Steampipe service to get updated data and re-render the UI.

The dashboard server monitors the Steampipe service and will show an error in the UI if the service goes down for any reason. It will automatically restart the service when it comes back up.

When the dashboard server shuts down, it executes steampipe service stop to properly stop the Steampipe service.

So in summary, the dashboard server:

Starts and stops the Steampipe service Connects to the Steampipe service as a Postgres client Sends SQL queries to the Steampipe service and gets results Renders query results in the UI and updates the UI when data changes Monitors the Steampipe service and restarts it if it goes down The dashboard server acts as a frontend interface to the Steampipe service, executing queries through it and handling the UI rendering of results. The Steampipe service acts as a database backend, executing the queries and returning data to the dashboard server.

Please let me know if you have any other questions!

Me how are websockets used as the communication mechanism between the dashboard server and steampipe cli?

Cody

Read 12 files The Steampipe dashboard server uses websockets to communicate with the Steampipe CLI in the following ways:

When the dashboard server starts up, it launches the Steampipe CLI in "service mode" using the steampipe service start command. This starts Steampipe as a background process and exposes a websocket server.

The dashboard server connects to the Steampipe websocket server as a client. It uses this websocket connection to send queries and receive data.

When a user runs a query or loads a dashboard in the UI, the dashboard server constructs the SQL query and sends it to the Steampipe websocket server.

Steampipe executes the query and returns the results to the dashboard server over the websocket connection. The dashboard server then renders the results in the UI.

When a user refreshes data or changes an input in the UI, the dashboard server re-runs the necessary queries by sending them to the Steampipe websocket server to get updated data and re-render the UI.

The dashboard server monitors the websocket connection and will show an error in the UI if the connection closes for any reason. It will automatically try to reconnect.

When the dashboard server shuts down, it sends a message to the Steampipe websocket server telling it to shutdown as well.

So in summary, the dashboard server:

Connects to the Steampipe websocket server Sends SQL queries to the Steampipe websocket server and gets results Renders query results in the UI and updates the UI when data changes Monitors the websocket connection and tries to reconnect if it closes Tells the Steampipe websocket server to shutdown when the dashboard server exits The dashboard server acts as a frontend interface to the Steampipe websocket server, executing queries through it and handling the UI rendering of results. The Steampipe websocket server acts as a database backend, executing the queries and returning data to the dashboard server over the websocket connection.

Websockets allow for a fast, bidirectional communication channel between the dashboard frontend and Steampipe backend. This enables features like live query execution, input changes, and dashboard refreshes.

Please let me know if you have any other questions!

Me

which files implement websocket communication

Cody

Read 12 files The main files that implement websocket communication in Steampipe are:

ui/dashboard/src/hooks/useDashboardWebSocket.ts - React hook that establishes a websocket connection to the dashboard server, handles sending and receiving messages, and passes received events to an event handler.

ui/dashboard/src/hooks/useDashboardWebSocketEventHandler.ts - React hook that acts as the event handler for websocket events received from useDashboardWebSocket.ts. It handles different event types and dispatches Redux actions based on the events.

ui/dashboard/src/types.ts - Defines the DashboardDataMode enum with options like DashboardDataModeLive for a live websocket connection. Also defines the ReceivedSocketMessagePayload interface for messages received over the websocket.

ui/dashboard/src/store/actions.ts - Defines Redux actions that can be dispatched in response to websocket events, like:

DashboardActions.CONTROL_COMPLETE

DashboardActions.CONTROL_ERROR

DashboardActions.LEAF_NODE_COMPLETE

DashboardActions.LEAF_NODE_UPDATED

ui/dashboard/src/components/Dashboard.tsx - The main Dashboard component establishes the websocket connection and event handler using the useDashboardWebSocket and useDashboardWebSocketEventHandler hooks.

dashboard/server/websocket.go - The dashboard server exposes a /ws websocket endpoint. It handles receiving queries and events from the frontend over websockets, executing them, and sending results and updates back to the frontend.

So in summary, the frontend establishes a websocket connection, sends queries and events, receives results and updates, and updates the UI. The dashboard server exposes a websocket endpoint, receives data from the frontend, executes queries, and sends data back - enabling live querying and updating in the dashboard UI.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment