EVOLUTION-MANAGER

Edit File: db-analysis.template

{#
    (C) 2021 - ntop.org    
    Base template for datatables.
#}

<script type='text/javascript'>
  const base_path = '{* ntop.getHttpPrefix() *}';
  const default_ifid = '{* interface.getId() *}';
  const navbar_context = {* navbar *};
</script>

<div class='col-12'>
    <div class="card card-shadow widget-box-container">
      <div class="overlay justify-content-center align-items-center position-absolute h-100 w-100">
        <div class="text-center">
          <div class="spinner-border text-primary mt-5" role="status">
            <span class="sr-only position-absolute">Loading...</span>
          </div>
        </div>
      </div>
      <div class="card-body">
        <div class="row"  style="justify-content: space-evenly; gap: 5rem 0%; margin: 2rem;">

{% for _, chart_opts in ipairs(charts) do %}
          
          <div class="col-{{ chart_opts.chart_width }}">
            <div class="widget-box widget-box-fix" id="{{ chart_opts.chart_id }}">
            {* 
              widget_gui_utils.render_chart(chart_opts.chart_id, {
                displaying_label = chart_opts.chart_name,
                css_styles = chart_opts.css_styles,
                chart_type = chart_opts.chart_type,
              }) 
            *}
            </div>
          </div>
      
        {% end %}

</div>
    </div>
  </div>
</div>

</script>
<script type='text/javascript'>
  let pageCsrf = "{{ ntop.getRandomCSRFValue() }}";
  let table = undefined;
  let VUE_APP;

custom_queries_list.sort((a,b) => {

if(a.label < b.label) 
      return -1;
    if(a.label > b.label) 
      return 1;
    
    return 0;
    
  });
  let aggregation_criteria = ntopng_url_manager.get_url_entry("query_preset");

selected_custom_queries = custom_queries_list.find((c) => c.value == aggregation_criteria);

const datatable_vue = ntopVue.Vue.createApp(datatable_vue_options);
      const vue_app = datatable_vue.mount("#datatable-vue");
      return vue_app;
  }

$(document).ready(async function(){
      setTimeout(() => start_navbar(), 0);
      if (ntopng_url_manager.get_url_entry("ifid") == null) {
	  ntopng_url_manager.add_obj_to_url({ifid: default_ifid});
      }
      if (ntopng_url_manager.get_url_entry("epoch_begin") == null
      	 || ntopng_url_manager.get_url_entry("epoch_end") == null) {
	 let default_epoch_begin = Number.parseInt((Date.now() - 1000 * 30 * 60) / 1000);
	 let default_epoch_end = Number.parseInt(Date.now() / 1000);
	 ntopng_url_manager.set_key_to_url("epoch_begin", default_epoch_begin);
	 ntopng_url_manager.set_key_to_url("epoch_end", default_epoch_end);
      }
      
      VUE_APP = start_range_picker();
      
      await ntopng_sync.on_ready("range_picker");
      NtopUtils.hideOverlays();

ntopng_status_manager.on_status_change("datatable", (new_status) => {
	let url_params = ntopng_url_manager.get_url_params();
	{% for _, chart_opts in ipairs(charts) do %}
        if("{{ chart_opts.chart_type }}" === "geomap") {
            redraw_hosts(null, true, url_params + "&chart_id={{ chart_opts.chart_id }}");
        } else {
	    let obj_params = ntopng_url_manager.get_url_object();
            obj_params["chart_id"] = "{{ chart_opts.chart_id }}";
            WidgetUtils.getWidgetByName("{{ chart_opts.chart_id }}").update(obj_params);
        }
	{% end %}
    }, false);
});
</script>