From 5bcbb9310d14bcef3afa11315abd2251fe4e4fc6 Mon Sep 17 00:00:00 2001 From: Brandon Lo Date: Thu, 20 Jun 2019 11:31:25 -0400 Subject: Add bootstrap 4 support Remove bootstrap 3 module and css/js Recreated almost everything in bootstrap 4 Change workflow layout to support bootstrap 4 and flex Add rotating glyphs for dropdowns Change breadcrumbs to use pagination and its styling Change account dropdown to use full width buttons Add version sock to bootstrap4 Fix indenting in base.html Change comments in base.html Remove dead code in booking_list Revert changes in mulitple_select_filter_widget Remove dead code, whitespace in inbox Fix formatting, dead code in viewport-base Remove unused media tag Make only .rotate classes rotate on dropdown click Attach back and next to breadcrumbs Resize breadcrumbs to be same width Disable pointer cursor on breadcrumb hover Change account page to account dropdown on left Change-Id: I6c5423db6f0f6f7f0b12e55347eddcc42b56e52b Signed-off-by: Brandon Lo --- dashboard/requirements.txt | 2 +- dashboard/src/pharos_dashboard/settings.py | 2 +- dashboard/src/static/bower.json | 12 +- dashboard/src/static/css/base.css | 8 + dashboard/src/templates/account/booking_list.html | 55 +-- .../src/templates/account/configuration_list.html | 11 +- dashboard/src/templates/account/image_list.html | 17 +- dashboard/src/templates/account/resource_list.html | 10 +- .../templates/account/userprofile_update_form.html | 17 +- dashboard/src/templates/base.html | 302 +++++++------- .../src/templates/booking/booking_calendar.html | 2 +- .../src/templates/booking/booking_delete.html | 2 +- .../src/templates/booking/booking_detail.html | 42 +- dashboard/src/templates/booking/booking_list.html | 36 +- dashboard/src/templates/booking/quick_deploy.html | 2 +- dashboard/src/templates/booking/stats.html | 31 +- .../templates/booking/steps/booking_confirm.html | 2 +- .../src/templates/booking/steps/booking_meta.html | 2 +- .../templates/booking/steps/resource_select.html | 2 +- .../templates/booking/steps/swconfig_select.html | 2 +- .../config_bundle/steps/assign_host_roles.html | 2 +- .../config_bundle/steps/assign_network_roles.html | 2 +- .../config_bundle/steps/config_software.html | 2 +- .../config_bundle/steps/define_software.html | 2 +- .../config_bundle/steps/pick_installer.html | 2 +- .../config_bundle/steps/table_formset.html | 11 +- .../src/templates/dashboard/genericselect.html | 2 +- dashboard/src/templates/dashboard/lab_detail.html | 71 ++-- dashboard/src/templates/dashboard/lab_list.html | 44 +- dashboard/src/templates/dashboard/landing.html | 159 +++++--- dashboard/src/templates/dashboard/resource.html | 10 +- .../src/templates/dashboard/resource_all.html | 10 +- dashboard/src/templates/dashboard/table.html | 9 +- dashboard/src/templates/layout.html | 11 +- dashboard/src/templates/notifier/inbox.html | 197 +++++---- .../src/templates/resource/hostprofile_detail.html | 112 +++--- .../templates/resource/steps/define_hardware.html | 2 +- .../src/templates/resource/steps/host_info.html | 2 +- .../src/templates/resource/steps/meta_info.html | 2 +- .../templates/snapshot_workflow/steps/meta.html | 2 +- .../snapshot_workflow/steps/select_host.html | 2 +- dashboard/src/templates/workflow/confirm.html | 2 +- .../src/templates/workflow/resource_select.html | 2 +- .../src/templates/workflow/viewport-base.html | 443 +++++++++++---------- .../src/templates/workflow/viewport-element.html | 2 +- 45 files changed, 892 insertions(+), 772 deletions(-) create mode 100644 dashboard/src/static/css/base.css diff --git a/dashboard/requirements.txt b/dashboard/requirements.txt index 9ea10a4..55e5fc9 100644 --- a/dashboard/requirements.txt +++ b/dashboard/requirements.txt @@ -1,7 +1,7 @@ celery==3.1.23 cryptography==2.3.1 Django==2.1 -django-bootstrap3==10.0.1 +django-bootstrap4==0.0.8 django-crispy-forms==1.7.2 django-filter==2.0.0 django-registration==2.1.2 diff --git a/dashboard/src/pharos_dashboard/settings.py b/dashboard/src/pharos_dashboard/settings.py index 793eec7..86de78c 100644 --- a/dashboard/src/pharos_dashboard/settings.py +++ b/dashboard/src/pharos_dashboard/settings.py @@ -35,7 +35,7 @@ INSTALLED_APPS = [ 'django.contrib.messages', 'django.contrib.staticfiles', 'django.contrib.humanize', - 'bootstrap3', + 'bootstrap4', 'crispy_forms', 'rest_framework', 'rest_framework.authtoken', diff --git a/dashboard/src/static/bower.json b/dashboard/src/static/bower.json index 9ae744a..dda786d 100644 --- a/dashboard/src/static/bower.json +++ b/dashboard/src/static/bower.json @@ -16,12 +16,14 @@ "tests" ], "dependencies": { - "eonasdan-bootstrap-datetimepicker": "^4.17.37", "fullcalendar": "^2.9.0", "jquery-migrate": "^3.0.0", - "startbootstrap-sb-admin-2-blackrockdigital": "^3.3.7" - }, - "resolutions": { - "font-awesome": "~4.6.3" + "bootstrap": "4.3.1", + "popper.js": "1.14.3", + "Font-Awesome": "5.9.0", + "datatables.net": "1.10.19", + "datatables.net-bs4": "1.10.19", + "datatables.net-responsive": "2.1.1", + "datatables.net-responsive-bs4": "2.2.3" } } diff --git a/dashboard/src/static/css/base.css b/dashboard/src/static/css/base.css new file mode 100644 index 0000000..c51728c --- /dev/null +++ b/dashboard/src/static/css/base.css @@ -0,0 +1,8 @@ +/* Rotating arrows when dropdown happens */ +i.fas.rotate { + transition: transform 0.3s ease-in-out; +} + +a[aria-expanded="true"] > i.rotate { + transform: rotate(180deg); +} diff --git a/dashboard/src/templates/account/booking_list.html b/dashboard/src/templates/account/booking_list.html index ed59b81..98ab5c8 100644 --- a/dashboard/src/templates/account/booking_list.html +++ b/dashboard/src/templates/account/booking_list.html @@ -3,9 +3,11 @@

