gcp coustomize billing dashboard using typescript

Requirement-

• Prepare simplified cloud service expense dashboard.

• authorized individuals can access and see the consolidated real time expense over the various services at single place

Solution Approach-

• Build UI/UX for cost data replication using type script or of your choice.

• Utilise the open source chart library as per requirement. ex- chart.js, d3.js.

• write business logic for backend using node js or any of the backend language.

• use the gcp cloud query api(as per need) to invoke bigquery datasets to get the response. 

• Propagate responses on UI/UX.

Tech stack -

• Node JS

• React

• Chart library

• Google cloud service (bigquery/service account(impersonation), enable cloud billing-api)

Workflow-

business logic example

//google Service Account impersonation

const client = await auth.getClient();

let targetPrincipal = 'googlebigquery@xxxx.iam.gserviceaccount.com'

const targetClient = new Impersonated({

sourceClient: client,

targetPrincipal: targetPrincipal,

lifetime: 30,

delegates: [],

targetScopes: [scopes] });

//End

const url = 'https://bigquery.googleapis.com/bigquery/v2/projects/${projectId}/queries'

const res = await targetClient.request({

url,method:'POST', headers:{

'Content-type':'application/json; charset=UTF-8',

},

body: JSON.stringfy({

"query": 'select xxxxx from table name'

"useLegacySql": false }),

});

response.json({responseData.data})

Example (Create Service-account and impersonate for secure access)