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;
/**
* The Panel body class.
*
* @var string
*/
public $body_class;
/**
* The Panel footer class.
*
* @var string
*/
public $footer_class;
/**
* Create a new component instance.
*
* @return void
*/
public function __construct($title = null)
public function __construct($title = null, $bodyClass = null, $footerClass = null)
{
$this->title = $title;
$this->body_class = $bodyClass;
$this->footer_class = $footerClass;
}
/**

View File

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

View File

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

View File

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

View File

@@ -1,10 +1,27 @@
<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">
<h3 class="panel-title">{{ $title }}</h3>
</div>
@endisset
<div class="panel-body">
@endif
@if (isset($slot) && !empty($slot->toHtml()))
<div class="panel-body {{ $body_class }}">
{{ $slot }}
</div>
@endif
@isset($table)
{{ $table }}
@endisset
@isset($footer)
<div class="panel-footer {{ $footer_class }}">
{{ $footer }}
</div>
@endisset
</div>

View File

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

View File

@@ -1,5 +1,4 @@
<div class="panel panel-default">
<div class="panel-body {{ $alert_class }}">
<x-panel body-class="{{ $alert_class }}">
<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;">
@if($parent_id)
@@ -20,5 +19,4 @@
@endforeach
<br style="clear: both;"/>
</div>
</div>
</div>
</x-panel>

View File

@@ -1,17 +1,17 @@
@extends('device.index')
@section('tab')
@if($data['smokeping']->hasGraphs())
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
@if(!$data['smokeping']->hasGraphs())
<x-panel class="with-nav-tabs">
<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>
<ul class="nav nav-tabs" style="display: inline-block">
@foreach($data['smokeping_tabs'] as $tab)
<li @if($loop->first) class="active" @endif><a href="#{{ $tab }}" data-toggle="tab">@lang('smokeping.' . $tab)</a></li>
@endforeach
</ul>
</div>
<div class="panel-body">
</x-slot>
<div class="tab-content">
@foreach($data['smokeping_tabs'] as $direction)
<div class="tab-pane fade in @if($loop->first) active @endif" id="{{ $direction }}">
@@ -50,11 +50,10 @@
</div>
@endforeach
</div>
</div>
</div>
</x-panel>
@endif
<div class="panel panel-default">
<div class="panel-heading">
<x-panel title="{{ __('Performance') }}">
<x-slot name="heading">
<span class="panel-title" style="line-height: 34px">@lang('Performance')</span>
<span class="pull-right">
<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">
</form>
</span>
</div>
<div class="panel-body">
</x-slot>
<div id="performance"></div>
</div>
</div>
</x-panel>
@endsection
@section('javascript')

View File

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

View File

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

View File

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

View File

@@ -7,11 +7,7 @@
@parent
@if( $pollers->isNotEmpty() )
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">@lang('Standard Pollers')</h3>
</div>
<div class="panel-body">
<x-panel title="{{ __('Standard Pollers') }}">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover table-condensed">
<tr>
@@ -32,16 +28,11 @@
@endforeach
</table>
</div>
</div>
</div>
</x-panel>
@endif
@if( $poller_cluster->isNotEmpty() )
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">@lang('Poller Cluster Health')</h3>
</div>
<div class="panel-body">
<x-panel title="{{ __('Poller Cluster Health') }}">
<div class="table-responsive">
<table class="table table-striped table-bordered table-condensed">
<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.
</small>
</div>
</div>
</div>
</x-panel>
@endif
@if(auth()->user()->isAdmin())

View File

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

View File

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

View File

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

View File

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