Create dynamic menus and navigation

const answerRequestObject = {
    "metadata": [{"type": "ANSWER"}],
    "permissions" : [
    {
      "principal": {
        "type": "USER",
        "identifier": "{username}"
      },
      "share_mode": "READ_ONLY"
    }
  ]
    'record_offset': 0,  // Adjust to do pagination
    'record_size': 100000 // Adjust to do pagination (or handle in browser with table component)
}

const lbRequestObject = {
    "metadata": [{"type": "LIVEBOARD"}],
    'record_offset': 0,  // Adjust to do pagination
    'record_size': 100000 // Adjust to do pagination (or handle in browser with table component)
}

    function tableFromList(listResponse){
        console.log(listResponse);
        let t = document.createElement('table');

        // Make table headers
        let thead = document.createElement('thead');
        t.append(thead);
        let thr = document.createElement('tr');
        thead.append(thr);
        let headers = ['Name', 'Tags', 'Modified', 'Author'];
        for (let i=0, len=headers.length; i < len; i++){
            let th = document.createElement('th');
            th.innerText = headers[i];
            thr.append(th);
        }

        // Go through response and build rows
        for (let i=0, len=listResponse.length; i < len; i++){
            let tr = document.createElement('tr');

            // Name Column
            let name_td = document.createElement('td');
            name_td.innerHTML = '<a href="#" onclick="loadContent("' + listResponse[i]['id'] + '")>' +  listResponse[i]['name'] +  '</a>';
            //name_td.append(name_text);
            console.log(name_td);
            tr.append(name_td);

            // Tags column
            let tags_td = document.createElement('td');
            console.log(listResponse[i]['tags']);
            // Tags is an Array of Tag objects, with properties ('name' being the important one)
            if (listResponse[i]['tags'].length > 0){
                let tagNames = [];
                for(let k = 0, len = listResponse[i]['tags'].length; k<len; k++){
                    let tagName = listResponse[i]['tags'][k]['name'];
                    tagNames.push(tagName);
                }
                tags_td.innerText = tagNames.join(', ');
            }
            tr.append(tags_td);

            // Modified Date column
            let modified_td = document.createElement('td');
            modified_td.innerText = listResponse[i]['modified'];
            tr.append(modified_td);

            let author_td = document.createElement('td');
            author_td.innerText = listResponse[i]['authorDisplayName'];
            tr.append(author_td);

            t.append(tr);

        }

        return t;
    }

metadataListRestApiCall(
    {
        'type': 'liveboard',
        'sortOn': 'NAME',
        'sortAsc' : true,
        'category': 'ALL'
    })
.then(
    (response) => tableFromList(response)
).then(
    (table) => document.getElementById('main-content-div').append(table)
);

async function metadataGetVizHeadersRestApiCall(liveboardGuid){
    // args = { 'type', 'category', 'sortOn', 'sortAsc', 'tagnames' }
    let type = args['type'].toLowerCase();
    const publicApiUrl = 'callosum/v1/tspublic/v1/';
    let endpoint = 'metadata/listvizheaders';

    // batchsize = -1 gives all results
    let apiParams = { 'id' : liveboardGuid};
    const searchParams = new URLSearchParams(apiParams);
    const apiFullEndpoint = tsURL + publicApiUrl + endpoint + "?" + searchParams.toString();
    console.log(apiFullEndpoint);
    return await fetch(
        apiFullEndpoint, {
        method: 'GET',
        headers: {
            "Accept": "application/json",
            "X-Requested-By": "ThoughtSpot"
        },
        credentials: "include"
        })
    .then(response =>  response.json())
    //
    .then(data => data)  // metadata/list info is really in the 'headers' property returned
    .catch(error => {
    console.error("Unable to get the metadata/listvizheaders response: " + error)
    });
}