visual changes in demo view

pandora_console/godmode/setup/demo.php

@@ -34,6 +34,9 @@ if (users_is_admin() === false) {
     return;
 }
 
+// Same styles as tactical view is required.
+ui_require_css_file('general_tactical_view');
+
 html_print_input_hidden('demo_items_count', 0);
 
 $display_loading = (bool) get_parameter('display_loading', 0);
@@ -107,29 +110,48 @@ $running_create = ($current_progress_val > 0 && $current_progress_val < 100);
 $running_delete = ($current_progress_val_delete > 0 && $current_progress_val_delete < 100);
 
 // Real time loading.
-if ($display_loading === true || $running_create === true || $running_delete) {
+if ($display_loading === true || $running_create === true || $running_delete === true) {
-    $table_load = new stdClass();
+    $operation = 'cleanup';
-    $table_load->id = 'table-demo';
+    $progress_val = (int) $current_progress_val_delete;
-    $table_load->class = 'filter-table-adv';
-    $table_load->width = '100%';
-    $table_load->data = [];
-    $table_load->size = [];
-    $table_load->size[0] = '50%';
-    $table_load->size[1] = '50%';
 
-    $table_load->data['row0'][] = progress_bar(
+    if ($create_data === true || $running_create === true) {
+        $operation = 'create';
+        $progress_val = (int) $current_progress_val;
+    }
+
+    $load_mkp = ui_progress(
         0,
-        100,
+        '100%',
-        20,
+        '2.5',
-        '',
+        '#C0CCDC',
-        0,
+        true,
-        false,
+        $progress_val.' %',
-        ((int) 0 !== -1) ? false : '#f3b200',
         [
-            'class' => 'progress_bar',
+            'page'     => 'include/ajax/demo_data.ajax',
-            'id'    => 'progress_bar',
+            'interval' => 1,
-        ]
+            'simple'   => 1,
-    ).html_print_input_hidden('js_timer_'.$operation['id'], 0, true);
+            'data'     => [
+                'action'                => 'get_progress',
+                'operation'             => $operation,
+                'demo_items_to_cleanup' => $demo_items_count,
+            ],
+        ],
+        'line-height: 17pt;'
+    );
+
+
+    $load_mkp .= html_print_input_hidden('js_timer', 0, true);
+
+    $table_mkup = '<div id="load-info" class="container">
+                    <div class="title">'.__('Progress').'</div>
+                    <div class="content br-t">
+                        <div class="row">
+                            <div class="col-12">
+                                <div class="br-t">
+                                    <div class="padding20">
+                                        '.$load_mkp.'
+                                    </div>
+                                </div>';
 
     if ($create_data === true || $running_create === true) {
         // Map demo item ID to display name in page.
@@ -162,43 +184,50 @@ if ($display_loading === true || $running_create === true || $running_delete) {
         $items_ids_text_map[DEMO_PLUGIN] = 'plugin';
         $items_ids_text_map = ([DEMO_AGENT => 'agents'] + $items_ids_text_map);
 
-        $list_mkup = '<ul id="load-info">';
         foreach ($items_ids_text_map as $item_id => $item_text) {
-            $list_mkup .= '<li data-item-id="'.$item_id.'">';
+            $table_mkup .= '<div data-item-id="'.$item_id.'" class="br-t">
-            $list_mkup .= '<div class="inline vertical_middle w20px h20px" style="margin-right: 10px;">'.html_print_image(
+                                <div class="pdd_l_15px pdd_t_7px">
+                                    <div class="inline vertical_middle w20px h20px" style="margin-right: 10px;">
+                                        <div class="loader-small">
+                                            <span></span>
+                                            <span></span>
+                                            <span></span>
+                                            <span></span>
+                                        </div>
+                                        <div class="inline vertical_middle w20px h20px" style="margin-right: 10px;">'.html_print_image(
                 'images/icono-unknown.png',
                 true,
                 [
                     'title' => __('View'),
-                    'class' => 'icon w100p h100p',
+                    'class' => 'icon invisible w100p h100p',
                 ]
-            ).'</div>';
+            ).'
-            $list_mkup .= '<span class="inline vertical_middle">Create demo '.$item_text.'</span>';
+                                        </div>
-            $list_mkup .= '<ul class="error-list error margin-bottom-10" style="margin-left: 35px;">';
+                                    </div>
-            $list_mkup .= '</ul>';
+                                    <span class="inline vertical_middle">Create demo '.$item_text.'</span>
-            $list_mkup .= '</li>';
+                                    <ul class="error-list color_888 margin-bottom-10" style="margin-left: 32px;"></ul>
+                                </div>
+                            </div>';
+        }
     }
 
-        $list_mkup .= '</ul>';
+    $table_mkup .= '</div>
-    }
+            </div>
+        </div>
+    </div>';
 
