Bug 568236 - User interface improvement for APP4MC Cloud
The user interface for the web service on the cloud could use a better
look. This should be a change to the look of all the pages (index,
workflow, administration, login etc...) It also adds an about page.
Change-Id: I5d050a57809c95c6b19fa2382441dffb73e3d724
Signed-off-by: Philip Okonkwo <philipcokonkwo@yahoo.com>
diff --git a/manager/pom.xml b/manager/pom.xml
index 64f0ad7..43a6362 100644
--- a/manager/pom.xml
+++ b/manager/pom.xml
@@ -80,6 +80,16 @@
<artifactId>bootstrap</artifactId>
<version>4.5.2</version>
</dependency>
+
+ <dependency>
+ <groupId>org.webjars</groupId>
+ <artifactId>font-awesome</artifactId>
+ <version>5.13.0</version>
+ </dependency>
+ <dependency>
+ <groupId>org.thymeleaf.extras</groupId>
+ <artifactId>thymeleaf-extras-springsecurity5</artifactId>
+ </dependency>
</dependencies>
<build>
diff --git a/manager/src/main/java/org/eclipse/app4mc/cloud/manager/AboutPageController.java b/manager/src/main/java/org/eclipse/app4mc/cloud/manager/AboutPageController.java
new file mode 100644
index 0000000..054f389
--- /dev/null
+++ b/manager/src/main/java/org/eclipse/app4mc/cloud/manager/AboutPageController.java
@@ -0,0 +1,29 @@
+/*********************************************************************************
+ * Copyright (c) 2020 Robert Bosch GmbH and others.
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ * Robert Bosch GmbH - initial API and implementation
+ ********************************************************************************
+ */
+package org.eclipse.app4mc.cloud.manager;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
+
+@Controller
+public class AboutPageController {
+
+ @GetMapping("/about")
+ public String workflow(Model model) {
+ // render the form view
+ return "about";
+ }
+
+}
\ No newline at end of file
diff --git a/manager/src/main/resources/static/css/styles.css b/manager/src/main/resources/static/css/styles.css
new file mode 100644
index 0000000..dbeec43
--- /dev/null
+++ b/manager/src/main/resources/static/css/styles.css
@@ -0,0 +1,146 @@
+html, body{
+ height:100%;
+}
+
+h1{
+ color: black;
+}
+
+.custom-file-label{
+ border-radius : 40px;
+ -moz-border-radius:40px;
+ -webkit-border-radius:40px;
+}
+
+.custom-file-label::after{
+ border-radius : 40px;
+ -moz-border-radius:40px;
+ -webkit-border-radius:40px;
+}
+
+.form-control{
+ border-radius : 40px;
+ -moz-border-radius:40px;
+ -webkit-border-radius:40px;
+}
+
+#wf-fm-group{
+ padding:0;
+}
+
+.hero{
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ background-image: linear-gradient(rgba(220, 220, 220, 0.9) 50%, rgba(220, 220, 220, 0.9) 50%), url("../images/bg-header2.jpg");
+ background-color: #cccccc;
+ background-size: cover;
+}
+
+.left-btn, .right-btn{
+ border-radius: 40px;
+ padding-left: 30px;
+ padding-right: 30px;
+}
+.list-group{
+ border-radius : 40px;
+}
+
+.banner{
+ margin: 0;
+ padding: 0;
+ background-image: linear-gradient(rgba(220, 220, 220, 0.9) 50%, rgba(220, 220, 220, 0.9) 50%), url("../images/bg-header2.jpg");
+ background-color: #cccccc;
+ background-size: cover;
+ height: 300px;
+ width:100%;
+ z-index: -1;
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.list-group-item{
+ border-radius : 40px;
+ -moz-border-radius:40px;
+ -webkit-border-radius:40px;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ padding-right: 5px;
+}
+
+.btn-rmv{
+ background-color: Black;
+ border: none;
+ color: white;
+ padding: 10px 14px;
+ font-size: 16px;
+ cursor: pointer;
+ border-radius : 50%;
+}
+
+.navcon{
+ margin: 0;
+ padding: 0;
+}
+
+.nav-item{
+ margin-left: 30px;
+}
+
+.nav-brand{
+ width: 150px;
+ display: block;
+}
+
+.plist {
+ margin: auto 0;
+}
+
+.fm-ctrl-left{
+ border-radius : 40px 0px 0px 40px;
+ -moz-border-radius:40px 0px 0px 40px;
+ -webkit-border-radius:40px 0px 0px 40px;
+}
+
+.fm-ctrl-center{
+ border-radius : 0;
+ -moz-border-radius:0;
+ -webkit-border-radius:0;
+}
+
+.fm-ctrl-right{
+ border-radius : 0px 40px 40px 0px;
+ -moz-border-radius:0px 40px 40px 0px;
+ -webkit-border-radius:0px 40px 40px 0px;
+}
+
+.btn-save{
+ border: none;
+ color: white;
+ padding: 10px 14px;
+ font-size: 16px;
+ cursor: pointer;
+}
+
+.half-btn{
+ width: 100px
+}
+
+/* Scroll Bar */
+::-webkit-scrollbar {
+ width: 10px;
+}
+
+::-webkit-scrollbar-track {
+ background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+ background: #888;
+ border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: #555;
+}
\ No newline at end of file
diff --git a/manager/src/main/resources/static/images/Logo_Panorama_small.png b/manager/src/main/resources/static/images/Logo_Panorama_small.png
new file mode 100644
index 0000000..c89af0d
--- /dev/null
+++ b/manager/src/main/resources/static/images/Logo_Panorama_small.png
Binary files differ
diff --git a/manager/src/main/resources/static/images/app4mc-logo_small.png b/manager/src/main/resources/static/images/app4mc-logo_small.png
new file mode 100644
index 0000000..2b3992e
--- /dev/null
+++ b/manager/src/main/resources/static/images/app4mc-logo_small.png
Binary files differ
diff --git a/manager/src/main/resources/static/images/bg-header2.jpg b/manager/src/main/resources/static/images/bg-header2.jpg
new file mode 100644
index 0000000..3ef6259
--- /dev/null
+++ b/manager/src/main/resources/static/images/bg-header2.jpg
Binary files differ
diff --git a/manager/src/main/resources/static/index.html b/manager/src/main/resources/static/index.html
deleted file mode 100644
index feeebf7..0000000
--- a/manager/src/main/resources/static/index.html
+++ /dev/null
@@ -1,39 +0,0 @@
-<!DOCTYPE HTML>
-<html xmlns:th="https://www.thymeleaf.org">
-<head>
-<title>APP4MC Cloud Manager</title>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<link href="webjars/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
-<script src="webjars/jquery/3.5.1/jquery.min.js"></script>
-<script type="module" src="webjars/popper.js/1.16.0/popper.min.js"></script>
-<script src="webjars/bootstrap/4.5.2/js/bootstrap.min.js"></script>
-</head>
-<body>
- <div class="container">
- <div class="row justify-content-center">
- <div class="col text-center" style="height:200px">
- <img class="img-fluid" style="height:100%" src="/images/Logo_Panorama.png"/>
- </div>
- </div>
- <div class="row align-items-end">
- <div class="col" style="height:100px">
- <img class="img-fluid float-right" style="height:100%; margin-right:10px;" src="/images/app4mc-logo.png"/>
- </div>
- <div class="col">
- <div class="content-heading"><h1>Cloud Manager</h1></div>
- </div>
- </div>
- <div class="row mt-3">
- <div class="col text-center text-danger"><h2><em>(under development)</em></h2></div>
- </div>
- <div class="row mt-3">
- <div class="col">
- <a class="btn btn-primary float-right" href="/workflow">Start Workflow</a>
- </div>
- <div class="col">
- <a class="btn btn-secondary" href="/admin">Administration</a>
- </div>
- </div>
- </div>
-</body>
-</html>
diff --git a/manager/src/main/resources/static/js/admin.js b/manager/src/main/resources/static/js/admin.js
new file mode 100644
index 0000000..0ece8dc
--- /dev/null
+++ b/manager/src/main/resources/static/js/admin.js
@@ -0,0 +1,11 @@
+function removeService(service) {
+ var token = $('#_csrf').attr('content');
+ var header = $('#_csrf_header').attr('content');
+ $.ajax({
+ type: 'POST',
+ url: '/admin/remove/' + service,
+ success: function(result) {
+ location.reload();
+ }
+ });
+}
\ No newline at end of file
diff --git a/manager/src/main/resources/static/js/workflow.js b/manager/src/main/resources/static/js/workflow.js
new file mode 100644
index 0000000..45eee51
--- /dev/null
+++ b/manager/src/main/resources/static/js/workflow.js
@@ -0,0 +1,39 @@
+function clearWorkflow() {
+ $.ajax({
+ type : 'POST',
+ url : '/clear',
+ success : function(result) {
+ $('#selectedServicesBlock').load('/selectedServices');
+ $('#messagesBlock').load('/messages');
+ $('#errorsBlock').load('/errors');
+ $('#resultsBlock').load('/results');
+ }
+ });
+ }
+
+ function updateSelectedServices(service) {
+ $.ajax({
+ type : 'POST',
+ url : '/select/' + service,
+ success : function(result) {
+ $('#selectedServicesBlock').load('/selectedServices');
+ }
+ });
+ }
+
+ function removeSelectedServices(service) {
+ $.ajax({
+ type : 'POST',
+ url : '/remove/' + service,
+ success : function(result) {
+ $('#selectedServicesBlock').load('/selectedServices');
+ }
+ });
+ }
+
+ $(document).ready(function() {
+ $('#selectedServicesBlock').load('/selectedServices');
+ $('#messagesBlock').load('/messages');
+ $('#errorsBlock').load('/errors');
+ $('#resultsBlock').load('/results');
+ });
diff --git a/manager/src/main/resources/templates/about.html b/manager/src/main/resources/templates/about.html
new file mode 100644
index 0000000..c1e1dd2
--- /dev/null
+++ b/manager/src/main/resources/templates/about.html
@@ -0,0 +1,113 @@
+<html xmlns:th="https://www.thymeleaf.org">
+<head th:include="fragment :: fragment_head">
+</head>
+<body>
+ <div th:replace="fragment :: fragment_nav"></div>
+ <div class="banner"></div>
+ <div class="container col-md-7">
+ <div class="row" style="margin-top: 100px">
+ <div class="col text-center">
+ <div class="content-heading">
+ <h1>About Eclipse APP4MC</h1>
+ </div>
+ </div>
+ </div>
+ <div class="col-md-18 padding-bottom-30" style="margin-top: 130px; margin-bottom:100px">
+ <p>
+ <br>
+ </p>
+
+ <p>
+ <strong>Eclipse APP4MC</strong> is a platform for engineering
+ embedded multi- and many-core software systems. The platform enables
+ the creation and management of complex tool chains including
+ simulation and validation. As an open platform, proven in the
+ automotive sector by Bosch and their partners, it supports
+ interoperability and extensibility and unifies data exchange in
+ cross-organizational projects.<span id="dots">...</span>
+ </p>
+
+ <div id="more" style="display: none;">
+ <p>
+ <img src="https://www.eclipse.org/app4mc/images/system-model.png"
+ class="img-responsive" style="width: 100%">
+ </p>
+
+ <p>
+ <strong><em>Multi- and Many-Core Development Process
+ Support</em></strong>
+ </p>
+
+ <p>The Amalthea platform allows users to distribute data and
+ tasks to the target hardware platforms, with the focus on
+ optimization of timing and scheduling. It addresses the need for
+ new tools and techniques to make effective use of the level of
+ parallelism in this environment.</p>
+
+ <p>
+ <strong><em>Common Data Exchange and Simulation</em></strong>
+ </p>
+
+ <p>The System Model contains the information required to
+ simulate, analyze and optimize performance. It contains extensive
+ information about software, hardware, timing behavior, and
+ constraints for the system under development.</p>
+
+ <p>
+ Based on the <a href="http://www.eclipse.org/modeling/emf/">Eclipse
+ Modeling Framework</a>, its capabilities not only include hardware and
+ software modelling but in addition, tools for visualization and
+ processing. The unified data model enables tool interoperability
+ and data exchange with other systems such as <a
+ href="http://www.autosar.org">Autosar</a> and simplifies the
+ exchange and storage of data.
+ </p>
+
+ <p>
+ <strong><em>Event Tracing</em></strong>
+ </p>
+
+ <p>The AMALTHEA definitions of task states and transitions
+ provides the basis for evaluating systems with tracing tools,
+ identifying problems and discovering improvements. These
+ definitions are already in use in both commercial and open source
+ tools.</p>
+
+ <p>
+ <strong><em>Customizable Workflow</em></strong>
+ </p>
+
+ <p>
+ The AMALTHEA workflow engine supports a continuous development
+ workflow, allowing data exchange along the entire toolchain.
+ Workflow elements can be customized and extended according to user
+ needs. As a basis, a standard workflow developed with <a
+ href="http://www.eclipse.org/Xtext/documentation/306_mwe2.html">Eclipse
+ Xtext(MWE2)</a> is included.
+ </p>
+
+ </div>
+ <button onclick="readMoreOrLess()" id="myBtn" class= "btn btn-secondary" style="border-radius: 40px">Read more</button>
+ </div>
+
+ </div>
+ <script>
+ function readMoreOrLess() {
+ var dots = document.getElementById("dots");
+ var moreText = document.getElementById("more");
+ var btnText = document.getElementById("myBtn");
+
+ if (dots.style.display === "none") {
+ dots.style.display = "inline";
+ btnText.innerHTML = "Read more";
+ moreText.style.display = "none";
+ } else {
+ dots.style.display = "none";
+ btnText.innerHTML = "Read less";
+ moreText.style.display = "inline";
+ }
+ }
+ </script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/manager/src/main/resources/templates/admin.html b/manager/src/main/resources/templates/admin.html
index 107c8a6..e2461b1 100644
--- a/manager/src/main/resources/templates/admin.html
+++ b/manager/src/main/resources/templates/admin.html
@@ -1,138 +1,122 @@
-<html xmlns:th="https://www.thymeleaf.org"
- xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
-<head>
-<title>APP4MC Cloud Manager - Administration</title>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<link href="webjars/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
-<script src="webjars/jquery/3.5.1/jquery.min.js"></script>
-<script type="module" src="webjars/popper.js/1.16.0/popper.min.js"></script>
-<script src="webjars/bootstrap/4.5.2/js/bootstrap.min.js"></script>
-<script type="text/javascript">
-function removeService(service) {
- var token = $('#_csrf').attr('content');
- var header = $('#_csrf_header').attr('content');
- $.ajax({
- type: 'POST',
- url: '/admin/remove/' + service,
- success: function(result) {
- location.reload();
- }
- });
-}
-</script>
+<html xmlns:th="https://www.thymeleaf.org">
+<head th:include="fragment :: fragment_head">
</head>
<body>
- <div class="container">
- <div class="row justify-content-center">
- <div class="col text-center" style="height:200px">
- <img class="img-fluid" style="height:100%" src="/images/Logo_Panorama.png"/>
- </div>
- </div>
- <div class="row">
+ <div th:replace="fragment :: fragment_nav"></div>
+ <div class="banner"></div>
+ <div class="container col-md-7">
+ <div class="row" style="margin-top: 100px">
<div class="col text-center">
- <div class="content-heading"><h2>Configure available cloud services</h2></div>
+ <div class="content-heading">
+ <h1>Configure Available Services</h1>
+ </div>
</div>
</div>
- <form action="#" th:action="@{/admin/save}" th:object="${dto}" method="POST">
- <fieldset>
+ <form action="#" th:action="@{/admin/save}" th:object="${dto}"
+ method="POST">
+ <fieldset>
- <div class="row mt-3">
+ <div class="row" style="margin-top: 100px">
<div class="col text-center">
- <table class="table table-sm">
- <thead>
- <tr>
- <th>Service Name</th>
- <th>Service Base URL</th>
- <th>Service Description</th>
- <th></th>
- </tr>
- </thead>
- <tbody>
- <tr th:each="service, stat : *{services}">
- <td><input th:field="*{services[__${stat.index}__].name}" class="form-control"/></td>
- <td><input th:field="*{services[__${stat.index}__].baseUrl}" class="form-control"/></td>
- <td><input th:field="*{services[__${stat.index}__].description}" class="form-control"/></td>
- <td>
- <a th:if="*{services[__${stat.index}__].name != null}"
- th:attr="onclick=|removeService('*{services[__${stat.index}__].name}')|"
- class="btn btn-secondary btn-sm">remove</a>
- </td>
- </tr>
- </tbody>
- </table>
+ <table class="table table-sm">
+ <thead>
+ <tr>
+ <th>Service Name</th>
+ <th>Service Base URL</th>
+ <th>Service Description</th>
+ <th></th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr th:each="service, stat : *{services}">
+ <td><input th:field="*{services[__${stat.index}__].name}"
+ class="form-control fm-ctrl-left" /></td>
+ <td><input
+ th:field="*{services[__${stat.index}__].baseUrl}"
+ class="form-control fm-ctrl-center" /></td>
+ <td><input
+ th:field="*{services[__${stat.index}__].description}"
+ class="form-control fm-ctrl-right" /></td>
+ <td><a th:if="*{services[__${stat.index}__].name != null}"
+ th:attr="onclick=|removeService('*{services[__${stat.index}__].name}')|"
+ class="btn btn-secondary btn-sm btn-rmv"><i
+ class="fas fa-times"></i></a>
+ <button
+ th:unless="*{services[__${stat.index}__].name != null}"
+ type="submit" id="submitServicesButton" th:value="Save"
+ class="btn btn-primary btn-save">
+ <i class="fas fa-save"></i>
+ </button></td>
+ </tr>
+ </tbody>
+ </table>
</div>
</div>
<div class="row">
- <div class="col text-right" style="padding-right:2px">
- <input type="submit" id="submitServicesButton" th:value="Save" class="btn btn-primary"/>
- </div>
- <div class="col" style="padding-left:2px">
- <input type="reset" id="resetServicesButton" name="reset" th:value="Reset" class="btn btn-secondary"/>
+ <div class="col text-center" style="padding-left: 2px">
+ <input type="reset" id="resetServicesButton" name="reset"
+ th:value="Reset" class="btn btn-secondary" />
</div>
</div>
- </fieldset>
+ </fieldset>
</form>
<div class="row mb-3 mt-5">
<div class="col text-center">
- <div class="content-heading"><h2>Configure Proxy</h2></div>
+ <div class="content-heading">
+ <h2>Configure Proxy</h2>
+ </div>
</div>
</div>
<form action="/admin/saveProxy" method="POST">
- <fieldset>
+ <fieldset>
<div class="form-row">
<div class="form-group col">
- <label for="proxy_host">Host</label>
- <input type="text" id="proxy_host" name="proxy_host" th:value="${proxy_host}" class="form-control"/>
+ <label for="proxy_host">Host</label> <input type="text"
+ id="proxy_host" name="proxy_host" th:value="${proxy_host}"
+ class="form-control" />
</div>
</div>
<div class="form-row">
<div class="form-group col">
- <label for="proxy_port">Port</label>
- <input type="text" id="proxy_port" name="proxy_port" th:value="${proxy_port}" class="form-control"/>
+ <label for="proxy_port">Port</label> <input type="text"
+ id="proxy_port" name="proxy_port" th:value="${proxy_port}"
+ class="form-control" />
</div>
</div>
<div class="form-row">
<div class="form-group col">
- <label for="proxy_user">User</label>
- <input type="text" id="proxy_user" name="proxy_user" th:value="${proxy_user}" class="form-control"/>
+ <label for="proxy_user">User</label> <input type="text"
+ id="proxy_user" name="proxy_user" th:value="${proxy_user}"
+ class="form-control" />
</div>
</div>
<div class="form-row">
<div class="form-group col">
- <label for="proxy_pwd">Password</label>
- <input type="password" id="proxy_pwd" name="proxy_pwd" th:value="${proxy_pwd}" class="form-control"/>
+ <label for="proxy_pwd">Password</label> <input type="password"
+ id="proxy_pwd" name="proxy_pwd" th:value="${proxy_pwd}"
+ class="form-control" />
</div>
</div>
- <div class="row">
- <div class="col text-right" style="padding-right:2px">
- <input type="submit" id="submitProxyButton" th:value="Save" class="btn btn-primary mt-2"/>
+ <div class="row" style="margin-top: 20px; margin-bottom: 100px">
+ <div class="col text-right" style="padding-right: 2px">
+ <input type="reset" id="resetProxyButton" name="reset"
+ th:value="Reset"
+ class="btn btn-secondary mt-2 fm-ctrl-left half-btn" />
</div>
- <div class="col" style="padding-left:2px">
- <input type="reset" id="resetProxyButton" name="reset" th:value="Reset" class="btn btn-secondary mt-2"/>
+ <div class="col" style="padding-left: 2px">
+ <input type="submit" id="submitProxyButton" th:value="Save"
+ class="btn btn-primary mt-2 fm-ctrl-right half-btn" />
</div>
</div>
- </fieldset>
+ </fieldset>
</form>
-
- <div class="row">
- <div class="col">
- <form th:action="@{/logout}" method="post">
- <input class="btn btn-secondary mb-1" type="submit" value="Sign Out"/>
- </form>
- </div>
- </div>
- <div class="row">
- <div class="col">
- <a th:href="@{/}" class="btn btn-dark mb-5">Go back</a>
- </div>
- </div>
- </div>
-
+ </div>
+ <script type="text/javascript" src="js/admin.js"></script>
</body>
</html>
\ No newline at end of file
diff --git a/manager/src/main/resources/templates/error.html b/manager/src/main/resources/templates/error.html
index c968adf..7484746 100644
--- a/manager/src/main/resources/templates/error.html
+++ b/manager/src/main/resources/templates/error.html
@@ -1,86 +1,60 @@
<!DOCTYPE HTML>
<html xmlns:th="https://www.thymeleaf.org">
-<head>
-<title>APP4MC Cloud Manager - Error</title>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<link href="webjars/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
-<script src="webjars/jquery/3.5.1/jquery.min.js"></script>
-<script type="module" src="webjars/popper.js/1.16.0/popper.min.js"></script>
-<script src="webjars/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+<head th:include="fragment :: fragment_head">
</head>
<body>
- <div class="container">
- <div class="row justify-content-center">
- <div class="col text-center" style="height:200px">
- <img class="img-fluid" style="height:100%" src="/images/Logo_Panorama.png"/>
- </div>
- </div>
- <div class="row align-items-end">
+ <div th:replace="fragment :: fragment_nav"></div>
+ <div class="banner"></div>
+ <div class="container" style="margin-bottom: 100px">
+ <div class="row align-items-end" style="margin-top: 230px">
<div class="col">
- <div class="content-heading"><h1>An error occured</h1></div>
+ <div class="content-heading">
+ <h1>An error occured</h1>
+ </div>
</div>
</div>
<div class="row mt-3">
- <div class="col-2">
- Date
- </div>
+ <div class="col-2">Date</div>
<div class="col">
<span th:text="${timestamp}"></span>
</div>
</div>
<div class="row mt-3">
- <div class="col-2">
- Path
- </div>
+ <div class="col-2">Path</div>
<div class="col">
<span th:text="${path}"></span>
</div>
</div>
<div class="row mt-3">
- <div class="col-2">
- Error
- </div>
+ <div class="col-2">Error</div>
<div class="col">
<span th:text="${error}"></span>
</div>
</div>
<div class="row mt-3">
- <div class="col-2">
- Status
- </div>
+ <div class="col-2">Status</div>
<div class="col">
<span th:text="${status}"></span>
</div>
</div>
<div class="row mt-3">
- <div class="col-2">
- Message
- </div>
+ <div class="col-2">Message</div>
<div class="col">
<span th:text="${message}"></span>
</div>
</div>
<div class="row mt-3">
- <div class="col-2">
- Exception
- </div>
+ <div class="col-2">Exception</div>
<div class="col">
<span th:text="${exception}"></span>
</div>
</div>
<div class="row mt-3">
- <div class="col-2">
- Trace
- </div>
+ <div class="col-2">Trace</div>
<div class="col">
<pre th:text="${trace}"></pre>
</div>
</div>
- <div class="row">
- <div class="col">
- <a th:href="@{/}" class="btn btn-dark mt-5 mb-5">Go back</a>
- </div>
- </div>
- </div>
+ </div>
</body>
</html>
diff --git a/manager/src/main/resources/templates/fragment.html b/manager/src/main/resources/templates/fragment.html
new file mode 100644
index 0000000..e15a340
--- /dev/null
+++ b/manager/src/main/resources/templates/fragment.html
@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+<html xmlns:th="https://www.thymeleaf.org"
+ xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
+<head th:fragment="fragment_head">
+<title>APP4MC Cloud Manager</title>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<link href="webjars/bootstrap/4.5.2/css/bootstrap.min.css"
+ rel="stylesheet">
+<link href="css/styles.css" rel="stylesheet" />
+<script src="webjars/jquery/3.5.1/jquery.min.js"></script>
+<script type="module" src="webjars/popper.js/1.16.0/popper.min.js"></script>
+<script src="webjars/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+<script src="webjars/font-awesome/5.13.0/js/all.min.js"></script>
+</head>
+<body>
+ <div class="container-fluid navcon" th:fragment="fragment_nav">
+ <nav class="navbar navbar-expand-sm bg-light">
+ <a class="nav-brand" th:href="@{/}"><img style="width: 100%"
+ src="/images/Logo_Panorama_small.png" /></a>
+ <ul class="navbar-nav col-md-10 justify-content-end">
+ <li class="nav-item"><a class="nav-link" th:href="@{/}">Home</a></li>
+ <li class="nav-item"><a class="nav-link" th:href="@{/admin}">Admin</a></li>
+ <li class="nav-item" sec:authorize="isAuthenticated()"><a class="nav-link" th:href="@{/logout}">Logout</a></li>
+ <li class="nav-item" sec:authorize="isAnonymous()"><a class="nav-link" th:href="@{/login}">Login</a></li>
+ <li class="nav-item"><a class="nav-link" th:href="@{/about}">About</a></li>
+ </ul>
+ </nav>
+ </div>
+</body>
+</html>
diff --git a/manager/src/main/resources/templates/index.html b/manager/src/main/resources/templates/index.html
new file mode 100644
index 0000000..7750e6e
--- /dev/null
+++ b/manager/src/main/resources/templates/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html xmlns:th="https://www.thymeleaf.org"
+ xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
+<head th:replace="fragment :: fragment_head">
+</head>
+<body>
+ <div class="container-fluid hero">
+ <div th:replace="fragment :: fragment_nav"></div>
+ <div class="container cta">
+ <div class="row justify-content-center"
+ style="height: 100px; margin-top: 150px">
+ <img class="img-fluid" style="height: 100%; margin-right: 10px;"
+ src="/images/app4mc-logo.png" />
+ </div>
+ <div class="row justify-content-center">
+ <div class="content-heading">
+ <h1>Cloud Manager</h1>
+ </div>
+ </div>
+ <div class="row" style="margin-top: 30px">
+ <div class="col text-center">
+ <a class="btn btn-primary left-btn" href="/workflow">Start
+ Workflow</a>
+ </div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
diff --git a/manager/src/main/resources/templates/login.html b/manager/src/main/resources/templates/login.html
index 0ac12f1..0a6f60b 100644
--- a/manager/src/main/resources/templates/login.html
+++ b/manager/src/main/resources/templates/login.html
@@ -1,65 +1,58 @@
<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org"
- xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
-<head>
-<title>APP4MC Cloud Manager - Login</title>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<link href="webjars/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
-<script src="webjars/jquery/3.5.1/jquery.min.js"></script>
-<script type="module" src="webjars/popper.js/1.16.0/popper.min.js"></script>
-<script src="webjars/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:th="https://www.thymeleaf.org"
+ xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
+<head th:include="fragment :: fragment_head">
</head>
<body>
- <div class="container">
- <div class="row justify-content-center">
- <div class="col text-center" style="height:200px">
- <img class="img-fluid" style="height:100%" src="/images/Logo_Panorama.png"/>
- </div>
- </div>
- <div class="row">
+ <div th:replace="fragment :: fragment_nav"></div>
+ <div class="banner"></div>
+ <div class="container col-md-7">
+ <div class="row" style="margin-top: 100px">
<div class="col text-center">
- <div class="content-heading"><h1>Login</h1></div>
+ <div class="content-heading">
+ <h1>Login</h1>
+ </div>
</div>
</div>
- <div class="row mt-3 mb-3">
+ <div class="row" style="margin: 130px 0px 0px 0px;">
<div th:if="${param.error}">
- <div class="content-heading"><h2>Invalid username and password.</h2></div>
+ <div class="content-heading">
+ <h3>Invalid username and password.</h3>
+ </div>
</div>
</div>
<div class="row mt-3 mb-3">
- <div th:if="${param.logout}">
- <div class="content-heading"><h2>You have been logged out.</h2></div>
- </div>
+ <div th:if="${param.logout}">
+ <div class="content-heading">
+ <h3>You have been logged out.</h3>
+ </div>
+ </div>
</div>
-
- <form th:action="@{/login}" method="post">
- <fieldset>
+
+ <form th:action="@{/login}" method="post">
+ <fieldset>
<div class="form-row">
<div class="form-group col">
- <label for="username">User Name</label>
- <input type="text" id="username" name="username"class="form-control"/>
+ <label for="username">User Name</label> <input type="text"
+ id="username" name="username" class="form-control" />
</div>
</div>
<div class="form-row">
<div class="form-group col">
- <label for="password">Password</label>
- <input type="password" id="password" name="password" class="form-control"/>
+ <label for="password">Password</label> <input type="password"
+ id="password" name="password" class="form-control" />
</div>
</div>
<div class="form-row">
<div class="col text-center">
- <input type="submit" value="Sign In" class="btn btn-primary mt-2"/>
+ <input type="submit" value="Sign In"
+ class="btn btn-primary mt-2 left-btn" />
</div>
</div>
</fieldset>
- </form>
-
- <div class="row">
- <div class="col">
- <a th:href="@{/}" class="btn btn-dark">Go back</a>
- </div>
- </div>
- </div>
+ </form>
+ </div>
</body>
</html>
\ No newline at end of file
diff --git a/manager/src/main/resources/templates/selectedServices.html b/manager/src/main/resources/templates/selectedServices.html
index 66a5b11..ca71761 100644
--- a/manager/src/main/resources/templates/selectedServices.html
+++ b/manager/src/main/resources/templates/selectedServices.html
@@ -8,8 +8,8 @@
<div th:fragment="servicesList" id="selectedServices" th:object="${workflowStatus}">
<ul class="list-group">
<li th:each="selected : ${workflowStatus.selectedServices}" class="list-group-item d-flex justify-content-between">
- <p class="p-0 m-0 flex-grow-1" th:text="${selected}">Service</p>
- <a th:attr="onclick=|removeSelectedServices('${selected}')|" class="btn btn-secondary btn-sm">remove</a>
+ <p class="p-0 flex-grow-1 plist" th:text="${selected}">Service</p>
+ <a th:attr="onclick=|removeSelectedServices('${selected}')|" class="btn btn-primary btn-sm btn-rmv"><i class="fas fa-times"></i></a>
</li>
</ul>
<select name="services" id="services" onchange="updateSelectedServices(this.value)" class="form-control">
diff --git a/manager/src/main/resources/templates/status.html b/manager/src/main/resources/templates/status.html
index 537c584..0626bf5 100644
--- a/manager/src/main/resources/templates/status.html
+++ b/manager/src/main/resources/templates/status.html
@@ -26,8 +26,8 @@
<ul class="list-group">
<li th:each="result : ${workflowStatus.results}" class="list-group-item d-flex justify-content-between">
<p class="p-0 m-0 flex-grow-1" th:text="${result.key}">Result</p>
- <a class="btn btn-primary btn-sm mr-1" th:href="${result.value}">View</a>
- <a class="btn btn-secondary btn-sm" th:href="${result.value + '?download=true'}">Download</a>
+ <a class="btn btn-primary btn-sm mr-1 btn-save" th:href="${result.value}"><i class="fas fa-eye"></i></a>
+ <a class="btn btn-secondary btn-sm btn-rmv" th:href="${result.value + '?download=true'}"><i class="fas fa-download"></i></a>
</li>
</ul>
<a th:href="@{/{uuid}/delete(uuid=${workflowStatus.uuid})}" class="btn btn-danger mt-4 mb-4">Delete</a>
diff --git a/manager/src/main/resources/templates/workflow.html b/manager/src/main/resources/templates/workflow.html
index de9203f..77ca235 100644
--- a/manager/src/main/resources/templates/workflow.html
+++ b/manager/src/main/resources/templates/workflow.html
@@ -1,115 +1,60 @@
<html xmlns:th="https://www.thymeleaf.org">
-<head>
-<title>APP4MC Cloud Manager - Workflow</title>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<link href="webjars/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
-<script src="webjars/jquery/3.5.1/jquery.min.js"></script>
-<script type="module" src="webjars/popper.js/1.16.0/popper.min.js"></script>
-<script src="webjars/bootstrap/4.5.2/js/bootstrap.min.js"></script>
-<script type="text/javascript">
-function clearWorkflow() {
- $.ajax({
- type: 'POST',
- url: '/clear',
- success: function(result) {
- $('#selectedServicesBlock').load('/selectedServices');
- $('#messagesBlock').load('/messages');
- $('#errorsBlock').load('/errors');
- $('#resultsBlock').load('/results');
- }
- });
-}
-
-function updateSelectedServices(service) {
- $.ajax({
- type: 'POST',
- url: '/select/' + service,
- success: function(result) {
- $('#selectedServicesBlock').load('/selectedServices');
- }
- });
-}
-
-function removeSelectedServices(service) {
- $.ajax({
- type: 'POST',
- url: '/remove/' + service,
- success: function(result) {
- $('#selectedServicesBlock').load('/selectedServices');
- }
- });
-}
-
-$(document).ready(function(){
- $('#selectedServicesBlock').load('/selectedServices');
- $('#messagesBlock').load('/messages');
- $('#errorsBlock').load('/errors');
- $('#resultsBlock').load('/results');
-});
-</script>
+<head th:include="fragment :: fragment_head">
</head>
<body>
- <div class="container">
- <div class="row justify-content-center">
- <div class="col text-center" style="height:200px">
- <img class="img-fluid" style="height:100%" src="/images/Logo_Panorama.png"/>
- </div>
- </div>
- <div class="row mb-4">
+ <div th:replace="fragment :: fragment_nav"></div>
+ <div class="banner"></div>
+ <div class="container col-md-7">
+ <div class="row mb-4" style="margin-top: 100px">
<div class="col text-center">
- <div class="content-heading"><h1>Cloud Service Workflow</h1></div>
+ <div class="content-heading">
+ <h1>Cloud Service Workflow</h1>
+ </div>
</div>
</div>
- <form method="POST" enctype="multipart/form-data" action="/workflow" th:object="${workflowStatus}">
- <div class="form-row mb-3">
+ <form method="POST" enctype="multipart/form-data" action="/workflow"
+ th:object="${workflowStatus}">
+ <div class="form-row mb-3" style="margin-top: 130px">
<div class="custom-file">
- <input type="file" class="custom-file-input" id="customFile" name="file">
- <label class="custom-file-label" for="customFile">Select input file to process</label>
+ <input type="file" class="custom-file-input" id="customFile"
+ name="file"> <label class="custom-file-label"
+ for="customFile">Select input file to process</label>
<script>
- $('#customFile').on('change',function(){
- //get the file name
- var fileName = $(this).val().split('\\').pop();
- //replace the "Choose a file" label
- $(this).next('.custom-file-label').html(fileName);
- clearWorkflow();
- })
- </script>
+ $('#customFile').on('change', function() {
+ //get the file name
+ var fileName = $(this).val().split('\\').pop();
+ //replace the "Choose a file" label
+ $(this).next('.custom-file-label').html(fileName);
+ clearWorkflow();
+ })
+ </script>
</div>
</div>
<div class="form-row">
- <div class="form-group col">
- <label >Select service(s) to process</label>
- <div id="selectedServicesBlock">
-
- </div>
+ <div class="form-group col" id="wf-fm-group">
+ <label>Select service(s) to process</label>
+ <div id="selectedServicesBlock"></div>
</div>
</div>
- <div class="form-row">
+ <div class="form-row" style="margin-top: 20px; margin-bottom: 100px">
<div class="col text-center">
- <input type="submit" value="Start workflow" class="btn btn-primary mt-2" onClick="this.form.submit(); this.disabled=true; this.value='Processing…'; "/>
+ <input type="submit" value="Start workflow"
+ class="btn btn-primary mt-2 left-btn"
+ onClick="this.form.submit(); this.disabled=true; this.value='ProcessingÂ…'; " />
</div>
</div>
</form>
- <div id="messagesBlock">
+ <div id="messagesBlock"></div>
+
+ <div id="errorsBlock"></div>
+
+ <div id="resultsBlock"></div>
</div>
-
- <div id="errorsBlock">
-
- </div>
-
- <div id="resultsBlock">
-
- </div>
-
- <div class="row">
- <div class="col">
- <a th:href="@{/}" class="btn btn-dark mb-5">Go back</a>
- </div>
- </div>
-
- </div>
+ <script type="text/javascript" src="js/workflow.js"></script>
</body>
+
+
</html>
\ No newline at end of file
