From 2e424cef629db8a3bda9f46b5f35d76ae83a7685 Mon Sep 17 00:00:00 2001
From: Pablo Aragon <pablo.aragon@pandorafms.com>
Date: Wed, 7 Jun 2023 11:01:37 +0200
Subject: [PATCH 1/2] 10953-New styles network components

---
 .../manage_network_components_form.php        |   6 +-
 .../manage_network_components_form_common.php | 701 ++++++++------
 ...manage_network_components_form_network.php | 408 ++++----
 .../manage_network_components_form_plugin.php |  90 +-
 .../manage_network_components_form_wizard.php | 916 ++++++++++--------
 .../manage_network_components_form_wmi.php    |  77 +-
 .../include/javascript/pandora_modules.js     |   6 +-
 pandora_console/include/styles/pandora.css    |  26 +
 8 files changed, 1319 insertions(+), 911 deletions(-)

diff --git a/pandora_console/godmode/modules/manage_network_components_form.php b/pandora_console/godmode/modules/manage_network_components_form.php
index bc38f6b182..fc900dfbca 100644
--- a/pandora_console/godmode/modules/manage_network_components_form.php
+++ b/pandora_console/godmode/modules/manage_network_components_form.php
@@ -351,10 +351,12 @@ if ($id_component_type == COMPONENT_TYPE_WMI) {
     return;
 }
 
-echo '<form name="component" method="post">';
+echo '<form name="component" method="post" class="max_floating_element_size">';
 
 $table->width = '100%';