Bookings I Own

{% for booking in bookings %} -
-
+
+

Booking {{booking.id}}

+
+
  • id: {{booking.id}}
  • lab: {{booking.lab}}
    • @@ -15,8 +17,8 @@
  • purpose: {{booking.purpose}}
-
- Details +
+ Details - - Pharos Dashboard +
+ + + - - - - - + + Inbox + +
+
+ +
- - + - -
- {% if title %} -
-
-

{{ title }}

+
+ {% if title %} +
+
+

{{ title }}

+
+
- + {% endif %} +
{% bootstrap_messages %}
+ + {% block content %} + {% endblock content %}
- {% endif %} -
{% bootstrap_messages %}
+ - {% block content %} - {% endblock content %}
- +
- + +
+ {% endblock basecontent %} diff --git a/dashboard/src/templates/booking/booking_calendar.html b/dashboard/src/templates/booking/booking_calendar.html index 1b29dc2..ddcb45d 100644 --- a/dashboard/src/templates/booking/booking_calendar.html +++ b/dashboard/src/templates/booking/booking_calendar.html @@ -1,7 +1,7 @@ {% extends "base.html" %} {% load staticfiles %} -{% load bootstrap3 %} +{% load bootstrap4 %} {% block extrahead %} {{ block.super }} diff --git a/dashboard/src/templates/booking/booking_delete.html b/dashboard/src/templates/booking/booking_delete.html index 76a5634..b89eb15 100644 --- a/dashboard/src/templates/booking/booking_delete.html +++ b/dashboard/src/templates/booking/booking_delete.html @@ -1,5 +1,5 @@ {% load jira_filters %} -{% load bootstrap3 %} +{% load bootstrap4 %}

