clement-joye

<div class="container">
    <div class="m-auto row justify-content-md-left py-4">
        <div class="w-100 border-bottom border-dark fw-bold">
            <h1>{{ title }}</h1>
        </div>
    </div>
    <div class="m-auto">
        <div *ngFor="let card of cards; let i = index;" class="card border m-2 w-auto">
            <div class="row g-0 bg-light text-dark">
                <div class="col-md-2 d-flex justify-content-center align-items-center {{ card.variables['status'] | DashboardStylePipe }}">

clement-joye

function postRequest(data: any, resource: DashboardCardResource, variables: { [key: string] : string }) {
  Object.keys(resource.values).forEach(function(key) {
    var query = SubtituteString(resource.values[key], variables).replace(/'/g, '"');
    var result = jsonQuery(query, { data: data, allowRegexp: true });
    variables[key] = result.value;
  })
}

clement-joye

function prepareRequest(resource: DashboardCardResource, variables: { [key: string] : string }, pat: string) {

  let url = SubtituteString(resource.absoluteUrl, variables);

  const httpOptions = new HttpHeaders({ 
    'Authorization': `Basic ${btoa(`"":${pat}`)}`, 
    'Accept': 'application/json' 
  });

  return { url, httpOptions };

clement-joye

getCardData(card: DashboardCard, i: number = 0) {

    let resource = card.resources[i];
    let variables = card.variables;

    let request = prepareRequest(resource, variables, card.pat);
    console.log(request.url);

    return this.http.get<string>(request.url, { headers: request.httpOptions }).subscribe(

clement-joye

function SubtituteString(urlStr: string, json: { [key: string] : string }) {

  Object.keys(json).forEach(function(key) {
    urlStr = urlStr.replace('${' + key + '}', json[key])
  })
  return urlStr;
}

clement-joye

import { Injectable } from '@angular/core';
import { DashboardCard } from './dashboard-gallery/dashboard-card';
import { datasources, cards } from './data';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  getData(): DashboardCard[]{

clement-joye

export class DashboardCard {
    
    readonly family: string; 
    readonly name: string; 
    readonly datasource: string; 
    readonly pat: string;
    readonly resources: DashboardCardResource[];

    variables: { [key: string] : string };

clement-joye

{
  "resources": [
    {
      "absoluteUrl": "https://api.github.com/repos/${company}/${repo}/actions/runs",
      "values": {
        "status": "workflow_runs[0].conclusion",
        "webUrl": "workflow_runs[0].html_url"
      }
    }
  ],

clement-joye

{
  "resources": [
    {
      "absoluteUrl": "https://vsrm.dev.azure.com/${organization}/${project}/_apis/release/releases?definitionId=${definitionId}&$top=1",
      "values": {
        "releaseId": "value[0].id"
      }
    },
    {
      "absoluteUrl": "https://vsrm.dev.azure.com/${organization}/${project}/_apis/Release/releases/${releaseId}",

clement-joye

{
  "resources": [
    {
      "absoluteUrl": "https://dev.azure.com/${organization}/${project}/_apis/build/latest/${definition}",
      "values": {
        "status": "result",
        "webUrl": "_links.web.href"
      }
    }
  ],