Repository files navigation

This section provides a step-by-step guide to embedding a Last9 dashboard intoyour own application, based on the provided sequence diagram and sample code.You donot need to run or edit any files in this repository—just followthese instructions and copy the relevant code snippets into your own frontendand backend.

You need a backend endpoint that your frontend can call to fetch a short-liveddashboard access token. This keeps your Last9 API credentials secure.

Example (Go, based onembedded-dashboard-token-server/main.go):

// Pseudocode for a secure token endpointhttp.HandleFunc("/embed-token",func(w http.ResponseWriter,r*http.Request) {// Parse dashboard_id, datasource_id, variables from request body// Use your org and Last9 API read refresh token (see README prerequisites)// Make a POST request to://   https://app.last9.io/api/v4/oauth/organizations/{org}/dashboard/embed_token//   with Authorization: Bearer <refresh_token>//   and the dashboard_id, datasource_id, variables in the body// Return the response JSON to the frontend})

• Seeembedded-dashboard-token-server/main.gofor a full implementation.
• Your endpoint shouldnever expose your refresh token to the browser.

Add the following<script> tag to your HTML (or load dynamically in React):

<scriptsrc="https://cdn.last9.io/dashboard-assets/embedded/last9-embedded-dashboard.umd-v1.1.js"></script>

<divid="embedded-dashboard-container"style="height: 100vh; width: 100%"></div>

asyncfunctiongetToken(){constresponse=awaitfetch("/embed-token",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({dashboard_id:"<your-dashboard-id>",datasource_id:"<your-datasource-id>",variables:{/* your variables here */},}),});if(!response.ok)thrownewError("Failed to fetch token");returnresponse.json();}

• Seeembedded-dashboard-client/index.htmlfor a working example.

You can find your dashboard ID in the Last9 dashboard URL. It is the part after/dashboards/ and before the? (query parameters).

For example, in the URL:

https://app.last9.io/v2/organizations/{org}/dashboards/{dashboard_id}?cluster=...

The dashboard ID is{dashboard_id}.

Thevariables object should match the variable configuration of yourdashboard. For example:

variables:{service:["prod-checkout"],latency:[0.5]}

• The keys (e.g.,service,latency) and their value types (arrays) shouldmatch what your dashboard expects.
• Seeembedded-dashboard-token-server/request.jsonfor a full example.

EmbeddedDashboardApp.initialize({containerId:"embedded-dashboard-container",org:"<your-org>",  getToken,// the function aboveonError:(err)=>{console.error("Dashboard error",err);},});

• Seeembedded-dashboard-client/index.htmlandembedded-dashboard-client-react/src/EmbeddedDashboardApp.tsxfor more details.

• The dashboard library will automatically call yourgetToken function torefresh the token every 30 minutes (see thesequence diagram).
• Your backend endpoint should always return a fresh, valid token.
• The dashboard will also periodically fetch new data using the current token.

1. Implement a secure/embed-token endpoint in your backend (see above).
2. Add the dashboard library to your frontend.
3. Add a container div for the dashboard.
4. Write agetToken function that calls your backend endpoint.
5. Initialize the dashboard with your org, container, andgetTokenfunction.
6. Handle errors via theonError callback.

For more details and full code samples, see:

• embedded-dashboard-token-server/main.go
• embedded-dashboard-client/index.html
• embedded-dashboard-client-react/src/EmbeddedDashboardApp.tsx

Please get in touch with us onDiscordorEmail if you have any questions.