Convert blade to panel component (#11957)

This commit is contained in:
Jellyfrog
2020-07-24 06:13:00 +02:00
committed by GitHub
parent 020c5fd7e1
commit 6dba2555a7
18 changed files with 659 additions and 681 deletions

View File

@@ -14,15 +14,31 @@ class Panel extends Component
*/ */
public $title; public $title;
/**
* The Panel body class.
*
* @var string
*/
public $body_class;
/**
* The Panel footer class.
*
* @var string
*/
public $footer_class;
/** /**
* Create a new component instance. * Create a new component instance.
* *
* @return void * @return void
*/ */
public function __construct($title = null) public function __construct($title = null, $bodyClass = null, $footerClass = null)
{ {
$this->title = $title; $this->title = $title;
$this->body_class = $bodyClass;
$this->footer_class = $footerClass;
} }
/** /**

View File

@@ -8,13 +8,11 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-md-6 col-md-offset-3"> <div class="col-md-6 col-md-offset-3">
<div class="panel panel-default"> <x-panel>
<div class="panel-heading"> <x-slot name="title">
<h3 class="panel-title center-block">
<img class="logon-logo img-responsive" src="{{ asset(\LibreNMS\Config::get('title_image', 'images/librenms_logo_light.svg')) }}"> <img class="logon-logo img-responsive" src="{{ asset(\LibreNMS\Config::get('title_image', 'images/librenms_logo_light.svg')) }}">
</h3> </x-slot>
</div>
<div class="panel-body">
<div class="container-fluid"> <div class="container-fluid">
@if(session('twofactoradd')) @if(session('twofactoradd'))
<div class="row"> <div class="row">
@@ -98,9 +96,7 @@
{{ csrf_field() }} {{ csrf_field() }}
</form> </form>
</div> </div>
</div> </x-panel>
</div>
</div>
</div> </div>
</div> </div>
@endsection @endsection

View File

@@ -1,10 +1,14 @@
<div class="panel panel-default"> <x-panel footer-class="text-center">
<div class="panel-heading"> <x-slot name="title">
<h3 class="panel-title center-block">
<img class="logon-logo img-responsive" src="{{ asset(\LibreNMS\Config::get('title_image', 'images/librenms_logo_light.svg')) }}"> <img class="logon-logo img-responsive" src="{{ asset(\LibreNMS\Config::get('title_image', 'images/librenms_logo_light.svg')) }}">
</h3> </x-slot>
</div>
<div class="panel-body"> @config('login_message')
<x-slot name="footer">
{{ \LibreNMS\Config::get('login_message') }}
</x-slot>
@endconfig
<div class="container-fluid"> <div class="container-fluid">
<form class="form-horizontal" role="form" action="{{ url('login') }}" method="post" name="logonform"> <form class="form-horizontal" role="form" action="{{ url('login') }}" method="post" name="logonform">
{{ csrf_field() }} {{ csrf_field() }}
@@ -46,8 +50,4 @@
</div> </div>
</form> </form>
</div> </div>
</div> </x-panel>
@config('login_message')
<div class="panel-footer" align="center">{{ \LibreNMS\Config::get('login_message') }}</div>
@endconfig
</div>

View File

@@ -15,7 +15,7 @@
<button class="btn btn-default pull-right" type="submit" id="ToggleLogon">@lang('Logon')</button> <button class="btn btn-default pull-right" type="submit" id="ToggleLogon">@lang('Logon')</button>
</div> </div>
</div> </div>
<div class="panel panel-default panel-condensed"> <x-panel>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-condensed"> <table class="table table-condensed">
<tr> <tr>
@@ -37,7 +37,7 @@
@endforeach @endforeach
</table> </table>
</div> </div>
</div> </x-panel>
</div> </div>
<div id="public-logon" style="display:none;"> <div id="public-logon" style="display:none;">

View File

@@ -1,10 +1,27 @@
<div {{ $attributes->merge(['class' => 'panel panel-default']) }}> <div {{ $attributes->merge(['class' => 'panel panel-default']) }}>
@isset($title) @if (isset($heading))
<div class="panel-heading">
{{ $heading }}
</div>
@elseif (isset($title))
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title">{{ $title }}</h3> <h3 class="panel-title">{{ $title }}</h3>
</div> </div>
@endisset @endif
<div class="panel-body">
@if (isset($slot) && !empty($slot->toHtml()))
<div class="panel-body {{ $body_class }}">
{{ $slot }} {{ $slot }}
</div> </div>
@endif
@isset($table)
{{ $table }}
@endisset
@isset($footer)
<div class="panel-footer {{ $footer_class }}">
{{ $footer }}
</div>
@endisset
</div> </div>

View File

@@ -4,13 +4,11 @@
@section('content') @section('content')
<div class="container-fluid"> <div class="container-fluid">
<div id="manage-device-groups-panel" class="panel panel-default"> <x-panel id="manage-device-groups-panel">
<div class="panel-heading"> <x-slot name="title">
<h4 class="panel-title">
<i class="fa fa-th fa-fw fa-lg" aria-hidden="true"></i> @lang('Device Groups') <i class="fa fa-th fa-fw fa-lg" aria-hidden="true"></i> @lang('Device Groups')
</h4> </x-slot>
</div>
<div class="panel-body">
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<a type="button" class="btn btn-primary" href="{{ route('device-groups.create') }}"> <a type="button" class="btn btn-primary" href="{{ route('device-groups.create') }}">
@@ -58,15 +56,9 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </x-panel>
</div>
<div id="unmanaged-devices-panel" class="panel panel-default"> <x-panel id="unmanaged-devices-panel" title="{{ __('Ungrouped Devices') }} ({{ $ungrouped_devices->count() }})">
<div class="panel-heading">
<h4 class="panel-title">
@lang('Ungrouped Devices') ({{ $ungrouped_devices->count() }})
</h4>
</div>
<div class="panel-body">
<div class="table-responsive"> <div class="table-responsive">
<table id="ungrouped-devices-table" class="table table-condensed table-hover"> <table id="ungrouped-devices-table" class="table table-condensed table-hover">
<thead> <thead>
@@ -89,8 +81,7 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </x-panel>
</div>
</div> </div>
@endsection @endsection

View File

@@ -1,5 +1,4 @@
<div class="panel panel-default"> <x-panel body-class="{{ $alert_class }}">
<div class="panel-body {{ $alert_class }}">
<img src="{{ url($device->logo()) }}" title="{{ $device->logo() }}" class="device-icon-header pull-left" style="max-height: 100px"> <img src="{{ url($device->logo()) }}" title="{{ $device->logo() }}" class="device-icon-header pull-left" style="max-height: 100px">
<div class="pull-left" style="margin-top: 5px;"> <div class="pull-left" style="margin-top: 5px;">
@if($parent_id) @if($parent_id)
@@ -20,5 +19,4 @@
@endforeach @endforeach
<br style="clear: both;"/> <br style="clear: both;"/>
</div> </div>
</div> </x-panel>
</div>

View File

@@ -1,17 +1,17 @@
@extends('device.index') @extends('device.index')
@section('tab') @section('tab')
@if($data['smokeping']->hasGraphs()) @if(!$data['smokeping']->hasGraphs())
<div class="panel with-nav-tabs panel-default"> <x-panel class="with-nav-tabs">
<div class="panel-heading"> <x-slot name="heading">
<a href="{{ \LibreNMS\Config::get('smokeping.url') }}?target={{ $device->type }}.{{ str_replace('.','_',$device->hostname) }}" target="_blank"><span class="panel-title">@lang('Smokeping') <i class="glyphicon glyphicon-share-alt"></i></span></a> <a href="{{ \LibreNMS\Config::get('smokeping.url') }}?target={{ $device->type }}.{{ str_replace('.','_',$device->hostname) }}" target="_blank"><span class="panel-title">@lang('Smokeping') <i class="glyphicon glyphicon-share-alt"></i></span></a>
<ul class="nav nav-tabs" style="display: inline-block"> <ul class="nav nav-tabs" style="display: inline-block">
@foreach($data['smokeping_tabs'] as $tab) @foreach($data['smokeping_tabs'] as $tab)
<li @if($loop->first) class="active" @endif><a href="#{{ $tab }}" data-toggle="tab">@lang('smokeping.' . $tab)</a></li> <li @if($loop->first) class="active" @endif><a href="#{{ $tab }}" data-toggle="tab">@lang('smokeping.' . $tab)</a></li>
@endforeach @endforeach
</ul> </ul>
</div> </x-slot>
<div class="panel-body">
<div class="tab-content"> <div class="tab-content">
@foreach($data['smokeping_tabs'] as $direction) @foreach($data['smokeping_tabs'] as $direction)
<div class="tab-pane fade in @if($loop->first) active @endif" id="{{ $direction }}"> <div class="tab-pane fade in @if($loop->first) active @endif" id="{{ $direction }}">
@@ -50,11 +50,10 @@
</div> </div>
@endforeach @endforeach
</div> </div>
</div> </x-panel>
</div>
@endif @endif
<div class="panel panel-default"> <x-panel title="{{ __('Performance') }}">
<div class="panel-heading"> <x-slot name="heading">
<span class="panel-title" style="line-height: 34px">@lang('Performance')</span> <span class="panel-title" style="line-height: 34px">@lang('Performance')</span>
<span class="pull-right"> <span class="pull-right">
<form method="post" role="form" id="map" class="form-inline"> <form method="post" role="form" id="map" class="form-inline">
@@ -72,11 +71,10 @@
<input type="submit" class="btn btn-default" id="submit" value="Update"> <input type="submit" class="btn btn-default" id="submit" value="Update">
</form> </form>
</span> </span>
</div> </x-slot>
<div class="panel-body">
<div id="performance"></div> <div id="performance"></div>
</div> </x-panel>
</div>
@endsection @endsection
@section('javascript') @section('javascript')

View File

@@ -16,10 +16,7 @@
</tr> </tr>
</script> </script>
<x-panel title="{{ __('Locations') }}" id="locations-panel">
<div id="locations-panel" class="panel panel-default">
<div class="panel-heading"><h4 class="panel-title">@lang('Locations')</h4></div>
<div class="panel-body">
<div class="table-responsive"> <div class="table-responsive">
<table id="locations" class="table table-hover table-condensed table-striped"> <table id="locations" class="table table-hover table-condensed table-striped">
<thead> <thead>
@@ -36,8 +33,7 @@
</thead> </thead>
</table> </table>
</div> </div>
</div> </x-panel>
</div>
<div class="modal fade" id="edit-location" tabindex="-1" role="dialog" aria-labelledby="edit-location-title"> <div class="modal fade" id="edit-location" tabindex="-1" role="dialog" aria-labelledby="edit-location-title">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">

View File

@@ -95,10 +95,8 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<div class="panel panel-default panel-condensed"> <x-panel title="{{ __('Syslog entries') }}">
<div class="panel-heading"> <x-slot name="table">
<strong>@lang('Syslog entries')</strong>
</div>
<table class="table table-hover table-condensed table-striped"> <table class="table table-hover table-condensed table-striped">
@foreach ($syslog as $entry) @foreach ($syslog as $entry)
<tr> <tr>
@@ -108,7 +106,8 @@
</tr> </tr>
@endforeach @endforeach
</table> </table>
</div> </x-slot>
</x-panel>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -6,23 +6,14 @@
@parent @parent
<div class="panel panel-default"> <x-panel title="{{ __('Total Poller Time') }}">
<div class="panel-heading">
<h3 class="panel-title">Total Poller Time</h3>
</div>
<div class="panel-body">
<?php \LibreNMS\Util\Html::graphRow(['type' => 'global_poller_perf', <?php \LibreNMS\Util\Html::graphRow(['type' => 'global_poller_perf',
'legend' => 'yes', 'height' => 100], true); ?> 'legend' => 'yes', 'height' => 100], true); ?>
</div> </x-panel>
</div>
<div class="panel panel-default"> <x-panel title="{{ __('Total Poller Time Per Module') }}">
<div class="panel-heading">
<h3 class="panel-title">Total Poller Time Per Module</h3>
</div>
<div class="panel-body">
<?php \LibreNMS\Util\Html::graphRow(['type' => 'global_poller_modules_perf', <?php \LibreNMS\Util\Html::graphRow(['type' => 'global_poller_modules_perf',
'legend' => 'yes', 'height' => 100], true); ?> 'legend' => 'yes', 'height' => 100], true); ?>
</div> </x-panel>
</div>
@endsection @endsection

View File

@@ -7,11 +7,7 @@
@parent @parent
@if( $pollers->isNotEmpty() ) @if( $pollers->isNotEmpty() )
<div class="panel panel-default"> <x-panel title="{{ __('Standard Pollers') }}">
<div class="panel-heading">
<h3 class="panel-title">@lang('Standard Pollers')</h3>
</div>
<div class="panel-body">
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-striped table-bordered table-hover table-condensed"> <table class="table table-striped table-bordered table-hover table-condensed">
<tr> <tr>
@@ -32,16 +28,11 @@
@endforeach @endforeach
</table> </table>
</div> </div>
</div> </x-panel>
</div>
@endif @endif
@if( $poller_cluster->isNotEmpty() ) @if( $poller_cluster->isNotEmpty() )
<div class="panel panel-default"> <x-panel title="{{ __('Poller Cluster Health') }}">
<div class="panel-heading">
<h3 class="panel-title">@lang('Poller Cluster Health')</h3>
</div>
<div class="panel-body">
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-striped table-bordered table-condensed"> <table class="table table-striped table-bordered table-condensed">
<tr> <tr>
@@ -86,8 +77,7 @@
If there are devices pending but consumed worker seconds is low, your hardware is not sufficient for the number of devices and the poller cannot reach maximum throughput. If there are devices pending but consumed worker seconds is low, your hardware is not sufficient for the number of devices and the poller cannot reach maximum throughput.
</small> </small>
</div> </div>
</div> </x-panel>
</div>
@endif @endif
@if(auth()->user()->isAdmin()) @if(auth()->user()->isAdmin())

View File

@@ -4,11 +4,13 @@
@section('content') @section('content')
<div class="container-fluid"> <div class="container-fluid">
<div id="manage-authlog-panel" class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><i class="fa fa-user-circle-o fa-fw fa-lg" aria-hidden="true"></i> @lang('Authlog')</h4> <x-panel id="manage-authlog-panel">
</div> <x-slot name="title">
<div class="panel-body"> <i class="fa fa-user-circle-o fa-fw fa-lg" aria-hidden="true"></i> @lang('Authlog')
</x-slot>
<div class="table-responsive"> <div class="table-responsive">
<table id="authlog" class="table table-hover table-condensed table-striped" style="display: none;"> <table id="authlog" class="table table-hover table-condensed table-striped" style="display: none;">
<thead> <thead>
@@ -31,9 +33,7 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </x-panel>
</div>
</div>
@endsection @endsection
@section('scripts') @section('scripts')

View File

@@ -15,12 +15,7 @@
@config('twofactor') @config('twofactor')
<br/> <br/>
<div class="panel panel-default col-sm-offset-3"> <x-panel title="{{ __('Two-Factor Authentication') }}" class="col-sm-offset-3">
<div class="panel-heading">
<h3 class="panel-title">Two-Factor Authentication</h3>
</div>
<div class="panel-body">
@if($twofactor_enabled) @if($twofactor_enabled)
@if($twofactor_locked) @if($twofactor_locked)
<div class="form-group" id="twofactor-unlock-form"> <div class="form-group" id="twofactor-unlock-form">
@@ -34,8 +29,7 @@
@else @else
<p>@lang('No TwoFactor key generated for this user, Nothing to do.')</p> <p>@lang('No TwoFactor key generated for this user, Nothing to do.')</p>
@endif @endif
</div> </x-panel>
</div>
@endconfig @endconfig
<div class="form-group"> <div class="form-group">

View File

@@ -4,9 +4,11 @@
@section('content') @section('content')
<div class="container-fluid"> <div class="container-fluid">
<div id="manage-users-panel" class="panel panel-default"> <x-panel>
<div class="panel-heading"><h4 class="panel-title"><i class="fa fa-user-circle-o fa-fw fa-lg" aria-hidden="true"></i> @lang('Manage Users')</h4></div> <x-slot name="title">
<div class="panel-body"> <i class="fa fa-user-circle-o fa-fw fa-lg" aria-hidden="true"></i> @lang('Manage Users')
</x-slot>
<div class="table-responsive"> <div class="table-responsive">
<table id="users" class="table table-bordered table-condensed" style="display: none;"> <table id="users" class="table table-bordered table-condensed" style="display: none;">
<thead> <thead>
@@ -43,8 +45,7 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </x-panel>
</div>
</div> </div>
@endsection @endsection
@@ -132,7 +133,6 @@
@section('css') @section('css')
<style> <style>
#manage-users-panel .panel-title { font-size: 18px; }
#users form { display:inline; } #users form { display:inline; }
</style> </style>
@endsection @endsection

View File

@@ -19,9 +19,7 @@
@endif @endif
@if($can_change_password) @if($can_change_password)
<div class="panel panel-default panel-condensed"> <x-panel title="{{ __('Change Password') }}">
<div class="panel-heading">@lang('Change Password')</div>
<div class="panel-body">
<form method="POST" action="{{ route('users.update', [$user->user_id]) }}" class="form-horizontal" role="form"> <form method="POST" action="{{ route('users.update', [$user->user_id]) }}" class="form-horizontal" role="form">
<input type="hidden" name="_method" value="PATCH"> <input type="hidden" name="_method" value="PATCH">
@csrf @csrf
@@ -49,13 +47,10 @@
</div> </div>
</div> </div>
</form> </form>
</div> </x-panel>
</div>
@endif @endif
<div class="panel panel-default panel-condensed"> <x-panel title="{{ __('preferences.title') }}">
<div class="panel-heading">@lang('preferences.title')</div>
<div class="panel-body">
<form class="form-horizontal" role="form"> <form class="form-horizontal" role="form">
@csrf @csrf
<div class="form-group"> <div class="form-group">
@@ -100,13 +95,10 @@
</div> </div>
</div> </div>
</form> </form>
</div> </x-panel>
</div>
@config('twofactor') @config('twofactor')
<div class="panel panel-default panel-condensed"> <x-panel title="{{ __('Two-Factor Authentication') }}">
<div class="panel-heading">@lang('Two-Factor Authentication')</div>
<div class="panel-body">
@if($twofactor) @if($twofactor)
<div id="twofactorqrcontainer"> <div id="twofactorqrcontainer">
<div id="twofactorqr"></div> <div id="twofactorqr"></div>
@@ -157,13 +149,10 @@
</div> </div>
</form> </form>
@endif @endif
</div> </x-panel>
</div>
@endconfig @endconfig
<div class="panel panel-default panel-condensed"> <x-panel title="{{ __('Device Permissions') }}">
<div class="panel-heading">@lang('Device Permissions')</div>
<div class="panel-body">
@if(auth()->user()->hasGlobalAdmin()) @if(auth()->user()->hasGlobalAdmin())
<strong class="blue">@lang('Global Administrative Access')</strong> <strong class="blue">@lang('Global Administrative Access')</strong>
@elseif(auth()->user()->hasGlobalRead()) @elseif(auth()->user()->hasGlobalRead())
@@ -175,8 +164,7 @@
<strong class="red">@lang('No access!')</strong> <strong class="red">@lang('No access!')</strong>
@endforelse @endforelse
@endif @endif
</div> </x-panel>
</div>
</div> </div>
@endsection @endsection

View File

@@ -1,4 +1,5 @@
<div class="panel panel-default panel-condensed table-responsive"> <x-panel class="table-responsive">
<x-slot name="table">
<table class="table table-hover table-condensed table-striped"> <table class="table table-hover table-condensed table-striped">
<thead> <thead>
<tr> <tr>
@@ -55,4 +56,5 @@
@endif @endif
</tbody> </tbody>
</table> </table>
</div> </x-slot>
</x-panel>

View File

@@ -1,4 +1,5 @@
<div class="panel panel-default panel-condensed table-responsive"> <x-panel class="table-responsive">
<x-slot name="table">
<table class="table table-hover table-condensed table-striped"> <table class="table table-hover table-condensed table-striped">
<thead> <thead>
<tr> <tr>
@@ -71,4 +72,5 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </x-slot>
</x-panel>