microservice-cqrs-server/views/MultiSiteReport.jade

head
  script(type='text/javascript').
        let url = '/api/defaultObservable';   //'!{jadeargument.url}';
        const params = '!{jadeargument.data}';
        const defaultQueryValue = '!{jadeargument.defaultQueryValue}';
        let sites = Array();
        const options = {
            mode: 'cors',
            headers: {
                "Content-Type": "application/json",
                "Access-Control-Allow-Origin": "*"
            },
            method: 'POST',
            body: params,
        }
        

        let tempBuffer = "";
        fetch(url,options)
        .then(async (response) =>
        {
           let reader = response.body.getReader();
           let result = "";
           let count = 0;

            result = reader.read().then(function processText({done, value}){
              
              let x = new TextDecoder("utf-8").decode(value);
              try{
                if(x > ""){
                  let temp = tempBuffer + x;
                  let identifier = "[{\"header\":{\"messageType\":";

                  const tempArray = temp.split(identifier);
                  //- console.log(tempArray);

                  if(tempArray.length > 2){
                    for(let ind=1; ind <= tempArray.length-2; ind++){
                      console.count("x");                      
                      temp = JSON.parse(identifier+tempArray[ind]);
                      
                      if(temp[0]){
                        temp = temp[0];
                      }
                      tempBuffer = "";
                      sites.push(temp.header.messageProducerInformation.origin.programName);
                      count++;
                      tableCreate(temp.header.messageProducerInformation.origin.programName,temp.data.data)
                    }
                    temp = identifier+tempArray[tempArray.length-1];                  
                  }
                  temp = JSON.parse(temp)
                  if(temp[0]){
                    temp = temp[0];
                  }
                      tempBuffer = "";
                      sites.push(temp.header.messageProducerInformation.origin.programName);
                      tableCreate(temp.header.messageProducerInformation.origin.programName,temp.data.data)
                      return reader.read().then(processText)
                  
                }
              }catch(e){
                tempBuffer = tempBuffer + x;
                  console.log(e)
              }

        

            }).then(res=>{

                var sitesHeader = document.getElementById('sites');
                var bold = document.createElement('b');
                
                sitesHeader.innerHTML = "("+ sites.toString() + ") " + defaultQueryValue;
                sitesHeader.appendChild(bold)
            })

        })

        function tableCreate (servername,arr) {
    
          var myTable = document.getElementById('multiSiteTable');
          var table = document.createElement('table');
          table.border = '1';
          var tblBody = document.createElement('tbody');
          let column = [];

          


          var headerTag = document.createElement("p");
          var headerNode = document.createTextNode(servername);
          headerTag.appendChild(headerNode);

          for(var i = 0; i < arr.length; i++){
              var tr = document.createElement('tr');
              tblBody.appendChild(tr)
              for(var j=0; j< Object.keys(arr[i]).length; j++) {
                  Object.keys(arr[i]).forEach((c)=>{
                      if(column.indexOf(c)==-1) column.push(c); 
                  });
                  var td = document.createElement('td');
                  td.innerHTML = arr[i][Object.keys(arr[i])[j]];
                  tr.appendChild(td);
              }
          }
          var header = document.createElement('thead');
          column.forEach((c)=>{
              var th = document.createElement("th");
              th.innerHTML = c;
              header.appendChild(th);
          })
          table.appendChild(header);

          table.appendChild(tblBody);
          myTable.appendChild(headerTag)
          myTable.appendChild(table);


        }


    
    
  meta(charset='UTF-8')
  title MultiSite Report 
  link(rel='stylesheet', href='/stylesheets/style.css')

body
  div
    h1 MultiSiteReport
    form(method='POST' action=jadeargument['action'])
      select(name="defaultQuery" onchange="this.form.submit()")
        each item in jadeargument['defaultQuery']
            if(item.queryName === jadeargument['defaultQueryValue'])
                option(value = item.queryName selected) #{item.queryName}
            else 
                option(value = item.queryName) #{item.queryName}  
    h3(id="sites")
    div(id="multiSiteTable")