export default function DashboardList() {
const [metadataData, setMetadataData] = useState<object | null>();
const [showMyItems, setShowMyItems] = useState(false);
const [authorName, setAuthorName] = useState('');
...
Menus and other navigation elements
The ThoughtSpot component page from the previous lesson was designed to display any Liveboard with a valid ID as part of the URL.
While you can hardcode a set of known objects with their names and IDs into a navigation menu, ThoughtSpotโs true power is allowing users to ask new questions and build their answers and Liveboards.
The ThoughtSpot REST API provides the /metadata/search
endpoint for listing out the data objects on the ThoughtSpot instance, with a number of options for filtering or retrieving more details.
The REST API automatically filters the results based on the permissions of the user who makes the request.
The challenge is to ensure that the SDK uses the session in the browser or a valid bearer token for the user logged into the app.
/app/dashboard/page.tsx: a tabular menu of Liveboards๐
The example app has a dedicated /app/dashboard/page.tsx to display a tabular menu of available Liveboards.
The following steps are required for this page:
-
Make a REST API request to ThoughtSpot to retrieve the details of the objects
-
Build the table from the results and construct links to the /dashboard/{dashboardId} page to display the Liveboard.
Create state variables๐
The menu page provides some UI options to configure the REST API request that generates the menu items. The pattern in React is for options to update shared state variables using the useState() function, with updates triggered within components when the associated setState()
function is called.
The page uses the following three state variables, with the default set by the initial useState()
function:
ThoughtSpot REST API TypeScript SDK๐
ThoughtSpot provides a TypeScript REST API SDK that can be installed via Node and added to any React app.
The SDK allows calling any of the V2.0 REST API endpoints and returns in a native JSON format, making it ideal for retrieving the details of objects that a user can see.
Import REST API SDK๐
To use the REST API SDK, import createConfiguration
, ServerConfiguration
and ThoughtSpotRestApi
from @thoughtspot/rest-api-sdk
:
"use client";
import {useEffect, useState} from "react";
import Link from 'next/link';
// Menu page to list available Liveboards to link to LiveboardEmbed display page
import {createConfiguration, ServerConfiguration, ThoughtSpotRestApi} from "@thoughtspot/rest-api-sdk";
import {constants} from "@/lib/constants";
Note the "use client";
at the very beginning of the code. This tells React that the REST API calls should be coming from the userโs browser, rather than made on the server side. React doesnโt explicitly separate frontend and backend layers the way many traditional web application platforms did, so you have to be intentional when you do have a preference.
Initialize the SDK๐
The REST API SDK uses an object returned by the imported createConfiguration()
function to define the attributes necessary to authenticate for a particular ThoughtSpot instance. createConfiguration()
takes an object with a baseServer
property that is set to a ServerConfiguration
option.
For the ServerConfiguration
to use the ThoughtSpot session in the browser, rather than request a bearer token, it should be created as shown here:
new ServerConfiguration(constants.tsURL, {})
For examples of different authentication methods, see the REST API SDK documentation.
Individual endpoints are called by instantiating a ThoughtSpotRestApi
object with the ServerConfiguration
object, and then calling methods on the ThoughtSpotRestApi
object.
// API configuration using no auth.
const config = createConfiguration({
baseServer: new ServerConfiguration(constants.tsURL, {}),
});
...
// Use ThoughtSpot REST API SDK
const api = new ThoughtSpotRestApi(config);