mirror of
https://github.com/librenms/librenms.git
synced 2024-10-07 16:52:45 +00:00
New Blade Components: x-device-link, x-port-link, x-graph-row, x-popup (#13197)
* working popover * popup component * cleanup * finalize device-link component * attributes WIP * working graph component * widgets WIP * More dynamic configs * Graph row component * Build CSS so we can use a dark theme * graph row set columns * only one popup visible at a time. * Just set graph row width statically * responsive WIP * rsponsive option for graph-row "working" * remove @deviceLink and @portLink * fix non-responsive graph row * update js/css * fix style * bad type? * types * types * types #3 * remove testing code * full rebel, no closing tags for meta and link * match previous formatting * fix vlans display * restore newline * remove silly comment * remove unused line * style I guess
This commit is contained in:
Tony Murray
GitHub
66
app/View/Components/DeviceLink.php
Normal file
66
app/View/Components/DeviceLink.php
Normal file
@@ -0,0 +1,66 @@
|
||||
<?php
|
||||
|
||||
namespace App\View\Components;
|
||||
|
||||
use App\Facades\DeviceCache;
|
||||
use App\Models\Device;
|
||||
use Illuminate\View\Component;
|
||||
use LibreNMS\Util\Graph;
|
||||
|
||||
class DeviceLink extends Component
|
||||
{
|
||||
/**
|
||||
* @var \App\Models\Device
|
||||
*/
|
||||
public $device;
|
||||
/**
|
||||
* @var string|null
|
||||
*/
|
||||
public $tab;
|
||||
/**
|
||||
* @var string|null
|
||||
*/
|
||||
public $section;
|
||||
/**
|
||||
* @var string
|
||||
*/
|
||||
public $status;
|
||||
|
||||
/**
|
||||
* Create a new component instance.
|
||||
*
|
||||
* @param int|\App\Models\Device $device
|
||||
*/
|
||||
public function __construct($device, ?string $tab = null, ?string $section = null)
|
||||
{
|
||||
$this->device = $device instanceof Device ? $device : DeviceCache::get($device);
|
||||
$this->tab = $tab;
|
||||
$this->section = $section;
|
||||
$this->status = $this->status();
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the view / contents that represent the component.
|
||||
*
|
||||
* @return \Illuminate\Contracts\View\View|\Closure|string
|
||||
*/
|
||||
public function render()
|
||||
{
|
||||
if (! $this->device->canAccess(auth()->user())) {
|
||||
return view('components.device-link-no-access');
|
||||
}
|
||||
|
||||
return view('components.device-link', [
|
||||
'graphs' => Graph::getOverviewGraphsForDevice($this->device),
|
||||
]);
|
||||
}
|
||||
|
||||
public function status(): string
|
||||
{
|
||||
if ($this->device->disabled) {
|
||||
return 'disabled';
|
||||
}
|
||||
|
||||
return $this->device->status ? 'up' : ($this->device->ignore ? 'disabled' : 'down');
|
||||
}
|
||||
}
|
||||
106
app/View/Components/Graph.php
Normal file
106
app/View/Components/Graph.php
Normal file
@@ -0,0 +1,106 @@
|
||||
<?php
|
||||
|
||||
namespace App\View\Components;
|
||||
|
||||
use App\Models\Device;
|
||||
use App\Models\Port;
|
||||
use Illuminate\View\Component;
|
||||
|
||||
class Graph extends Component
|
||||
{
|
||||
const DEFAULT_WIDE_WIDTH = 340;
|
||||
const DEFAULT_WIDE_HEIGHT = 100;
|
||||
const DEFAULT_NORMAL_WIDTH = 300;
|
||||
const DEFAULT_NORMAL_HEIGHT = 150;
|
||||
|
||||
/**
|
||||
* @var array
|
||||
*/
|
||||
public $vars;
|
||||
/**
|
||||
* @var int|null
|
||||
*/
|
||||
public $width;
|
||||
/**
|
||||
* @var int|null
|
||||
*/
|
||||
public $height;
|
||||
/**
|
||||
* @var string
|
||||
*/
|
||||
public $type;
|
||||
/**
|
||||
* @var int|string|null
|
||||
*/
|
||||
public $from;
|
||||
/**
|
||||
* @var int|string|null
|
||||
*/
|
||||
public $to;
|
||||
/**
|
||||
* @var string
|
||||
*/
|
||||
public $legend;
|
||||
/**
|
||||
* @var int
|
||||
*/
|
||||
public $absolute_size;
|
||||
|
||||
/**
|
||||
* Create a new component instance.
|
||||
*
|
||||
* @param string $type
|
||||
* @param array $vars
|
||||
* @param int|string $from
|
||||
* @param int|string $to
|
||||
* @param string $legend
|
||||
* @param string $aspect
|
||||
* @param int|null $width
|
||||
* @param int|null $height
|
||||
* @param int $absolute_size
|
||||
* @param \App\Models\Device|int|null $device
|
||||
* @param \App\Models\Port|int|null $port
|
||||
*/
|
||||
public function __construct(string $type = '', array $vars = [], $from = '-1d', $to = null, string $legend = 'no', string $aspect = 'normal', ?int $width = null, ?int $height = null, int $absolute_size = 0, $device = null, $port = null)
|
||||
{
|
||||
$this->type = $type;
|
||||
$this->vars = $vars;
|
||||
$this->from = $from;
|
||||
$this->to = $to;
|
||||
$this->legend = $legend;
|
||||
$this->absolute_size = $absolute_size;
|
||||
$this->width = $width ?: ($aspect == 'wide' ? self::DEFAULT_WIDE_WIDTH : self::DEFAULT_NORMAL_WIDTH);
|
||||
$this->height = $height ?: ($aspect == 'wide' ? self::DEFAULT_WIDE_HEIGHT : self::DEFAULT_NORMAL_HEIGHT);
|
||||
|
||||
// handle device and port ids/models for convenience could be set in $vars
|
||||
if ($device instanceof Device) {
|
||||
$this->vars['device'] = $device->device_id;
|
||||
} elseif (is_numeric($device)) {
|
||||
$this->vars['device'] = $device;
|
||||
} elseif ($port instanceof Port) {
|
||||
$this->vars['id'] = $port->port_id;
|
||||
} elseif (is_numeric($port)) {
|
||||
$this->vars['id'] = $port;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the view / contents that represent the component.
|
||||
*
|
||||
* @return \Illuminate\Contracts\View\View|\Closure|string
|
||||
*/
|
||||
public function render()
|
||||
{
|
||||
return view('components.graph', [
|
||||
'link' => url('graph.php') . '?' . http_build_query($this->vars + [
|
||||
'type' => $this->type,
|
||||
'legend' => $this->legend,
|
||||
'absolute_size' => $this->absolute_size,
|
||||
'width' => $this->width,
|
||||
'height' => $this->height,
|
||||
'from' => $this->from,
|
||||
'to' => $this->to,
|
||||
]),
|
||||
]);
|
||||
}
|
||||
}
|
||||
96
app/View/Components/GraphRow.php
Normal file
96
app/View/Components/GraphRow.php
Normal file
@@ -0,0 +1,96 @@
|
||||
<?php
|
||||
|
||||
namespace App\View\Components;
|
||||
|
||||
use Illuminate\View\Component;
|
||||
|
||||
class GraphRow extends Component
|
||||
{
|
||||
/**
|
||||
* @var string
|
||||
*/
|
||||
public $type;
|
||||
/**
|
||||
* @var string
|
||||
*/
|
||||
public $loading;
|
||||
/**
|
||||
* @var null
|
||||
*/
|
||||
public $device;
|
||||
/**
|
||||
* @var null
|
||||
*/
|
||||
public $port;
|
||||
/**
|
||||
* @var array|string[][]
|
||||
*/
|
||||
public $graphs;
|
||||
/**
|
||||
* @var string|null
|
||||
*/
|
||||
public $title;
|
||||
/**
|
||||
* @var float|int
|
||||
*/
|
||||
public $rowWidth;
|
||||
/**
|
||||
* @var bool
|
||||
*/
|
||||
public $responsive;
|
||||
/**
|
||||
* @var string
|
||||
*/
|
||||
public $aspect;
|
||||
|
||||
/**
|
||||
* Create a new component instance.
|
||||
*
|
||||
* @param string $type
|
||||
* @param string|null $title
|
||||
* @param string $loading
|
||||
* @param string $aspect
|
||||
* @param int $columns
|
||||
* @param array $graphs
|
||||
* @param \App\Models\Device|int|null $device
|
||||
* @param \App\Models\Port|int|null $port
|
||||
*/
|
||||
public function __construct(string $type = '', string $title = null, string $loading = 'eager', string $aspect = 'normal', int $columns = 2, array $graphs = [['from' => '-1d'], ['from' => '-7d'], ['from' => '-30d'], ['from' => '-1y']], $device = null, $port = null)
|
||||
{
|
||||
$this->type = $type;
|
||||
$this->aspect = $aspect;
|
||||
$this->loading = $loading;
|
||||
$this->device = $device;
|
||||
$this->port = $port;
|
||||
$this->graphs = $graphs;
|
||||
$this->title = $title;
|
||||
$this->responsive = $columns == 'responsive';
|
||||
$this->rowWidth = $this->calculateRowWidth($columns);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the view / contents that represent the component.
|
||||
*
|
||||
* @return \Illuminate\Contracts\View\View|\Closure|string
|
||||
*/
|
||||
public function render()
|
||||
{
|
||||
return view('components.graph-row');
|
||||
}
|
||||
|
||||
private function calculateRowWidth(int $columns): ?int
|
||||
{
|
||||
if ($this->responsive) {
|
||||
return null;
|
||||
}
|
||||
|
||||
$max = max(array_column($this->graphs, 'width') + [0]);
|
||||
|
||||
if (! $max) {
|
||||
$max = $this->aspect == 'wide' ? Graph::DEFAULT_WIDE_WIDTH : Graph::DEFAULT_NORMAL_WIDTH;
|
||||
}
|
||||
|
||||
// width * columns, unless there is less graphs than columns
|
||||
return $max * min($columns, count($this->graphs));
|
||||
}
|
||||
}
|
||||
18
app/View/Components/Popup.php
Normal file
18
app/View/Components/Popup.php
Normal file
@@ -0,0 +1,18 @@
|
||||
<?php
|
||||
|
||||
namespace App\View\Components;
|
||||
|
||||
use Illuminate\View\Component;
|
||||
|
||||
class Popup extends Component
|
||||
{
|
||||
/**
|
||||
* Get the view / contents that represent the component.
|
||||
*
|
||||
* @return \Illuminate\Contracts\View\View|\Closure|string
|
||||
*/
|
||||
public function render()
|
||||
{
|
||||
return view('components.popup');
|
||||
}
|
||||
}
|
||||
92
app/View/Components/PortLink.php
Normal file
92
app/View/Components/PortLink.php
Normal file
@@ -0,0 +1,92 @@
|
||||
<?php
|
||||
|
||||
namespace App\View\Components;
|
||||
|
||||
use App\Models\Port;
|
||||
use Illuminate\Support\Arr;
|
||||
use Illuminate\View\Component;
|
||||
use LibreNMS\Util\Rewrite;
|
||||
use LibreNMS\Util\Url;
|
||||
|
||||
class PortLink extends Component
|
||||
{
|
||||
/**
|
||||
* @var \App\Models\Port
|
||||
*/
|
||||
public $port;
|
||||
/**
|
||||
* @var string
|
||||
*/
|
||||
public $link;
|
||||
/**
|
||||
* @var array|string|string[]
|
||||
*/
|
||||
public $label;
|
||||
/**
|
||||
* @var string
|
||||
*/
|
||||
public $description;
|
||||
/**
|
||||
* @var array|array[]
|
||||
*/
|
||||
public $graphs;
|
||||
/**
|
||||
* @var string
|
||||
*/
|
||||
public $status;
|
||||
|
||||
/**
|
||||
* Create a new component instance.
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
public function __construct(Port $port, ?array $graphs = null)
|
||||
{
|
||||
$this->port = $port;
|
||||
$this->link = Url::portUrl($port);
|
||||
$this->label = Rewrite::normalizeIfName($port->getLabel());
|
||||
$this->description = $port->getDescription();
|
||||
$this->status = $this->status();
|
||||
|
||||
$this->graphs = $graphs === null ? [
|
||||
['type' => 'port_bits', 'title' => trans('Traffic'), 'vars' => [['from' => '-1d'], ['from' => '-7d'], ['from' => '-30d'], ['from' => '-1y']]],
|
||||
] : Arr::wrap($graphs);
|
||||
|
||||
if ($this->description == $this->label) {
|
||||
$this->description = '';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the view / contents that represent the component.
|
||||
*
|
||||
* @return \Illuminate\Contracts\View\View|\Closure|string
|
||||
*/
|
||||
public function render()
|
||||
{
|
||||
return view('components.port-link');
|
||||
}
|
||||
|
||||
private function status(): string
|
||||
{
|
||||
if ($this->port->ifAdminStatus == 'down') {
|
||||
return 'disabled';
|
||||
}
|
||||
|
||||
return $this->port->ifAdminStatus == 'up' && $this->port->ifOperStatus != 'up'
|
||||
? 'down'
|
||||
: 'up';
|
||||
}
|
||||
|
||||
public function fillDefaultVars(array $vars): array
|
||||
{
|
||||
return array_map(function ($graph_vars) {
|
||||
return array_merge([
|
||||
'from' => '-1d',
|
||||
'type' => 'port_bits',
|
||||
'legend' => 'yes',
|
||||
'text' => '',
|
||||
], Arr::wrap($graph_vars));
|
||||
}, $vars);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user