lg/frontend/static/lg.js

'use strict'

console.log("[INFO] LG code loading...")

const executeBtn = document.getElementById('executeButton');
const spinner = document.getElementById('spinner');
const routerSelect = document.getElementById('routerSelect');
const toolSelect = document.getElementById('toolSelect');
const targetInput = document.getElementById('targetInput');
const resultBox = document.getElementById('resultBox');
const resultText = document.getElementById('resultText');

let loading = false;

const streaming_commands = ['ping', 'ping6', 'traceroute', 'traceroute6', 'mtr', 'mtr6'];

executeBtn.addEventListener('click', async () => {
  const selectedRouter = routerSelect.value;
  const selectedTool = toolSelect.value;
  const targetValue = targetInput.value;

  console.log("[INFO] Execute button clicked");
  resultBox.style.display = 'block';
  loading = true
  set_btn_loading()

  if (streaming_commands.includes(selectedTool)) {
    await execute_streaming(selectedRouter, selectedTool, targetValue)
  } else if (selectedTool == "bgp_prefixes_detailed"){
    await get_prefixes(selectedRouter, targetValue, true)
  } else if (selectedTool == "bgp_prefixes"){
    await get_prefixes(selectedRouter, targetValue, false)
  } else if (selectedTool == "protocols_raw"){
    await get_protocols(selectedRouter, targetValue, false)
  } else if (selectedTool == "protocols_raw_all"){
    await get_protocols(selectedRouter, targetValue, true)
  } else {
    console.error("[ERROR] invalid option")
  }

  console.log("[INFO] Execution finished");
  loading = false
  set_btn_loading()
});

function set_btn_loading() {
  if (loading) {
    spinner.style.display = 'inline-block'; // Show spinner
    executeBtn.disabled = true;
  } else {
    spinner.style.display = 'none'; // Hide spinner
    executeBtn.disabled = false;
  }
}

async function fetch_streaming(url, method) {
  console.log(`[INFO] fetching ${url.toString()}`);

  resultText.innerHTML = ""

  let res = await fetch(url.toString(), {
      method: method
  })

  if (!res.ok) {
    throw new Error(await res.text())
  }

  const reader = res.body.getReader();
  const decoder = new TextDecoder("utf-8");
  let done = false;

  while (!done) {
    // Read the next chunk
    const { value, done: chunkDone } = await reader.read();
    done = chunkDone;

    // Decode the chunk and append it to the resultText
    if (value) {
      const chunkText = decoder.decode(value, { stream: true });
      resultText.innerHTML += chunkText; // Append the new text
    }
  }

  console.log(`[INFO] request finished`);
}

async function get_prefixes(router, target, detailed) {
  try {
    const baseUrl = `/api/${router}/prefixes`;
    const url = new URL(baseUrl, window.location.origin);
    url.searchParams.append('prefix', target);
    url.searchParams.append('all', detailed);

    resultText.innerHTML = ""

    await fetch_streaming(url, "POST")

  } catch (error) {
    console.error(`[ERROR] ${error.message}`)
    resultText.innerHTML = error.message
  }
}

async function get_protocols(router, proto, detailed) {
  try {
    const baseUrl = `/api/${router}/protocols`;
    const url = new URL(baseUrl, window.location.origin);
    url.searchParams.append('proto', proto);
    url.searchParams.append('all', detailed);

    resultText.innerHTML = ""

    await fetch_streaming(url, "POST")

  } catch (error) {
    console.error(`[ERROR] ${error.message}`)
    resultText.innerHTML = error.message
  }
}

async function execute_streaming(router, tool, target) {
  try {
    const baseUrl = `/api/${router}/execute`;
    const url = new URL(baseUrl, window.location.origin);
    url.searchParams.append('tool', tool);
    url.searchParams.append('target', target);

    resultText.innerHTML = ""

    await fetch_streaming(url, "POST")

  } catch (error) {
    console.error(`[ERROR] ${error.message}`)
    resultText.innerHTML = error.message
  }
}

console.log("[INFO] LG code loaded");