-    echo '<form class="max_floating_element_size" method="post">';
+    echo '<form class="max_floating_element_size" style="max-width: 810px;" method="post">';
-    echo '<fieldset>';
-    echo '<legend>'.__('Progress').'</legend>';
-    html_print_table($table_load);
-    echo $list_mkup;
 
-    echo '</fieldset>';
+    echo $table_mkup;
+
+    $btn_span = __('Back');
+    $icon = 'back';
 
     if ($create_data === true || $running_create === true) {
         $btn_span = __('View summary');
         $icon = 'next';
-    } else {
-        $btn_span = __('Back');
-        $icon = 'back';
     }
 
-
     $action_btns = html_print_action_buttons(
         html_print_submit_button(
             $btn_span,
@@ -605,10 +634,78 @@ if ($display_loading === true || $running_create === true || $running_delete) {
         $table_summary->data[$i][1] = ($demo_dashboards_count > 0) ? $demo_dashboards_count : '-';
 
         echo '<form class="max_floating_element_size" method="post">';
-        echo '<fieldset>';
+        $table_mkup = '<div id="load-info" class="container">
-        echo '<legend>'.__('Active demo data summary').'</legend>';
+            <div class="title">'.__('Active demo data summary').'</div>
-        html_print_table($table_summary);
+            <div class="content br-t">
-        echo '</fieldset>';
+                <div class="row">
+                    <div class="col-6 br-r br-b">
+                        <div class="padding10 flex-row">
+                            <div>'.__('Agents').'</div>
+                            <div class="font_w600 font_12pt">'.(($demo_agents_count > 0) ? $demo_agents_count : '-').'</div>
+                        </div>
+                    </div>
+                    <div class="col-6 br-b">
+                        <div class="padding10 flex-row">
+                            <div>'.__('Services').'</div>
+                            <div class="font_w600 font_12pt">'.(($demo_services_count > 0) ? $demo_services_count : '-').'</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-6 br-r br-b">
+                        <div class="padding10 flex-row">
+                            <div>'.__('Network maps').'</div>
+                            <div class="font_w600 font_12pt">'.(($demo_nm_count > 0) ? $demo_nm_count : '-').'</div>
+                        </div>
+                    </div>
+                    <div class="col-6 br-b">
+                        <div class="padding10 flex-row">
+                            <div>'.__('GIS maps').'</div>
+                            <div class="font_w600 font_12pt">'.(($demo_gis_count > 0) ? $demo_gis_count : '-').'</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-6 br-r br-b">
+                        <div class="padding10 flex-row">
+                            <div>'.__('Custom graphs').'</div>
+                            <div class="font_w600 font_12pt">'.(($demo_cg_count > 0) ? $demo_cg_count : '-').'</div>
+                        </div>
+                    </div>
+                    <div class="col-6 br-b">
+                        <div class="padding10 flex-row">
+                            <div>'.__('Custom reports').'</div>
+                            <div class="font_w600 font_12pt">'.(($demo_rep_count > 0) ? $demo_rep_count : '-').'</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-6 br-r br-b">
+                        <div class="padding10 flex-row">
+                            <div>'.__('Visual consoles').'</div>
+                            <div class="font_w600 font_12pt">'.(($demo_vc_count > 0) ? $demo_vc_count : '-').'</div>
+                        </div>
+                    </div>
+                    <div class="col-6 br-b">
+                        <div class="padding10 flex-row">
+                            <div>'.__('Dashboards').'</div>
+                            <div class="font_w600 font_12pt">'.(($demo_dashboards_count > 0) ? $demo_dashboards_count : '-').'</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>';
+
+
+
+
+
+       // echo '<fieldset>';
+        //echo '<legend>'.__('Active demo data summary').'</legend>';
+       // html_print_table($table_summary);
+        //echo '</fieldset>';
+
+        echo $table_mkup;
 
         html_print_input_hidden('delete_data', 1);
         html_print_input_hidden('display_loading', 1);
@@ -643,18 +740,6 @@ if ($display_loading === true || $running_create === true || $running_delete) {
         var agent_count_span_str = '<?php echo __('demo agents currently in the system'); ?>';
         var agents_str = '<?php echo __('agents'); ?>';
 
-        var display_progress_bar_cr = <?php echo (int) $running_create; ?>;
-
-        if (display_progress_bar_cr == 1) {
-            init_progress_bar('create');
-        }
-
-        var display_progress_bar_del = <?php echo (int) $running_delete; ?>;
-
-        if (display_progress_bar_del == 1) {
-            init_progress_bar('cleanup');
-        }
-
         $("#table-adv").hide();
 
         $('#checkbox-toggle_adv_opts').change(function() {
@@ -693,12 +778,16 @@ if ($display_loading === true || $running_create === true || $running_delete) {
 
         var create_data = '<?php echo $create_data; ?>';
         var delete_data = '<?php echo $delete_data; ?>';
+        var running_create = '<?php echo $running_create; ?>';
+        var running_delete = '<?php echo $running_delete; ?>';
+
+        if (create_data == true || running_create == true) {
+            init_progress_checker('create');
+        }
 
         // Creation operation must be done via AJAX in order to be able to run the operations in background
         // and keep it running even if we quit the page.
         if (create_data == true) {
-            init_progress_bar('create');
-
             var params = {};
             params["action"] = "create_demo_data";
             params["page"] = "include/ajax/demo_data.ajax";
@@ -723,12 +812,13 @@ if ($display_loading === true || $running_create === true || $running_delete) {
             });
         }
 
+        if (delete_data == true || running_delete == true) {
+           init_progress_checker('cleanup');
+        }
+
         // Delete operation must be done via AJAX in order to be able to run the operations in background
         // and keep it running even if we quit the page.
         if (delete_data == true) {
-           /// $("#table-demo-row2").show();
-            init_progress_bar('cleanup');
-
             var params = {};
             params["action"] = "cleanup_demo_data";
             params["page"] = "include/ajax/demo_data.ajax";
@@ -746,38 +836,16 @@ if ($display_loading === true || $running_create === true || $running_delete) {
 
     var items_checked = [];
 
-    function demo_load_progress(id_queue, operation) {
+    function demo_load_progress(operation) {
-        if (id_queue == null)
+        console.log("dlp");
-            return;
-
-        var src_code = $('#' + id_queue).attr("src");
-        /* Check stop begin */
-        var progress_src = null;
-        var elements_src = src_code.split("&");
-
-        $.each(elements_src, function (key, value) {
-            /* Get progress of element */
-            if (value.indexOf("progress=") != -1) {
-                var tokens_src = value.split("=");
-                progress_src = tokens_src[1];
-            }
-        });
-
-        /* STOP timer condition (progress >= 100) */
-        if (progress_src >= 100) {
-            clearInterval($("#hidden-js_timer_" + id_queue).val());
-            return;
-        }
-
         var params = {};
-        params["action"] = "get_progress_bar";
+        params["action"] = "get_load_status";
         params["operation"] = operation;
         if (operation == 'cleanup') {
             var demo_items_count = '<?php echo $demo_items_count; ?>';
             params["demo_items_to_cleanup"] = demo_items_count;
         }
         params["page"] = "include/ajax/demo_data.ajax";
-        params["id_queue"] = id_queue;
 
         jQuery.ajax({
             data: params,
@@ -785,25 +853,18 @@ if ($display_loading === true || $running_create === true || $running_delete) {
             url: "ajax.php",
             dataType: "json",
             success: function(data) {
-                progress_tag_pos = src_code.indexOf("progress=");
+                console.log("-----");
-                rest_pos = src_code.indexOf("&", progress_tag_pos);
 
-                pre_src = src_code.substr(0,progress_tag_pos);
+                if (data.current_progress_val == 100) {
-                post_src = src_code.substr(rest_pos);
+                    clearInterval($("#hidden-js_timer").val());
-
-                /* Create new src code for progress bar */
-                new_src_code = pre_src + "progress=" + data.current_progress_val + post_src;
-
-                if (data.current_progress_val != '')
-                    $('#' + id_queue).attr("src", new_src_code);
-
-                if (data.current_progress_val == 100)
                     $('#action-btns-loading-done').show();
+                }
 
                 if (operation == 'create') {
                     var status_data = data?.demo_data_load_status;
-
+                    console.log("!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");
-                    status_data.checked_items?.forEach(function(item_id) {
+                    console.log(status_data.checked_items);
+                    status_data.checked_items?.forEach(function(item_id, idx) {
                         if (items_checked.includes(item_id)) {
                             return;
                         }
@@ -813,13 +874,20 @@ if ($display_loading === true || $running_create === true || $running_delete) {
                             && typeof status_data.errors[item_id] !== 'undefined'
                             && status_data.errors[item_id].length > 0
                         ) {
+                            update_demo_status_icon(item_id, 'images/status_error@svg.svg');
+
                             status_data.errors[item_id].forEach(function(error_msg) {                                
-                                update_demo_status_icon(item_id, 'images/fail_circle_big.png');
                                 print_error(item_id, error_msg);
                             });
                         } else {
-                            update_demo_status_icon(item_id, 'images/success_circle_big.png');
+                            update_demo_status_icon(item_id, 'images/status_check@svg.svg');
                         }
+console.log("CL");
+
+console.log(item_id);
+console.log(status_data.checked_items[idx + 1]);
+                        $('div[data-item-id="' + item_id + '"] .loader-small').hide();
+                        $('div[data-item-id="' + status_data.checked_items[idx + 1] + '"] .loader-small').show();
                         items_checked.push(item_id);
                     });
                 }
@@ -828,32 +896,13 @@ if ($display_loading === true || $running_create === true || $running_delete) {
 
     }
 
-    function init_progress_bar(operation) {
+    function init_progress_checker(operation) {
-        /* Get progress bar */
+        clearInterval($("#hidden-js_timer").val());
-        var elements = $(".progress_bar");
-        $.each(elements, function (key, progress_bar) {
-            var elements_bar = $(progress_bar).attr("src").split("&");
-            var current_progress = null;
-            $.each(elements_bar, function (key, value) {
-                /* Get progress */
-                if (value.indexOf("progress=") != -1) {
-                    var tokens = value.split("=");
-                    current_progress = tokens[1];
-                }
-            });
 
-            /* Get Queue id */
-            var id_bar = $(progress_bar).attr("id");
-            clearInterval($("#hidden-js_timer_" + id_bar).val());
-
-            /* Only autorefresh incomplete bars */
-            if (current_progress < 100) {
         /* 1 seconds between ajax request */
-                var id_interval = setInterval("demo_load_progress('"+ id_bar +"','"+operation+"')", (1 * 1000));
+        var id_interval = setInterval("demo_load_progress('"+operation+"')", (1 * 1000));
         /* This will keep timer info */
-                $("#hidden-js_timer_" + id_bar).val(id_interval);
+        $("#hidden-js_timer").val(id_interval);
-            }
-        });
     }
 
     function update_demo_status_icon(itemId, iconName) {
@@ -861,6 +910,7 @@ if ($display_loading === true || $running_create === true || $running_delete) {
         var $icon = $listItem.find('.icon');
 
         $icon.attr('src', iconName);
+        $icon.show();
     }
 
     function print_error(item_id, error_msg) {
@@ -869,6 +919,6 @@ if ($display_loading === true || $running_create === true || $running_delete) {
         });
 
         // Append the new item to the corresponding error-list ul.
-        $('#load-info li[data-item-id="' + item_id + '"] .error-list').append(error_list_item);
+        $('#load-info div[data-item-id="' + item_id + '"] .error-list').append(error_list_item);
     }
 </script>

pandora_console/include/ajax/demo_data.ajax.php

@@ -118,6 +118,7 @@ if ($action === 'create_demo_data') {
     }
 
     $total_agents_to_create = (int) get_parameter('agents_num', 30);
+    //$total_agents_to_create = 10;
     $total_items_count = count($parsed_ini);
 
     if ($total_agents_to_create > 0) {
@@ -3438,7 +3439,31 @@ if ($action === 'cleanup_demo_data') {
     return;
 }
 
-if ($action === 'get_progress_bar') {
+if ($action === 'get_progress') {
+    $operation = (string) get_parameter('operation');
+
+    if ($operation === 'create') {
+        $current_progress_val = db_get_value_filter('value', 'tconfig', ['token' => 'demo_data_load_progress']);
+
+        if ($current_progress_val === false) {
+            $current_progress_val = 0;
+        }
+
+        $ret = ceil($current_progress_val);
+    } else if ($operation === 'cleanup') {
+        $demo_items_to_cleanup = (int) get_parameter('demo_items_to_cleanup');
+        $count_current_demo_items = db_get_value('count(*)', 'tdemo_data');
+        $current_progress_val = ((($demo_items_to_cleanup - $count_current_demo_items) * 100) / $demo_items_to_cleanup);
+        config_update_value('demo_data_delete_progress', $current_progress_val);
+        $ret = ceil($current_progress_val);
+    }
+
+    echo json_encode($ret);
+
+    return;
+}
+
+if ($action === 'get_load_status') {
     $operation = (string) get_parameter('operation');
 
     if ($operation === 'create') {

pandora_console/include/functions_ui.php

@@ -3636,7 +3636,11 @@ function ui_progress(
                             data = data_array[1];
                         }
                         try {
+                            if (isNaN(data) === true) {
                                 val = JSON.parse(data);
+                            } else {
+                                val = data;
+                            }
 
                             $("#'.$id.'").attr("data-label", val + " %");
                             $("#'.$id.'_progress").width(val+"%");

pandora_console/include/styles/pandora.css

@@ -1060,6 +1060,10 @@ select:-internal-list-box {
   padding: 10px;
 }
 
+.padding20 {
+  padding: 20px;
+}
+
 .margin-soft {
   margin: 0.3em 1em;
 }
@@ -13472,3 +13476,96 @@ tr.shown td.details-control {
   mask: url(../../images/minimizar.svg) no-repeat right / contain;
   -webkit-mask: url(../../images/minimizar.svg) no-repeat right / contain;
 }
+
+.table-info-light {
+  border-collapse: separate;
+  border-spacing: 0;
+  min-width: 350px;
+}
+
+.table-info-light tr td {
+  border-right: 1px solid #bbb;
+  border-bottom: 1px solid #bbb;
+  padding: 5px;
+}
+
+.table-info-light tr td:first-child {
+  border-left: 1px solid #bbb;
+  /*border-top: 1px solid #bbb;*/
+}
+
+.table-info-light tr td:last-child {
+  /*border-top: 1px solid #bbb;*/
+}
+
+.table-info-light tr {
+  text-align: left;
+  /*border-top: solid 1px #bbb;*/
+}
+
+.table-info-light tr:first-child td:first-child {
+  border-top: solid 1px #bbb;
+  border-top-left-radius: 6px;
+}
+
+.table-info-light tr:first-child td:last-child {
+  border-top: solid 1px #bbb;
+  border-top-right-radius: 6px;
+}
+
+.table-info-light tr:last-child td:first-child {
+  border-bottom-left-radius: 6px;
+}
+
+.table-info-light tr:last-child td:last-child {
+  border-bottom-right-radius: 6px;
+}
+
+.loader-small {
+  position: relative;
+  width: 40px;
+  height: 40px;
+  border-radius: 100%;
+  background: linear-gradient(#c0ccdc, #ffffff);
+  animation: animate 1.2s linear infinite;
+  margin: auto;
+}
+.loader-small span {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 100%;
+  background: linear-gradient(#c0ccdc, #ffffff);
+}
+.loader-small span:nth-child(1) {
+  filter: blur(1px);
+}
+.loader-small span:nth-child(2) {
+  filter: blur(2px);
+}
+.loader-small span:nth-child(3) {
+  filter: blur(3px);
+}
+.loader-small span:nth-child(4) {
+  filter: blur(4px);
+}
+.loader-small:after {
+  content: "";
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  right: 10px;
+  bottom: 10px;
+  background: white;
+  border: solid white 10px;
+  border-radius: 50%;
+}
+
+@keyframes animate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

pandora_console/views/tacticalView/view.php

@@ -5,57 +5,32 @@
         <span class="subtitle-welcome-message"><?php echo __('This is the latest data in your tactical view'); ?></span>
     </div>
 
-    <div class="row">
+
-        <div class="col-xl-6">
+
-            <div id="general-overview" class="pdd_5px">
                 <div class="container">
                     <div class="title">
-                        <?php echo $Overview->title; ?>
+                        <?php echo "dasdasd"; ?>
                     </div>
                     <div class="content br-t">
                         <div class="row">
                             <div class="col-12">
-                                <div class="row">
+                                <div>
-                                    <div class="col-4">
                                         <div class="padding10">
-                                            <span class="subtitle">
-                                                <?php echo __('Pandora FMS log size'); ?>
-                                            </span>
                                             <?php echo $Overview->getLogSizeStatus(); ?>
                                         </div>
                                 </div>
-                                    <div class="col-4 br-l">
-                                        <div class="padding10">
-                                            <span class="subtitle">
-                                                <?php echo __('Server status'); ?>
-                                            </span>
-                                            <?php echo $Overview->getServerStatus(); ?>
-                                        </div>
-                                    </div>
-                                    <div class="col-4 br-l">
-                                        <div class="padding10">
-                                            <span class="subtitle">
-                                                <?php echo __('System CPU Load'); ?>
-                                            </span>
-                                            <?php echo $Overview->getCPULoadGraph(); ?>
-                                        </div>
-                                    </div>
-                                </div>
-                                <?php if ($disableGeneralStatistics === false) : ?>
                                 <div class="br-t">
                                     <div class="padding10">
-                                            <span class="subtitle">
-                                                <?php echo __('License usage'); ?>
-                                            </span>
                                         <?php echo $Overview->getLicenseUsageGraph(); ?>
                                     </div>
                                 </div>
-                                <?php endif; ?>
-                            </div>
                             </div>
                         </div>
                     </div>
                 </div>
+
+
+                
             <div class="row flex-nowrap height_100p">
                 <div class="col-7 pdd_5px">
                     <div class="container">
@@ -145,7 +120,7 @@
                     </div>
                 </div>
             </div>
-        </div>
+
         <div class="col-xl-6">
             <div class="container mrgn_5px">
                 <div class="title">