Really delete Booking from {{ booking.start}} to {{ booking.end }}? diff --git a/dashboard/src/templates/booking/booking_detail.html b/dashboard/src/templates/booking/booking_detail.html index ac00e22..918f5af 100644 --- a/dashboard/src/templates/booking/booking_detail.html +++ b/dashboard/src/templates/booking/booking_detail.html @@ -1,6 +1,6 @@ {% extends "base.html" %} {% load staticfiles %} -{% load bootstrap3 %} +{% load bootstrap4 %} {% block extrahead %} {{block.super}} @@ -19,13 +19,13 @@

-
-
-
+
+
+

Overview

- Expand +
-
+
@@ -60,12 +60,12 @@
-
-
+
+

Pod

- Expand +
-
+
Purpose
{% for host in booking.resource.hosts.all %} @@ -177,14 +177,14 @@ -
-
-
+
+
+

Deployment Progress

These are the different tasks that have to be completed before your deployment is ready

- Expand +
-
+
-
-
-

About Us:

-

The Lab as a Service (LaaS) project aims to help in the development and testing of LFN projects such as OPNFV by hosting hardware and providing access to the community. Currently, the only participating lab is the University of New Hampshire Interoperability Lab (UNH-IOL).

-

To get started, you can request access to a server at the right. PTL's have the ability to design and book a whole block of servers with customized layer2 networks (e.g. a Pharos Pod). Read more here: LaaS Wiki

+ h1 {} + +
+
+ +
+

About Us:

+

The Lab as a Service (LaaS) project aims to help in the development and testing of LFN projects such as + OPNFV + by hosting hardware and providing access to the community. Currently, the only participating lab is the + University of New Hampshire Interoperability Lab (UNH-IOL).

+

To get started, you can request access to a server at the right. PTL's have the ability to design and + book a + whole block of servers with customized layer2 networks (e.g. a Pharos Pod). Read more here: LaaS Wiki

+
+ +
+

Get Started:

+ {% if request.user.is_anonymous %} +

To get started, please log in with your Linux + Foundation Jira account

+ {% else %} +

To get started, book a server below:

+ +

Book a Server

+ +

PTLs can use our advanced options to book multi-node pods. If you are a PTL, you may use the options + below: +

+
+
+
+ +
+
+ +
+
+ +
+
+ {% endif %} +
+
+ {% if not request.user.is_anonymous %} -

Returning Users:

-

If you're a returning user, some of the following options may be of interest:

- - My Bookings - {% if manager == True %} - - {% endif %} - {% endif %} -
-
-
-
-

Get Started:

- {% if request.user.is_anonymous %} -

To get started, please log in with your Linux Foundation Jira account

- {% else %} -

To get started, book a server below:

-

Book a Server

 -

PTLs can use our advanced options to book multi-node pods. If you are a PTL, you may use the options below:

-
- - - - - {% endif %} +
+

Returning Users:

+

If you're a returning user, some of the following options may be of interest:

