ntopng/httpdocs/templates/pages/components/db-analysis.template

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

<link rel="stylesheet" href='{{ ntop.getHttpPrefix() }}/css/apexcharts.css'/>

<script type='text/javascript' src='{{ ntop.getHttpPrefix() }}/js/apexchart/apexcharts.min.js?{{ ntop.getStaticFileEpoch() }}'></script>
<script type='text/javascript' src='{{ ntop.getHttpPrefix() }}/js/widgets/widgets.js?{{ ntop.getStaticFileEpoch() }}'></script>

<!-- vue3 -->
<script src="{* ntop.getHttpPrefix() *}/vue/vue-prod.js"></script>
<script src="{* ntop.getHttpPrefix() *}/vue/vue3-sfc-loader.js"></script>
<script src="{* ntop.getHttpPrefix() *}/vue/ntopng_vue_loader.js"></script>

<!-- ntopng_sync, ntopng_status_manager, ntopng_events_manager, ntopng_url_manager, ntopng_utility -->
<script src="{* ntop.getHttpPrefix() *}/js/utils/ntopng_globals_services.js"></script>

<!-- flatpickr -->
<script src="{* ntop.getHttpPrefix() *}/js/flatpickr.js"></script>
<link rel="stylesheet" href="{* ntop.getHttpPrefix() *}/css/flatpickr.min.css">

<!-- select2 -->
<script src="{* ntop.getHttpPrefix() *}/js/select2.min.js"></script>
<link href="{* ntop.getHttpPrefix() *}/css/select2.min.css" rel="stylesheet" />

<!-- tagify -->
<link rel="stylesheet" href="{* ntop.getHttpPrefix *}/css/tagify.css" />
<script type="text/javascript" src="{* ntop.getHttpPrefix *}/js/tagify.min.js"></script>

<!-- defines base_path globals const-->
<script type='text/javascript'>
  const base_path = '{* ntop.getHttpPrefix() *}';
  const default_ifid = '{* interface.getId() *}';
</script>

<div class='row'>

    <div class='col-12'>
    <div class="mb-2">
      <div class="w-100">
	<div clas="range-container d-flex flex-wrap">
	  <div class="range-picker d-flex m-auto flex-wrap" id="datatable-vue">
	    <range-picker ref="range-picker-vue" :id="id_range_picker"></range-picker>
	  </div>
	</div>
      </div>
    </div>

  <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>
</div>

<link href="{{ ntop.getHttpPrefix() }}/css/dataTables.bootstrap5.min.css" rel="stylesheet"/>

<script type="text/javascript">
    i18n_ext.showing_x_to_y_rows = "{{ i18n('showing_x_to_y_rows', {x='_START_', y='_END_', tot='_TOTAL_'}) }}";
</script>
<script type='text/javascript'>
  let pageCsrf = "{{ ntop.getRandomCSRFValue() }}";
  let table = undefined;
  let VUE_APP;

  function start_range_picker() {
      let datatable_vue_options = {
	  props: {
	      id: String,
	  },
	  components: {	  
   	      'range-picker': Vue.defineAsyncComponent( () => ntopng_vue_loader.loadModule(`${base_path}/vue/components/range-picker.vue`, ntopng_vue_loader.loadOptions) ),
	  },
	  /**
	   * First method called when the component is created.
	   */
	  created() {},
	  mounted() {},
	  data() {
	      return {
		  id_range_picker: `range_picker`,
		  i18n: (t) => { return i18n(t); },
	      };
	  },
	  methods: {},
      };
      const datatable_vue = Vue.createApp(datatable_vue_options);
      const vue_app = datatable_vue.mount("#datatable-vue");
      return vue_app;
  }

  $(document).ready(async function(){
      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");

      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>