<div id="data-container-2"></div>

<script>
  // Define the Prometheus queries
  const query1 = 'unpoller_device_radio_channel{instance="10.10.5.31:9130", job="unifipoller", name="AP-BUITEN", radio="ng", radio_name="wifi0", site_name="Default (default)", source="https://10.10.5.254"}';
  const query2 = 'unpoller_device_info{id="65b7d74e9760ca3d449fc877", instance="10.10.5.31:9130"}';
  const query3 = 'unpoller_device_radio_channel{instance="10.10.5.31:9130", job="unifipoller", name="AP-BUITEN", radio="ng", radio_name="wifi0", site_name="Default (default)", source="https://10.10.5.254"}';
  const query4 = 'unpoller_device_radio_channel{instance="10.10.5.31:9130", job="unifipoller", name="AP-BUITEN", radio="na", radio_name="wifi1", site_name="Default (default)", source="https://10.10.5.254"}';
  const query5 = 'unpoller_device_uptime_seconds{instance="10.10.5.31:9130", job="unifipoller", name="AP-BUITEN", site_name="Default (default)", source="https://10.10.5.254", type="uap"}';

  // Function to fetch data from Prometheus using Grafana's built-in API
  async function fetchData(query) {
    const response = await fetch('/api/datasources/proxy/1/api/v1/query?query=' + encodeURIComponent(query));
    const data = await response.json();
    return data.data.result;
  }

  // Function to convert seconds to days
  function convertSecondsToDays(seconds) {
    return (seconds / (24 * 60 * 60)).toFixed(2);  // Convert to days and round to 2 decimal places
  }

  // Function to display the data
  async function displayData() {
    const data1 = await fetchData(query1);
    const data2 = await fetchData(query2);
    const data3 = await fetchData(query3);
    const data4 = await fetchData(query4);
    const data5 = await fetchData(query5);

    let htmlContent = '';

    data1.forEach(result => {
      htmlContent += `<p><b>Device Name:</b> ${result.metric.name}</p>`;
    });

    data2.forEach(result => {
      htmlContent += `<p><b>Device IP:</b> ${result.metric.ip}</p>`;
      htmlContent += `<p><b>Version:</b> ${result.metric.version}</p>`;
      htmlContent += `<p><b>Serial:</b> ${result.metric.serial}</p>`;
    });

    data3.forEach(result => {
      const value = result.value[1];
      htmlContent += `<p><b>2.4 GHz Channel:</b> ${value}</p>`;
    });

    data4.forEach(result => {
      const value = result.value[1];
      htmlContent += `<p><b>5 GHz Channel:</b> ${value}</p>`;
    });

    data5.forEach(result => {
      const seconds = parseFloat(result.value[1]);
      const days = convertSecondsToDays(seconds);
      htmlContent += `<p><b>Uptime:</b> ${days} days</p>`;
    });

    document.getElementById('data-container-2').innerHTML = htmlContent;
  }

  // Execute the display function
  displayData();
</script>