visual changes to discovery

Former-commit-id: fd606abb997aa4f3144d072f610915524b5358db
This commit is contained in:
alejandro-campos 2019-04-22 17:46:04 +02:00
parent 3038de3a9d
commit 4f6a81dc5b
8 changed files with 333 additions and 190 deletions

View File

@ -581,113 +581,83 @@ class HostDevices extends Wizard
if (isset($this->page) === false
|| $this->page == 0
) {
$form = [];
// Input task name.
$form['inputs'][] = [
'label' => '<b>'.__('Task name').'</b>',
'arguments' => [
// Comment input
$comment_input ='<div class="label_select"><label>'.__('Comment').':</label></div>';
$comment_input .= $this->printInput([
'name' => 'comment',
'rows' => 1,
'columns' => 1,
'value' => $this->task['description'],
'type' => 'textarea',
'size' => 25,
'class' => 'discovery_textarea_input',
'return' => true
]);
// Task input
$taskname_input_label = '<div class="label_select"><label>'.__('Task name').':</label></div>';
$taskname_input = $this->printInput([
'name' => 'taskname',
'value' => $this->task['name'],
'type' => 'text',
'size' => 25,
],
];
'class' => 'discovery_full_width_input'
]);
if (isset($this->task['id_rt']) === true) {
// Propagate id.
$form['inputs'][] = [
'arguments' => [
'name' => 'task',
'value' => $this->task['id_rt'],
'type' => 'hidden',
],
];
}
// Network input
$network_input_label .= '<div class="label_select discovery_label_hint"><label>'.__('Network').':</label>'.ui_print_help_tip(__('You can specify several networks, separated by commas, for example: 192.168.50.0/24,192.168.60.0/24'), true).'</div>';
// Input task name.
$form['inputs'][] = [
'label' => '<b>'.__('Comment').'</b>',
'arguments' => [
'name' => 'comment',
'value' => $this->task['description'],
'type' => 'text',
'size' => 25,
],
];
// Input Discovery Server.
$form['inputs'][] = [
'label' => '<b>'.__('Discovery server').'</b>'.ui_print_help_tip(
__('You must select a Discovery Server to run the Task, otherwise the Recon Task will never run'),
true
),
'arguments' => [
'type' => 'select_from_sql',
'sql' => sprintf(
'SELECT id_server, name
FROM tserver
WHERE server_type = %d
ORDER BY name',
SERVER_TYPE_DISCOVERY
),
'name' => 'id_recon_server',
'selected' => $this->task['id_recon_server'],
'return' => true,
],
];
// Input Network.
$form['inputs'][] = [
'label' => '<b>'.__('Network').'</b>'.ui_print_help_tip(
__('You can specify several networks, separated by commas, for example: 192.168.50.0/24,192.168.60.0/24'),
true
),
'arguments' => [
$network_input = $this->printInput([
'name' => 'network',
'value' => $this->task['subnet'],
'type' => 'text',
'size' => 25,
],
];
'class' => 'discovery_full_width_input',
]);
// Input Group.
$form['inputs'][] = [
'label' => '<b>'.__('Group').'</b>',
'arguments' => [
'name' => 'id_group',
'returnAllGroup' => false,
'privilege' => 'PM',
'type' => 'select_groups',
'selected' => $this->task['id_group'],
'return' => true,
],
];
// Interval and schedules.
// Discovery server input
$discovery_server_select_label = '<div class="label_select discovery_label_hint"><label>'.__('Discovery server').':</label>'.ui_print_help_tip(__('You must select a Discovery Server to run the Task, otherwise the Recon Task will never run'), true).'</div>';
$discovery_server_select = $this->printInput([
'type' => 'select_from_sql',
'sql' => sprintf(
'SELECT id_server, name
FROM tserver
WHERE server_type = %d
ORDER BY name',
SERVER_TYPE_DISCOVERY
),
'name' => 'id_recon_server',
'selected' => $this->task['id_recon_server'],
'return' => true,
'style' => 'width: 100%',
]);
// Interval input
$interv_manual = 0;
if ((int) $this->task['interval_sweep'] == 0) {
$interv_manual = 1;
}
// Schedule.
$form['inputs'][] = [
'label' => '<b>'.__('Interval').'</b>'.ui_print_help_tip(
__('Manual interval means that it will be executed only On-demand'),
true
),
'arguments' => [
'type' => 'select',
'selected' => $interv_manual,
'fields' => [
0 => __('Defined'),
1 => __('Manual'),
],
'name' => 'interval_manual_defined',
'return' => true,
$interval_input_label = '<div class="label_select discovery_label_hint" style="padding-top: 6px;"><label>'.__('Interval').':</label>'.ui_print_help_tip(__('Manual interval means that it will run only on demand.'), true).'</div>';
$interval_input = $this->printInput([
'type' => 'select',
'selected' => $interv_manual,
'fields' => [
0 => __('Defined'),
1 => __('Manual'),
],
'extra' => '<span id="interval_manual_container">'.html_print_extended_select_for_time(
'name' => 'interval_manual_defined',
'return' => true,
'style' => 'float: right;'
]);
$interval_input_extra = '<span id="interval_manual_container">'.html_print_extended_select_for_time(
'interval',
$this->task['interval_sweep'],
'',
@ -700,36 +670,37 @@ class HostDevices extends Wizard
).ui_print_help_tip(
__('The minimum recomended interval for Recon Task is 5 minutes'),
true
).'</span>',
];
).'</span>';
$str = __('Next');
if (isset($this->task['id_rt']) === true) {
$str = __('Update and continue');
// Group select
$group_select = '<div class="label_select"><label>'.__('Group').':</label></div>';
$group_select .= $this->printInput([
'name' => 'id_group',
'returnAllGroup' => false,
'privilege' => 'PM',
'type' => 'select_groups',
'selected' => $this->task['id_group'],
'return' => true,
'class' => 'discovery_list_input',
'size' => 9,
]);
if (isset($this->task['id_rt']) === true) {
//Propagate ID
$task_hidden = $this->printInput([
'name' => 'task',
'value' => $this->task['id_rt'],
'type' => 'hidden'
]);
}
// Submit button.
$form['inputs'][] = [
'arguments' => [
'name' => 'submit',
'label' => $str,
'type' => 'submit',
'attributes' => 'class="sub next"',
'return' => true,
],
];
$task_url = '';
if (isset($this->task['id_rt'])) {
$task_url = '&task='.$this->task['id_rt'];
}
$form['form'] = [
'method' => 'POST',
'action' => $this->url.'&mode=netscan&page='.($this->page + 1).$task_url,
];
// Default.
$interval = 600;
$unit = 60;
@ -738,24 +709,62 @@ class HostDevices extends Wizard
$unit = $this->getTimeUnit($interval);
}
$form['js'] = '
$("select#interval_manual_defined").change(function() {
if ($("#interval_manual_defined").val() == 1) {
$("#interval_manual_container").hide();
$("#text-interval_text").val(0);
$("#hidden-interval").val(0);
}
else {
$("#interval_manual_container").show();
$("#text-interval_text").val(10);
$("#hidden-interval").val('.$interval.');
$("#interval_units").val('.$unit.');
}
}).change();';
// XXX: Could be improved validating inputs before continue (JS)
// Print NetScan page 0.
$this->printForm($form);
//$this->printForm($form);
echo '<form action="'.$this->url.'&mode=netscan&page='.($this->page + 1).$task_url.'" method="POST">';
echo $task_hidden;
echo '<div class="white_box">
<div class="edit_discovery_info" style="margin-bottom: 15px;">
<div style="width: 25%; padding: 9px;">'
.'<div style="height: 50%; margin-bottom: 35px;">'.html_print_image ("images/wizard/netscan_green.png", true, array ("title" => __('Close'), "style" => 'width: 60%;'), false).'</div>'
.'<div class="edit_discovery_input"><div style="display: flex;">'.$interval_input_label.'<div style="margin-left: 15 px; width: 50%;">'.$interval_input.'</div></div>'.$interval_input_extra.'</div>'
.'</div>
<div style="width: 40%; padding-left: 5%; padding-right: 12%;">
<div class="edit_discovery_input">'.$taskname_input_label.'<div class="discovery_text_input">'.$taskname_input.'</div></div>'
.'<div class="edit_discovery_input discovery_select_input">'.$discovery_server_select_label.$discovery_server_select.'<div class="discovery_hint"></div></div>'
.'<div class="edit_discovery_input">'.$network_input_label.'<div class="discovery_text_input">'.$network_input.'</div></div>'
.'</div>'
.'<div style="width: 35%;">'.$group_select.'</div>'
.'</div>'
.'<div class="edit_discovery_info">
<div style="width: 100%;">
'.$comment_input.'
</div>
</div>'
.'</div>';
$str = __('Next');
if (isset($this->task['id_rt']) === true) {
$str = __('Update and continue');
}
echo '<div class="action-buttons" style="width: 100%; margin-top: 10px;">'.html_print_submit_button($str, 'submit', false, 'class="sub next"', true).'</div>';
echo '</form>';
echo '<script>
$("select#interval_manual_defined").change(function() {
if ($("#interval_manual_defined").val() == 1) {
$("#interval_manual_container").hide();
$("#text-interval_text").val(0);
$("#hidden-interval").val(0);
}
else {
$("#interval_manual_container").show();
$("#text-interval_text").val(10);
$("#hidden-interval").val('.$interval.');
$("#interval_units").val('.$unit.');
}
}).change();
</script>';
}
}
@ -783,7 +792,7 @@ $("select#interval_manual_defined").change(function() {
];
$form['inputs'][] = [
'extra' => '<p>Please, configure task <b>'.io_safe_output($this->task['name']).'</b></p>',
'extra' => '<p><h3>Please, configure task <b>'.io_safe_output($this->task['name']).'</b></h3></p>',
];
// Input: Module template.
@ -799,7 +808,6 @@ $("select#interval_manual_defined").change(function() {
'selected' => $this->task['id_network_profile'],
'nothing_value' => 0,
'nothing' => __('None'),
],
];
@ -850,7 +858,7 @@ $("select#interval_manual_defined").change(function() {
'action' => $this->url.'&mode=netscan&page='.($this->page + 1).'&task='.$this->task['id_rt'],
];
$this->printForm($form);
$this->printForm($form, false, true);
}
if ($this->page == 2) {

View File

@ -479,7 +479,8 @@ class Wizard
((isset($data['keys_field']) === true) ? $data['keys_field'] : 'id_grupo'),
((isset($data['strict_user']) === true) ? $data['strict_user'] : false),
((isset($data['delete_groups']) === true) ? $data['delete_groups'] : false),
((isset($data['include_groups']) === true) ? $data['include_groups'] : false)
((isset($data['include_groups']) === true) ? $data['include_groups'] : false),
((isset($data['size']) === true) ? $data['size'] : false)
);
case 'submit':
@ -636,7 +637,7 @@ class Wizard
*
* @return string HTML code.
*/
public function printForm(array $data, bool $return=false)
public function printForm(array $data, bool $return=false, bool $print_white_box=false)
{
$form = $data['form'];
$inputs = $data['inputs'];
@ -662,13 +663,27 @@ class Wizard
error_log('Error executing wizard callback: ', $e->getMessage());
}
$output = '<ul class="wizard">';
$output_submit = '';
$output = '';
if ($print_white_box === true)
$output .= '<div class="white_box">';
$output .= '<ul class="wizard">';
foreach ($inputs as $input) {
$output .= $this->printBlock($input, true);
if ($input['arguments']['type']!='submit')
$output .= $this->printBlock($input, true);
else
$output_submit .= $this->printBlock($input, true);
}
$output .= '</ul>';
if ($print_white_box === true)
$output .= '</div>';
$output .= '<ul class="wizard">'.$output_submit.'</ul>';
$output .= '</form>';
$output .= '<script>'.$js.'</script>';

View File

@ -45,23 +45,27 @@ if ($progress_task_discovery) {
$result = '<div id = progress_task_'.$id_task.'>';
if ($task['utimestamp']) {
$result .= '<ul class="progress_task_discovery">';
$result .= '<li><h1>'._('Overall Progress').'</h1></li>';
$result .= '<li>';
$result .= d3_progress_bar(
$result .= '<div style="display: flex;">';
$result .= '<div style="width: 100%; text-align: center; margin-top: 40px;">';
$result .= '<span style="font-size: 1.9em; font-family: "lato-bolder", "Open Sans", sans-serif !important;">'._('Overall Progress').'</span>';
$global_progress=83;
$result .= '<div style="margin-top: 25px;">';
$result .= progress_circular_bar(
$id_task,
($global_progress < 0) ? 100 : $global_progress,
460,
30,
'#EA5434',
200,
200,
'#7eb641',
'%',
'',
'#FFFFFF',
0,
0,
'#3A3A3A',
0
);
$result .= '</div>';
if ($global_progress > 0) {
switch ($summary['step']) {
case STEP_SCANNING:
@ -85,28 +89,28 @@ if ($progress_task_discovery) {
break;
}
$result .= '</li>';
$result .= '<li><h1>'.$str.' ';
$result .= '</div>';
$result .= '<div style="width: 100%; text-align: center; margin-top: 40px;">';
$result .= '<span style="font-size: 1.9em; font-family: "lato-bolder", "Open Sans", sans-serif !important;">'.$str.' ';
$result .= $summary['c_network_name'];
$result .= '</h1></li>';
$result .= '<li>';
$result .= d3_progress_bar(
$result .= '</span>';
$result .= '<div style="margin-top: 25px;">';
$result .= progress_circular_bar(
$id_task.'_detail',
$summary['c_network_percent'],
460,
30,
'#2751E1',
200,
200,
'#7eb641',
'%',
'',
'#FFFFFF',
0,
0,
'#3A3A3A',
0
);
$result .= '</li>';
$result .= '</div></div>';
}
$result .= '</ul>';
$result .= '</div></div>';
$i = 0;
$table = new StdClasS();
@ -142,6 +146,7 @@ if ($progress_task_discovery) {
$table->data[$i][1] .= $summary['summary']['WMI'];
$table->data[$i++][1] .= '</span>';
$result .= '<div style="margin-top: 40px; text-align: center;"><span style="font-size: 1.9em; font-family: "lato-bolder", "Open Sans", sans-serif !important;">'.__('Summary').'</span></div>';
$result .= html_print_table($table, true).'</div>';
} else {
$global_progress = -1;

View File

@ -438,7 +438,7 @@ class CustomNetScan extends Wizard
// Input task name.
$form['inputs'][] = [
'label' => '<b>'.__('Task name').'</b>',
'label' => __('Task name'),
'arguments' => [
'name' => 'taskname',
'value' => $this->task['name'],
@ -460,7 +460,7 @@ class CustomNetScan extends Wizard
// Input task description.
$form['inputs'][] = [
'label' => '<b>'.__('Comment').'</b>',
'label' => __('Comment'),
'arguments' => [
'name' => 'comment',
'value' => $this->task['description'],
@ -471,7 +471,7 @@ class CustomNetScan extends Wizard
// Input Discovery Server.
$form['inputs'][] = [
'label' => '<b>'.__('Discovery server').'</b>'.ui_print_help_tip(
'label' => __('Discovery server').ui_print_help_tip(
__('You must select a Discovery Server to run the Task, otherwise the Recon Task will never run'),
true
),
@ -492,7 +492,7 @@ class CustomNetScan extends Wizard
// Input Group.
$form['inputs'][] = [
'label' => '<b>'.__('Group').'</b>',
'label' => __('Group'),
'arguments' => [
'name' => 'id_group',
'returnAllGroup' => false,
@ -511,7 +511,7 @@ class CustomNetScan extends Wizard
// Schedule.
$form['inputs'][] = [
'label' => '<b>'.__('Interval').'</b>'.ui_print_help_tip(
'label' => __('Interval').ui_print_help_tip(
__('Manual interval means that it will be executed only On-demand'),
true
),
@ -594,7 +594,7 @@ class CustomNetScan extends Wizard
// XXX: Could be improved validating inputs before continue (JS)
// Print NetScan page 0.
$this->printForm($form);
$this->printForm($form, false, true);
}
}
@ -602,7 +602,7 @@ class CustomNetScan extends Wizard
$name_ipam = 'IPAM Recon';
// Recon script.
$form['inputs'][] = [
'label' => '<b>'.__('Recon script').'</b>',
'label' => __('Recon script'),
'arguments' => [
'type' => 'select_from_sql',
'sql' => sprintf(
@ -643,7 +643,7 @@ class CustomNetScan extends Wizard
);
$form['inputs'][] = [
'label' => '<b>'.__('Explanation').'</b><span id="spinner_recon_script" style="display: none;">'.html_print_image('images/spinner.gif', true).'</span>',
'label' => __('Explanation').'<span id="spinner_recon_script" style="display: none;">'.html_print_image('images/spinner.gif', true).'</span>',
'arguments' => [
'type' => 'textarea',
'rows' => 4,
@ -652,6 +652,7 @@ class CustomNetScan extends Wizard
'value' => $explanation,
'return' => true,
'attributes' => 'style="width: 388px;"',
'class' => 'discovery_textarea_input'
],
];
@ -663,8 +664,9 @@ class CustomNetScan extends Wizard
'name' => 'macro_name',
'value' => 'macro_value',
'type' => 'text',
'size' => 100,
'size' => 50,
'return' => true,
],
];

View File

@ -436,7 +436,8 @@ function html_print_select_groups(
$keys_field='id_grupo',
$strict_user=false,
$delete_groups=false,
$include_groups=false
$include_groups=false,
$size=false
) {
global $config;
@ -481,7 +482,8 @@ function html_print_select_groups(
$class,
$disabled,
$style,
$option_style
$option_style,
$size
);
if ($return) {
@ -549,13 +551,11 @@ function html_print_select(
$attributes .= ' onchange="'.$script.'"';
}
if (!empty($multiple)) {
if ($size !== false) {
$attributes .= ' multiple="multiple" size="'.$size.'"';
} else {
$attributes .= ' multiple="multiple" size="10"';
}
}
if ($size !== false)
$attributes .= ' size="'.$size.'"';
if (!empty($multiple))
$attributes .= ' multiple="multiple"';
if (!empty($class)) {
$attributes .= ' class="'.$class.'"';
@ -1774,7 +1774,8 @@ function html_print_button($label='OK', $name='', $disabled=false, $script='', $
*/
function html_print_textarea($name, $rows, $columns, $value='', $attributes='', $return=false, $class='')
{
$output = '<textarea id="textarea_'.$name.'" name="'.$name.'" cols="'.$columns.'" rows="'.$rows.'" '.$attributes.'" '.$class.'>';
$output = '<textarea id="textarea_'.$name.'" name="'.$name.'" cols="'.$columns.'" rows="'.$rows.'" '.$attributes.'" class="'.$class.'">';
// $output .= io_safe_input ($value);
$output .= ($value);
$output .= '</textarea>';

View File

@ -415,7 +415,7 @@ function d3_progress_bubble($id, $percentile, $width, $height, $color, $unit='%'
}
function progress_circular_bar($id, $percentile, $width, $height, $color, $unit='%', $text='', $fill_color='#FFFFFF')
function progress_circular_bar($id, $percentile, $width, $height, $color, $unit='%', $text='', $fill_color='#FFFFFF', $transition=1)
{
global $config;
@ -427,7 +427,7 @@ function progress_circular_bar($id, $percentile, $width, $height, $color, $unit=
$output .= '<div id='.$recipient_name." style='overflow: hidden;'></div>";
$output .= include_javascript_d3(true);
$output .= "<script language=\"javascript\" type=\"text/javascript\">
print_circular_progress_bar('".$recipient_name_to_js."', ".(int) $percentile.', '.(int) $width.', '.(int) $height.", '".$color."', '".$unit."', '".$text."', '".$fill_color."');
print_circular_progress_bar('".$recipient_name_to_js."', ".(int) $percentile.', '.(int) $width.', '.(int) $height.", '".$color."', '".$unit."', '".$text."', '".$fill_color."', '".$transition."');
</script>";
return $output;

View File

@ -1988,7 +1988,8 @@ function print_circular_progress_bar(
color,
unit,
label,
label_color
label_color,
transition
) {
var twoPi = Math.PI * 2;
var radius = width / 2;
@ -2120,15 +2121,19 @@ function print_circular_progress_bar(
var progress = startPercent;
(function loops() {
updateProgress(progress);
if (transition == 0)
updateProgress(endPercent);
else {
(function loops() {
updateProgress(progress);
if (count > 0) {
count--;
progress += step;
setTimeout(loops, 30);
}
})();
if (count > 0) {
count--;
progress += step;
setTimeout(loops, 30);
}
})();
}
}
function print_interior_circular_progress_bar(

View File

@ -156,11 +156,118 @@ span.breadcrumb_link {
color: #95b750;
}
.form_grid_items {
overflow: hidden;
/*
* Discovery forms structure
*/
.edit_discovery_info {
display: flex;
align-items: center;
padding-top: 25px;
}
.form_grid_items .form_grid_item {
float: left;
.edit_discovery_input {
align-items: center;
margin-bottom: 25px;
}
/*
* Discovery text inputs
*/
.discovery_label_hint {
display: flex;
}
label {
color: #343434 !important;
font-size: 1.5em;
font-family: "lato-bolder", "Open Sans", sans-serif !important;
font-weight: bold;
margin: 0px 0px 5px 0px;
}
.discovery_full_width_input {
width: 100%;
}
select {
font-family: "lato-bolder", "Open Sans", sans-serif !important;
font-size: 1.6em !important;
color: #686868;
}
select > option {
font-family: "lato-bolder", "Open Sans", sans-serif !important;
font-size: 1em !important;
}
li > input[type=text], li > input[type=password], .discovery_text_input > input[type=password], .discovery_text_input > input[type=text], #interval_manual > input[type=text] {
background-color: transparent !important;
border: none;
border-radius: 0 !important;
border-bottom: 1px solid #343434;
padding: 0px 0px 2px 0px;
box-sizing: border-box;
margin-bottom: 4px;
font-family: "lato-bolder", "Open Sans", sans-serif !important;
font-size: 1.6em;
}
li > input[type=text]:focus, li > input[type=password]:focus, .discovery_text_input > input[type=password]:focus, .discovery_text_input > input[type=text]:focus, #interval_manual > input[type=text]:focus {
font-weight: bold;
}
#interval_manual > input[type=text] {
width: 50px;
margin-left: 10px;
margin-right: 10px;
}
.discovery_list_input {
font-family: "lato-bolder", "Open Sans", sans-serif !important;
font-size: 1.6em !important;
color: #686868;
width: 100%;
height: 240px;
border: 1px solid #CBCBCB;
overflow-y: auto;
}
.discovery_list_input option {
font-family: "lato-bolder", "Open Sans", sans-serif !important;
font-size: 1.1em !important;
padding-left: 30%;
}
.discovery_list_input option:checked {
background: #1aab8e -webkit-linear-gradient(bottom, #7db742 0%, #7db742 100%);
color: #fff;
}
.discovery_textarea_input {
background-color: #fbfbfb !important;
padding-left: 10px;
width: 100%;
height: 100px;
max-height: 100px;
max-width: 100%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
padding: 10px;
resize: none;
font-family: "lato-bolder", "Open Sans", sans-serif !important;
font-size: 1.4em !important;
}
a.tip {
margin-left: 8px;
}
.inline_switch > label {
float: right;
}
.discovery_interval_select_width {
width: 90%;
}