import { useDqlQuery } from "@dynatrace-sdk/react-hooks";
import { ProgressCircle } from "@dynatrace/strato-components-preview";
import type { TableColumn } from "@dynatrace/strato-components-preview/tables";
import { DataTable } from "@dynatrace/strato-components-preview/tables";
import React from "react";

export const HostsTableDql = () => {
  const hosts = useDqlQuery({
    body: {
      query:
        "fetch dt.entity.host | fieldsAdd ipAddress, osVersion, osType, monitoringMode",
      requestTimeoutMilliseconds: 30000,
    },
  });

  const columns: TableColumn[] = [
    {
      header: "Host Name",
      accessor: '"entity.name"',
      ratioWidth: 1,
    },
    {
      header: "IP Address",
      accessor: "ipAddress[0]",
      ratioWidth: 1,
    },
    {
      header: "Monitoring Mode",
      accessor: "monitoringMode",
      ratioWidth: 1,
    },
    {
      header: "Operating System",
      accessor: "osType",
      ratioWidth: 1,
    },
    {
      header: "Operating Version",
      accessor: "osVersion",
      ratioWidth: 1,
    },
  ];

  return (
    <>
      {hosts.isLoading && <ProgressCircle />}
      {hosts.data && <DataTable columns={columns} data={hosts.data.records} />}
    </>
  );
};