From bfd00726bf687424bc93910ec2cadbe51aefb7ec Mon Sep 17 00:00:00 2001 From: Pablo Aragon Date: Mon, 17 Apr 2023 20:02:16 +0200 Subject: [PATCH] 9555-Header and tactical view --- pandora_console/images/arrow-d-mobile.svg | 17 ++ pandora_console/images/arrow-u-mobile.svg | 17 ++ pandora_console/images/go-back-mobile.svg | 19 ++ pandora_console/images/home-mobile.svg | 19 ++ .../include/functions_reporting.php | 88 ++++++- pandora_console/mobile/include/style/main.css | 237 +++++++++++++++++- pandora_console/mobile/operation/tactical.php | 18 +- 7 files changed, 387 insertions(+), 28 deletions(-) create mode 100644 pandora_console/images/arrow-d-mobile.svg create mode 100644 pandora_console/images/arrow-u-mobile.svg create mode 100644 pandora_console/images/go-back-mobile.svg create mode 100644 pandora_console/images/home-mobile.svg diff --git a/pandora_console/images/arrow-d-mobile.svg b/pandora_console/images/arrow-d-mobile.svg new file mode 100644 index 0000000000..6c0ea7b1a1 --- /dev/null +++ b/pandora_console/images/arrow-d-mobile.svg @@ -0,0 +1,17 @@ + + + + E5134209-ED99-4D42-AFFC-E210CA7C75CA@svg + Created with sketchtool. + + + + + + + + + + + + \ No newline at end of file diff --git a/pandora_console/images/arrow-u-mobile.svg b/pandora_console/images/arrow-u-mobile.svg new file mode 100644 index 0000000000..8dfb133adf --- /dev/null +++ b/pandora_console/images/arrow-u-mobile.svg @@ -0,0 +1,17 @@ + + + + 468CE642-FF47-4D9D-8D01-9137E4A42791@svg + Created with sketchtool. + + + + + + + + + + + + \ No newline at end of file diff --git a/pandora_console/images/go-back-mobile.svg b/pandora_console/images/go-back-mobile.svg new file mode 100644 index 0000000000..6760932b50 --- /dev/null +++ b/pandora_console/images/go-back-mobile.svg @@ -0,0 +1,19 @@ + + + + 27D252CA-B4D5-442E-ACDD-238B8E51751E@svg + Created with sketchtool. + + + + + + + + + + + + + + \ No newline at end of file diff --git a/pandora_console/images/home-mobile.svg b/pandora_console/images/home-mobile.svg new file mode 100644 index 0000000000..2e83a72cdc --- /dev/null +++ b/pandora_console/images/home-mobile.svg @@ -0,0 +1,19 @@ + + + + 13ED062F-1DD5-4B18-B16F-64D609ACA6F7@svg + Created with sketchtool. + + + + + + + + + + + + + + \ No newline at end of file diff --git a/pandora_console/include/functions_reporting.php b/pandora_console/include/functions_reporting.php index 9606544c89..a459dd5af2 100755 --- a/pandora_console/include/functions_reporting.php +++ b/pandora_console/include/functions_reporting.php @@ -12121,6 +12121,70 @@ function reporting_get_stats_indicators($data, $width=280, $height=20, $html=tru } +function reporting_get_stats_indicators_mobile($data, $width=280, $height=20, $html=true) +{ + $table_ind = html_get_predefined_table(); + + $servers = []; + $servers['all'] = (int) db_get_value('COUNT(id_server)', 'tserver'); + $servers['up'] = (int) servers_check_status(); + $servers['down'] = ($servers['all'] - $servers['up']); + if ($servers['all'] == 0) { + $servers['health'] = 0; + } else { + $servers['health'] = ($servers['up'] / ($servers['all'] / 100)); + } + + $return = []; + + $color = get_color_progress_mobile($servers['health']); + $return['server_health'] = [ + 'title' => __('Server health'), + 'graph' => ui_progress($servers['health'], '90%', '.8', $color, true, ' ', false), + ]; + + $color = get_color_progress_mobile($data['monitor_health']); + $return['monitor_health'] = [ + 'title' => __('Monitor health'), + 'graph' => ui_progress($data['monitor_health'], '90%', '.8', $color, true, ' ', false), + ]; + + $color = get_color_progress_mobile($data['module_sanity']); + $return['module_sanity'] = [ + 'title' => __('Module sanity'), + 'graph' => ui_progress($data['module_sanity'], '90%', '.8', $color, true, ' ', false), + ]; + + $color = get_color_progress_mobile($data['alert_level']); + $return['alert_level'] = [ + 'title' => __('Alert level'), + 'graph' => ui_progress($data['alert_level'], '90%', '.8', $color, true, ' ', false), + ]; + + return $return; +} + + +function get_color_progress_mobile($value) +{ + $color = ''; + + if ((int) $value > 66) { + $color = '#82B92E'; + } + + if ((int) $value < 66) { + $color = '#FCAB10'; + } + + if ((int) $value < 33) { + $color = '#ED474A'; + } + + return $color; +} + + function reporting_get_stats_alerts($data, $links=false) { global $config; @@ -13302,32 +13366,32 @@ function reporting_tiny_stats( if ($modern === true) { $out .= '
'; if (isset($fired_count) && $fired_count > 0) { - $out .= '
'; + $out .= '
'; $out .= ''.$fired_count.'
'; } if (isset($critical_count) && $critical_count > 0) { - $out .= '
'; + $out .= '
'; $out .= ''.$critical_count.'
'; } if (isset($warning_count) && $warning_count > 0) { - $out .= '
'; + $out .= '
'; $out .= ''.$warning_count.'
'; } if (isset($unknown_count) && $unknown_count > 0) { - $out .= '
'; + $out .= '
'; $out .= ''.$unknown_count.'
'; } if (isset($not_init_count) && $not_init_count > 0) { - $out .= '
'; + $out .= '
'; $out .= ''.$not_init_count.'
'; } if (isset($normal_count) && $normal_count > 0) { - $out .= '
'; + $out .= '
'; $out .= ''.$normal_count.'
'; } @@ -13336,27 +13400,27 @@ function reporting_tiny_stats( // Classic ones. $out .= ''.$total_count.''; if (isset($fired_count) && $fired_count > 0) { - $out .= ' '.$separator.' '.$fired_count.''; + $out .= ' '.$separator.' '.$fired_count.''; } if (isset($critical_count) && $critical_count > 0) { - $out .= ' '.$separator.' '.$critical_count.''; + $out .= ' '.$separator.' '.$critical_count.''; } if (isset($warning_count) && $warning_count > 0) { - $out .= ' '.$separator.' '.$warning_count.''; + $out .= ' '.$separator.' '.$warning_count.''; } if (isset($unknown_count) && $unknown_count > 0) { - $out .= ' '.$separator.' '.$unknown_count.''; + $out .= ' '.$separator.' '.$unknown_count.''; } if (isset($not_init_count) && $not_init_count > 0) { - $out .= ' '.$separator.' '.$not_init_count.''; + $out .= ' '.$separator.' '.$not_init_count.''; } if (isset($normal_count) && $normal_count > 0) { - $out .= ' '.$separator.' '.$normal_count.''; + $out .= ' '.$separator.' '.$normal_count.''; } $out .= ''; diff --git a/pandora_console/mobile/include/style/main.css b/pandora_console/mobile/include/style/main.css index 91a2cf23ca..aec356b6ba 100755 --- a/pandora_console/mobile/include/style/main.css +++ b/pandora_console/mobile/include/style/main.css @@ -28,7 +28,8 @@ :root { --primary-color: #14524f; --secondary-color: #ffffff; - --input-border: #c0ccdc; + --body-color: #f6f7fb; + --border-color: #e5e9ed; } @font-face { @@ -51,7 +52,7 @@ body { text-align: left; vertical-align: top; font-weight: 400; - font-family: "Lato"; + font-family: "Lato" !important; } .small { @@ -89,6 +90,7 @@ body { overflow: hidden; white-space: nowrap; outline: 0 !important; + line-height: 25px; } .ui-btn-inner { @@ -116,11 +118,6 @@ td.flex-center { padding-top: 10px; } -#tactical1 *, -#tactical2 * { - font-weight: bold; -} - #tactical1 a, #tactical2 a { font-weight: bold; @@ -1850,6 +1847,12 @@ table[id^="service-table-"] a strong { color: #000 !important; } +table#last-activity > tbody > tr, +table.tactical_bars > tbody > tr, +.tactical_set > table > tbody > tr { + background-color: var(--secondary-color) !important; +} + .mt15px { margin-top: 15px; margin-bottom: 15px; @@ -1863,3 +1866,223 @@ table[id^="service-table-"] a strong { padding: 2px 7px !important; margin-right: 5px !important; } + +div#main_page { + background-color: var(--body-color) !important; +} + +.ui-header.ui-bar-inherit.ui-header-fixed.slidedown { + height: 45px; + background-color: var(--secondary-color); +} + +.ui-page.ui-page-theme-a.ui-page-active { + padding-top: 45px !important; +} + +.header-button-right.ui-button.ui-shadow.ui-corner-all.ui-widget.ui-button-inherit { + color: var(--secondary-color); + background-color: var(--primary-color); + border-radius: 8px; + border-color: var(--secondary-color); + box-shadow: var(--secondary-color); + -webkit-box-shadow: #fff; + text-shadow: none; + margin-top: 5px !important; + display: flex; + align-items: center; +} + +.header-button-left.ui-button.ui-shadow.ui-corner-all.ui-widget.ui-button-inherit { + color: #95a3bf; + background-color: transparent; + border-color: var(--secondary-color); + box-shadow: var(--secondary-color); + -webkit-box-shadow: #fff; + text-shadow: none; + margin-top: 7px !important; + display: flex; + align-items: center; +} + +.ui-grid-a.ui-responsive { + background-color: var(--secondary-color); + border-radius: 8px; + border: 1px solid var(--border-color); +} + +.ui-button-icon-space { + margin-left: 2px; + margin-right: 2px; +} + +.ui-icon-back { + background-image: url(../../../images/go-back-mobile.svg) !important; +} + +.ui-icon-home { + background-image: url(../../../images/home-mobile.svg) !important; +} + +.ui-icon-arrow-d { + background-image: url(../../../images/arrow-d-mobile.svg) !important; +} + +.ui-icon-arrow-u { + background-image: url(../../../images/arrow-u-mobile.svg) !important; +} + +.ui-icon { + background-color: transparent !important; +} + +.ui-body.ui-body-d { + padding: 5px 0px; + margin: 0px; +} + +div.hr { + border-bottom: 1px solid var(--border-color); + width: 100%; + margin: 10px 0px; +} + +table, +fieldset { + padding: 0px 5px !important; +} + +table.tactical_bars tbody tr { + height: 20px; +} + +.progress_main { + height: 2.5em; + border: 2px solid #82b92e; + position: relative; + width: 100%; + display: inline-block; + display: flex; + border-radius: 4px; + line-height: 9pt; + font-size: 9pt; + border: 1px solid var(--border-color) !important; + background-color: var(--body-color); + margin-right: 40px !important; +} + +.progress_main_noborder { + height: 2.5em; + position: relative; + width: 100%; + display: inline-block; + display: flex; +} + +.progress_main:before { + content: attr(data-label); + position: absolute; + text-align: center; + left: 0; + right: 0; + margin-top: 0.2em; +} + +.progress { + width: 0%; + background: #82b92e; + height: 100%; + float: left; + border-radius: 4px; +} + +.tiny.tactical_bar { + width: 50%; +} + +.tactical_set > table { + width: 60% !important; +} + +.tactical_set > table > tbody > tr > td { + text-align: left !important; +} + +.tactical_set > table > tbody > tr > #table1-0-0, +.tactical_set > table > tbody > tr > #table1-0-3, +.tactical_set > table > tbody > tr > #table2-0-0, +.tactical_set > table > tbody > tr > #table2-0-3 { + width: 15% !important; +} + +.tactical_set > table > tbody > tr > #table1-0-1, +.tactical_set > table > tbody > tr > #table2-0-1 { + width: 40% !important; +} + +.tactical_set > table > tbody > tr > #table2-0-3 > div.alert_background_state { + margin: 0px !important; +} + +div#tactical2 .tactical_set > table { + width: 100% !important; +} + +.ui-collapsible.ui-collapsible-inset.ui-corner-all.ui-collapsible-themed-content, +.ui-collapsible.ui-collapsible-inset.ui-corner-all.ui-collapsible-themed-content.ui-collapsible-collapsed { + border: 1px solid var(--border-color); + border-radius: 8px; +} + +.ui-collapsible-heading-toggle.ui-button.ui-button-a.ui-mini, +.ui-collapsible-heading.ui-collapsible-heading-collapsed { + background-color: var(--secondary-color) !important; + border: 0px !important; + font-weight: 400; +} + +.ui-collapsible-content.ui-body-c { + padding: 0px; + margin: 0px; +} + +.ui-listview-item.ui-listview-item-static.ui-body-inherit.ui-first-child.ui-last-child { + padding: 0px; +} + +table#last-activity > tbody > tr:not(:last-child) { + border-bottom: 1px solid var(--border-color) !important; +} + +table#last-activity > tbody > tr { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + +table#last-activity > tbody > tr > td.cell_0 { + width: 10%; + padding-bottom: 2px !important; +} +table#last-activity > tbody > tr > td.cell_1 { + width: 75%; + max-width: 75%; + padding-bottom: 2px !important; +} +table#last-activity > tbody > tr > td.cell_2 { + width: 15%; + padding-bottom: 2px !important; +} +table#last-activity > tbody > tr > td.cell_3 { + width: 10%; + margin-left: 10%; + padding-top: 2px !important; +} + +table#last-activity > tbody > tr > td > b { + display: none; +} + +.muted { + color: #8a96a6 !important; +} diff --git a/pandora_console/mobile/operation/tactical.php b/pandora_console/mobile/operation/tactical.php index 3651187833..f12bb56120 100755 --- a/pandora_console/mobile/operation/tactical.php +++ b/pandora_console/mobile/operation/tactical.php @@ -164,8 +164,8 @@ class Tactical $data['mobile'] = true; - $formatted_data = reporting_get_stats_indicators($data, 100, 10, false); - $formatted_data_untiny = reporting_get_stats_indicators($data, 140, 15, false); + $formatted_data = reporting_get_stats_indicators_mobile($data, 100, 10, false); + $formatted_data_untiny = reporting_get_stats_indicators_mobile($data, 140, 15, false); $overview = ' @@ -193,8 +193,8 @@ class Tactical $agents_monitors = reporting_get_stats_agents_monitors($data); $alerts_stats = reporting_get_stats_alerts($data); - $overview .= "
\n".$agents_monitors; - $overview .= "
\n".$alerts_stats; + $overview .= "
\n".$agents_monitors; + $overview .= "
\n".$alerts_stats; $ui->contentGridAddCell($overview, 'tactical1'); @@ -216,6 +216,7 @@ class Tactical $ui->contentBeginCollapsible(__('Last activity')); $table = new Table(); + $table->id = 'last-activity'; $table->importFromHash($this->getLastActivity()); $ui->contentCollapsibleAddItem($table->getHTML()); $ui->contentEndCollapsible(); @@ -236,7 +237,7 @@ class Tactical } function ajax_load_status_pie() { - $('#status_pie').html('
".__('Loading...')."
'); + $('#status_pie').html('
".__('Loading...')."
'); var pie_width = $('#tactical2').width() * 0.9; @@ -346,10 +347,9 @@ class Tactical } $data[__('Action')] = ui_print_session_action_icon($session['accion'], true); - $data[__('User')] = $session_id_usuario; - $data[__('Date')] = human_time_comparation($session['utimestamp'], 'tiny'); - $data[__('Source IP')] = $session_ip_origen; - $data[__('Description')] = io_safe_output($session['descripcion']); + $data[__('User')] = $session_id_usuario.' - '.ui_print_truncate_text(io_safe_output($session['descripcion']), 40, false); + $data[__('Date')] = ''.human_time_comparation($session['utimestamp'], 'tiny').''; + $data[__('Source IP')] = ''.$session_ip_origen.''; $return[] = $data; }