Follow up to feature to import eventlogs Updated UI using jquery and ajax to block screen and redirect to build page when import eventlogs is trigger Changed title for eventlogs folder in template Added a new button on landing page linked to import build page, and set min-height of buttons in landing page for uniformity
Signed-off-by: Marlon Rodriguez Garcia <[email protected]> --- lib/toaster/toastergui/static/css/default.css | 28 ++++++++++++++++ .../templates/command_line_builds.html | 33 ++++++++++++++++--- lib/toaster/toastergui/templates/landing.html | 10 ++++-- lib/toaster/toastergui/views.py | 17 ++++++++++ 4 files changed, 82 insertions(+), 6 deletions(-) diff --git a/lib/toaster/toastergui/static/css/default.css b/lib/toaster/toastergui/static/css/default.css index 5cd7e211..284355e7 100644 --- a/lib/toaster/toastergui/static/css/default.css +++ b/lib/toaster/toastergui/static/css/default.css @@ -367,3 +367,31 @@ h2.panel-title { font-size: 30px; } } } /* End copied in from newer version of Font-Awesome 4.3.0 */ + + +#overlay { + display: flex; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.7); + align-items: center; + justify-content: center; + z-index: 999; +} + +.spinner { + border: 6px solid rgba(255, 255, 255, 0.3); + border-radius: 50%; + border-top: 6px solid #3498db; + width: 50px; + height: 50px; + animation: spin 1s linear infinite; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} diff --git a/lib/toaster/toastergui/templates/command_line_builds.html b/lib/toaster/toastergui/templates/command_line_builds.html index 5b085e33..3145f535 100644 --- a/lib/toaster/toastergui/templates/command_line_builds.html +++ b/lib/toaster/toastergui/templates/command_line_builds.html @@ -7,6 +7,12 @@ {% block pagecontent %} <div class="container-fluid"> + <div id="overlay" class="hide"> + <div class="spinner"> + <div class="fa-spin"> + </div> + </div> + </div> <div class="row"> <div class="col-md-12"> <div class="page-header"> @@ -32,7 +38,7 @@ {% endif %} <div class="row"> <h4 style="margin-left: 15px;"><strong>Import eventlog file</strong></h4> - <form method="POST" enctype="multipart/form-data" action="{% url 'cmdlines' %}"> + <form method="POST" enctype="multipart/form-data" action="{% url 'cmdlines' %}" id="form_file"> {% csrf_token %} <div class="col-md-6" style="padding-left: 20px;"> <div class="row"> @@ -52,7 +58,7 @@ <div class="row" style="padding-top: 20px;"> <div class="col-md-6 "> - <h4><strong>Import eventlog files from directory</strong> + <h4><strong>Eventlogs from existing build directory: </strong> <a href="#" data-toggle="tooltip" title="{{dir}}"> <svg xmlns="http://www.w3.org/2000/svg"; width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16" data-toggle="tooltip"> <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/> @@ -78,7 +84,11 @@ <td class="col-md-6 align-middle" style="vertical-align: middle;"> {% if file.imported == True and file.build_id is not None %} <a href="{% url 'builddashboard' file.build_id %}">Build Details</a> - {%else %} + {% elif request.session.file == file.name or request.session.all_builds %} + <a data-toggle="tooltip" title="Build in progress"> + <span class="glyphicon glyphicon-upload" style="font-size: 18px; color:grey"></span> + </a> + {%else%} <a onclick="_ajax_update('{{file.name}}', false, '{{dir}}')" data-toggle="tooltip" title="Import File"> <span class="glyphicon glyphicon-upload" style="font-size: 18px;"></span> </a> @@ -160,12 +170,27 @@ $(function () { $("#id_eventlog_file").change(function(){ - console.log($('#file_import')) $('#file_import').prop("disabled", false); $('#file_import').addClass('btn-primary') $('#file_import').removeClass('btn-default') }) +$(document).ajaxStart(function(){ + $('#overlay').removeClass('hide'); + window.setTimeout( + function() { + window.location = '/toastergui/builds/' + }, 10000) +}); + +$( "#form_file").on( "submit", function( event ) { + $('#overlay').removeClass('hide'); + window.setTimeout( + function() { + window.location = '/toastergui/builds/' + }, 10000) +}); + </script> {% endblock %} diff --git a/lib/toaster/toastergui/templates/landing.html b/lib/toaster/toastergui/templates/landing.html index 22bbed69..589ee226 100644 --- a/lib/toaster/toastergui/templates/landing.html +++ b/lib/toaster/toastergui/templates/landing.html @@ -15,7 +15,7 @@ <p>A web interface to <a href="https://www.openembedded.org";>OpenEmbedded</a> and <a href="https://docs.yoctoproject.org/bitbake.html";>BitBake</a>, the <a href="https://www.yoctoproject.org";>Yocto Project</a> build system.</p> <p class="top-air"> - <a class="btn btn-info btn-lg" href="http://docs.yoctoproject.org/toaster-manual/setup-and-use.html#setting-up-and-using-toaster";> + <a class="btn btn-info btn-lg" href="http://docs.yoctoproject.org/toaster-manual/setup-and-use.html#setting-up-and-using-toaster"; style="min-width: 460px;"> Toaster is ready to capture your command line builds </a> </p> @@ -23,7 +23,7 @@ {% if lvs_nos %} {% if project_enable %} <p class="top-air"> - <a class="btn btn-primary btn-lg" href="{% url 'newproject' %}"> + <a class="btn btn-primary btn-lg" href="{% url 'newproject' %}" style="min-width: 460px;"> Create your first Toaster project to run manage builds </a> </p> @@ -42,6 +42,12 @@ </div> {% endif %} + <p class="top-air"> + <a class="btn btn-info btn-lg" href="{% url 'cmdlines' %}" style="min-width: 460px;"> + Import command line event logs from build directory + </a> + </p> + <ul class="list-unstyled lead"> <li> <a href="http://docs.yoctoproject.org/toaster-manual/index.html#toaster-user-manual";> diff --git a/lib/toaster/toastergui/views.py b/lib/toaster/toastergui/views.py index a75fba47..2e34c8a2 100644 --- a/lib/toaster/toastergui/views.py +++ b/lib/toaster/toastergui/views.py @@ -2061,6 +2061,10 @@ class CommandLineBuilds(TemplateView): else: context['files'] = [] context['dir'] = '' + + # enable session variable + if not self.request.session.get('file'): + self.request.session['file'] = "" context['form'] = LoadFileForm() context['project_enable'] = project_enable @@ -2073,6 +2077,12 @@ class CommandLineBuilds(TemplateView): imported_files = EventLogsImports.objects.all() try: if all_files == 'true': + + # use of session variable to deactivate icon for builds in progress + request.session['all_builds'] = True + request.session.modified = True + request.session.save() + files = ast.literal_eval(request.POST.get('file')) for file in files: if imported_files.filter(name=file.get('name')).exists(): @@ -2095,6 +2105,12 @@ class CommandLineBuilds(TemplateView): else: file = request.POST.get('file') + # use of session variable to deactivate icon for build in progress + request.session['file'] = file + request.session['all_builds'] = False + request.session.modified = True + request.session.save() + if imported_files.filter(name=file).exists(): imported_files.filter(name=file)[0].imported = True else: @@ -2116,6 +2132,7 @@ class CommandLineBuilds(TemplateView): event_log_import = EventLogsImports.objects.create(name=file, imported=True) event_log_import.build_id = Build.objects.last().id event_log_import.save() + request.session['file'] = "" except json.decoder.JSONDecodeError: messages.add_message( self.request, -- 2.34.1
-=-=-=-=-=-=-=-=-=-=-=- Links: You receive all messages sent to this group. View/Reply Online (#6058): https://lists.yoctoproject.org/g/toaster/message/6058 Mute This Topic: https://lists.yoctoproject.org/mt/103023933/21656 Group Owner: [email protected] Unsubscribe: https://lists.yoctoproject.org/g/toaster/unsub [[email protected]] -=-=-=-=-=-=-=-=-=-=-=-