-$table->class = 'databox filters';
+$table->class = 'databox filters filter-table-adv';
+$table->style[0] = 'width: 50%; max-width: 50%; font-weight: bold;';
+$table->style[2] = 'width: 50%; max-width: 50%; font-weight: bold;';
 
 if (is_metaconsole() === true) {
     if ($id) {
diff --git a/pandora_console/godmode/modules/manage_network_components_form_common.php b/pandora_console/godmode/modules/manage_network_components_form_common.php
index 9af6f3911d..81e9cbad33 100644
--- a/pandora_console/godmode/modules/manage_network_components_form_common.php
+++ b/pandora_console/godmode/modules/manage_network_components_form_common.php
@@ -28,10 +28,10 @@ if (! check_acl($config['id_user'], 0, 'PM') && ! check_acl($config['id_user'],
 $table = new stdClass();
 $table->id = 'network_component';
 $table->width = '100%';
-$table->class = 'databox';
+$table->class = 'databox filters filter-table-adv';
 $table->style = [];
-$table->style[0] = 'font-weight: bold';
-$table->style[2] = 'font-weight: bold';
+$table->style[0] = 'width: 50%';
+$table->style[2] = 'width: 50%';
 $table->colspan = [];
 if (!enterprise_installed()) {
     $table->colspan[0][1] = 3;
@@ -43,8 +43,10 @@ $table_simple->colspan[8][1] = 4;
 $table_simple->colspan[9][1] = 4;
 $table->data = [];
 
-$table->data[0][0] = __('Name');
-$table->data[0][1] = html_print_input_text('name', $name, '', 55, 255, true);
+$table->data[0][0] = html_print_label_input_block(
+    __('Name'),
+    html_print_input_text('name', $name, '', 55, 255, true)
+);
 if (enterprise_installed()) {
     if (defined('METACONSOLE')) {
         $table->data[0][2] = __('Wizard level');
@@ -53,15 +55,19 @@ if (enterprise_installed()) {
             'advanced' => __('Advanced'),
         ];
         // TODO review help tips on meta.
-        $table->data[0][3] = html_print_select($wizard_levels, 'wizard_level', $wizard_level, '', '', -1, true, false, false).' ';
+        $table->data[0][1] = html_print_label_input_block(
+            __('Wizard level'),
+            html_print_select($wizard_levels, 'wizard_level', $wizard_level, '', '', -1, true, false, false).' '
+        );
         // .ui_print_help_icon('meta_access', true)
     } else {
-        $table->data[0][2] = '';
-        $table->data[0][3] = html_print_input_hidden('wizard_level', $wizard_level, true);
+        $table->data[0][1] = html_print_label_input_block(
+            '',
+            html_print_input_hidden('wizard_level', $wizard_level, true)
+        );
     }
 }
 
-$table->data[1][0] = __('Type').' '.ui_print_help_icon($help_type, true, '', 'images/help_green.png', '', 'module_type_help');
 $sql = sprintf(
     'SELECT id_tipo, descripcion
 	FROM ttipo_modulo
@@ -69,22 +75,25 @@ $sql = sprintf(
 	ORDER BY id_tipo ASC',
     implode(',', $categories)
 );
-$table->data[1][1] = html_print_select_from_sql(
-    $sql,
-    'type',
-    $type,
-    'javascript: type_change();',
-    '',
-    '',
-    true,
-    false,
-    false,
-    false,
-    true,
-    false,
-    false,
-    false,
-    0
+$table->data[1][0] = html_print_label_input_block(
+    __('Type').' '.ui_print_help_icon($help_type, true, '', 'images/help_green.png', '', 'module_type_help'),
+    html_print_select_from_sql(
+        $sql,
+        'type',
+        $type,
+        'javascript: type_change();',
+        '',
+        '',
+        true,
+        false,
+        false,
+        false,
+        true,
+        false,
+        false,
+        false,
+        0
+    )
 );
 
 // Store the relation between id and name of the types on a hidden field
@@ -102,50 +111,53 @@ foreach ($type_names as $tn) {
     $type_names_hash[$tn['id_tipo']] = $tn['nombre'];
 }
 
-$table->data[1][1] .= html_print_input_hidden(
-    'type_names',
-    base64_encode(json_encode($type_names_hash)),
-    true
+$table->data[1][1] = html_print_label_input_block(
+    __('Module group'),
+    html_print_input_hidden(
+        'type_names',
+        base64_encode(json_encode($type_names_hash)),
+        true
+    ).html_print_select_from_sql(
+        'SELECT id_mg, name
+        FROM tmodule_group ORDER BY name',
+        'id_module_group',
+        $id_module_group,
+        '',
+        '',
+        '',
+        true,
+        false,
+        false,
+        false,
+        true,
+        false,
+        false,
+        false,
+        0
+    )
 );
 
-$table->data[1][2] = __('Module group');
-$table->data[1][3] = html_print_select_from_sql(
-    'SELECT id_mg, name
-	FROM tmodule_group ORDER BY name',
-    'id_module_group',
-    $id_module_group,
-    '',
-    '',
-    '',
-    true,
-    false,
-    false,
-    false,
-    true,
-    false,
-    false,
-    false,
-    0
+$table->data[2][0] = html_print_label_input_block(
+    __('Group'),
+    html_print_select(
+        network_components_get_groups(),
+        'id_group',
+        $id_group,
+        '',
+        '',
+        '',
+        true,
+        false,
+        false
+    )
 );
 
-$table->data[2][0] = __('Group');
-$table->data[2][1] = html_print_select(
-    network_components_get_groups(),
-    'id_group',
-    $id_group,
-    '',
-    '',
-    '',
-    true,
-    false,
-    false
+$table->data[2][1] = html_print_label_input_block(
+    __('Interval'),
+    html_print_extended_select_for_time('module_interval', $module_interval, '', '', '0', false, true)
 );
-$table->data[2][2] = __('Interval');
-$table->data[2][3] = html_print_extended_select_for_time('module_interval', $module_interval, '', '', '0', false, true);
 
-$table->data[3][0] = __('Dynamic Interval');
-$table->data[3][1] = html_print_extended_select_for_time('dynamic_interval', $dynamic_interval, '', 'None', '0', 10, true, 'width:150px', false);
-$table->data[3][1] .= '<a onclick=advanced_option_dynamic()>'.html_print_image(
+$dynamic_interval_img = '<a onclick="advanced_option_dynamic()" class="mrgn_lft_5px mrgn_top_6px">'.html_print_image(
     'images/cog.png',
     true,
     [
@@ -154,6 +166,22 @@ $table->data[3][1] .= '<a onclick=advanced_option_dynamic()>'.html_print_image(
     ]
 ).'</a>';
 
+$table->data[3][0] = html_print_label_input_block(
+    __('Dynamic Interval'),
+    '<div class="inline_flex align-center w100p">'.html_print_extended_select_for_time(
+        'dynamic_interval',
+        $dynamic_interval,
+        '',
+        'None',
+        '0',
+        10,
+        true,
+        'width: 200px;',
+        false,
+        'w100p'
+    ).$dynamic_interval_img.'</div>'
+);
+
 $table->data[3][2] = '<span><em>'.__('Dynamic Min. ').'</em>';
 $table->data[3][2] .= html_print_input_text('dynamic_min', $dynamic_min, '', 10, 255, true);
 $table->data[3][2] .= '<br /><em>'.__('Dynamic Max.').'</em>';
@@ -161,206 +189,286 @@ $table->data[3][2] .= html_print_input_text('dynamic_max', $dynamic_max, '', 10,
 $table->data[3][3] = '<span><em>'.__('Dynamic Two Tailed: ').'</em>';
 $table->data[3][3] .= html_print_checkbox('dynamic_two_tailed', 1, $dynamic_two_tailed, true);
 
-$table->data[4][0] = __('Warning status');
-$table->data[4][1] = '<span id="minmax_warning"><em>'.__('Min.').'&nbsp;</em>&nbsp;';
-$table->data[4][1] .= html_print_input_text(
-    'min_warning',
-    $min_warning,
+$table->data[3][1] = html_print_label_input_block(
     '',
-    5,
-    15,
-    true
-);
-$table->data[4][1] .= '<br /><em>'.__('Max.').'</em>&nbsp;';
-$table->data[4][1] .= html_print_input_text(
-    'max_warning',
-    $max_warning,
-    '',
-    5,
-    15,
-    true
-).'</span>';
-$table->data[4][1] .= '<span id="string_warning"><em>'.__('Str.').' </em>&nbsp;';
-$table->data[4][1] .= html_print_input_text(
-    'str_warning',
-    $str_warning,
-    '',
-    5,
-    1024,
-    true
-).'</span>';
-$table->data[4][1] .= '<div id="warning_inverse"><em>'.__('Inverse interval').'</em>';
-$table->data[4][1] .= html_print_checkbox('warning_inverse', 1, $warning_inverse, true);
-$table->data[4][1] .= '</div>';
-
-$table->data[4][1] .= '<div id="percentage_warning"><em>'.__('Percentage').'</em>';
-$table->data[4][1] .= ui_print_help_tip('Defines threshold as a percentage of value decrease/increment', true);
-$table->data[4][1] .= html_print_checkbox('percentage_warning', 1, $percentage_warning, true);
-$table->data[4][1] .= '</div>';
-
-$table->data[5][0] .= '<span id="warning_time">'.__('Change to critical status after');
-$table->data[5][1] .= html_print_input_text(
-    'warning_time',
-    $warning_time,
-    '',
-    5,
-    15,
-    true
-);
-$table->data[5][1] .= '&nbsp;&nbsp;<b>'.__('intervals in warning status.').'</b>';
-
-$table->data[4][2] = '<svg id="svg_dinamic" width="500" height="300"> </svg>';
-$table->colspan[4][2] = 2;
-$table->rowspan[4][2] = 3;
-
-$table->data[6][0] = __('Critical status');
-$table->data[6][1] = '<span id="minmax_critical"><em>'.__('Min.').'&nbsp;</em>&nbsp;';
-$table->data[6][1] .= html_print_input_text(
-    'min_critical',
-    $min_critical,
-    '',
-    5,
-    15,
-    true
-);
-$table->data[6][1] .= '<br /><em>'.__('Max.').'</em>&nbsp;';
-$table->data[6][1] .= html_print_input_text(
-    'max_critical',
-    $max_critical,
-    '',
-    5,
-    15,
-    true
-).'</span>';
-$table->data[6][1] .= '<span id="string_critical"><em>'.__('Str.').' </em>&nbsp;';
-$table->data[6][1] .= html_print_input_text(
-    'str_critical',
-    $str_critical,
-    '',
-    5,
-    1024,
-    true
-).'</span>';
-$table->data[6][1] .= '<div id="critical_inverse"><em>'.__('Inverse interval').'</em>';
-$table->data[6][1] .= html_print_checkbox('critical_inverse', 1, $critical_inverse, true);
-$table->data[6][1] .= '</div>';
-
-$table->data[6][1] .= '<div id="percentage_critical"><em>'.__('Percentage').'</em>';
-$table->data[6][1] .= ui_print_help_tip('Defines threshold as a percentage of value decrease/increment', true);
-$table->data[6][1] .= html_print_checkbox('percentage_critical', 1, $percentage_critical, true);
-$table->data[6][1] .= '</div>';
-
-
-$table->data[7][0] = __('FF threshold');
-$table->colspan[7][1] = 3;
-
-$table->data[7][1] = __('Keep counters');
-$table->data[7][1] .= html_print_checkbox(
-    'ff_type',
-    1,
-    $ff_type,
-    true
-).'<br />';
-
-$table->data[7][1] .= html_print_radio_button(
-    'each_ff',
-    0,
-    '',
-    $each_ff,
-    true
-).' '.__('All state changing').' : ';
-
-$table->data[7][1] .= html_print_input_text(
-    'ff_event',
-    $ff_event,
-    '',
-    5,
-    15,
-    true
-).'<br />';
-$table->data[7][1] .= html_print_radio_button(
-    'each_ff',
-    1,
-    '',
-    $each_ff,
-    true
-).' '.__('Each state changing').' : ';
-$table->data[7][1] .= __('To normal');
-$table->data[7][1] .= html_print_input_text(
-    'ff_event_normal',
-    $ff_event_normal,
-    '',
-    5,
-    15,
-    true
-).' ';
-$table->data[7][1] .= __('To warning');
-$table->data[7][1] .= html_print_input_text(
-    'ff_event_warning',
-    $ff_event_warning,
-    '',
-    5,
-    15,
-    true
-).' ';
-$table->data[7][1] .= __('To critical');
-$table->data[7][1] .= html_print_input_text(
-    'ff_event_critical',
-    $ff_event_critical,
-    '',
-    5,
-    15,
-    true
+    '<div class="inline_flex align-center">'.html_print_label_input_block(
+        __('Dynamic Min. '),
+        html_print_input_text('dynamic_min', $dynamic_min, '', 10, 255, true, false, false, '', 'w100p mrgn_top_10px'),
+        [
+            'label_class' => 'font-title-font',
+            'div_class'   => 'mrgn_right_10px',
+        ]
+    ).html_print_label_input_block(
+        __('Dynamic Max. '),
+        html_print_input_text('dynamic_max', $dynamic_max, '', 10, 255, true, false, false, '', 'w100p mrgn_top_10px'),
+        [
+            'label_class' => 'font-title-font',
+            'div_class'   => 'mrgn_right_10px',
+        ]
+    ).html_print_label_input_block(
+        __('Dynamic Two Tailed: '),
+        html_print_checkbox('dynamic_two_tailed', 1, $dynamic_two_tailed, true, false, '', false, 'class="mrgn_top_10px"'),
+        [
+            'label_class' => 'font-title-font',
+            'div_class'   => 'mrgn_right_10px',
+        ]
+    ).'</div>',
+    ['label_class' => 'mrgn_btn_0']
 );
 
-$table->data[8][0] = __('Historical data');
-$table->data[8][1] = html_print_checkbox('history_data', 1, $history_data, true);
-
-$table->data[9][0] = __('Min. Value');
-$table->data[9][1] = html_print_input_text('min', $min, '', 5, 15, true).' '.ui_print_help_tip(__('Any value below this number is discarted'), true);
-$table->data[9][2] = __('Max. Value');
-$table->data[9][3] = html_print_input_text('max', $max, '', 5, 15, true).' '.ui_print_help_tip(__('Any value over this number is discarted'), true);
-$table->data[10][0] = __('Unit');
-$table->data[10][1] = html_print_input_text('unit', $unit, '', 12, 25, true);
-
-$table->data[10][2] = __('Discard unknown events');
-$table->data[10][3] = html_print_checkbox(
-    'throw_unknown_events',
-    1,
-    network_components_is_disable_type_event(($id === 0) ? false : $id, EVENTS_GOING_UNKNOWN),
-    true
+$table->data[4][0] = html_print_label_input_block(
+    __('Warning status'),
+    '<div class="inline_flex align-center mrgn_top_10px"><div id="minmax_warning" class="inline_flex align-center">'.html_print_label_input_block(
+        __('Min.'),
+        html_print_input_text(
+            'min_warning',
+            $min_warning,
+            '',
+            5,
+            15,
+            true
+        ),
+        [
+            'label_class' => 'font-title-font',
+            'div_class'   => 'mrgn_right_10px flex flex_column',
+        ]
+    ).html_print_label_input_block(
+        __('Max.'),
+        html_print_input_text(
+            'max_warning',
+            $max_warning,
+            '',
+            5,
+            15,
+            true
+        ).'</div>',
+        [
+            'label_class' => 'font-title-font',
+            'div_class'   => 'mrgn_right_10px flex flex_column',
+        ]
+    ).'<div id="string_warning" class="inline_flex align-center">'.html_print_label_input_block(
+        __('Str.'),
+        html_print_input_text(
+            'str_warning',
+            $str_warning,
+            '',
+            5,
+            1024,
+            true
+        ).'</div>',
+        [
+            'label_class' => 'font-title-font',
+            'div_class'   => 'mrgn_right_10px flex flex_column',
+        ]
+    ).'<div id="warning_inverse" class="inline_flex align-center">'.html_print_label_input_block(
+        __('Inverse interval'),
+        html_print_checkbox('warning_inverse', 1, $warning_inverse, true).'</div>',
+        [
+            'label_class' => 'font-title-font',
+            'div_class'   => 'mrgn_right_10px flex flex_column',
+        ]
+    ).'<div id="percentage_warning" class="inline_flex align-center">'.html_print_label_input_block(
+        __('Percentage').ui_print_help_tip(__('Defines threshold as a percentage of value decrease/increment'), true),
+        html_print_checkbox('percentage_warning', 1, $percentage_warning, true).'</div>',
+        [
+            'label_class' => 'font-title-font',
+            'div_class'   => 'mrgn_right_10px flex flex_column',
+        ]
+    ).'</div></div>',
+    ['label_class' => 'mrgn_btn_0']
 );
 
-$table->data[11][0] = __('Critical instructions').ui_print_help_tip(__('Instructions when the status is critical'), true);
-$table->data[11][1] = html_print_textarea('critical_instructions', 2, 65, $critical_instructions, '', true);
-$table->colspan[11][1] = 3;
+$table->data[4][1] = '<svg id="svg_dinamic" width="500" height="300"> </svg>';
+$table->rowspan[4][1] = 3;
 
-$table->data[12][0] = __('Warning instructions').ui_print_help_tip(__('Instructions when the status is warning'), true);
-$table->data[12][1] = html_print_textarea('warning_instructions', 2, 65, $warning_instructions, '', true);
-$table->colspan[12][1] = 3;
+$table->data[5][0] = html_print_label_input_block(
+    __('Change to critical status after'),
+    '<div class="inline_flex align-center w100p">'.html_print_input_text(
+        'warning_time',
+        $warning_time,
+        '',
+        5,
+        15,
+        true
+    ).'&nbsp;&nbsp;<b>'.__('intervals in warning status.').'</b>'.'</div>',
+    ['div_id' => 'warning_time']
+);
 
-$table->data[13][0] = __('Unknown instructions').ui_print_help_tip(__('Instructions when the status is unknown'), true);
-$table->data[13][1] = html_print_textarea('unknown_instructions', 2, 65, $unknown_instructions, '', true);
-$table->colspan[13][1] = 3;
+$table->data[6][0] = html_print_label_input_block(
+    __('Critical status'),
+    '<div class="inline_flex align-center mrgn_top_10px"><div id="minmax_critical" class="inline_flex align-center">'.html_print_label_input_block(
+        __('Min.'),
+        html_print_input_text(
+            'min_critical',
+            $min_critical,
+            '',
+            5,
+            15,
+            true
+        ),
+        [
+            'label_class' => 'font-title-font',
+            'div_class'   => 'mrgn_right_10px flex flex_column',
+        ]
+    ).html_print_label_input_block(
+        __('Max.'),
+        html_print_input_text(
+            'max_critical',
+            $max_critical,
+            '',
+            5,
+            15,
+            true
+        ).'</div>',
+        [
+            'label_class' => 'font-title-font',
+            'div_class'   => 'mrgn_right_10px flex flex_column',
+        ]
+    ).'<div id="string_critical" class="inline_flex align-center">'.html_print_label_input_block(
+        __('Str.'),
+        html_print_input_text(
+            'str_critical',
+            $str_critical,
+            '',
+            5,
+            1024,
+            true
+        ).'</div>',
+        [
+            'label_class' => 'font-title-font',
+            'div_class'   => 'mrgn_right_10px flex flex_column',
+        ]
+    ).'<div id="critical_inverse" class="inline_flex align-center">'.html_print_label_input_block(
+        __('Inverse interval'),
+        html_print_checkbox('critical_inverse', 1, $critical_inverse, true).'</div>',
+        [
+            'label_class' => 'font-title-font',
+            'div_class'   => 'mrgn_right_10px flex flex_column',
+        ]
+    ).'<div id="percentage_critical" class="inline_flex align-center">'.html_print_label_input_block(
+        __('Percentage'),
+        html_print_checkbox('percentage_critical', 1, $percentage_warning, true).'</div>',
+        [
+            'label_class' => 'font-title-font',
+            'div_class'   => 'mrgn_right_10px flex flex_column',
+        ]
+    ).'</div></div>',
+    ['label_class' => 'mrgn_btn_0']
+);
 
-$table->data[14][0] = __('Description');
-$table->data[14][1] = html_print_textarea('description', 2, 65, $description, '', true);
-$table->colspan[14][1] = 3;
+$table->colspan[7][0] = 2;
+$table->data[7][0] = html_print_label_input_block(
+    __('FF threshold'),
+    '<div class="inline_flex align-center w100p">'.__('Keep counters').'&nbsp;&nbsp;'.html_print_checkbox(
+        'ff_type',
+        1,
+        $ff_type,
+        true
+    ).'</div><div class="inline_flex align-center w100p">'.html_print_radio_button('each_ff', 0, '', $each_ff, true).' <b>'.__('All state changing').' :&nbsp;&nbsp;</b>'.html_print_input_text(
+        'ff_event',
+        $ff_event,
+        '',
+        5,
+        15,
+        true
+    ).'<span class="w30px">&nbsp;</span>'.html_print_radio_button(
+        'each_ff',
+        1,
+        '',
+        $each_ff,
+        true
+    ).' <b>'.__('Each state changing').' :&nbsp;&nbsp;</b>'.__('To normal').html_print_input_text(
+        'ff_event_normal',
+        $ff_event_normal,
+        '',
+        5,
+        15,
+        true
+    ).' '.__('To warning').html_print_input_text(
+        'ff_event_warning',
+        $ff_event_warning,
+        '',
+        5,
+        15,
+        true
+    ).' '.__('To critical').html_print_input_text(
+        'ff_event_critical',
+        $ff_event_critical,
+        '',
+        5,
+        15,
+        true
+    ).'</div>',
+    ['div_id' => 'warning_time']
+);
 
-$next_row = 15;
+$table->data[8][0] = html_print_label_input_block(
+    __('Historical data'),
+    html_print_checkbox('history_data', 1, $history_data, true)
+);
+
+$table->data[9][0] = html_print_label_input_block(
+    __('Min. Value'),
+    html_print_input_text('min', $min, '', 5, 15, true)
+);
+
+$table->data[9][1] = html_print_label_input_block(
+    __('Max. Value').' '.ui_print_help_tip(__('Any value over this number is discarted'), true),
+    html_print_input_text('max', $max, '', 5, 15, true)
+);
+
+$table->data[10][0] = html_print_label_input_block(
+    __('Unit'),
+    html_print_input_text('unit', $unit, '', 12, 25, true)
+);
+
+$table->data[10][1] = html_print_label_input_block(
+    __('Discard unknown events'),
+    html_print_checkbox(
+        'throw_unknown_events',
+        1,
+        network_components_is_disable_type_event(($id === 0) ? false : $id, EVENTS_GOING_UNKNOWN),
+        true
+    )
+);
+
+$table->data[11][0] = html_print_label_input_block(
+    __('Critical instructions').ui_print_help_tip(__('Instructions when the status is critical'), true),
+    html_print_textarea('critical_instructions', 2, 65, $critical_instructions, '', true)
+);
+
+$table->data[11][1] = html_print_label_input_block(
+    __('Warning instructions').ui_print_help_tip(__('Instructions when the status is warning'), true),
+    html_print_textarea('warning_instructions', 2, 65, $warning_instructions, '', true)
+);
+
+$table->data[12][0] = html_print_label_input_block(
+    __('Unknown instructions').ui_print_help_tip(__('Instructions when the status is unknown'), true),
+    html_print_textarea('unknown_instructions', 2, 65, $unknown_instructions, '', true)
+);
+
+$table->data[12][1] = html_print_label_input_block(
+    __('Description'),
+    html_print_textarea('description', 2, 65, $description, '', true)
+);
+
+$next_row = 13;
 
 if (check_acl($config['id_user'], 0, 'PM')) {
-    $table->data[$next_row][0] = __('Category');
-    $table->data[$next_row][1] = html_print_select(categories_get_all_categories('forselect'), 'id_category', $id_category, '', __('None'), 0, true);
-    $table->data[$next_row][2] = $table->data[$next_row][3] = $table->data[$next_row][4] = '';
+    $table->data[$next_row][0] = html_print_label_input_block(
+        __('Category'),
+        html_print_select(categories_get_all_categories('forselect'), 'id_category', $id_category, '', __('None'), 0, true)
+    );
+    $table->data[$next_row][1] = '';
     $next_row++;
 } else {
     // Store in a hidden field if is not visible to avoid delete the value
-    $table->data[12][1] .= html_print_input_hidden('id_category', $id_category, true);
+    $table->data[$next_row][0] = html_print_label_input_block(
+        '',
+        html_print_input_hidden('id_category', $id_category, true)
+    );
 }
 
-$table->data[$next_row][0] = __('Tags');
-
 if ($tags == '') {
     $tags_condition_not = '1 = 1';
     $tags_condition_in = '1 = 0';
@@ -370,43 +478,58 @@ if ($tags == '') {
     $tags_condition_in = "name IN ('".$tags."')";
 }
 
-$table->data[$next_row][1] = '<b>'.__('Tags available').'</b><br>';
-$table->data[$next_row][1] .= html_print_select_from_sql(
-    "SELECT name AS name1, name AS name2
-	FROM ttag 
-	WHERE $tags_condition_not
-	ORDER BY name",
-    'id_tag_available[]',
-    '',
-    '',
-    '',
-    '',
-    true,
-    true,
-    false,
-    false,
-    'width: 200px',
-    '5'
-);
-$table->data[$next_row][2] = html_print_image('images/darrowright.png', true, ['id' => 'right', 'title' => __('Add tags to module'), 'class' => 'invert_filter']);
-$table->data[$next_row][2] .= '<br><br><br><br>'.html_print_image('images/darrowleft.png', true, ['id' => 'left', 'title' => __('Delete tags to module'), 'class' => 'invert_filter']);
-$table->data[$next_row][3] = '<b>'.__('Tags selected').'</b><br>';
-$table->data[$next_row][3] .= html_print_select_from_sql(
-    "SELECT name AS name1, name AS name2
-	FROM ttag 
-	WHERE $tags_condition_in
-	ORDER BY name",
-    'id_tag_selected[]',
-    '',
-    '',
-    '',
-    '',
-    true,
-    true,
-    false,
-    false,
-    'width: 200px',
-    '5'
+$table->colspan[$next_row][0] = 2;
+$table->data[$next_row][0] = html_print_label_input_block(
+    __('Tags'),
+    '<div class="inline_flex align-center flex-space-around w100p"><div><b>'.__('Tags available').'</b><br>'.html_print_select_from_sql(
+        "SELECT name AS name1, name AS name2
+        FROM ttag
+        WHERE $tags_condition_not
+            ORDER BY name",
+        'id_tag_available[]',
+        '',
+        '',
+        '',
+        '',
+        true,
+        true,
+        false,
+        false,
+        'width: 200px',
+        '5'
+    ).'</div><div>'.html_print_image(
+        'images/darrowright.png',
+        true,
+        [
+            'id'    => 'right',
+            'title' => __('Add tags to module'),
+            'class' => 'invert_filter',
+        ]
+    ).'<br><br><br><br>'.html_print_image(
+        'images/darrowleft.png',
+        true,
+        [
+            'id'    => 'left',
+            'title' => __('Delete tags to module'),
+            'class' => 'invert_filter',
+        ]
+    ).'</div><div><b>'.__('Tags selected').'</b><br>'.html_print_select_from_sql(
+        "SELECT name AS name1, name AS name2
+        FROM ttag
+        WHERE $tags_condition_in
+            ORDER BY name",
+        'id_tag_selected[]',
+        '',
+        '',
+        '',
+        '',
+        true,
+        true,
+        false,
+        false,
+        'width: 200px',
+        '5'
+    ).'</div></div>'
 );
 
 $next_row++;
@@ -685,12 +808,12 @@ $next_row++;
 
     //Dynamic_options_advance;
     function advanced_option_dynamic() {
-        if($('#network_component-3-2').is(":visible")){
-            $('#network_component-3-2').hide();
-            $('#network_component-3-3').hide();
+        if($('#network_component-3-1').is(":visible")){
+            $('#network_component-3-1').hide();
+            $('#network_component-3-1').hide();
         } else {
-            $('#network_component-3-2').show();
-            $('#network_component-3-3').show();
+            $('#network_component-3-1').show();
+            $('#network_component-3-1').show();
         }
     }
 
diff --git a/pandora_console/godmode/modules/manage_network_components_form_network.php b/pandora_console/godmode/modules/manage_network_components_form_network.php
index f5b0e3a4fb..79ff01eeca 100755
--- a/pandora_console/godmode/modules/manage_network_components_form_network.php
+++ b/pandora_console/godmode/modules/manage_network_components_form_network.php
@@ -50,226 +50,280 @@ $snmp_versions['2c'] = 'v. 2c';
 $snmp_versions['3'] = 'v. 3';
 
 $data = [];
-$data[0] = __('Target IP');
-$data[1] = html_print_input_text_extended(
-    'target_ip',
-    $target_ip,
-    'target_ip',
-    '',
-    30,
-    10000,
-    '',
-    '',
-    '',
-    true
+$data[0] = html_print_label_input_block(
+    __('Target IP'),
+    html_print_input_text_extended(
+        'target_ip',
+        $target_ip,
+        'target_ip',
+        '',
+        30,
+        10000,
+        '',
+        '',
+        '',
+        true
+    )
 );
-$data[2] = __('SNMP version');
-$data[3] = html_print_select(
-    $snmp_versions,
-    'snmp_version',
-    $snmp_version,
-    '',
-    '',
-    '',
-    true,
-    false,
-    false,
-    ''
+
+$data[1] = html_print_label_input_block(
+    __('SNMP version'),
+    html_print_select(
+        $snmp_versions,
+        'snmp_version',
+        $snmp_version,
+        '',
+        '',
+        '',
+        true,
+        false,
+        false,
+        ''
+    )
 );
 
 push_table_row($data, 'row1');
 
 $data = [];
-$data[0] = __('Port');
-$data[1] = html_print_input_text('tcp_port', $tcp_port, '', 5, 20, true);
-$data[2] = __('SNMP community');
-$data[3] = html_print_input_text(
-    'snmp_community',
-    $snmp_community,
-    '',
-    15,
-    60,
-    true
+$data[0] = html_print_label_input_block(
+    __('Port'),
+    html_print_input_text('tcp_port', $tcp_port, '', 5, 20, true)
+);
+
+$data[1] = html_print_label_input_block(
+    __('SNMP community'),
+    html_print_input_text(
+        'snmp_community',
+        $snmp_community,
+        '',
+        15,
+        60,
+        true
+    )
 );
 
 push_table_row($data, 'snmp_port');
 
 $data = [];
-$data[0] = __('SNMP Enterprise String');
-$data[1] = html_print_input_text(
-    'snmp_oid',
-    $snmp_oid,
-    '',
-    30,
-    400,
-    true
+$data[0] = html_print_label_input_block(
+    __('SNMP Enterprise String'),
+    html_print_input_text(
+        'snmp_oid',
+        $snmp_oid,
+        '',
+        30,
+        400,
+        true
+    )
 );
-$data[2] = __('Auth password');
-$data[3] = html_print_input_password(
-    'snmp3_auth_pass',
-    $snmp3_auth_pass,
-    '',
-    15,
-    60,
-    true
-);
-$data[3] .= html_print_input_hidden_extended(
-    'active_snmp_v3',
-    0,
-    'active_snmp_v3_mncfn',
-    true
+
+$data[1] = html_print_label_input_block(
+    __('Auth password'),
+    html_print_input_password(
+        'snmp3_auth_pass',
+        $snmp3_auth_pass,
+        '',
+        15,
+        60,
+        true,
+        false,
+        false,
+        '',
+        'off',
+        true
+    ).html_print_input_hidden_extended(
+        'active_snmp_v3',
+        0,
+        'active_snmp_v3_mncfn',
+        true
+    )
 );
 
 push_table_row($data, 'snmp_2');
 
 
 $data = [];
-$data[0] = __('Auth user');
-$data[1] = html_print_input_text(
-    'snmp3_auth_user',
-    $snmp3_auth_user,
-    '',
-    15,
-    60,
-    true
+$data[0] = html_print_label_input_block(
+    __('Auth user'),
+    html_print_input_text(
+        'snmp3_auth_user',
+        $snmp3_auth_user,
+        '',
+        15,
+        60,
+        true
+    )
 );
-$data[2] = __('Privacy pass');
-$data[3] = html_print_input_password(
-    'snmp3_privacy_pass',
-    $snmp3_privacy_pass,
-    '',
-    15,
-    60,
-    true
+
+$data[1] = html_print_label_input_block(
+    __('Privacy pass'),
+    html_print_input_password(
+        'snmp3_privacy_pass',
+        $snmp3_privacy_pass,
+        '',
+        15,
+        60,
+        true,
+        false,
+        false,
+        '',
+        'off',
+        true
+    )
 );
 
 push_table_row($data, 'field_snmpv3_row1');
 
 $data = [];
-$data[0] = __('Privacy method');
-$data[1] = html_print_select(
-    [
-        'DES' => __('DES'),
-        'AES' => __('AES'),
-    ],
-    'snmp3_privacy_method',
-    $snmp3_privacy_method,
-    '',
-    '',
-    '',
-    true
+$data[0] = html_print_label_input_block(
+    __('Privacy method'),
+    html_print_select(
+        [
+            'DES' => __('DES'),
+            'AES' => __('AES'),
+        ],
+        'snmp3_privacy_method',
+        $snmp3_privacy_method,
+        '',
+        '',
+        '',
+        true
+    )
 );
-$data[2] = __('Security level');
-$data[3] = html_print_select(
-    [
-        'noAuthNoPriv' => __('Not auth and not privacy method'),
-        'authNoPriv'   => __('Auth and not privacy method'),
-        'authPriv'     => __('Auth and privacy method'),
-    ],
-    'snmp3_security_level',
-    $snmp3_security_level,
-    '',
-    '',
-    '',
-    true
+
+$data[1] = html_print_label_input_block(
+    __('Security level'),
+    html_print_select(
+        [
+            'noAuthNoPriv' => __('Not auth and not privacy method'),
+            'authNoPriv'   => __('Auth and not privacy method'),
+            'authPriv'     => __('Auth and privacy method'),
+        ],
+        'snmp3_security_level',
+        $snmp3_security_level,
+        '',
+        '',
+        '',
+        true
+    )
 );
 
 push_table_row($data, 'field_snmpv3_row2');
 
 $data = [];
-$data[0] = __('Auth method');
-$data[1] = html_print_select(
-    [
-        'MD5' => __('MD5'),
-        'SHA' => __('SHA'),
-    ],
-    'snmp3_auth_method',
-    $snmp3_auth_method,
-    '',
-    '',
-    '',
-    true
+$data[0] = html_print_label_input_block(
+    __('Auth method'),
+    html_print_select(
+        [
+            'MD5' => __('MD5'),
+            'SHA' => __('SHA'),
+        ],
+        'snmp3_auth_method',
+        $snmp3_auth_method,
+        '',
+        '',
+        '',
+        true
+    )
 );
-$data[2] = __('Name OID').'&nbsp;'.ui_print_help_icon('xxx', true);
-$data[3] = html_print_input_text_extended(
-    'name_oid',
-    $name_oid,
-    'name_oid',
-    '',
-    30,
-    10000,
-    '',
-    '',
-    '',
-    true
+
+$data[1] = html_print_label_input_block(
+    __('Name OID').'&nbsp;'.ui_print_help_icon('xxx', true),
+    html_print_input_text_extended(
+        'name_oid',
+        $name_oid,
+        'name_oid',
+        '',
+        30,
+        10000,
+        '',
+        '',
+        '',
+        true
+    )
 );
 
 push_table_row($data, 'field_snmpv3_row3');
 
 $data = [];
-$data[0] = __('Post process');
-$data[1] = html_print_extended_select_for_post_process(
-    'post_process',
-    $post_process,
+$data[0] = html_print_label_input_block(
+    __('Post process'),
+    html_print_extended_select_for_post_process(
+        'post_process',
+        $post_process,
+        '',
+        '',
+        '0',
+        false,
+        true,
+        false,
+        true
+    )
+);
+
+$data[1] = html_print_label_input_block(
     '',
-    '',
-    '0',
-    false,
-    true,
-    false,
-    true
+    ''
 );
 
 push_table_row($data, 'field_process');
 
 // Advanced stuff.
 $data = [];
-$data[0] = __('TCP send');
-$data[1] = html_print_textarea('tcp_send', 2, 65, $tcp_send, '', true);
-$table->colspan['tcp_send'][1] = 3;
+$data[0] = html_print_label_input_block(
+    __('TCP send'),
+    html_print_textarea('tcp_send', 2, 65, $tcp_send, '', true)
+);
+$table->colspan['tcp_send'][0] = 2;
 
 push_table_row($data, 'tcp_send');
 
 $data = [];
-$data[0] = __('TCP receive');
-$data[1] = html_print_textarea('tcp_rcv', 2, 65, $tcp_rcv, '', true);
-$table->colspan['tcp_receive'][1] = 3;
+$data[0] = html_print_label_input_block(
+    __('TCP receive'),
+    html_print_textarea('tcp_rcv', 2, 65, $tcp_rcv, '', true)
+);
+$table->colspan['tcp_receive'][0] = 2;
 
 push_table_row($data, 'tcp_receive');
 
 $data = [];
-$data[0] = __('Command');
-$data[1] = html_print_input_text_extended(
-    'command_text',
-    $command_text,
-    'command_text',
-    '',
-    100,
-    10000,
-    $disabledBecauseInPolicy,
-    '',
-    $largeClassDisabledBecauseInPolicy,
-    true
+$data[0] = html_print_label_input_block(
+    __('Command'),
+    html_print_input_text_extended(
+        'command_text',
+        $command_text,
+        'command_text',
+        '',
+        100,
+        10000,
+        $disabledBecauseInPolicy,
+        '',
+        $largeClassDisabledBecauseInPolicy,
+        true
+    )
 );
-$table->colspan['row-cmd-row-1'][1] = 3;
+$table->colspan['row-cmd-row-1'][0] = 2;
 push_table_row($data, 'row-cmd-row-1');
 
 require_once $config['homedir'].'/include/class/CredentialStore.class.php';
 $array_credential_identifier = CredentialStore::getKeys('CUSTOM');
 
-$data[0] = __('Credential identifier');
-$data[1] = html_print_select(
-    $array_credential_identifier,
-    'command_credential_identifier',
-    $command_credential_identifier,
-    '',
-    __('None'),
-    '',
-    true,
-    false,
-    false,
-    '',
-    $disabledBecauseInPolicy
+$data[0] = html_print_label_input_block(
+    __('Credential identifier'),
+    html_print_select(
+        $array_credential_identifier,
+        'command_credential_identifier',
+        $command_credential_identifier,
+        '',
+        __('None'),
+        '',
+        true,
+        false,
+        false,
+        '',
+        $disabledBecauseInPolicy
+    )
 );
 
 $array_os = [
@@ -278,19 +332,21 @@ $array_os = [
     'windows'   => __('Windows'),
 ];
 
-$data[2] = __('Target OS');
-$data[3] = html_print_select(
-    $array_os,
-    'command_os',
-    $command_os,
-    '',
-    '',
-    '',
-    true,
-    false,
-    false,
-    '',
-    $disabledBecauseInPolicy
+$data[1] = html_print_label_input_block(
+    __('Target OS'),
+    html_print_select(
+        $array_os,
+        'command_os',
+        $command_os,
+        '',
+        '',
+        '',
+        true,
+        false,
+        false,
+        '',
+        $disabledBecauseInPolicy
+    )
 );
 
 push_table_row($data, 'row-cmd-row-2');
diff --git a/pandora_console/godmode/modules/manage_network_components_form_plugin.php b/pandora_console/godmode/modules/manage_network_components_form_plugin.php
index 6201381cb6..ec536145ec 100755
--- a/pandora_console/godmode/modules/manage_network_components_form_plugin.php
+++ b/pandora_console/godmode/modules/manage_network_components_form_plugin.php
@@ -32,41 +32,49 @@ global $config;
 check_login();
 
 $data = [];
-$data[0] = __('Plugin');
-$data[1] = html_print_select_from_sql(
-    'SELECT id, name FROM tplugin ORDER BY name',
-    'id_plugin',
-    $id_plugin,
-    'javascript: load_plugin_macros_fields(\'network_component-macro\')',
-    __('None'),
-    0,
-    true,
-    false,
-    false
+$data[0] = html_print_label_input_block(
+    __('Plugin'),
+    html_print_select_from_sql(
+        'SELECT id, name FROM tplugin ORDER BY name',
+        'id_plugin',
+        $id_plugin,
+        'javascript: load_plugin_macros_fields(\'network_component-macro\')',
+        __('None'),
+        0,
+        true,
+        false,
+        false,
+        false,
+        'width: 100%;'
+    ).html_print_input_hidden('macros', base64_encode($macros), true)
+    // Store the macros in base64 into a hidden control to move between pages.
 );
-// Store the macros in base64 into a hidden control to move between pages.
-$data[1] .= html_print_input_hidden('macros', base64_encode($macros), true);
-$data[2] = __('Post process');
-$data[3] = html_print_extended_select_for_post_process(
-    'post_process',
-    $post_process,
-    '',
-    __('Empty'),
-    '0',
-    false,
-    true,
-    false,
-    true
+
+$data[1] = html_print_label_input_block(
+    __('Post process'),
+    html_print_extended_select_for_post_process(
+        'post_process',
+        $post_process,
+        '',
+        __('Empty'),
+        '0',
+        false,
+        true,
+        false,
+        true
+    )
 );
 
 push_table_row($data, 'plugin_1');
 
 // A hidden "model row" to clone it from javascript to add fields dynamicly.
 $data = [];
-$data[0] = 'macro_desc';
-$data[0] .= ui_print_help_tip('macro_help', true);
-$data[1] = html_print_input_text('macro_name', 'macro_value', '', 100, 1024, true);
-$table->colspan['macro_field'][1] = 3;
+$data[0] = html_print_label_input_block(
+    __('macro_desc').ui_print_help_tip('macro_help', true),
+    html_print_input_text('macro_name', 'macro_value', '', 100, 1024, true)
+);
+
+$table->colspan['macro_field'][0] = 2;
 $table->rowstyle['macro_field'] = 'display:none';
 
 push_table_row($data, 'macro_field');
@@ -77,32 +85,44 @@ if (!empty($macros)) {
 
     foreach ($macros as $k => $m) {
         $data = [];
-        $data[0] = $m['desc'];
+        $macro_label = $m['desc'];
         if (!empty($m['help'])) {
-            $data[0] .= ui_print_help_tip($m['help'], true);
+            $macro_label .= ui_print_help_tip($m['help'], true);
         }
 
         if ($m['hide'] == 1) {
-            $data[1] = html_print_input_text(
+            $macro_input = html_print_input_text(
                 $m['macro'],
                 io_output_password($m['value']),
                 '',
                 100,
                 1024,
-                true
+                true,
+                false,
+                '',
+                'w50p'
             );
         } else {
-            $data[1] = html_print_input_text(
+            $macro_input = html_print_input_text(
                 $m['macro'],
                 $m['value'],
                 '',
                 100,
                 1024,
-                true
+                true,
+                false,
+                false,
+                '',
+                'w50p'
             );
         }
 
-        $table->colspan['macro'.$m['macro']][1] = 3;
+        $data[0] = html_print_label_input_block(
+            $macro_label,
+            $macro_input
+        );
+
+        $table->colspan['macro'.$m['macro']][0] = 2;
         $table->rowclass['macro'.$m['macro']] = 'macro_field';
 
         push_table_row($data, 'macro'.$m['macro']);
diff --git a/pandora_console/godmode/modules/manage_network_components_form_wizard.php b/pandora_console/godmode/modules/manage_network_components_form_wizard.php
index 190ff655ff..9470037da6 100644
--- a/pandora_console/godmode/modules/manage_network_components_form_wizard.php
+++ b/pandora_console/godmode/modules/manage_network_components_form_wizard.php
@@ -62,8 +62,8 @@ function generateExtraFields($extra_fields, $protocol)
         }
 
         $data = [];
-        $data[0] = '<div class="right">'.$extraFieldText.'</div>';
-        $data[1] = html_print_input_text_extended(
+        $data[0] = '<div class="left">'.$extraFieldText.'</div>';
+        $data[0] .= html_print_input_text_extended(
             'extra_field_'.$protocol.'_'.$idField,
             $field,
             'extra_field_'.$protocol.'_'.$idField,
@@ -76,7 +76,7 @@ function generateExtraFields($extra_fields, $protocol)
             true
         );
 
-        $table->colspan['oid-list-'.$rowId.'-row-'.$idField][1] = 3;
+        $data[1] = '';
         push_table_row($data, 'oid-list-'.$rowId.'-row-'.$idField);
     }
 
@@ -110,7 +110,7 @@ function generateExtraFields($extra_fields, $protocol)
                     'title'   => __('Remove last macro oid'),
                     'onclick' => 'manageComponentFields(\'del\', \'oid-list-'.$rowId.'\');',
                     'style'   => 'margin-left: 1em;',
-                    'class'   => 'invert_filter',
+                    'class'   => 'invert_filter main_menu_icon',
                 ]
             ),
         ],
@@ -121,6 +121,7 @@ function generateExtraFields($extra_fields, $protocol)
         [
             'id'      => 'combo_oid_button',
             'content' => $image_del.$image_add,
+            'class'   => 'combo-oid-button',
         ],
         true
     );
@@ -234,259 +235,364 @@ $table->id = 'network_component';
 $table->width = '100%';
 $table->class = 'databox';
 $table->style = [];
-$table->style[0] = 'font-weight: bold';
-$table->style[2] = 'font-weight: bold';
+$table->style[0] = 'font-weight: bold;';
+$table->style[1] = 'font-weight: bold;';
 $table->colspan = [];
 if (!enterprise_installed()) {
-    $table->colspan[0][1] = 3;
+    $data[1] = '';
 }
 
 $table->data = [];
 
 $data = [];
-$data[0] = __('Enabled');
-$data[1] = html_print_checkbox_switch(
-    'enabled',
-    1,
-    $enabled,
-    true,
-    false,
-    '',
-    false
+$data[0] = html_print_label_input_block(
+    __('Enabled'),
+    html_print_checkbox_switch(
+        'enabled',
+        1,
+        $enabled,
+        true,
+        false,
+        '',
+        false
+    )
 );
 
-$data[2] = __('Add by default');
-$data[3] = html_print_checkbox_switch(
-    'module_enabled',
-    1,
-    $module_enabled,
-    true,
-    false,
-    '',
-    false
+$data[1] = html_print_label_input_block(
+    __('Add by default'),
+    html_print_checkbox_switch(
+        'module_enabled',
+        1,
+        $module_enabled,
+        true,
+        false,
+        '',
+        false
+    )
 );
 
 push_table_row($data, 'module-enable-row');
 
 $data = [];
-$data[0] = __('Module name');
-$data[1] = html_print_input_text_extended(
-    'name',
-    $name,
-    'name',
-    '',
-    50,
-    255,
-    '',
-    '',
-    '',
-    true
+$data[0] = html_print_label_input_block(
+    __('Module name'),
+    html_print_input_text_extended(
+        'name',
+        $name,
+        'name',
+        '',
+        50,
+        255,
+        '',
+        '',
+        '',
+        true
+    )
 );
 
-$data[2] = __('Module protocol');
-$data[3] = html_print_select(
-    $module_protocol_list,
-    'module_protocol',
-    $module_protocol,
-    'manageVisibleFields()',
-    '',
-    '',
-    true,
-    false,
-    false,
-    ''
-).'&nbsp;'.html_print_image(
-    'images/'.$module_protocol.'.png',
-    true,
-    [
-        'title' => strtoupper($module_protocol).'&nbsp;'.__('Protocol'),
-        'class' => 'add_comments_button',
-        'style' => 'width: 18px;',
-        'id'    => 'module_protocol_symbol',
-    ]
-);
 $type = 4;
-$data[4] = html_print_input_hidden('type', $type, true);
+$data[1] = html_print_label_input_block(
+    __('Module protocol'),
+    '<div class="inline_flex">'.html_print_select(
+        $module_protocol_list,
+        'module_protocol',
+        $module_protocol,
+        'manageVisibleFields()',
+        '',
+        '',
+        true,
+        false,
+        false,
+        ''
+    ).'&nbsp;'.html_print_image(
+        'images/'.$module_protocol.'.png',
+        true,
+        [
+            'title' => strtoupper($module_protocol).'&nbsp;'.__('Protocol'),
+            'class' => 'add_comments_button ',
+            'style' => 'height: 25px;',
+            'id'    => 'module_protocol_symbol',
+        ]
+    ).html_print_input_hidden('type', $type, true).'</div>'
+);
 
 push_table_row($data, 'module-name-type-row');
 
 $data = [];
+$data[0] = html_print_label_input_block(
+    __('Name OID'),
+    html_print_input_text('name_oid', $name_oid, '', 50, 255, true)
+);
 
-$data[0] = __('Name OID');
-$data[1] = html_print_input_text('name_oid', $name_oid, '', 50, 255, true);
-
-$data[2] = __('Manufacturer ID');
-$data[3] = html_print_select_from_sql(
-    'SELECT manufacturer as `id`, manufacturer FROM tpen GROUP BY manufacturer',
-    'manufacturer_id',
-    $manufacturer_id,
-    '',
-    'All',
-    '',
-    true,
-    false,
-    false,
-    ''
+$data[1] = html_print_label_input_block(
+    __('Manufacturer ID'),
+    html_print_select_from_sql(
+        'SELECT manufacturer as `id`, manufacturer FROM tpen GROUP BY manufacturer',
+        'manufacturer_id',
+        $manufacturer_id,
+        '',
+        'All',
+        '',
+        true,
+        false,
+        false,
+        false,
+        'width: 100%;'
+    )
 );
 
 push_table_row($data, 'manufacturer-nameOID-snmpRow-row');
 
 $data = [];
-
-$data[0] = __('Module type');
-$data[1] = html_print_select(
-    $module_type_list,
-    'module_type',
-    $module_type,
-    'changeModuleType()',
-    '',
-    '',
-    true,
-    false,
-    false,
-    ''
+$data[0] = html_print_label_input_block(
+    __('Module type'),
+    html_print_select(
+        $module_type_list,
+        'module_type',
+        $module_type,
+        'changeModuleType()',
+        '',
+        '',
+        true,
+        false,
+        false,
+        ''
+    )
 );
 
-$data[2] = __('Component Group');
-$data[3] = html_print_select(
-    $component_group_list,
-    'id_group',
-    $id_group,
-    '',
-    '',
-    '',
-    true,
-    false,
-    false,
-    ''
+$data[1] = html_print_label_input_block(
+    __('Component Group'),
+    html_print_select(
+        $component_group_list,
+        'id_group',
+        $id_group,
+        '',
+        '',
+        '',
+        true,
+        false,
+        false,
+        ''
+    )
 );
 
 push_table_row($data, 'moduleType-blockName-row');
 
 $data = [];
+$data[0] = html_print_label_input_block(
+    __('Module unit'),
+    html_print_extended_select_for_unit(
+        'unit',
+        $unit,
+        '',
+        '',
+        '0',
+        false,
+        true,
+        false,
+        false
+    )
+);
 
-$data[0] = __('Module unit');
-$data[1] = html_print_extended_select_for_unit(
-    'unit',
-    $unit,
+$data[1] = html_print_label_input_block(
     '',
-    '',
-    '0',
-    false,
-    true,
-    false,
-    false
+    ''
 );
 
 push_table_row($data, 'moduleUnit-blockName-row');
 
 $data = [];
-$data[0] = __('Warning');
-// Warning interval values.
-$data[1] = '<span class="minmax_values" id="warning_minmax_values">';
-$data[1] .= '<em>'.__('Min.').'</em>&nbsp;';
-$data[1] .= html_print_input_text('min_warning', $min_warning, '', 5, 15, true);
-$data[1] .= '<br /><em>'.__('Max.').'</em>&nbsp;';
-$data[1] .= html_print_input_text('max_warning', $max_warning, '', 5, 15, true);
-$data[1] .= '</span>';
-// Warning string values.
-$data[1] .= '<span class="string_values" id="warning_string_values"><em>'.__('String').' </em>&nbsp;';
-$data[1] .= html_print_input_text('str_warning', $str_warning, '', 5, 1024, true).'</span>';
-// Warning inverse values.
-$data[1] .= '<div id="warning_inverse"><em>'.__('Inverse interval').'</em>&nbsp;';
-$data[1] .= html_print_checkbox('warning_inverse', 1, $warning_inverse, true);
-$data[1] .= '</div>';
+$data[0] = html_print_label_input_block(
+    __('Warning status'),
+    '<div class="inline_flex align-center mrgn_top_10px"><div id="warning_minmax_values" class="inline_flex align-center">'.html_print_label_input_block(
+        __('Min.'),
+        html_print_input_text(
+            'min_warning',
+            $min_warning,
+            '',
+            5,
+            15,
+            true
+        ),
+        [
+            'label_class' => 'font-title-font',
+            'div_class'   => 'mrgn_right_10px flex flex_column',
+        ]
+    ).html_print_label_input_block(
+        __('Max.'),
+        html_print_input_text(
+            'max_warning',
+            $max_warning,
+            '',
+            5,
+            15,
+            true
+        ).'</div>',
+        [
+            'label_class' => 'font-title-font',
+            'div_class'   => 'mrgn_right_10px flex flex_column',
+        ]
+    ).'<div id="string_warning" class="inline_flex align-center">'.html_print_label_input_block(
+        __('Str.'),
+        html_print_input_text(
+            'str_warning',
+            $str_warning,
+            '',
+            5,
+            1024,
+            true
+        ).'</div>',
+        [
+            'label_class' => 'font-title-font',
+            'div_class'   => 'mrgn_right_10px flex flex_column',
+        ]
+    ).'<div id="warning_inverse" class="inline_flex align-center">'.html_print_label_input_block(
+        __('Inverse interval'),
+        html_print_checkbox('warning_inverse', 1, $warning_inverse, true).'</div>',
+        [
+            'label_class' => 'font-title-font',
+            'div_class'   => 'mrgn_right_10px flex flex_column',
+        ]
+    ).'<div id="percentage_warning" class="inline_flex align-center">'.html_print_label_input_block(
+        __('Percentage').ui_print_help_tip(__('Defines threshold as a percentage of value decrease/increment'), true),
+        html_print_checkbox('percentage_warning', 1, $percentage_warning, true).'</div>',
+        [
+            'label_class' => 'font-title-font',
+            'div_class'   => 'mrgn_right_10px flex flex_column',
+        ]
+    ).'</div></div>',
+    ['label_class' => 'mrgn_btn_0']
+);
 
-$data[1] .= '<div id="percentage_warning"><em>'.__('Percentage').'</em>&nbsp;';
-$data[1] .= ui_print_help_tip('Defines threshold as a percentage of value decrease/increment', true);
-$data[1] .= html_print_checkbox('percentage_warning', 1, $percentage_warning, true);
-$data[1] .= '</div>';
-
-$data[2] = '<svg id="svg_dinamic" width="500" height="300"> </svg>';
-$table->colspan['warning-svg-row'][2] = 2;
-$table->rowspan['warning-svg-row'][2] = 3;
+$data[1] = '<svg id="svg_dinamic" width="200" height="300"> </svg>';
+$table->rowspan['warning-svg-row'][1] = 3;
 
 push_table_row($data, 'warning-svg-row');
 
 $data = [];
-$data[0] .= __('Change to critical status after');
-$data[1] .= html_print_input_text('warning_time', $warning_time, '', 5, 15, true);
-$data[1] .= '&nbsp;&nbsp;<b>'.__('intervals in warning status.').'</b>';
+$data[0] = html_print_label_input_block(
+    __('Change to critical status after'),
+    '<div class="inline_flex align-center w100p">'.html_print_input_text(
+        'warning_time',
+        $warning_time,
+        '',
+        5,
+        15,
+        true
+    ).'&nbsp;&nbsp;<b>'.__('intervals in warning status.').'</b>'.'</div>',
+    ['div_id' => 'warning_time']
+);
+$data[1] = '';
+
 push_table_row($data, 'title-warning-time');
 
 $data = [];
-$data[0] = __('Critical');
-// Critical interval values.
-$data[1] = '<span class="minmax_values" id="critical_minmax_values">';
-$data[1] .= '<em>'.__('Min.').'</em>&nbsp;';
-$data[1] .= html_print_input_text(
-    'min_critical',
-    $min_critical,
-    '',
-    5,
-    15,
-    true
+$data[0] = html_print_label_input_block(
+    __('Critical status'),
+    '<div class="inline_flex align-center mrgn_top_10px"><div id="minmax_critical" class="inline_flex align-center">'.html_print_label_input_block(
+        __('Min.'),
+        html_print_input_text(
+            'min_critical',
+            $min_critical,
+            '',
+            5,
+            15,
+            true
+        ),
+        [
+            'label_class' => 'font-title-font',
+            'div_class'   => 'mrgn_right_10px flex flex_column',
+        ]
+    ).html_print_label_input_block(
+        __('Max.'),
+        html_print_input_text(
+            'max_critical',
+            $max_critical,
+            '',
+            5,
+            15,
+            true
+        ).'</div>',
+        [
+            'label_class' => 'font-title-font',
+            'div_class'   => 'mrgn_right_10px flex flex_column',
+        ]
+    ).'<div id="string_critical" class="inline_flex align-center">'.html_print_label_input_block(
+        __('Str.'),
+        html_print_input_text(
+            'str_critical',
+            $str_critical,
+            '',
+            5,
+            1024,
+            true
+        ).'</div>',
+        [
+            'label_class' => 'font-title-font',
+            'div_class'   => 'mrgn_right_10px flex flex_column',
+        ]
+    ).'<div id="critical_inverse" class="inline_flex align-center">'.html_print_label_input_block(
+        __('Inverse interval'),
+        html_print_checkbox('critical_inverse', 1, $critical_inverse, true).'</div>',
+        [
+            'label_class' => 'font-title-font',
+            'div_class'   => 'mrgn_right_10px flex flex_column',
+        ]
+    ).'<div id="percentage_critical" class="inline_flex align-center">'.html_print_label_input_block(
+        __('Percentage'),
+        html_print_checkbox('percentage_critical', 1, $percentage_warning, true).'</div>',
+        [
+            'label_class' => 'font-title-font',
+            'div_class'   => 'mrgn_right_10px flex flex_column',
+        ]
+    ).'</div></div>',
+    ['label_class' => 'mrgn_btn_0']
 );
-$data[1] .= '<br /><em>'.__('Max.').'</em>&nbsp;';
-$data[1] .= html_print_input_text(
-    'max_critical',
-    $max_critical,
-    '',
-    5,
-    15,
-    true
-);
-$data[1] .= '</span>';
-// Critical string values.
-$data[1] .= '<span class="string_values" id="critical_string_values"><em>'.__('String').' </em>&nbsp;';
-$data[1] .= html_print_input_text('str_critical', $str_critical, '', 5, 1024, true).'</span>';
-// Critical inverse values.
-$data[1] .= '<div id="critical_inverse"><em>'.__('Inverse interval').'</em>&nbsp;';
-$data[1] .= html_print_checkbox('critical_inverse', 1, $critical_inverse, true);
-$data[1] .= '</div>';
-
-$data[1] .= '<Ddiv id="percentage_critical"><em>'.__('Percentage').'</em>&nbsp;';
-$data[1] .= ui_print_help_tip('Defines threshold as a percentage of value decrease/increment', true);
-$data[1] .= html_print_checkbox('percentage_critical', 1, $percentage_critical, true);
-$data[1] .= '</div>';
 
 
 push_table_row($data, 'critical-row');
 
 $data = [];
-$data[0] = __('Description');
-$data[1] = html_print_textarea('description', 2, 65, $description, '', true);
-$table->colspan['module-description-row'][1] = 3;
+$data[0] = html_print_label_input_block(
+    __('Description'),
+    html_print_textarea('description', 2, 65, $description, '', true)
+);
+
+$data[1] = '';
 
 push_table_row($data, 'module-description-row');
 
 $data = [];
-$data[0] = __('Scan Type');
-$data[1] = html_print_select(
-    $scan_type_list,
-    'scan_type',
-    $scan_type,
-    '',
-    '',
-    '',
-    true,
-    false,
-    false,
-    ''
+$data[0] = html_print_label_input_block(
+    __('Scan Type'),
+    html_print_select(
+        $scan_type_list,
+        'scan_type',
+        $scan_type,
+        '',
+        '',
+        '',
+        true,
+        false,
+        false,
+        ''
+    )
 );
 
-$data[2] = __('Execution type');
-$data[3] = html_print_select(
-    $execution_type_list,
-    'execution_type',
-    $execution_type,
-    'manageVisibleFields()',
-    '',
-    '',
-    true,
-    false,
-    false,
-    ''
+$data[1] = html_print_label_input_block(
+    __('Execution type'),
+    html_print_select(
+        $execution_type_list,
+        'execution_type',
+        $execution_type,
+        'manageVisibleFields()',
+        '',
+        '',
+        true,
+        false,
+        false,
+        ''
+    )
 );
 
 push_table_row($data, 'scan-execution-row');
@@ -495,24 +601,28 @@ push_table_row($data, 'scan-execution-row');
 // SNMP rows.
 //
 $data = [];
-$data[0] = __('Value OID');
-$data[1] = html_print_input_text_extended(
-    'value_oid',
-    (string) $value,
-    'value_oid',
-    '',
-    100,
-    10000,
-    '',
-    '',
-    '',
-    true
+$data[0] = html_print_label_input_block(
+    __('Value OID'),
+    html_print_input_text_extended(
+        'value_oid',
+        (string) $value,
+        'value_oid',
+        '',
+        100,
+        10000,
+        '',
+        '',
+        'style="width: 100%; max-width: 100%;"',
+        true
+    )
 );
-$table->colspan['value-oid-networkRow-snmpRow'][1] = 3;
+
+$data[1] = '';
 push_table_row($data, 'value-oid-networkRow-snmpRow');
 
 $data = [];
 $data[0] = __('Macros OID');
+$data[1] = '';
 
 push_table_row($data, 'title-oid-macros-pluginRow-snmpRow');
 
@@ -520,113 +630,134 @@ push_table_row($data, 'title-oid-macros-pluginRow-snmpRow');
 generateExtraFields($macros, 'snmp');
 
 $data = [];
-$data[0] = __('Value operation');
-$data[1] = html_print_input_text_extended(
-    'value_operation_snmp',
-    $macros->value_operation,
-    'value_operation_snmp',
-    '',
-    100,
-    10000,
-    '',
-    '',
-    '',
-    true
+$data[0] = html_print_label_input_block(
+    __('Value operation'),
+    html_print_input_text_extended(
+        'value_operation_snmp',
+        $macros->value_operation,
+        'value_operation_snmp',
+        '',
+        100,
+        10000,
+        '',
+        '',
+        'style="width: 100%; max-width: 100%;"',
+        true
+    )
 );
-$table->colspan['value-operation-pluginRow-snmpRow'][1] = 3;
+$data[1] = '';
 push_table_row($data, 'value-operation-pluginRow-snmpRow');
 
 $data = [];
-$data[0] = __('Satellite execution');
-$data[1] = html_print_input_text_extended(
-    'satellite_execution_snmp',
-    $macros->satellite_execution,
-    'satellite_execution_snmp',
-    '',
-    100,
-    10000,
-    '',
-    '',
-    '',
-    true
+$data[0] = html_print_label_input_block(
+    __('Satellite execution'),
+    html_print_input_text_extended(
+        'satellite_execution_snmp',
+        $macros->satellite_execution,
+        'satellite_execution_snmp',
+        '',
+        100,
+        10000,
+        '',
+        '',
+        'style="width: 100%; max-width: 100%;"',
+        true
+    )
 );
-$table->colspan['satellite-execution-pluginRow-snmpRow'][1] = 3;
+$data[1] = '';
 push_table_row($data, 'satellite-execution-pluginRow-snmpRow');
 
 $data = [];
-$data[0] = __('Server plugin');
-$data[1] = html_print_select(
-    $server_plugin_list,
-    'server_plugin_snmp',
-    $macros->server_plugin,
-    'changePlugin()',
-    '',
-    '',
-    true,
-    false,
-    false,
-    ''
-).'&nbsp;&nbsp;&nbsp;<span id="selected_plugin_description_snmp"></span>';
+$data[0] = html_print_label_input_block(
+    __('Server plugin'),
+    html_print_select(
+        $server_plugin_list,
+        'server_plugin_snmp',
+        $macros->server_plugin,
+        'changePlugin()',
+        '',
+        '',
+        true,
+        false,
+        false,
+        '',
+        false,
+        'width: 100%; max-width: 100%;'
+    ).'&nbsp;&nbsp;&nbsp;<span id="selected_plugin_description_snmp"></span>'
+);
+
+$data[1] = '';
 
 push_table_row($data, 'server-plugin-pluginRow-snmpRow');
 
 // The creation of this fields will be dynamically.
 $data = [];
-$data[0] = 'field0';
-$data[1] = html_print_input_text_extended(
-    'field0_snmp_field',
-    '',
-    'field0_snmp_fields',
-    '',
-    30,
-    255,
-    '',
-    '',
-    '',
-    true
+$data[0] = html_print_label_input_block(
+    'field0',
+    html_print_input_text_extended(
+        'field0_snmp_field',
+        '',
+        'field0_snmp_fields',
+        '',
+        30,
+        255,
+        '',
+        '',
+        '',
+        true
+    )
 );
 
+$data[1] = '';
+
 push_table_row($data, 'plugin-snmp-fields-dynamicMacroRow-pluginRow-snmpRow-0');
 
 //
 // WMI Fields.
 //
 $data = [];
-$data[0] = __('WMI class');
-$data[1] = html_print_input_text_extended(
-    'wmi_class',
-    $wmi_class,
-    'wmi_class',
-    '',
-    100,
-    10000,
-    '',
-    '',
-    '',
-    true
+$data[0] = html_print_label_input_block(
+    __('WMI class'),
+    html_print_input_text_extended(
+        'wmi_class',
+        $wmi_class,
+        'wmi_class',
+        '',
+        100,
+        10000,
+        '',
+        '',
+        '',
+        true
+    )
 );
-$table->colspan['wmi-class-wmiRow'][1] = 3;
+
+$data[1] = '';
 push_table_row($data, 'wmi-class-wmiRow');
 
 $data = [];
-$data[0] = __('Query key field').'&nbsp;(_field_wmi_0_)';
-$data[1] = html_print_input_text_extended(
-    'query_key_field',
-    $query_key_field,
-    'query_key_field',
-    '',
-    100,
-    10000,
-    '',
-    '',
-    '',
-    true
+$data[0] = html_print_label_input_block(
+    __('Query key field').'&nbsp;(_field_wmi_0_)',
+    html_print_input_text_extended(
+        'query_key_field',
+        $query_key_field,
+        'query_key_field',
+        '',
+        100,
+        10000,
+        '',
+        '',
+        '',
+        true
+    )
 );
-$table->colspan['query-key-field-wmiRow'][1] = 3;
+
+$data[1] = '';
 push_table_row($data, 'query-key-field-wmiRow');
 
 $data = [];
 $data[0] = __('Query extra fields');
+$data[1] = '';
 
 push_table_row($data, 'title-extra-field-wmiRow');
 
@@ -635,34 +766,18 @@ generateExtraFields($macros, 'wmi');
 
 $data = [];
 $data[0] = __('Query filters');
+$data[1] = '';
 $table->style[0] = 'font-weight: bold;';
 
 push_table_row($data, 'title-query-filters-wmiRow');
 
 $data = [];
-$data[0] = '<div class="right">'.__('Scan').'</div>';
-$data[1] = html_print_input_text_extended(
-    'query_filter_scan',
-    $query_filter['scan'],
-    'query_filter_scan',
-    '',
-    100,
-    10000,
-    '',
-    '',
-    '',
-    true
-);
-$table->colspan['query-filter-scan-wmiRow'][1] = 3;
-push_table_row($data, 'query-filter-scan-wmiRow');
-
-if ($execution_type == EXECUTION_TYPE_NETWORK) {
-    $data = [];
-    $data[0] = '<div class="right">'.__('Execution').'</div>';
-    $data[1] = html_print_input_text_extended(
-        'query_filter_execution',
-        $query_filter['execution'],
-        'query_filter_execution',
+$data[0] = html_print_label_input_block(
+    __('Scan'),
+    html_print_input_text_extended(
+        'query_filter_scan',
+        $query_filter['scan'],
+        'query_filter_scan',
         '',
         100,
         10000,
@@ -670,106 +785,143 @@ if ($execution_type == EXECUTION_TYPE_NETWORK) {
         '',
         '',
         true
+    )
+);
+
+$data[1] = '';
+push_table_row($data, 'query-filter-scan-wmiRow');
+
+if ($execution_type == EXECUTION_TYPE_NETWORK) {
+    $data = [];
+    $data[0] = html_print_label_input_block(
+        __('Execution'),
+        html_print_input_text_extended(
+            'query_filter_execution',
+            $query_filter['execution'],
+            'query_filter_execution',
+            '',
+            100,
+            10000,
+            '',
+            '',
+            '',
+            true
+        )
     );
-    $table->colspan['query-filter-execution-wmiRow'][1] = 3;
+
+    $data[1] = '';
     push_table_row($data, 'query-filter-execution-wmiRow');
 }
 
 
 $data = [];
-$data[0] = __('Field value');
-$data[1] = html_print_input_number(
-    [
-        'name'   => 'field_value_filter',
-        'value'  => $query_filter['field'],
-        'id'     => 'field_value_filter',
-        'min'    => 0,
-        'return' => true,
-    ]
+$data[0] = html_print_label_input_block(
+    __('Field value'),
+    html_print_input_number(
+        [
+            'name'   => 'field_value_filter',
+            'value'  => $query_filter['field'],
+            'id'     => 'field_value_filter',
+            'min'    => 0,
+            'return' => true,
+        ]
+    )
 );
 
-$data[2] = __('Key string');
-$data[3] = html_print_input_text_extended(
-    'key_string_filter',
-    $query_filter['key_string'],
-    'key_string_filter',
-    '',
-    30,
-    255,
-    '',
-    '',
-    '',
-    true
+$data[1] = html_print_label_input_block(
+    __('Key string'),
+    html_print_input_text_extended(
+        'key_string_filter',
+        $query_filter['key_string'],
+        'key_string_filter',
+        '',
+        30,
+        255,
+        '',
+        '',
+        '',
+        true
+    )
 );
 
 push_table_row($data, 'filters-list-fields-networkRow-wmiRow');
 
 $data = [];
-$data[0] = __('Value operation');
-$data[1] = html_print_input_text_extended(
-    'value_operation_wmi',
-    $macros->value_operation,
-    'value_operation_wmi',
-    '',
-    100,
-    10000,
-    '',
-    '',
-    '',
-    true
+$data[0] = html_print_label_input_block(
+    __('Value operation'),
+    html_print_input_text_extended(
+        'value_operation_wmi',
+        $macros->value_operation,
+        'value_operation_wmi',
+        '',
+        100,
+        10000,
+        '',
+        '',
+        '',
+        true
+    )
 );
-$table->colspan['value-operation-pluginRow-wmiRow'][1] = 3;
+$data[1] = '';
 push_table_row($data, 'value-operation-pluginRow-wmiRow');
 
 $data = [];
-$data[0] = __('Satellite execution');
-$data[1] = html_print_input_text_extended(
-    'satellite_execution_wmi',
-    $macros->satellite_execution,
-    'satellite_execution_wmi',
-    '',
-    100,
-    10000,
-    '',
-    '',
-    '',
-    true
+$data[0] = html_print_label_input_block(
+    __('Satellite execution'),
+    html_print_input_text_extended(
+        'satellite_execution_wmi',
+        $macros->satellite_execution,
+        'satellite_execution_wmi',
+        '',
+        100,
+        10000,
+        '',
+        '',
+        '',
+        true
+    )
 );
-$table->colspan['satellite-execution-pluginRow-wmiRow'][1] = 3;
+$data[1] = '';
 push_table_row($data, 'satellite-execution-pluginRow-wmiRow');
 
 $data = [];
-$data[0] = __('Server plugin');
-$data[1] = html_print_select(
-    $server_plugin_list,
-    'server_plugin_wmi',
-    $macros->server_plugin,
-    'changePlugin()',
-    '',
-    '',
-    true,
-    false,
-    false,
-    ''
-).'&nbsp;&nbsp;&nbsp;<span id="selected_plugin_description_wmi"></span>';
+$data[0] = html_print_label_input_block(
+    __('Server plugin'),
+    html_print_select(
+        $server_plugin_list,
+        'server_plugin_wmi',
+        $macros->server_plugin,
+        'changePlugin()',
+        '',
+        '',
+        true,
+        false,
+        false,
+        ''
+    ).'&nbsp;&nbsp;&nbsp;<span id="selected_plugin_description_wmi"></span>'
+);
+$data[1] = '';
 
 push_table_row($data, 'server-plugin-pluginRow-wmiRow');
 
 // The creation of this fields will be dynamically.
 $data = [];
-$data[0] = 'field0';
-$data[1] = html_print_input_text_extended(
-    'field0_wmi_field',
-    '',
-    'field0_wmi_fields',
-    '',
-    30,
-    255,
-    '',
-    '',
-    '',
-    true
+$data[0] = html_print_label_input_block(
+    'field0',
+    html_print_input_text_extended(
+        'field0_wmi_field',
+        '',
+        'field0_wmi_fields',
+        '',
+        30,
+        255,
+        '',
+        '',
+        '',
+        true
+    )
 );
+$data[1] = '';
 
 push_table_row($data, 'plugin-wmi-fields-dynamicMacroRow-pluginRow-wmiRow-0');
 
diff --git a/pandora_console/godmode/modules/manage_network_components_form_wmi.php b/pandora_console/godmode/modules/manage_network_components_form_wmi.php
index 19739691fd..507fbfac4b 100755
--- a/pandora_console/godmode/modules/manage_network_components_form_wmi.php
+++ b/pandora_console/godmode/modules/manage_network_components_form_wmi.php
@@ -28,41 +28,70 @@ if (! check_acl($config['id_user'], 0, 'PM')) {
 require_once $config['homedir'].'/include/functions_modules.php';
 
 $data = [];
-$data[0] = __('WMI query').' '.ui_print_help_icon('wmi_query_tab', true);
-$data[1] = html_print_input_text('snmp_oid', $snmp_oid, '', 25, 255, true);
-$data[2] = __('Key string');
-$data[3] = html_print_input_text('snmp_community', $snmp_community, '', 25, 255, true);
+$data[0] = html_print_label_input_block(
+    __('WMI query').' '.ui_print_help_icon('wmi_query_tab', true),
+    html_print_input_text('snmp_oid', $snmp_oid, '', 25, 255, true)
+);
+
+$data[1] = html_print_label_input_block(
+    __('Key string'),
+    html_print_input_text('snmp_community', $snmp_community, '', 25, 255, true)
+);
 
 push_table_row($data, 'wmi_1');
 
 $data = [];
-$data[0] = __('Field number');
-$data[1] = html_print_input_text('tcp_port', $tcp_port, '', 5, 25, true);
-$data[2] = __('Namespace');
-$data[3] = html_print_input_text('tcp_send', $tcp_send, '', 25, 255, true);
+$data[0] = html_print_label_input_block(
+    __('Field number'),
+    html_print_input_text('tcp_port', $tcp_port, '', 5, 25, true)
+);
+
+$data[1] = html_print_label_input_block(
+    __('Namespace'),
+    html_print_input_text('tcp_send', $tcp_send, '', 25, 255, true)
+);
 
 push_table_row($data, 'wmi_2');
 
 $data = [];
-$data[0] = __('Username');
-$data[1] = html_print_input_text('plugin_user', $plugin_user, '', 15, 255, true);
-$data[2] = __('Password');
-$data[3] = html_print_input_password('plugin_pass', $plugin_pass, '', 25, 255, true);
+$data[0] = html_print_label_input_block(
+    __('Username'),
+    html_print_input_text('plugin_user', $plugin_user, '', 15, 255, true)
+);
+
+$data[1] = html_print_label_input_block(
+    __('Password'),
+    html_print_input_password(
+        'plugin_pass',
+        $plugin_pass,
+        '',
+        25,
+        255,
+        true,
+        false,
+        false,
+        '',
+        'off',
+        true
+    )
+);
 
 push_table_row($data, 'wmi_3');
 
 $data = [];
-$data[0] = __('Post process');
-$data[1] = html_print_extended_select_for_post_process(
-    'post_process',
-    $post_process,
-    '',
-    __('Empty'),
-    '0',
-    false,
-    true,
-    false,
-    true
+$data[0] = html_print_label_input_block(
+    __('Post process'),
+    html_print_extended_select_for_post_process(
+        'post_process',
+        $post_process,
+        '',
+        __('Empty'),
+        '0',
+        false,
+        true,
+        false,
+        true
+    )
 );
-$data[2] = $data[3] = '';
+$data[1] = '';
 push_table_row($data, 'field_process');
diff --git a/pandora_console/include/javascript/pandora_modules.js b/pandora_console/include/javascript/pandora_modules.js
index 4a64a9f2e6..8c964f1259 100644
--- a/pandora_console/include/javascript/pandora_modules.js
+++ b/pandora_console/include/javascript/pandora_modules.js
@@ -1553,10 +1553,10 @@ function changePlugin() {
   if (executionType == EXECUTION_TYPE_NETWORK) {
     displayShow = "none";
   } else {
-    displayShow = "table-row";
+    displayShow = "grid";
   }
 
-  var cntMacrosToGo = 4;
+  var cntMacrosToGo = 2;
   var cntMacrosLine = 0;
   var thisIdLine = "";
   // Clear older macros rows.
@@ -1589,7 +1589,7 @@ function changePlugin() {
       description = "unknown";
     }
 
-    if (cntMacrosToGo == 4) {
+    if (cntMacrosToGo == 2) {
       cntMacrosToGo = 0;
       cntMacrosLine++;
       thisIdLine =
diff --git a/pandora_console/include/styles/pandora.css b/pandora_console/include/styles/pandora.css
index fecc1b5976..8bd4931acb 100644
--- a/pandora_console/include/styles/pandora.css
+++ b/pandora_console/include/styles/pandora.css
@@ -650,6 +650,10 @@ select:-internal-list-box {
   display: inline-flex;
 }
 
+.align-center {
+  align-items: center;
+}
+
 .relative {
   position: relative;
 }
@@ -12226,3 +12230,25 @@ div.parent_graph > p.legend_background > table > tbody > tr {
 .toggle-traffic-graph {
   margin: 0px !important;
 }
+
+.combo-oid-button {
+  display: flex !important;
+  flex-direction: row !important;
+  flex-wrap: wrap !important;
+  justify-content: flex-start !important;
+  align-items: flex-start !important;
+}
+
+tr[id^="network_component-plugin-snmp-fields-dynamicMacroRow-"]
+  > td:first-child {
+  padding-bottom: 0px !important;
+}
+
+tr[id^="network_component-plugin-snmp-fields-dynamicMacroRow-"]
+  > td:last-child {
+  padding-top: 0px !important;
+}
+
+tr[id^="network_component-plugin-snmp-fields-dynamicMacroRow-"] input {
+  width: 100% !important;
+}

From 6bb8e9cbab1d5d890bf8421da89b7089a4014c29 Mon Sep 17 00:00:00 2001
From: Pablo Aragon <pablo.aragon@pandorafms.com>
Date: Wed, 7 Jun 2023 12:22:11 +0200
Subject: [PATCH 2/2] 10953-New styles local component

---
 .../manage_network_components_form_wizard.php | 55 ++++++++-----------
 pandora_console/include/styles/pandora.css    |  3 +
 2 files changed, 27 insertions(+), 31 deletions(-)

diff --git a/pandora_console/godmode/modules/manage_network_components_form_wizard.php b/pandora_console/godmode/modules/manage_network_components_form_wizard.php
index 9470037da6..914dd88c27 100644
--- a/pandora_console/godmode/modules/manage_network_components_form_wizard.php
+++ b/pandora_console/godmode/modules/manage_network_components_form_wizard.php
@@ -692,24 +692,20 @@ push_table_row($data, 'server-plugin-pluginRow-snmpRow');
 
 // The creation of this fields will be dynamically.
 $data = [];
-$data[0] = html_print_label_input_block(
-    'field0',
-    html_print_input_text_extended(
-        'field0_snmp_field',
-        '',
-        'field0_snmp_fields',
-        '',
-        30,
-        255,
-        '',
-        '',
-        '',
-        true
-    )
+$data[0] = 'field0';
+$data[1] = html_print_input_text_extended(
+    'field0_snmp_field',
+    '',
+    'field0_snmp_fields',
+    '',
+    30,
+    255,
+    '',
+    '',
+    '',
+    true
 );
 
-$data[1] = '';
-
 push_table_row($data, 'plugin-snmp-fields-dynamicMacroRow-pluginRow-snmpRow-0');
 
 //
@@ -906,22 +902,19 @@ push_table_row($data, 'server-plugin-pluginRow-wmiRow');
 
 // The creation of this fields will be dynamically.
 $data = [];
-$data[0] = html_print_label_input_block(
-    'field0',
-    html_print_input_text_extended(
-        'field0_wmi_field',
-        '',
-        'field0_wmi_fields',
-        '',
-        30,
-        255,
-        '',
-        '',
-        '',
-        true
-    )
+$data[0] = 'field0';
+$data[1] = html_print_input_text_extended(
+    'field0_wmi_field',
+    '',
+    'field0_wmi_fields',
+    '',
+    30,
+    255,
+    '',
+    '',
+    '',
+    true
 );
-$data[1] = '';
 
 push_table_row($data, 'plugin-wmi-fields-dynamicMacroRow-pluginRow-wmiRow-0');
 
diff --git a/pandora_console/include/styles/pandora.css b/pandora_console/include/styles/pandora.css
index 8bd4931acb..0e70348401 100644
--- a/pandora_console/include/styles/pandora.css
+++ b/pandora_console/include/styles/pandora.css
@@ -12239,16 +12239,19 @@ div.parent_graph > p.legend_background > table > tbody > tr {
   align-items: flex-start !important;
 }
 
+tr[id^="network_component-plugin-wmi-fields-dynamicMacroRow-"] > td:first-child,
 tr[id^="network_component-plugin-snmp-fields-dynamicMacroRow-"]
   > td:first-child {
   padding-bottom: 0px !important;
 }
 
+tr[id^="network_component-plugin-wmi-fields-dynamicMacroRow-"] > td:last-child,
 tr[id^="network_component-plugin-snmp-fields-dynamicMacroRow-"]
   > td:last-child {
   padding-top: 0px !important;
 }
 
+tr[id^="network_component-plugin-wmi-fields-dynamicMacroRow-"] input,
 tr[id^="network_component-plugin-snmp-fields-dynamicMacroRow-"] input {
   width: 100% !important;
 }