+
+
+
+ +
+
+ My + Bookings +
+ {% if manager == True %} +
+ +
+ {% endif %} +
+
+ {% endif %}
- - - -
@@ -130,4 +169,4 @@ {% block vport_comm %} {% endblock %} -{% endblock content %} +{% endblock content %} \ No newline at end of file diff --git a/dashboard/src/templates/dashboard/resource.html b/dashboard/src/templates/dashboard/resource.html index 28e7998..f36ee7b 100644 --- a/dashboard/src/templates/dashboard/resource.html +++ b/dashboard/src/templates/dashboard/resource.html @@ -7,11 +7,11 @@ - - {% endblock extrahead %} @@ -23,11 +23,11 @@ {% block extrajs %} - - - + + diff --git a/dashboard/src/templates/dashboard/resource_all.html b/dashboard/src/templates/dashboard/resource_all.html index 0b0d0d4..fb8cc7e 100644 --- a/dashboard/src/templates/dashboard/resource_all.html +++ b/dashboard/src/templates/dashboard/resource_all.html @@ -7,11 +7,11 @@ - - {% endblock extrahead %} @@ -36,11 +36,11 @@ {% block extrajs %} - - - + + diff --git a/dashboard/src/templates/dashboard/table.html b/dashboard/src/templates/dashboard/table.html index b3f4b5f..0a37ded 100644 --- a/dashboard/src/templates/dashboard/table.html +++ b/dashboard/src/templates/dashboard/table.html @@ -4,11 +4,12 @@ {% block extrahead %} {{ block.super }} - - + {% endblock extrahead %} {% block content %} @@ -34,8 +35,8 @@ {% block extrajs %} - - + + diff --git a/dashboard/src/templates/layout.html b/dashboard/src/templates/layout.html index 378cc63..d37d4f5 100644 --- a/dashboard/src/templates/layout.html +++ b/dashboard/src/templates/layout.html @@ -20,7 +20,7 @@ - @@ -50,17 +50,12 @@ {##} {##} {##} - + + {##} - - - - - - {% block extrajs %} {% endblock extrajs %} diff --git a/dashboard/src/templates/notifier/inbox.html b/dashboard/src/templates/notifier/inbox.html index 4184d1d..72207ed 100644 --- a/dashboard/src/templates/notifier/inbox.html +++ b/dashboard/src/templates/notifier/inbox.html @@ -6,97 +6,124 @@ {% block content %} - -
-
-

New:

-
- {% for notification in unread_notifications %} -
- {{ notification }} +
+
+
+
+ + + +
- {% endfor %}
-

Read:

-
- {% for notification in read_notifications %} -
- {{ notification }} +
+ +
+
+ {% for notification in unread_notifications %} + + {{ notification }} + + {% endfor %} +
+
+ {% for notification in read_notifications %} + + {{ notification }} + + {% endfor %} +
+
+ +
+
- {% endfor %}
-
-
-
-
-
- -
-
-{% endblock %} +{% endblock %} \ No newline at end of file diff --git a/dashboard/src/templates/resource/hostprofile_detail.html b/dashboard/src/templates/resource/hostprofile_detail.html index 0776b9e..dc20600 100644 --- a/dashboard/src/templates/resource/hostprofile_detail.html +++ b/dashboard/src/templates/resource/hostprofile_detail.html @@ -4,45 +4,35 @@ {% block content %}
-
-
+
+

Available at

- Expand +
-
-
- - - -
-
    - {% for lab in hostprofile.labs.all %} -
  • {{lab.name}}
    • - {% endfor %} -
-
+
+
    + {% for lab in hostprofile.labs.all %} +
  • {{lab.name}}
    • + {% endfor %} +
-
-
+
+

RAM

- Expand +
-
- - - - -
{{hostprofile.ramprofile.first.amount}}G, - {{hostprofile.ramprofile.first.channels}} channels
+
+ {{hostprofile.ramprofile.first.amount}}G, + {{hostprofile.ramprofile.first.channels}} channels
-
-
+
+

CPU

- Expand +
-
+
@@ -59,42 +49,12 @@
Arch:
-
-
-
-
-

Interfaces

- Expand -
-
- - {% for intprof in hostprofile.interfaceprofile.all %} - - - - {% endfor %} -
- - - - - - - - - -
Name:{{intprof.name}}
Speed:{{intprof.speed}}
-
-
-
-
-
-
-
+
+

Disk

- Expand +
-
+
@@ -112,5 +72,31 @@ +
+
+
+

Interfaces

+ +
+
+
Size:
+ + + + + + + + {% for intprof in hostprofile.interfaceprofile.all %} + + + + + {% endfor %} + +
NameSpeed
{{intprof.name}}{{intprof.speed}}
+
+
+
{% endblock content %} diff --git a/dashboard/src/templates/resource/steps/define_hardware.html b/dashboard/src/templates/resource/steps/define_hardware.html index 933b4ab..f85576e 100644 --- a/dashboard/src/templates/resource/steps/define_hardware.html +++ b/dashboard/src/templates/resource/steps/define_hardware.html @@ -1,7 +1,7 @@ {% extends "workflow/viewport-element.html" %} {% load staticfiles %} -{% load bootstrap3 %} +{% load bootstrap4 %} {% block content %}

Note that not all labs host every kind of machine. diff --git a/dashboard/src/templates/resource/steps/host_info.html b/dashboard/src/templates/resource/steps/host_info.html index 0275727..bbbafdc 100644 --- a/dashboard/src/templates/resource/steps/host_info.html +++ b/dashboard/src/templates/resource/steps/host_info.html @@ -1,7 +1,7 @@ {% extends "workflow/viewport-element.html" %} {% load staticfiles %} -{% load bootstrap3 %} +{% load bootstrap4 %} {% block content %} diff --git a/dashboard/src/templates/resource/steps/meta_info.html b/dashboard/src/templates/resource/steps/meta_info.html index da98267..cebd343 100644 --- a/dashboard/src/templates/resource/steps/meta_info.html +++ b/dashboard/src/templates/resource/steps/meta_info.html @@ -1,7 +1,7 @@ {% extends "workflow/viewport-element.html" %} {% load staticfiles %} -{% load bootstrap3 %} +{% load bootstrap4 %} {% block content %} diff --git a/dashboard/src/templates/snapshot_workflow/steps/meta.html b/dashboard/src/templates/snapshot_workflow/steps/meta.html index cc49691..bea475d 100644 --- a/dashboard/src/templates/snapshot_workflow/steps/meta.html +++ b/dashboard/src/templates/snapshot_workflow/steps/meta.html @@ -1,7 +1,7 @@ {% extends "workflow/viewport-element.html" %} {% load staticfiles %} -{% load bootstrap3 %} +{% load bootstrap4 %} {% block content %} - - + #topPagination .topcrumb { + flex: 1 1 0; + display: flex; + align-content: center; + justify-content: center; + border: 1px solid #dee2e6; + border-left: none; + } + + .topcrumb > span { + color: #343a40; + cursor: default; + } -

- + .topcrumb.active > span { + background: #007bff; + color: white; + } + + .topcrumb.disabled > span { + color: #6c757d; + background: #f8f9fa; + } + + +
+
+ +
+
+ +
+
+
+
+

+ +

+
+ + +
+
+
+ +
+
+ +
+
+
+ +
+ + +
+
+
-
{% csrf_token %} -
-
-

-

-

-
- - - -
- -
- +
+ {% csrf_token %} +
-{% endblock content %} +{% endblock content %} \ No newline at end of file diff --git a/dashboard/src/templates/workflow/viewport-element.html b/dashboard/src/templates/workflow/viewport-element.html index f25e644..7a7165a 100644 --- a/dashboard/src/templates/workflow/viewport-element.html +++ b/dashboard/src/templates/workflow/viewport-element.html @@ -1,5 +1,5 @@ {% extends "layout.html" %} -{% load bootstrap3 %} +{% load bootstrap4 %} {% load staticfiles %} {% block basecontent %} -- cgit 1.2.3-korg