ResultRenderer.tsx 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. import React from 'react';
  2. import { KsqlCommandResponse, Table } from 'generated-sources';
  3. const ResultRenderer: React.FC<{ result: KsqlCommandResponse | null }> = ({
  4. result,
  5. }) => {
  6. if (!result) return null;
  7. const isMessage = !!result.message;
  8. if (isMessage) return <div className="box">{result.message}</div>;
  9. const isTable = result.data !== undefined;
  10. if (!isTable) return null;
  11. const rawTable = result.data as Table;
  12. const { headers, rows } = rawTable;
  13. const transformedRows = React.useMemo(
  14. () =>
  15. rows.map((row) =>
  16. row.reduce((res, acc, index) => {
  17. res[rawTable.headers[index]] = acc;
  18. return res;
  19. }, {} as Dictionary<string>)
  20. ),
  21. []
  22. );
  23. return (
  24. <div className="box">
  25. <table className="table is-fullwidth">
  26. <thead>
  27. <tr>
  28. {headers.map((header) => (
  29. <th key={header}>{header}</th>
  30. ))}
  31. </tr>
  32. </thead>
  33. <tbody>
  34. {transformedRows.map((row) => (
  35. <tr key={row.name}>
  36. {headers.map((header) => (
  37. <td key={header}>{row[header]}</td>
  38. ))}
  39. </tr>
  40. ))}
  41. {rows.length === 0 && (
  42. <tr>
  43. <td colSpan={headers.length}>No tables or streams found</td>
  44. </tr>
  45. )}
  46. </tbody>
  47. </table>
  48. </div>
  49. );
  50. };
  51. export default ResultRenderer;