p632-sp-2017/microservice-catalog-frontend

import React from 'react';

import './DetailView.css';
import ServiceTable from './ServiceTable'

/**
 * Component to display all fields of a microservice
 * @param {[type]} serviceDetails [description]
 */
const DetailView = (serviceDetails) => {
  let detailHtml = [];
  let data = serviceDetails;
  let keys = Object.keys(data);
  for(let i=0; i<keys.length; i++){
    if(data[keys[i]] !== null && !(data[keys[i]] instanceof Array)){
      detailHtml.push(<div className="DetailViewRow" key={i}>
                          <div className="fieldKey">{keys[i]}</div>
                          <div className="fieldValue">{data[keys[i]]}</div>
                      </div>);
    }
    if(data[keys[i]] instanceof Array) {
      let tableObj = {
        keyVal: keys[i],
        tableData: data[keys[i]]
      }
      detailHtml.push(<ServiceTable {...tableObj} />)
    }
  }

  return(
    <div className="DetailView">{detailHtml}</div>
  );
}

DetailView.displayName = 'DetailView';

export default DetailView;