SDC-688 - develop the GUI

ldvspec/Dockerfile

@@ -13,6 +13,7 @@ RUN \
  apk --purge del .build-deps
 
 # collect the static files and make sure that the latest database migrations are done
+RUN date +"(%d %b %Y - %H:%M)" >> VERSION
 RUN python manage.py collectstatic --settings=ldvspec.settings.dev --noinput
 
 # run gunicorn

ldvspec/VERSION

+Version 1.0.0
\ No newline at end of file

ldvspec/ldvspec/context_processors.py

+from django.conf import settings
+
+
+def version_string(_):
+    return {'VERSION_STRING': settings.VERSION_STR}

ldvspec/ldvspec/settings/base.py

@@ -3,6 +3,7 @@ Django settings for ldvspec project.
 """
 import os
 from pathlib import Path
+import logging
 
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
 BASE_DIR = Path(__file__).resolve().parent.parent
@@ -21,7 +22,6 @@ except:
 
 ALLOWED_HOSTS = []
 
-
 # Application definition
 
 INSTALLED_APPS = [
@@ -37,9 +37,14 @@ INSTALLED_APPS = [
     'corsheaders',
     'django_filters',
     'django_extensions',
-    'uws'
+    'uws',
+    'crispy_forms',
+    'crispy_bootstrap5',
 ]
 
+CRISPY_ALLOWED_TEMPLATE_PACKS = "bootstrap5"
+
+CRISPY_TEMPLATE_PACK = "bootstrap5"
 MIDDLEWARE = [
     'corsheaders.middleware.CorsMiddleware',
     'django.middleware.security.SecurityMiddleware',
@@ -65,6 +70,7 @@ TEMPLATES = [
                 'django.template.context_processors.request',
                 'django.contrib.auth.context_processors.auth',
                 'django.contrib.messages.context_processors.messages',
+                'ldvspec.context_processors.version_string'
             ],
         },
     },
@@ -72,7 +78,6 @@ TEMPLATES = [
 
 WSGI_APPLICATION = 'ldvspec.wsgi.application'
 
-
 # Password validation
 # https://docs.djangoproject.com/en/4.0/ref/settings/#auth-password-validators
 
@@ -91,7 +96,6 @@ AUTH_PASSWORD_VALIDATORS = [
     },
 ]
 
-
 # Internationalization
 # https://docs.djangoproject.com/en/4.0/topics/i18n/
 
@@ -103,7 +107,6 @@ USE_I18N = True
 
 USE_TZ = True
 
-
 # Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/4.0/howto/static-files/
 
@@ -131,8 +134,15 @@ REST_FRAMEWORK = {
     'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',
     'PAGE_SIZE': 100
 }
-
+LOGIN_REDIRECT_URL = '/ldvspec'
 # Recommended to use an environment variable to set the broker URL.
 CELERY_BROKER_URL = os.getenv("CELERY_BROKER_URL", "amqp://guest@localhost:5672")
-
 UWS_WORKERS = ['lofardata.workers.query.Echo']
+
+VERSION_STR = 'Version 1.0.0 (Unknown)'
+version_file_path = BASE_DIR.parent / 'VERSION'
+if os.path.exists(version_file_path):
+    with open(version_file_path, 'r') as f_stream:
+        VERSION_STR = f_stream.read().strip()
+else:
+    logging.warning('Cannot find version file %s', version_file_path)

ldvspec/ldvspec/settings/dev.py

@@ -23,3 +23,5 @@ DATABASES = {
 
 AUTH_PASSWORD_VALIDATORS = []
 
+# bypass celery async workers
+#CELERY_TASK_ALWAYS_EAGER=True
\ No newline at end of file

ldvspec/ldvspec/urls.py

@@ -18,6 +18,6 @@ from django.urls import include, path
 
 urlpatterns = [
     path('ldvspec/', include('lofardata.urls')),
-    path('ldvspec/admin/', admin.site.urls),
+    path('ldvspec/admin/', admin.site.urls, name='admin_app'),
     path('ldvspec/api-auth/', include('rest_framework.urls')),
 ]

ldvspec/lofardata/admin.py

 from django.contrib import admin
 
 # Register your models here.
-from .models import DataProduct, DataProductFilter, ATDBProcessingSite
+from .models import DataProduct, DataProductFilter, ATDBProcessingSite, WorkSpecification, DataLocation
 
 admin.site.register(DataProduct)
 admin.site.register(DataProductFilter)
+admin.site.register(DataLocation)
 admin.site.register(ATDBProcessingSite)
+admin.site.register(WorkSpecification)
\ No newline at end of file

ldvspec/lofardata/forms.py

+from django import forms
+from django.forms import ModelForm
+from .models import WorkSpecification
+
+
+class WorkSpecificationForm(ModelForm):
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.fields['inputs'].required = False
+    class Meta:
+        model = WorkSpecification
+        fields = ['filters', 'selected_workflow', 'processing_site', 'inputs', 'batch_size']
+        labels = {
+            'filters': 'Filters',
+            'selected_workflow': 'Selected workflow',
+            'processing_site': 'Processing Site (ATDB)',
+            'inputs': 'Inputs',
+            'batch_size': '# of files per ATDB tasks'
+        }

ldvspec/lofardata/migrations/0008_update_models_to_deal_with_gui.py

+# Generated by Django 3.2 on 2022-09-14 10:44
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    replaces = [('lofardata', '0008_atdbprocessingsite_access_token'), ('lofardata', '0009_dataproductfilter_filter_type'), ('lofardata', '0009_auto_20220906_0856'), ('lofardata', '0010_merge_20220908_0923'), ('lofardata', '0011_workspecification_predecessor_specification')]
+
+    dependencies = [
+        ('lofardata', '0007_workspecification_selected_workflow'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='atdbprocessingsite',
+            name='access_token',
+            field=models.CharField(max_length=1000, null=True),
+        ),
+        migrations.AddField(
+            model_name='dataproductfilter',
+            name='filter_type',
+            field=models.CharField(choices=[('Dropdown', 'Dropdown'), ('Free', 'Freeform')], default='Free', max_length=20),
+        ),
+        migrations.AddField(
+            model_name='workspecification',
+            name='batch_size',
+            field=models.IntegerField(default=0),
+        ),
+        migrations.AddField(
+            model_name='workspecification',
+            name='is_auto_submit',
+            field=models.BooleanField(default=False),
+        ),
+        migrations.AddField(
+            model_name='workspecification',
+            name='predecessor_task',
+            field=models.IntegerField(null=True),
+        ),
+        migrations.AddField(
+            model_name='workspecification',
+            name='purge_policy',
+            field=models.CharField(choices=[('yes', 'yes'), ('no', 'no'), ('do', 'do')], default='no', max_length=16),
+        ),
+        migrations.AddField(
+            model_name='workspecification',
+            name='submission_status',
+            field=models.CharField(choices=[('N', 'not submitted'), ('S', 'submitted'), ('D', 'defining'), ('E', 'error')], default='N', max_length=1),
+        ),
+        migrations.AddField(
+            model_name='workspecification',
+            name='predecessor_specification',
+            field=models.ForeignKey(null=True, on_delete=django.db.models.deletion.DO_NOTHING, to='lofardata.workspecification'),
+        ),
+    ]

ldvspec/lofardata/migrations/0009_dataproductfilter_filter_type.py

+# Generated by Django 3.2 on 2022-09-07 07:57
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('lofardata', '0008_atdbprocessingsite_access_token'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='dataproductfilter',
+            name='filter_type',
+            field=models.CharField(choices=[('Dropdown', 'Dropdown'), ('Free', 'Freeform')], default='Free', max_length=20),
+        ),
+    ]

ldvspec/lofardata/migrations/0010_merge_20220908_0923.py

+# Generated by Django 3.2 on 2022-09-08 09:23
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('lofardata', '0009_auto_20220906_0856'),
+        ('lofardata', '0009_dataproductfilter_filter_type'),
+    ]
+
+    operations = [
+    ]

ldvspec/lofardata/migrations/0011_workspecification_predecessor_specification.py

+# Generated by Django 3.2 on 2022-09-08 14:36
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('lofardata', '0010_merge_20220908_0923'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='workspecification',
+            name='predecessor_specification',
+            field=models.ForeignKey(null=True, on_delete=django.db.models.deletion.DO_NOTHING, to='lofardata.workspecification'),
+        ),
+    ]

ldvspec/lofardata/models.py

@@ -79,17 +79,30 @@ class DataProduct(models.Model):
         return dp
 
 
+class DataFilterType(models.TextChoices):
+    DROPDOWN = 'Dropdown', _('Dropdown')
+    FREEFORM = 'Free', _('Freeform')
+
+
 class DataProductFilter(models.Model):
     field = models.CharField(max_length=100)
     name = models.CharField(max_length=20)
     lookup_type = models.CharField(max_length=100)
 
+    filter_type = models.CharField(max_length=20, choices=DataFilterType.choices, default=DataFilterType.FREEFORM)
+
+    def __str__(self):
+        return f'({self.pk}) "{self.name}" [{self.field} ->{self.lookup_type}]'
+
 
 class ATDBProcessingSite(models.Model):
     name = models.CharField(primary_key=True, max_length=100)
     url = models.URLField()
     access_token = models.CharField(max_length=1000, null=True)
 
+    def __str__(self):
+        return str(self.name) + ' - ' + str(self.url)
+
 
 class SUBMISSION_STATUS(models.TextChoices):
     """Status of Work Specifcation to ATDB"""
@@ -127,6 +140,8 @@ class WorkSpecification(models.Model):
     # Task ID's that were created in ATDB
     related_tasks = ArrayField(models.IntegerField(), null=True)
     predecessor_task = models.IntegerField(null=True)
+    predecessor_specification = models.ForeignKey('self', null=True, on_delete=models.DO_NOTHING,
+                                                  related_name='successor')
 
     # The query for gathering files has been executed
     is_ready = models.BooleanField(default=False)
@@ -143,6 +158,9 @@ class WorkSpecification(models.Model):
         max_length=16, choices=PURGE_POLICY.choices, default=PURGE_POLICY.NO
     )
 
+    def __str__(self):
+        return str(self.id) + ' - ' + str(self.filters) + " (" + str(self.created_on) + ")"
+
     # How many files per task. 0 is single task with all files
     batch_size = models.IntegerField(default=0, null=False, blank=False)
     submission_status = models.CharField(

ldvspec/lofardata/serializers.py

 from abc import ABC
 
 from rest_framework import serializers
-from .models import DataProduct, DataLocation, WorkSpecification
+from .models import DataProduct, DataLocation, WorkSpecification, ATDBProcessingSite
+
+
+class ATDBProcessingSiteSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = ATDBProcessingSite
+        fields = '__all__'
 
 
 class DataLocationSerializer(serializers.ModelSerializer):

ldvspec/lofardata/static/lofardata/style.css

 TD {
-  font-family: Raleway;
+    font-family: Raleway, serif;
     font-size: 12pt;
 }
 
@@ -44,7 +44,7 @@ TD {
     font-weight: bold;
 }
 
-.scrubbed, {
+.scrubbed {
     color: darkgray;
     font-style: italic;
 }
@@ -55,19 +55,19 @@ TD {
 }
 
 p.title {
-	font-family: Raleway;
+    font-family: Raleway, serif;
     font-size: 18pt;
 }
 
 .footer {
-  font-family: Arial;
+    font-family: Arial, serif;
     font-size: 10pt;
     font-style: italic;
 }
 
 .ml-auto .dropdown-menu {
     left: auto !important;
-  right: 0px;
+    right: 0;
 }
 
 .bigger {
@@ -84,9 +84,11 @@ p.title {
     padding: 15px;
     margin: 0 auto;
 }
+
 .form-signin .checkbox {
     font-weight: 400;
 }
+
 .form-signin .form-control {
     position: relative;
     box-sizing: border-box;
@@ -94,14 +96,17 @@ p.title {
     padding: 10px;
     font-size: 16px;
 }
+
 .form-signin .form-control:focus {
     z-index: 2;
 }
+
 .form-signin input[type="email"] {
     margin-bottom: -1px;
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
 }
+
 .form-signin input[type="password"] {
     margin-bottom: 10px;
     border-top-left-radius: 0;
@@ -123,3 +128,55 @@ p.title {
 .form-flex {
     display: flex;
 }
+
+footer {
+    text-align: center;
+    padding: .4rem;
+    vertical-align: center;
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    background-color: #ded;
+    width: 100%;
+
+    -webkit-box-shadow: 0 -2px 3px rgba(50, 50, 50, 0.75);
+    -moz-box-shadow: 0 -2px 3px rgba(50, 50, 50, 0.75);
+    box-shadow: 0 -2px 3px rgba(50, 50, 50, 0.75);
+}
+
+footer p {
+    margin: auto;
+    text-shadow: 0 0 25px lightgrey;
+}
+
+pre {
+    border-radius: 1rem;
+    padding: 1rem;
+    box-shadow: 2px 2px forestgreen;
+    color: black;
+    font-size: larger;
+    background-color: palegreen;
+}
+
+#div_id_filters label {
+    display: none;
+}
+
+#div_id_filters textarea {
+    width: 20rem;
+    pointer-events: none;
+    cursor: not-allowed;
+    color: gray;
+    background-color: lightgrey;
+    margin: 1rem auto;
+}
+
+.info-text {
+    font-size: 2rem;
+    margin-bottom: 2rem;
+}
+
+.bottom-bar {
+    justify-content: center;
+}
\ No newline at end of file

ldvspec/lofardata/tasks.py

@@ -47,7 +47,10 @@ def define_work_specification(workspecification_id):
             for dataproduct in dataproducts
         ]
     }
+    if specification.inputs is None:
         specification.inputs = inputs
+    else:
+        specification.inputs.update(inputs)
     specification.is_ready = True
     specification.save()
 

ldvspec/lofardata/templates/lofardata/api.html

+{% extends 'lofardata/base.html' %}
+{% load static %}
+{% load crispy_forms_tags %}
+
+{% block myBlock %}
+
+<div class="container-fluid details-container">
+
+    <table class="table table-striped table-bordered table-sm">
+
+        <tbody>
+
+            <tr><td>atdb_host</td>
+                <td><ul>
+                {%  for atdb_host in atdb_hosts %}
+                    <li>{{ atdb_host.name }} ( <a href="{{ atdb_host.url }}">{{ atdb_host.url }}</a> )</li>
+                {% endfor %}
+                </ul>
+                </td>
+            </tr>
+            <tr><td>api data</td><td><a href="{% url 'dataproduct' %}">{% url 'dataproduct' %}</a></td></tr>
+            <tr><td>api data-location</td><td><a href="{% url 'datalocation' %}">{% url 'datalocation' %}</a></td></tr>
+            <tr><td>api work-specification</td><td><a href="{% url 'workspecification-list' %}">{% url 'workspecification-list' %}</a></td></tr>
+
+            <tr><td>api-schema</td><td><a href="{% url 'openapi-schema' %}">{% url 'openapi-schema' %}</a></td></tr>
+        </tbody>
+
+    </table>
+</div>
+
+
+
+{% endblock %}
+

ldvspec/lofardata/templates/base.html → ldvspec/lofardata/templates/lofardata/base.html

-
 <!DOCTYPE html>
 {% load static %}
 
@@ -13,8 +12,15 @@
 
     <!-- loads the path to static files -->
     <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
+            integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
+            crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css"
+          integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 
     <link rel="stylesheet" type="text/css" href="{% static 'lofardata/style.css' %}"/>
     <link rel="icon" href="{% static 'favicon.ico' %}">
@@ -34,10 +40,14 @@
             </li>
 
             <li><a class="nav-link" href="{% url 'index' %}">Home</a></li>
-                <li><a class="nav-link" href="{% url 'dataproduct' %}">LOFAR Data</a></li>
+            {% if user.is_authenticated %}
+                <li><a class="nav-link" href="{% url 'specification' %}">Specification</a></li>
+            {% endif %}
+            <li><a class="nav-link" href="{% url 'api' %}">API</a></li>
+            <li><a class="nav-link" href="{% url 'admin:index' %}" target="_blank">Admin Page</a></li>
 
             {% if user.is_authenticated %}
-                <a class="nav-link" href="{% url 'logout' %}" target="_blank">Logout {{ user.get_username }}</a>
+                <a class="nav-link" href="{% url 'logout' %}" target="_blank">Logout ({{ user.get_username }})</a>
             {% endif %}
             {% if not user.is_authenticated %}
                 <a class="nav-link" href="{% url 'login' %}" target="_blank">Login</a>
@@ -50,6 +60,9 @@
 {% block myBlock %}
 {% endblock %}
 
+<footer>
+    <p> {{ VERSION_STRING }} </p>
+</footer>
 </body>
 
 

ldvspec/lofardata/templates/lofardata/index.html

-{% extends 'lofardata/../base.html' %}
+{% extends 'lofardata/base.html' %}
 {% load static %}
+{% load crispy_forms_tags %}
 
 {% block myBlock %}
 
-<div class="container-fluid details-container">
-
-    <table class="table table-striped table-bordered table-sm">
-
-        <tbody>
-
-            <tr><td>atdb_host</td>
-                <td><ul>
-                {%  for atdb_host in atdb_hosts %}
-                    <li>{{ atdb_host.name }} ( <a href="{{ atdb_host.url }}">{{ atdb_host.url }}</a> )</li>
-                {% endfor %}
-                </ul>
-                </td>
-            </tr>
-            <tr><td>api data</td><td><a href="{% url 'dataproduct' %}">{% url 'dataproduct' %}</a></td></tr>
-            <tr><td>api data-location</td><td><a href="{% url 'datalocation' %}">{% url 'datalocation' %}</a></td></tr>
-            <tr><td>api work-specification</td><td><a href="{% url 'workspecification' %}">{% url 'workspecification' %}</a></td></tr>
-
-            <tr><td>api-schema</td><td><a href="{% url 'openapi-schema' %}">{% url 'openapi-schema' %}</a></td></tr>
-        </tbody>
-
-    </table>
-    <p class="footer"> Version 1.0.0 (15 aug 2022 - 8:00)
-
+    <div class="container-fluid">
+        <div class="row justify-content-md-center">
+            <div class="col-md-auto mt-5">Welcome to the LDV specification service</div>
+        </div>
+        {% if user.is_authenticated %}
+            <div class="row justify-content-md-center mt-5 mb-5">
+                <a class="col-md-2 btn btn-success" href="{% url 'specification' %}">Start specifying your task</a>
+            </div>
+        {% endif %}
     </div>
-
-
 
 {% endblock %}
 

ldvspec/lofardata/templates/lofardata/specification.html

+{% extends 'lofardata/base.html' %}
+{% load static %}
+{% load crispy_forms_tags %}
+
+{% block myBlock %}
+    <div class="container-fluid details-container">
+        <div class="row">
+            <div class="col-12">
+                <div class="card">
+                    <div class="card-body">
+                        <div class="row">
+                            <div class="col-3">
+                                <div class="btn-group">
+                                    <button type="button" class="btn btn-primary btn-sm dropdown-toggle"
+                                            data-bs-toggle="dropdown" aria-expanded="false">
+                                        Select Specification
+                                    </button>
+                                    <ul class="dropdown-menu">
+                                        {{ specifications_list | safe }}
+                                    </ul>
+                                </div>
+                            </div>
+                            <div class="col-3">
+                                <a href="{% url 'specification' %}">
+                                    <div>
+                                        <button class="btn btn-primary btn-sm"><i class="fas fa-folder-plus"></i> New
+                                            Specification
+                                        </button>
+                                    </div>
+                                </a>
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="row mb-5">
+                            <div class="col-1"><h4>ID {{ specification.id }} </h4></div>
+                            <div class="btn-group col-3">
+                                <button type="button" class="btn btn-info btn-sm dropdown-toggle"
+                                        data-bs-toggle="dropdown" aria-expanded="false">
+                                    ATDB tasks
+                                </button>
+                                <ul class="dropdown-menu">
+                                    {% for related_task in specification.related_tasks %}
+                                        <li>
+                                            <a class="dropdown-item"
+                                               href="{{ specification.processing_site.url }}tasks/{{ related_task }}">{{ related_task }}</a>
+                                        </li>
+                                    {% endfor %}
+                                </ul>
+                            </div>
+                            {% if specification.predecessor_specification %}
+                                <h4 class="col-4 predecessor_link">
+                                    Predecessor ID:
+
+                                    <a href="{% url 'specification-detail' specification.predecessor_specification.pk %}">
+                                        {{ specification.predecessor_specification.pk }}</a>
+
+                                </h4>
+                                <div class="btn-group col-3">
+                                    <button type="button" class="btn btn-info btn-sm dropdown-toggle"
+                                            data-bs-toggle="dropdown" aria-expanded="false">
+                                        Predecessor ATDB tasks
+                                    </button>
+                                    <ul class="dropdown-menu">
+                                        {% for related_task in specification.predecessor_specification.related_tasks %}
+                                            <li>
+                                                <a class="dropdown-item"
+                                                   href="{{ specification.predecessor_specification.processing_site.url }}tasks/{{ related_task }}">{{ related_task }}</a>
+                                            </li>
+                                        {% endfor %}
+                                    </ul>
+                                </div>
+                            {% endif %}
+
+                            {% if specification.successor.count %}
+
+                                <div class="btn-group col-3 ">
+                                    <button type="button" class="btn btn-info btn-sm dropdown-toggle"
+                                            data-bs-toggle="dropdown" aria-expanded="false">
+                                        Successors
+                                    </button>
+                                    <ul class="dropdown-menu">
+                                        {% for successor in specification.successor.all %}
+                                            <li>
+                                                <a class="dropdown-item"
+                                                   href="{% url 'specification-detail' successor.pk %}">Specification {{ successor.pk }}</a>
+                                            </li>
+                                        {% endfor %}
+                                    </ul>
+                                </div>
+                            {% endif %}
+                        </div>
+                        {% if specification.pk %}
+                            <form class="post-form" action="{% url 'specification-detail' specification.pk %}"
+                                  method="POST">
+                        {% else %}
+                            <form class="post-form" action="{% url 'specification' %}" method="POST">
+                        {% endif %}
+
+
+                        {% csrf_token %}
+                        <div>
+                            <div class="row">
+
+                                <div class="col-4">
+                                    <row>
+                                        {{ form.processing_site|as_crispy_field }}
+                                    </row>
+
+                                    <row>
+                                        {{ form.batch_size|as_crispy_field }}
+                                    </row>
+                                </div>
+
+                                <div class="col-4">
+                                    <label class="form-label" for="id_selected_workflow">Specified workflow
+                                        (ATDB)*</label>
+                                    <select id="id_selected_workflow" class="select form-select"
+                                            name="selected_workflow">
+                                        <option value="---">Empty</option>
+                                    </select>
+                                    <div class="row">{{ form.filters|as_crispy_field }}</div>
+                                </div>
+
+                                <div class="col-4">
+                                    <div class="row"><h3>Filters</h3></div>
+                                    {% for filter in filters %}
+                                        <div class="row">
+                                            <label class="form-label"
+                                                   for="id_{{ filter.field }}">{{ filter.name }}*</label>
+
+                                            {% if filter.filter_type == 'Free' %}
+                                                <input class="form-control custom-filter" type="text"
+                                                       id="id_{{ filter.field }}" name="{{ filter.field }}"
+                                                       data-filter="{{ filter.lookup_type }}"
+                                                       value="{{ filter.default }}">
+                                            {% elif filter.filter_type == 'Dropdown' %}
+                                                <select class="form-select select custom-filter"
+                                                        id="id_{{ filter.field }}" name="{{ filter.field }}"
+                                                        data-filter="{{ filter.lookup_type }}">
+                                                    {% for option in filter.choices %}
+                                                        {% if filter.default == option.0 %}
+                                                            <option selected
+                                                                    value="{{ option.0 }}">{{ option.0 }}</option>
+                                                        {% else %}
+                                                            <option value="{{ option.0 }}">{{ option.0 }}</option>
+                                                        {% endif %}
+                                                    {% endfor %}
+                                                </select>
+                                            {% else %}
+                                                <div class="warning">Not supported field</div>
+                                            {% endif %}
+
+                                        </div>
+                                    {% endfor %}
+
+                                </div>
+                            </div>
+
+                            {% if specification.filters is None %}
+                                <div class="row"><span
+                                        class="info-text text-center">Please specify one of the filters.</span></div>
+                            {% elif specification.is_ready == False %}
+                                <div class="row"><h4>Loading...</h4></div>
+                            {% else %}
+                                <label for="inputs_result"><h4>Inputs:</h4></label>
+                                {{ specification.inputs|json_script:"inputs" }}
+                                {{ form.inputs|as_crispy_field }}
+                            {% endif %}
+                            <div class="row bottom-bar">
+                                <div class="col-2">
+                                    <button class="btn btn-success btn-sm" type="submit" name="save" value="save"><i
+                                            class="fas fa-check"></i> Save and preview
+                                    </button>
+                                </div>
+                                <div class="col-2">
+                                    <button class="btn btn-success btn-sm" type="submit" name="save"
+                                            value="save_and_add_successor"><i class="fas fa-check"></i> Save and add
+                                        successor
+                                    </button>
+                                </div>
+                                <div class="col-3"><h5>Submission
+                                    status: {{ specification.get_submission_status_display }}</h5></div>
+                                <div class="col-2">
+                                    <button class="btn btn-success btn-sm" type="submit" name="save"
+                                            value="save_and_send_to_atdb"><i class="fas fa-check"></i> Save and send to
+                                        ATDB
+                                    </button>
+                                </div>
+
+                            </div>
+                        </form>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+        <script>
+            const state = {
+                selected_workflow: "{{ specification.selected_workflow }}",
+                specification_id: "{{ specification.pk }}",
+                is_ready: "{{ specification.is_ready }}",
+                filters: "{{ specification.filters | safe }}"
+            };
+
+            function fetchAvailableWorkflows(ATDBurl) {
+                fetch(ATDBurl + 'workflows').then((response) => response.json()).then((data) => {
+                    $.each(data.results, function (key, value) {
+                        $('#id_selected_workflow').append($('<option>', {value: value.workflow_uri}).text(value.workflow_uri));
+                    });
+                }).then(() => {
+                    if (state.selected_workflow !== 'None') {
+                        $('#id_selected_workflow').val(state.selected_workflow)
+                    }
+                })
+            }
+
+            function delay(time) {
+                return new Promise(resolve => setTimeout(resolve, time));
+            }
+
+            function updateWorkflows(selectedProcessingSite) {
+                $('#id_selected_workflow').empty()
+                if (selectedProcessingSite === '') return
+                fetch('{% url 'processingsite-detail' 'replace' %}'.replace('replace', selectedProcessingSite)).then(
+                    (response) => response.json()).then(
+                    (data) => fetchAvailableWorkflows(data.url)
+                )
+            }
+
+            function selectedProcessingSite(event) {
+                let selectedProcessingSite = event.currentTarget.value
+                console.log('Processing site selected', event.currentTarget.value)
+                updateWorkflows(selectedProcessingSite);
+            }
+
+            function set_value_of_filters(item) {
+                const value = item.value;
+                const name = item.name;
+                const query_type = item.getAttribute('data-filter')
+                const join_sign = query_type === 'exact' ? '' : '_' + query_type
+                const filters_textbox = $('#id_filters')
+                const current_filters = filters_textbox.val() !== "null" ? JSON.parse(filters_textbox.val()) : {};
+                if (value === '' && current_filters[name + join_sign] !== undefined) {
+                    delete current_filters[name + join_sign]
+                } else {
+                    current_filters[name + join_sign] = value
+                }
+
+                filters_textbox.val(JSON.stringify(current_filters, undefined, 2))
+            }
+
+            function changeFilter(event) {
+                set_value_of_filters(event.currentTarget);
+            }
+
+            function attachSignals() {
+                $("#id_processing_site").on('change', selectedProcessingSite);
+
+                $(".custom-filter").on('input', changeFilter);
+                $("select.custom-filter").on('change', changeFilter);
+
+                console.log('current filters', state.filters)
+                if (state.filters === "None") {
+                    console.log('Still defining task', state);
+                } else if (state.is_ready === "True") {
+                    console.log('Results are ready', state);
+                } else {
+                    console.log('It should reload', state);
+                    delay(3000).then(() => location.reload(true));
+
+                }
+            }
+
+            function formatJSONField(field_name) {
+                try {
+                    const data = JSON.parse($(field_name).val());
+                    $(field_name).text(JSON.stringify(data, undefined, 2));
+                } catch (error) {
+
+                }
+            }
+
+            function onReady() {
+                attachSignals();
+                updateWorkflows($("#id_processing_site")[0].value);
+                formatJSONField('#id_inputs')
+                formatJSONField('#id_filters')
+            }
+
+            $(document).ready(onReady);
+        </script>
+
+
+{% endblock %}
\ No newline at end of file