Skip to content

Commit dd575be

Browse files
laflaf
authored
Another round of device overview updates (librenms#19810)
* Another round of device overview updates * Moved bootstrap to tw * Moved away from tailwind apply * Updated ddd -> gray-300 * Updated css/js build * Updated colours * Updated coloumns * Updated example plugin * Small tweaks but also missing updates for some overview panels * Converted puppet agent panel * Removed tailwinds @source * Rebased
1 parent 61e4043 commit dd575be

24 files changed

Lines changed: 259 additions & 356 deletions

‎app/Plugins/ExamplePlugin/resources/views/device-overview.blade.php‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,10 @@
1-
<div class="row">
2-
<div class="col-md-12">
3-
<div class="panel panel-default panel-condensed">
4-
<div class="panel-heading">
5-
<strong>{{ $title }}</strong> <a href="{{ $url }}">[EDIT]</a>
6-
</div>
7-
<div class="panel-body">
8-
<div class="row">
9-
<div class="col-sm-12">
10-
{!! Str::markdown($device->notes ?? '', ['html_input' => 'strip', 'allow_unsafe_links' => false]) !!}
11-
</div>
12-
</div>
13-
</div>
1+
<div class="overview-panel tw:mb-5">
2+
<div class="tw:px-4 tw:py-2.5 tw:bg-neutral-100 tw:border-b tw:border-gray-300 tw:text-neutral-700 tw:dark:bg-dark-gray-200 tw:dark:border-zinc-800 tw:dark:text-dark-white-200">
3+
<strong>{{ $title }}</strong> <a href="{{ $url }}">[EDIT]</a>
144
</div>
5+
<div class="tw:flex tw:min-w-0 tw:flex-col tw:bg-white tw:divide-y tw:divide-gray-300 tw:dark:bg-dark-gray-400 tw:dark:divide-zinc-800">
6+
<div class="tw:px-4 tw:py-2">
7+
{!! Str::markdown($device->notes ?? '', ['html_input' => 'strip', 'allow_unsafe_links' => false]) !!}
8+
</div>
159
</div>
1610
</div>

html/build/assets/app-C1dIE6JB.js renamed to html/build/assets/app-BPrLHhck.js

File renamed without changes.

‎html/build/assets/app-BSDwxxtq.css‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎html/build/assets/app-D_mOkweP.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎html/build/manifest.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,12 @@
2020
"src": "html/fonts/glyphicons-halflings-regular.woff2"
2121
},
2222
"resources/js/app.js": {
23-
"file": "assets/app-C1dIE6JB.js",
23+
"file": "assets/app-BPrLHhck.js",
2424
"name": "app",
2525
"src": "resources/js/app.js",
2626
"isEntry": true,
2727
"css": [
28-
"assets/app-BSDwxxtq.css"
28+
"assets/app-D_mOkweP.css"
2929
],
3030
"assets": [
3131
"assets/glyphicons-halflings-regular-BUJKDMgK.eot",

‎includes/html/dev-groups-overview-data.inc.php‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,28 +4,22 @@
44

55
if (count($device_groups)) {
66
?>
7-
<div class='row'>
8-
<div class='col-md-12'>
9-
<div class='panel panel-default panel-condensed device-overview overview-panel'>
10-
<div class='panel-heading'>
7+
<div class='overview-panel tw:mb-5'>
8+
<div class='tw:px-4 tw:py-2.5 tw:bg-neutral-100 tw:border-b tw:border-gray-300 tw:text-neutral-700 tw:dark:bg-dark-gray-200 tw:dark:border-zinc-800 tw:dark:text-dark-white-200'>
119
<a href="<?=url('device-groups')?>">
1210
<i class="fa fa-th fa-lg icon-theme" aria-hidden="true"></i>
1311
<strong>Device Group Membership</strong>
1412
</a>
1513
</div>
16-
<div class="panel-body">
17-
<div class="row">
18-
<div class="col-sm-12">
14+
<div class="tw:flex tw:flex-col tw:bg-white tw:divide-y tw:divide-gray-300 tw:dark:bg-dark-gray-400 tw:dark:divide-zinc-800">
15+
<div class="tw:flex tw:flex-wrap tw:gap-2 tw:p-2">
1916
<?php foreach ($device_groups as $group) { ?>
20-
<span style="margin: 8px;">
17+
<span>
2118
<a href="<?=route('devices', ['filter' => ['groups.id' => ['eq' => $group['id']]]])?>" target="_blank"><?=htmlspecialchars((string) $group['name'])?></a>
2219
</span>
2320
<?php } ?>
24-
</div>
2521
</div>
2622
</div>
2723
</div>
28-
</div>
29-
</div>
3024
<?php
3125
}

‎includes/html/dev-overview-data.inc.php‎

Lines changed: 42 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,16 @@
1212
echo '<script src="js/leaflet.markercluster.js"></script>';
1313
echo '<script src="js/leaflet.awesome-markers.min.js"></script>';
1414

15-
echo "<div class='row'>
16-
<div class='col-md-12'>
17-
<div class='panel panel-default panel-condensed device-overview overview-panel'>
18-
<div class='panel-heading'>";
15+
echo "<div class='overview-panel tw:mb-5'>
16+
<div class='tw:px-4 tw:py-2.5 tw:bg-neutral-100 tw:border-b tw:border-gray-300 tw:text-neutral-700 tw:dark:bg-dark-gray-200 tw:dark:border-zinc-800 tw:dark:text-dark-white-200'>";
1917

2018
if (LibrenmsConfig::get('overview_show_sysDescr')) {
2119
echo '<i class="fa fa-id-card fa-lg icon-theme" aria-hidden="true"></i> <strong>';
2220
echo LibrenmsConfig::get('overview_show_sysDescr', true) ? Clean::html($device['sysDescr'], []) : 'System';
2321
echo '</strong>';
2422
}
2523

26-
echo '</div><div class="panel-body">';
24+
echo '</div><div class="tw:flex tw:flex-col tw:bg-white tw:divide-y tw:divide-gray-300 tw:dark:bg-dark-gray-400 tw:dark:divide-zinc-800">';
2725

2826
if ($device['os'] == 'ios' || $device['os'] == 'iosxe') {
2927
\LibreNMS\Util\Rewrite::ciscoHardware($device, false);
@@ -35,62 +33,62 @@
3533

3634
$device['os_text'] = LibrenmsConfig::getOsSetting($device['os'], 'text');
3735

38-
echo '<div class="row">
39-
<div class="col-sm-4">System Name</div>
40-
<div class="col-sm-8">' . Clean::html($device['sysName'], []) . ' </div>
36+
echo '<div class="tw:grid tw:items-center tw:gap-2.5 tw:px-2 tw:py-2 tw:hover:bg-neutral-100 tw:dark:hover:bg-dark-gray-300 tw:grid-cols-[1fr_2fr]">
37+
<div class="tw:font-medium">System Name</div>
38+
<div>' . Clean::html($device['sysName'], []) . ' </div>
4139
</div>';
4240

4341
if (! empty($device['overwrite_ip'])) {
44-
echo "<div class='row'><div class='col-sm-4'>Assigned IP</div><div class='col-sm-8'>" . htmlentities((string) $device['overwrite_ip']) . '</div></div>';
42+
echo '<div class="tw:grid tw:items-center tw:gap-2.5 tw:px-2 tw:py-2 tw:hover:bg-neutral-100 tw:dark:hover:bg-dark-gray-300 tw:grid-cols-[1fr_2fr]"><div class="tw:font-medium">Assigned IP</div><div>' . htmlentities((string) $device['overwrite_ip']) . '</div></div>';
4543
} elseif (! empty($device['ip'])) {
46-
echo "<div class='row'><div class='col-sm-4'>Resolved IP</div><div class='col-sm-8'>" . htmlentities((string) $device['ip']) . '</div></div>';
44+
echo '<div class="tw:grid tw:items-center tw:gap-2.5 tw:px-2 tw:py-2 tw:hover:bg-neutral-100 tw:dark:hover:bg-dark-gray-300 tw:grid-cols-[1fr_2fr]"><div class="tw:font-medium">Resolved IP</div><div>' . htmlentities((string) $device['ip']) . '</div></div>';
4745
} else {
4846
try {
4947
$ip = (string) IP::parse($device['hostname']);
5048
if ($ip !== format_hostname($device)) {
51-
echo "<div class='row'><div class='col-sm-4'>IP Address</div><div class='col-sm-8'>" . htmlentities($ip) . '</div></div>';
49+
echo '<div class="tw:grid tw:items-center tw:gap-2.5 tw:px-2 tw:py-2 tw:hover:bg-neutral-100 tw:dark:hover:bg-dark-gray-300 tw:grid-cols-[1fr_2fr]"><div class="tw:font-medium">IP Address</div><div>' . htmlentities($ip) . '</div></div>';
5250
}
5351
} catch (InvalidIpException) {
5452
// don't add an ip line
5553
}
5654
}
5755

5856
if ($device['purpose']) {
59-
echo '<div class="row">
60-
<div class="col-sm-4">Description</div>
61-
<div class="col-sm-8">' . Clean::html($device['purpose'], []) . '</div>
57+
echo '<div class="tw:grid tw:items-center tw:gap-2.5 tw:px-2 tw:py-2 tw:hover:bg-neutral-100 tw:dark:hover:bg-dark-gray-300 tw:grid-cols-[1fr_2fr]">
58+
<div class="tw:font-medium">Description</div>
59+
<div>' . Clean::html($device['purpose'], []) . '</div>
6260
</div>';
6361
}
6462

6563
if ($device['hardware']) {
66-
echo '<div class="row">
67-
<div class="col-sm-4">Hardware</div>
68-
<div class="col-sm-8">' . Clean::html($device['hardware'], []) . '</div>
64+
echo '<div class="tw:grid tw:items-center tw:gap-2.5 tw:px-2 tw:py-2 tw:hover:bg-neutral-100 tw:dark:hover:bg-dark-gray-300 tw:grid-cols-[1fr_2fr]">
65+
<div class="tw:font-medium">Hardware</div>
66+
<div>' . Clean::html($device['hardware'], []) . '</div>
6967
</div>';
7068
}
7169

72-
echo '<div class="row">
73-
<div class="col-sm-4 text-nowrap">Operating System</div>
74-
<div class="col-sm-8">' . Clean::html($device['os_text'] . ' ' . $device['version'] . ' ' . $device['features'], []) . ' </div>
70+
echo '<div class="tw:grid tw:items-center tw:gap-2.5 tw:px-2 tw:py-2 tw:hover:bg-neutral-100 tw:dark:hover:bg-dark-gray-300 tw:grid-cols-[1fr_2fr]">
71+
<div class="tw:font-medium tw:text-nowrap">Operating System</div>
72+
<div>' . Clean::html($device['os_text'] . ' ' . $device['version'] . ' ' . $device['features'], []) . ' </div>
7573
</div>';
7674

7775
if ($device['serial']) {
78-
echo '<div class="row">
79-
<div class="col-sm-4">Serial</div>
80-
<div class="col-sm-8">' . Clean::html($device['serial'], []) . '</div>
76+
echo '<div class="tw:grid tw:items-center tw:gap-2.5 tw:px-2 tw:py-2 tw:hover:bg-neutral-100 tw:dark:hover:bg-dark-gray-300 tw:grid-cols-[1fr_2fr]">
77+
<div class="tw:font-medium">Serial</div>
78+
<div>' . Clean::html($device['serial'], []) . '</div>
8179
</div>';
8280
}
8381

8482
if ($device['sysObjectID']) {
85-
echo '<div class="row">
86-
<div class="col-sm-4">Object ID</div>
87-
<div class="col-sm-8">' . Clean::html($device['sysObjectID'], []) . '</div>
83+
echo '<div class="tw:grid tw:items-center tw:gap-2.5 tw:px-2 tw:py-2 tw:hover:bg-neutral-100 tw:dark:hover:bg-dark-gray-300 tw:grid-cols-[1fr_2fr]">
84+
<div class="tw:font-medium">Object ID</div>
85+
<div>' . Clean::html($device['sysObjectID'], []) . '</div>
8886
</div>';
8987
}
9088

9189
if ($device['sysContact']) {
92-
echo '<div class="row">
93-
<div class="col-sm-4">Contact</div>';
90+
echo '<div class="tw:grid tw:items-center tw:gap-2.5 tw:px-2 tw:py-2 tw:hover:bg-neutral-100 tw:dark:hover:bg-dark-gray-300 tw:grid-cols-[1fr_2fr]">
91+
<div class="tw:font-medium">Contact</div>';
9492

9593
$contactText = get_dev_attrib($device, 'override_sysContact_bool')
9694
? get_dev_attrib($device, 'override_sysContact_string')
@@ -115,28 +113,28 @@
115113
$displayText ??= Clean::html($contactText);
116114

117115
if (get_dev_attrib($device, 'override_sysContact_bool')) {
118-
echo '<div class="col-sm-8">' . $displayText . '</div>
116+
echo '<div>' . $displayText . '</div>
119117
</div>
120-
<div class="row">
121-
<div class="col-sm-4">SNMP Contact</div>
122-
<div class="col-sm-8">' . Clean::html($device['sysContact']) . '</div>
118+
<div class="tw:grid tw:items-center tw:gap-2.5 tw:px-2 tw:py-2 tw:hover:bg-neutral-100 tw:dark:hover:bg-dark-gray-300 tw:grid-cols-[1fr_2fr]">
119+
<div class="tw:font-medium">SNMP Contact</div>
120+
<div>' . Clean::html($device['sysContact']) . '</div>
123121
</div>';
124122
} else {
125-
echo '<div class="col-sm-8">' . $displayText . '</div>
123+
echo '<div>' . $displayText . '</div>
126124
</div>';
127125
}
128126
}
129127

130128
if (! empty($device['inserted']) && preg_match('/^0/', (string) $device['inserted']) == 0) {
131129
$inserted_text = 'Device Added';
132130
$inserted = (Time::formatInterval(-(time() - strtotime((string) $device['inserted']))));
133-
echo "<div class='row'><div class='col-sm-4'>$inserted_text</div><div class='col-sm-8' title='$inserted_text on " . $device['inserted'] . "'>$inserted</div></div>";
131+
echo '<div class="tw:grid tw:items-center tw:gap-2.5 tw:px-2 tw:py-2 tw:hover:bg-neutral-100 tw:dark:hover:bg-dark-gray-300 tw:grid-cols-[1fr_2fr]"><div class="tw:font-medium">' . $inserted_text . "</div><div title='$inserted_text on " . $device['inserted'] . "'>$inserted</div></div>";
134132
}
135133

136134
if (! empty($device['last_discovered'])) {
137135
$last_discovered_text = 'Last Discovered';
138136
$last_discovered = (empty($device['last_discovered']) ? 'Never' : Time::formatInterval(-(time() - strtotime((string) $device['last_discovered']))));
139-
echo "<div class='row'><div class='col-sm-4'>$last_discovered_text</div><div class='col-sm-8' title='$last_discovered_text at " . $device['last_discovered'] . "'>$last_discovered</div></div>";
137+
echo '<div class="tw:grid tw:items-center tw:gap-2.5 tw:px-2 tw:py-2 tw:hover:bg-neutral-100 tw:dark:hover:bg-dark-gray-300 tw:grid-cols-[1fr_2fr]"><div class="tw:font-medium">' . $last_discovered_text . "</div><div title='$last_discovered_text at " . $device['last_discovered'] . "'>$last_discovered</div></div>";
140138
}
141139

142140

@@ -152,7 +150,7 @@
152150
}
153151

154152
if ($uptime) {
155-
echo "<div class='row'><div class='col-sm-4'>$uptime_text</div><div class='col-sm-8'>$uptime</div></div>";
153+
echo '<div class="tw:grid tw:items-center tw:gap-2.5 tw:px-2 tw:py-2 tw:hover:bg-neutral-100 tw:dark:hover:bg-dark-gray-300 tw:grid-cols-[1fr_2fr]"><div class="tw:font-medium">' . $uptime_text . '</div><div>' . $uptime . '</div></div>';
156154
}
157155

158156
if ($device['location_id'] && $location = Location::find($device['location_id'])) {
@@ -162,13 +160,13 @@
162160
$location_coords = $location_valid ? $location->lat . ', ' . $location->lng : 'N/A';
163161

164162
echo '
165-
<div class="row">
166-
<div class="col-sm-4">Location</div>
167-
<div class="col-sm-8">' . Clean::html($location->display(), []) . '</div>
163+
<div class="tw:grid tw:items-center tw:gap-2.5 tw:px-2 tw:py-2 tw:hover:bg-neutral-100 tw:dark:hover:bg-dark-gray-300 tw:grid-cols-[1fr_2fr]">
164+
<div class="tw:font-medium">Location</div>
165+
<div>' . Clean::html($location->display(), []) . '</div>
168166
</div>
169-
<div class="row" id="coordinates-row" data-toggle="collapse" data-target="#toggle-map">
170-
<div class="col-sm-4">Lat / Lng</div>
171-
<div class="col-sm-8"><span id="coordinates-text">' . $location_coords . '</span><div class="pull-right">';
167+
<div class="tw:grid tw:items-center tw:gap-2.5 tw:px-2 tw:py-2 tw:hover:bg-neutral-100 tw:dark:hover:bg-dark-gray-300 tw:grid-cols-[1fr_2fr]" id="coordinates-row" data-toggle="collapse" data-target="#toggle-map">
168+
<div class="tw:font-medium">Lat / Lng</div>
169+
<div class="tw:flex tw:items-center tw:justify-between tw:gap-2"><span id="coordinates-text">' . $location_coords . '</span>';
172170

173171
echo '<div class="btn-group" role="group" aria-label="Map actions">';
174172
echo '<button type="button" id="toggle-map-button" class="btn btn-primary btn-xs" data-toggle="collapse" data-target="#toggle-map"><i class="fa fa-map" style="color:white" aria-hidden="true"></i> <span>View</span></button>';
@@ -177,10 +175,9 @@
177175
}
178176
echo ' </div>
179177
</div>
180-
</div>
181178
</div>
182-
<div id="toggle-map" class="row collapse"><div id="location-map"></div></div>
183-
<script>
179+
<div id="toggle-map" class="collapse"><div id="location-map"></div></div>';
180+
echo '<script>
184181
var device_map, device_marker_cluster;
185182
186183
L.Control.Fullscreen = L.Control.extend({
@@ -333,5 +330,3 @@
333330
?>
334331
</div>
335332
</div>
336-
</div>
337-
</div>

‎includes/html/pages/device/overview/availability_bar.inc.php‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -116,15 +116,14 @@
116116
}, 0);
117117

118118
echo <<<'HTML'
119-
<div class="row">
120-
<div class="col-md-12">
121-
<div class="panel panel-default panel-condensed overview-panel">
122-
<div class="panel-heading">
123-
<i class="fa fa-check-circle fa-lg icon-theme" aria-hidden="true"></i>
124-
<strong> Availability (90 days)</strong>
125-
</div>
126-
<div class="panel-body tw:px-4 tw:py-2.5">
127-
<div class="tw:flex tw:gap-px tw:items-center">
119+
<div class="overview-panel tw:mb-5">
120+
<div class="tw:px-4 tw:py-2.5 tw:bg-neutral-100 tw:border-b tw:border-gray-300 tw:text-neutral-700 tw:dark:bg-dark-gray-200 tw:dark:border-zinc-800 tw:dark:text-dark-white-200">
121+
<i class="fa fa-check-circle fa-lg icon-theme" aria-hidden="true"></i>
122+
<strong> Availability (90 days)</strong>
123+
</div>
124+
<div class="tw:flex tw:min-w-0 tw:flex-col tw:bg-white tw:divide-y tw:divide-gray-300 tw:dark:bg-dark-gray-400 tw:dark:divide-zinc-800">
125+
<div class="tw:px-4 tw:py-2.5">
126+
<div class="tw:flex tw:gap-px tw:items-center">
128127
HTML;
129128

130129
foreach ($day_data as $day) {
@@ -174,7 +173,6 @@ class="tw:fixed tw:bg-white tw:border tw:border-gray-300 tw:rounded tw:min-w-70
174173
<span><strong class="$total_color">$total_avail% uptime</strong></span>
175174
<span>Today</span>
176175
</div>
177-
</div>
178176
</div>
179177
</div>
180178
</div>

‎includes/html/pages/device/overview/eventlog.inc.php‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,32 @@
11
<?php
22

3-
echo ' <div class="row">
4-
<div class="col-md-12">
5-
<div class="panel panel-default panel-condensed overview-panel">
6-
<div class="panel-heading">';
3+
use App\Models\Port;
4+
use LibreNMS\Util\Time;
5+
6+
echo ' <div class="overview-panel tw:mb-5">
7+
<div class="tw:px-4 tw:py-2.5 tw:bg-neutral-100 tw:border-b tw:border-gray-300 tw:text-neutral-700 tw:dark:bg-dark-gray-200 tw:dark:border-zinc-800 tw:dark:text-dark-white-200">';
78
echo '<a href="' . route('device.eventlog', ['device' => $device['device_id']]) . '">';
89
echo '<i class="fa fa-bookmark fa-lg icon-theme" aria-hidden="true"></i> <strong>Recent Events</strong></a>';
910
echo ' </div>
10-
<table class="table table-hover table-condensed table-striped">';
11+
<div class="tw:flex tw:flex-col tw:bg-white tw:divide-y tw:divide-gray-300 tw:dark:bg-dark-gray-400 tw:dark:divide-zinc-800">';
1112

1213
$eventlog = dbFetchRows('SELECT * FROM `eventlog` WHERE `device_id` = ? ORDER BY `datetime` DESC LIMIT 0,10', [$device['device_id']]);
1314
foreach ($eventlog as $entry) {
14-
include 'includes/html/print-event-short.inc.php';
15+
$severity_colour = eventlog_severity($entry['severity']);
16+
$icon = '<span class="alert-status ' . $severity_colour . '"></span>';
17+
18+
echo '<div class="tw:grid tw:items-center tw:gap-2.5 tw:px-2 tw:py-2 tw:hover:bg-neutral-100 tw:dark:hover:bg-dark-gray-300 tw:grid-cols-[auto_auto_100px_1fr]">';
19+
echo '<div>' . $icon . '</div>';
20+
echo '<div class="tw:whitespace-nowrap">' . Time::format($entry['datetime'], 'compact') . '</div>';
21+
echo '<div class="tw:truncate">';
22+
23+
if ($entry['type'] == 'interface') {
24+
echo '<b>' . \LibreNMS\Util\Url::portLink(Port::find($entry['reference'])) . '</b>';
25+
}
26+
27+
echo '</div><div>' . htmlspecialchars((string) $entry['message']) . '</div>';
28+
echo '</div>';
1529
}
1630

17-
echo '</table>';
18-
echo '</div>';
1931
echo '</div>';
2032
echo '</div>';

0 commit comments

Comments
 (0)