ntopng/httpdocs/templates/pages/components/ifaces-dropdown.template

{% -- Print out the infrastructure dropdown %}

{% if ntop.isEnterpriseM() and isAdministrator() and (table.len(infrastructure_instances) > 0) then %}  

  {% -- Form for selecting infrastrucure instance id %}
  <form id="switch_infrastructure_form" method="POST" action="{{ ntop.getHttpPrefix() }}/lua/index.lua">
    <input name="switch_instance" type="hidden" value="1" />
    <input name="csrf" type="hidden" value="{{ ntop.getRandomCSRFValue() }}" />
    <input name="instance_id" type="hidden" value="" />
  </form>

  <li class="nav-item d-sm-flex">
    <div class="d-flex">
      <select name="infrastructure-dropdown" id="infrastructure-dropdown" class="selectpicker form-select-lg pb-0"
        data-width="fit" data-live-search="true" data-live-search-placeholder="{{ i18n('search') }}" data-actions-box="true">

        <option value="{{ ntop.getHttpPrefix() }}/lua/index.lua" href="#" data-content=""> {{ i18n('infrastructure_dashboard.local') }}</option>

        <option disabled>{{ i18n('infrastructure_dashboard.dashboards') }}</option>

        {% local selected = '' %}
        {% if infrastructure_view then %}
            {% selected = 'selected=""' %}
        {% end %}
        <option value="{{ ntop.getHttpPrefix() }}/lua/index.lua?view=infrastructure" href="#" data-content="{{ "<i class='fas fa-tachometer-alt'></i> "..i18n('infrastructure_dashboard.infrastructure') }}" {{ selected }}></option>

        <option disabled>{{ i18n('infrastructure_dashboard.instances') }}</option>
        {% for k,v in pairs(infrastructure_instances or {}) do %}
        <option value="{{ v.url }}" href="#" data-content="{{ "<i class='fas fa-building'></i> "..v.name }}"></option>
        {% end %} 

      </select>
    </div>
  </li>
{% end %}

{% -- Print out the interfaces dropdown %}

{% -- Generate forms for the actual switch of the currently active interface %}
{% -- Form for the system interface %}
<form id="switch_interface_form_{{ getSystemInterfaceId() }}" method="POST" action="{{ ntop.getHttpPrefix() }}/lua/system_stats.lua?ifid={{ getSystemInterfaceId() }}">
  <input name="switch_interface" type="hidden" value="1" />
  <input name="csrf" type="hidden" value="{{ ntop.getRandomCSRFValue() }}" />
</form>
{% -- Form for all other interfaces %}
{% for k, v in pairsByValues(ifnames, asc) do %}
<form id="switch_interface_form_{{ k }}" method="POST" action="{{ action_urls[k] }}">
  <input name="switch_interface" type="hidden" value="1" />
  <input name="csrf" type="hidden" value="{{ ntop.getRandomCSRFValue() }}" />
</form>
{% end %}

{% if not infrastructure_view then %}

