librenms/resources/views/install/database.blade.php

194 lines
9.9 KiB
PHP
Raw Normal View History

2020-06-05 23:35:51 +00:00
@extends('layouts.install')
@section('content')
<div class="row">
2020-06-07 15:36:45 +00:00
<div class="col-12">
2020-06-18 05:41:03 +00:00
<div class="card mb-2">
<div id="db-form-header"
class="card-header h6"
data-toggle="collapse"
href="#db-form-container"
aria-expanded="@if($valid_credentials) false @else true @endif"
>
2020-06-18 21:19:30 +00:00
<span id="credential-status">
2020-06-18 05:41:03 +00:00
@if($valid_credentials === null)
2020-06-21 19:41:43 +00:00
<i class="fa fa-lg fa-question-circle-o text-muted"></i>
2020-06-18 21:19:30 +00:00
@elseif($valid_credentials)
2020-06-21 19:41:43 +00:00
<i class="fa fa-lg fa-check-square-o text-success"></i>
2020-06-18 21:19:30 +00:00
@else
2020-06-21 19:41:43 +00:00
<i class="fa fa-lg fa-times-rectangle-o text-danger"></i>
2020-06-18 21:19:30 +00:00
@endif
2020-06-18 05:41:03 +00:00
</span>
@lang('install.database.credentials')
<i class="fa fa-lg fa-chevron-down rotate-if-collapsed fa-pull-right"></i>
2020-06-05 23:35:51 +00:00
</div>
2020-06-18 05:41:03 +00:00
<div id="db-form-container" class="card-body collapse @if(!$valid_credentials) show @endif">
<form id="database-form" class="form-horizontal" role="form" method="post" action="{{ route('install.acton.test-database') }}">
@csrf
<div class="form-row pb-3">
<label for="host" class="col-4 col-form-label text-right">@lang('install.database.host')</label>
<div class="col-6">
<input type="text" class="form-control" name="host" id="host" value="{{ $host ?? 'localhost' }}" placeholder="@lang('install.database.host_placeholder')">
2020-06-18 05:41:03 +00:00
</div>
</div>
<div class="form-row pb-3">
<label for="port" class="col-4 col-form-label text-right">@lang('install.database.port')</label>
<div class="col-6">
<input type="text" class="form-control" name="port" id="port" value="{{ $port ?? 3306 }}" placeholder="@lang('install.database.port_placeholder')">
2020-06-18 05:41:03 +00:00
</div>
</div>
<div class="form-row pb-3">
<label for="unix_socket" class="col-4 col-form-label text-right">@lang('install.database.socket')</label>
<div class="col-6">
<input type="text" class="form-control" name="unix_socket" id="unix_socket" value="{{ $unix_socket ?? '' }}" placeholder="@lang('install.database.socket_placeholder')">
2020-06-18 05:41:03 +00:00
</div>
</div>
<div class="form-row pb-3">
<label for="username" class="col-4 col-form-label text-right">@lang('install.database.username')</label>
<div class="col-6">
<input type="text" class="form-control" name="username" id="username" value="{{ $username ?? 'librenms' }}">
</div>
</div>
<div class="form-row pb-3">
<label for="password" class="col-4 col-form-label text-right">@lang('install.database.password')</label>
<div class="col-6">
<input type="password" class="form-control" name="password" id="password" value="{{ $password ?? '' }}">
</div>
</div>
<div class="form-row pb-3">
<label for="database" class="col-4 col-form-label text-right">@lang('install.database.name')</label>
<div class="col-6">
<input type="text" class="form-control" name="database" id="database" value="{{ $database ?? 'librenms' }}">
</div>
</div>
<div class="row">
<div class="col-12">
<button type="submit" class="btn btn-primary float-right">@lang('install.database.test')</button>
</div>
</div>
</form>
2020-06-05 23:35:51 +00:00
</div>
2020-06-18 05:41:03 +00:00
</div>
2020-06-05 23:35:51 +00:00
</div>
</div>
2020-06-21 16:27:07 +00:00
<div id="migrate-step" class="row" @if(!$valid_credentials) style="display: none" @endif>
2020-06-16 02:30:39 +00:00
<div class="col-12">
2020-06-18 05:41:03 +00:00
<div class="card">
<div id="db-form-header"
class="card-header h6"
data-toggle="collapse"
2020-06-18 21:19:30 +00:00
href="#migrate-container"
2020-06-18 05:41:03 +00:00
aria-expanded="@if($migrated) false @else true @endif"
>
2020-06-18 21:19:30 +00:00
<span id="migrate-status">
@if($migrated === null)
2020-06-21 19:41:43 +00:00
<i class="fa fa-lg fa-question-circle-o text-muted"></i>
2020-06-18 21:19:30 +00:00
@elseif($migrated)
2020-06-21 19:41:43 +00:00
<i class="fa fa-lg fa-check-square-o text-success"></i>
2020-06-18 21:19:30 +00:00
@else
2020-06-21 19:41:43 +00:00
<i class="fa fa-lg fa-times-rectangle-o text-danger"></i>
2020-06-18 21:19:30 +00:00
@endif
</span>
@lang('install.migrate.migrate')
<i class="fa fa-lg fa-chevron-down rotate-if-collapsed fa-pull-right"></i>
</div>
<div id="migrate-container" class="card-body collapse @if(!$migrated) show @endif">
2020-06-21 16:27:07 +00:00
<div class="row">
<div class="col-md-8">
<div id="migrate-warning" class="alert alert-warning">@lang('install.migrate.building_interrupt')</div>
</div>
<div class="col-md-4 text-right">
<button id="migrate-btn" type="button" class="btn btn-primary mt-1 mb-4">
@lang('install.migrate.migrate')
</button>
</div>
2020-06-18 21:19:30 +00:00
</div>
<textarea readonly id="db-update" class="form-control" rows="20" placeholder="@lang('install.migrate.wait')"></textarea>
2020-06-18 05:41:03 +00:00
</div>
</div>
2020-06-16 02:30:39 +00:00
</div>
</div>
2020-06-05 23:35:51 +00:00
@endsection
@section('scripts')
<script>
$('#database-form').on("submit", function (event) {
2020-06-05 23:35:51 +00:00
event.preventDefault();
2020-06-18 21:19:30 +00:00
$('#credential-status>i').attr('class', 'fa fa-lg fa-spinner fa-spin');
2020-06-17 11:59:19 +00:00
$('#error-box').empty();
2020-06-06 22:03:32 +00:00
2020-06-05 23:35:51 +00:00
$.ajax({
type: 'POST',
2020-06-06 01:07:24 +00:00
dataType: "json",
2020-06-05 23:35:51 +00:00
url: $('#database-form').attr('action'),
data: $('#database-form').serialize(),
success: function (response) {
2020-06-06 22:03:32 +00:00
if (response.result === 'ok') {
2020-06-21 19:41:43 +00:00
$('#credential-status>i').attr('class', 'fa fa-lg fa-check-square-o text-success');
2020-06-21 16:27:07 +00:00
$('#migrate-step').show();
2020-06-18 05:41:03 +00:00
$('#db-form-container').collapse('hide')
2020-06-06 01:07:24 +00:00
} else {
2020-06-21 19:41:43 +00:00
$('#credential-status>i').attr('class', 'fa fa-lg fa-times-rectangle-o text-danger')
2020-06-06 22:03:32 +00:00
if (response.message) {
2020-06-08 14:21:31 +00:00
$('#error-box').append($('<div class="alert alert-danger">' + response.message + '</div>'))
2020-06-06 22:03:32 +00:00
}
2020-06-06 01:07:24 +00:00
}
2020-06-11 06:58:42 +00:00
checkStepStatus();
2020-06-05 23:35:51 +00:00
},
});
});
2020-06-16 02:30:39 +00:00
$('#migrate-btn').on("click", function () {
2020-06-18 21:19:30 +00:00
$('#migrate-warning').show()
$('#migrate-status>i').attr('class', 'fa fa-lg fa-spinner fa-spin');
$('#error-box').empty();
2020-06-29 05:58:06 +00:00
$('#migrate-btn').prop('disabled', true).addClass('disabled')
2020-06-18 21:19:30 +00:00
2020-06-16 02:30:39 +00:00
var output = document.getElementById("db-update");
var xhr = new XMLHttpRequest();
xhr.open("GET", "{{ route('install.action.migrate') }}", true);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.withCredentials = true;
xhr.onprogress = function (e) {
output.innerHTML = e.currentTarget.responseText;
output.scrollTop = output.scrollHeight - output.clientHeight; // scrolls the output area
if (output.innerHTML.indexOf('Error!') !== -1) {
// if error word in output, show the retry button
2020-06-18 21:19:30 +00:00
$('#migrate-warning').hide();
2020-06-21 19:41:43 +00:00
$('#migrate-status>i').attr('class', 'fa fa-lg fa-times-rectangle-o text-danger')
2020-06-29 05:58:06 +00:00
$('#migrate-btn').prop('disabled', false).removeClass('disabled').text('@lang('install.migrate.retry')')
2020-06-18 21:19:30 +00:00
$('#error-box').append($('<div class="alert alert-danger">@lang('install.migrate.error')</div>'));
2020-06-16 02:30:39 +00:00
}
};
xhr.timeout = 240000; // if no response for 4m, allow the user to retry
xhr.ontimeout = function (e) {
2020-06-18 21:19:30 +00:00
$('#migrate-warning').hide();
$('#error-box').append($('<div class="alert alert-danger">@lang('install.migrate.timeout')</div>'));
2020-06-16 02:30:39 +00:00
};
xhr.onreadystatechange = function () {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
2020-06-18 21:19:30 +00:00
$('#migrate-warning').hide();
checkStepStatus(function (status) {
2020-06-21 16:27:07 +00:00
if (status.database.complete) {
2020-06-21 19:41:43 +00:00
$('#migrate-status>i').attr('class', 'fa fa-lg fa-check-square-o text-success');
2020-06-18 21:19:30 +00:00
$('#migrate-container').collapse('hide');
}
});
2020-06-16 02:30:39 +00:00
}
};
xhr.send();
2020-06-18 21:19:30 +00:00
});
2020-06-05 23:35:51 +00:00
</script>
@endsection
2020-06-16 02:30:39 +00:00
@section('style')
<style type="text/css">
#db-update {
2020-06-18 05:41:03 +00:00
resize: vertical;
2020-06-16 02:30:39 +00:00
}
2020-06-18 21:19:30 +00:00
#migrate-warning {
display: none;
}
2020-06-16 02:30:39 +00:00
</style>
@endsection