From 2ba5dd767da9a2644292bdb64abff26f0375f811 Mon Sep 17 00:00:00 2001 From: "alejandro.campos@artica.es" Date: Fri, 26 Jan 2024 12:41:32 +0100 Subject: [PATCH] visual changes in demo view --- pandora_console/godmode/setup/demo.php | 310 ++++++++++-------- .../include/ajax/demo_data.ajax.php | 27 +- pandora_console/include/functions_ui.php | 6 +- pandora_console/include/styles/pandora.css | 97 ++++++ pandora_console/views/tacticalView/view.php | 49 +-- 5 files changed, 320 insertions(+), 169 deletions(-) diff --git a/pandora_console/godmode/setup/demo.php b/pandora_console/godmode/setup/demo.php index 62446d48a2..719e964fc2 100644 --- a/pandora_console/godmode/setup/demo.php +++ b/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) { - $table_load = new stdClass(); - $table_load->id = 'table-demo'; - $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%'; +if ($display_loading === true || $running_create === true || $running_delete === true) { + $operation = 'cleanup'; + $progress_val = (int) $current_progress_val_delete; - $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, - 20, - '', - 0, - false, - ((int) 0 !== -1) ? false : '#f3b200', + '100%', + '2.5', + '#C0CCDC', + true, + $progress_val.' %', [ - 'class' => 'progress_bar', - 'id' => 'progress_bar', - ] - ).html_print_input_hidden('js_timer_'.$operation['id'], 0, true); + 'page' => 'include/ajax/demo_data.ajax', + 'interval' => 1, + 'simple' => 1, + '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 = '
+
'.__('Progress').'
+
+
+
+
+
+ '.$load_mkp.' +
+
'; 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 = '
    '; foreach ($items_ids_text_map as $item_id => $item_text) { - $list_mkup .= '
  • '; - $list_mkup .= '
    '.html_print_image( + $table_mkup .= '
    +
    +
    +
    + + + + +
    +
    '.html_print_image( 'images/icono-unknown.png', true, [ 'title' => __('View'), - 'class' => 'icon w100p h100p', + 'class' => 'icon invisible w100p h100p', ] - ).'
    '; - $list_mkup .= 'Create demo '.$item_text.''; - $list_mkup .= '
      '; - $list_mkup .= '
    '; - $list_mkup .= '
    • '; + ).' +
+
+ Create demo '.$item_text.' +
    +
    +
    '; } - - $list_mkup .= ''; } - echo '
    '; - echo '
    '; - echo ''.__('Progress').''; - html_print_table($table_load); - echo $list_mkup; + $table_mkup .= ' + + + '; - echo '
    '; + echo ''; + + 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 ''; - echo '
    '; - echo ''.__('Active demo data summary').''; - html_print_table($table_summary); - echo '
    '; + $table_mkup = '
    +
    '.__('Active demo data summary').'
    +
    +
    +
    +
    +
    '.__('Agents').'
    +
    '.(($demo_agents_count > 0) ? $demo_agents_count : '-').'
    +
    +
    +
    +
    +
    '.__('Services').'
    +
    '.(($demo_services_count > 0) ? $demo_services_count : '-').'
    +
    +
    +
    +
    +
    +
    +
    '.__('Network maps').'
    +
    '.(($demo_nm_count > 0) ? $demo_nm_count : '-').'
    +
    +
    +
    +
    +
    '.__('GIS maps').'
    +
    '.(($demo_gis_count > 0) ? $demo_gis_count : '-').'
    +
    +
    +
    +
    +
    +
    +
    '.__('Custom graphs').'
    +
    '.(($demo_cg_count > 0) ? $demo_cg_count : '-').'
    +
    +
    +
    +
    +
    '.__('Custom reports').'
    +
    '.(($demo_rep_count > 0) ? $demo_rep_count : '-').'
    +
    +
    +
    +
    +
    +
    +
    '.__('Visual consoles').'
    +
    '.(($demo_vc_count > 0) ? $demo_vc_count : '-').'
    +
    +
    +
    +
    +
    '.__('Dashboards').'
    +
    '.(($demo_dashboards_count > 0) ? $demo_dashboards_count : '-').'
    +
    +
    +
    +
    +
    '; + + + + + + // echo '
    '; + //echo ''.__('Active demo data summary').''; + // html_print_table($table_summary); + //echo '
    '; + + 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 = ''; var agents_str = ''; - var display_progress_bar_cr = ; - - if (display_progress_bar_cr == 1) { - init_progress_bar('create'); - } - - var display_progress_bar_del = ; - - 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 = ''; var delete_data = ''; + var running_create = ''; + var 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) { - if (id_queue == null) - 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; - } - + function demo_load_progress(operation) { + console.log("dlp"); var params = {}; - params["action"] = "get_progress_bar"; + params["action"] = "get_load_status"; params["operation"] = operation; if (operation == 'cleanup') { var 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="); - rest_pos = src_code.indexOf("&", progress_tag_pos); + console.log("-----"); - pre_src = src_code.substr(0,progress_tag_pos); - post_src = src_code.substr(rest_pos); - - /* 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) + if (data.current_progress_val == 100) { + clearInterval($("#hidden-js_timer").val()); $('#action-btns-loading-done').show(); + } if (operation == 'create') { var status_data = data?.demo_data_load_status; - - status_data.checked_items?.forEach(function(item_id) { + console.log("!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"); + 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 ) { - status_data.errors[item_id].forEach(function(error_msg) { - update_demo_status_icon(item_id, 'images/fail_circle_big.png'); + update_demo_status_icon(item_id, 'images/status_error@svg.svg'); + + status_data.errors[item_id].forEach(function(error_msg) { 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) { - /* Get progress bar */ - 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]; - } - }); + function init_progress_checker(operation) { + clearInterval($("#hidden-js_timer").val()); - /* 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)); - /* This will keep timer info */ - $("#hidden-js_timer_" + id_bar).val(id_interval); - } - }); + /* 1 seconds between ajax request */ + var id_interval = setInterval("demo_load_progress('"+operation+"')", (1 * 1000)); + /* This will keep timer info */ + $("#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); } \ No newline at end of file diff --git a/pandora_console/include/ajax/demo_data.ajax.php b/pandora_console/include/ajax/demo_data.ajax.php index 5d9e1ee6b8..b3a006835f 100644 --- a/pandora_console/include/ajax/demo_data.ajax.php +++ b/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') { diff --git a/pandora_console/include/functions_ui.php b/pandora_console/include/functions_ui.php index d6078c56a7..799b2330ae 100755 --- a/pandora_console/include/functions_ui.php +++ b/pandora_console/include/functions_ui.php @@ -3636,7 +3636,11 @@ function ui_progress( data = data_array[1]; } try { - val = JSON.parse(data); + if (isNaN(data) === true) { + val = JSON.parse(data); + } else { + val = data; + } $("#'.$id.'").attr("data-label", val + " %"); $("#'.$id.'_progress").width(val+"%"); diff --git a/pandora_console/include/styles/pandora.css b/pandora_console/include/styles/pandora.css index 8a30f050be..12e1b2c474 100644 --- a/pandora_console/include/styles/pandora.css +++ b/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); + } +} diff --git a/pandora_console/views/tacticalView/view.php b/pandora_console/views/tacticalView/view.php index ae3eb3cc86..78cfbe4416 100644 --- a/pandora_console/views/tacticalView/view.php +++ b/pandora_console/views/tacticalView/view.php @@ -5,57 +5,32 @@ -
    -
    -
    + +
    - title; ?> +
    -
    -
    +
    - - - getLogSizeStatus(); ?>
    -
    -
    -
    - - - - getServerStatus(); ?> -
    -
    -
    -
    - - - - getCPULoadGraph(); ?> -
    +
    +
    +
    + getLicenseUsageGraph(); ?>
    - -
    -
    - - - - getLicenseUsageGraph(); ?> -
    -
    -
    -
    + + +
    @@ -145,7 +120,7 @@
    -
    +