<li class="nav-item d-sm-flex">
  <div class="d-flex">
  <select name="interfaces-dropdown" id="interfaces-dropdown" class="selectpicker form-select-lg pb-0" 
    data-width="fit" data-live-search="true" data-live-search-placeholder="{{ i18n('search') }}" data-actions-box="true">

    {% if isAdministrator() then %}
    <option disabled>{{ i18n('system') }}</option>
    <option value="{{ getSystemInterfaceId() }}" {{ selected }} data-content="{{ i18n('system') }}" style="padding-left: 2rem !important;">{{ i18n('system') }}</option>
    {% end %}

    {% -- The Interfaces optgroup %}
    <option disabled>{{ i18n('interfaces') }}</option>

    {% for round = 1, 2 do -- First round: only physical interfaces, second round: only virtual interfaces %}
      {% for k, v in pairsByValues(ifHdescr, asc) do %}
        {% if round == 1 and ifCustom[k] then %}
          {% -- Nothing to do, this round is for physical, non-disaggregated interfaces ... %}
        {% elseif round == 2 and not ifCustom[k] then %}
          {% -- Nothing to do, this round is for disaggregated interfaces only ... %}
        {% else %}
          {% local icons, selected = {}, '' %}
	  
            {% if tonumber(k) == interface.getId() and not is_system_interface then %}
              {% selected = 'selected=""' %}
   	    {% end %}
  
            {% if pcapdump[k] then %}
              {% icons[#icons + 1] = "<i class='fas fa-file'></i>" %}
            {% elseif packetinterfaces[k] then %}
              {% icons[#icons + 1] = "<i class='fas fa-ethernet'></i>" %}
            {% elseif zmqinterfaces[k] then %}
              {% icons[#icons + 1] = "<i class='fas fa-bezier-curve'></i>" %} {% --broadcast-tower %}
            {% end %}

            {% if views[k] then %}
              {% icons[#icons + 1] = "<i class='fas fa-eye'></i>" %}
            {% end %}

            {% if dynamic[k] then %}
              {% icons[#icons + 1] = "<i class='fas fa-code-branch'></i>" %}
            {% end %}

            {% if drops[k] then %}
              {% icons[#icons + 1] = "<i class='fas fa-tint'></i>" %}
            {% end %}

            {% if recording[k] then %}
              {% icons[#icons + 1] = "<i class='fas fa-hdd'></i>" %}
            {% end %}

            <option data-tokens="{{ k }}" value="{{ k }}" {{ selected }} data-content="{{ table.concat(icons, ' ')}} {{ shortenCollapse(ifHdescr[k]) }}" style="padding-left: 2rem !important;">{{ ifHdescr[k] }}</option>
          {% end %}
        {% end %}
      {% end %}
  </select>
</div>
</li>

{% -- not infrastructure_view %}
{% end %}

{% -- Print the observation point dropdown %}
{% if(observationPoints ~= nil) then %}
  {% for _, v in pairsByKeys(observationPoints, asc) do %}
  <form id="switch_observation_point_form_{{ v["obs_point"] }}" method="POST" action="{{ ntop.getHttpPrefix() .. "/lua/flows_stats.lua" .. "" }}?ifid={{ interface.getId() }}&observationPointId={{ v["obs_point"] }}" >
    <input name="switch_interface" type="hidden" value="1" />
    <input name="csrf" type="hidden" value="{{ ntop.getRandomCSRFValue() }}" />
  </form>
  {% end %}

  <li class="nav-item d-sm-flex">
    <div class="d-flex">
      <select name="observationpoint-dropdown" id="observationpoint-dropdown" class="selectpicker form-select-lg pb-0" data-width="fit" data-live-search="true" data-live-search-placeholder="{{ i18n('search') }}" data-actions-box="true">
      {% for _, v in pairsByField(observationPoints, 'obs_point', asc) do %}
        {% local selected = '' %}
        {% if((observationPointId ~= nil) and (tostring(v["obs_point"]) == tostring(observationPointId))) then selected = 'selected' end %}
        <option value="{{ v["obs_point"] }}" {{ selected }}>{{ getObsPointAlias(v["obs_point"], true) }}</option>
      {% end %}
        </optgroup>
      </select>
    </div>
  </li>
{% end %}

<script type="text/javascript">
  // initialize the selectpicker
  $('#infrastructure-dropdown').selectpicker();
  $('#interfaces-dropdown').selectpicker();
  $('#observationpoint-dropdown').selectpicker();
 
  $(`#infrastructure-dropdown`).on('change', function(e) {
    const selectedValue = $(this).val();

    /* URL */
    window.location.replace(selectedValue);

    /* Instance ID (not yet supported)
    $('#switch_infrastructure_form [name="instance_id"]').val(selectedValue);
    toggleSystemInterface($('#switch_infrastructure_form'));
    */

  });
  
  $(`#observationpoint-dropdown`).on('change', function(e) {
    const selectedValue = $(this).val();
    $('#switch_observation_point_form_'+ selectedValue).submit();
  });

  $("#interfaces-dropdown").on("change", function(e) {
    const selectedValue = $(this).val();

    if (isNaN(Number(selectedValue)) ) {
      /* URL */
      window.location.replace(selectedValue);
    } else {
      /* Interface ID */
      toggleSystemInterface($('#switch_interface_form_' + selectedValue));
    }
  });

  const toggleObservationPoint = ($form = null) => {
    if($form != null) 
      $form.submit();
  }

</script>