merge: Add PatternFly 4 web interface (#161)

This pull requests adds the new web interface based on the PatternFly 4 design framework.
This framework enables us to develop more quickly the interfaces necessary in OpenDC. 

* Remove the OpenDC landing page from the web interface module
* Add support for the PatternFly 4 framework in Next.js
* Relax topology schema requirements
* Migrate UI components to PatternFly 4

4 files changed, 48 insertions, 37 deletions

diff --git a/opendc-web/opendc-web-ui/src/util/authorizations.js b/opendc-web/opendc-web-ui/src/util/authorizations.js
index eb492d26..ce5d34b6 100644
--- a/opendc-web/opendc-web-ui/src/util/authorizations.js
+++ b/opendc-web/opendc-web-ui/src/util/authorizations.js
@@ -1,9 +1,11 @@
-import { faHome, faPencilAlt, faEye } from '@fortawesome/free-solid-svg-icons'
+import HomeIcon from '@patternfly/react-icons/dist/js/icons/home-icon'
+import EditIcon from '@patternfly/react-icons/dist/js/icons/edit-icon'
+import EyeIcon from '@patternfly/react-icons/dist/js/icons/eye-icon'
 
 export const AUTH_ICON_MAP = {
-    OWN: faHome,
-    EDIT: faPencilAlt,
-    VIEW: faEye,
+    OWN: HomeIcon,
+    EDIT: EditIcon,
+    VIEW: EyeIcon,
 }
 
 export const AUTH_DESCRIPTION_MAP = {
diff --git a/opendc-web/opendc-web-ui/src/util/available-metrics.js b/opendc-web/opendc-web-ui/src/util/available-metrics.js
index 807bc0c1..b21ab150 100644
--- a/opendc-web/opendc-web-ui/src/util/available-metrics.js
+++ b/opendc-web/opendc-web-ui/src/util/available-metrics.js
@@ -1,12 +1,28 @@
+export const METRIC_GROUPS = {
+    'Host Metrics': [
+        'total_overcommitted_burst',
+        'total_power_draw',
+        'total_failure_vm_slices',
+        'total_granted_burst',
+        'total_interfered_burst',
+        'total_requested_burst',
+        'mean_cpu_usage',
+        'mean_cpu_demand',
+        'mean_num_deployed_images',
+        'max_num_deployed_images',
+    ],
+    'Compute Service Metrics': ['total_vms_submitted', 'total_vms_queued', 'total_vms_finished', 'total_vms_failed'],
+}
+
 export const AVAILABLE_METRICS = [
+    'mean_cpu_usage',
+    'mean_cpu_demand',
+    'total_requested_burst',
+    'total_granted_burst',
     'total_overcommitted_burst',
+    'total_interfered_burst',
     'total_power_draw',
     'total_failure_vm_slices',
-    'total_granted_burst',
-    'total_interfered_burst',
-    'total_requested_burst',
-    'mean_cpu_usage',
-    'mean_cpu_demand',
     'mean_num_deployed_images',
     'max_num_deployed_images',
     'total_vms_submitted',
@@ -65,3 +81,22 @@ export const METRIC_UNITS = {
     total_vms_finished: 'VMs',
     total_vms_failed: 'VMs',
 }
+
+export const METRIC_DESCRIPTIONS = {
+    total_overcommitted_burst:
+        'The total CPU clock cycles lost due to overcommitting of resources. This metric is an indicator for resource overload.',
+    total_requested_burst: 'The total CPU clock cycles that were requested by all virtual machines.',
+    total_granted_burst: 'The total CPU clock cycles executed by the hosts.',
+    total_interfered_burst: 'The total CPU clock cycles lost due to resource interference between virtual machines.',
+    total_power_draw: 'The average power usage in watts.',
+    mean_cpu_usage: 'The average amount of CPU clock cycles consumed by all virtual machines on a host.',
+    mean_cpu_demand: 'The average amount of CPU clock cycles requested by all powered on virtual machines on a host.',
+    mean_num_deployed_images: 'The average number of virtual machines deployed on a host.',
+    max_num_deployed_images: 'The maximum number of virtual machines deployed at any time.',
+    total_failure_vm_slices: 'The total amount of CPU clock cycles lost due to failure.',
+    total_vms_submitted: 'The total number of virtual machines scheduled by the compute service.',
+    total_vms_queued:
+        'The maximum number of virtual machines waiting to be scheduled by the compute service at any point.',
+    total_vms_finished: 'The total number of virtual machines that completed successfully.',
+    total_vms_failed: 'The total number of virtual machines that failed during execution.',
+}
diff --git a/opendc-web/opendc-web-ui/src/util/date-time.js b/opendc-web/opendc-web-ui/src/util/date-time.js
index 66efdf5b..7e2f6623 100644
--- a/opendc-web/opendc-web-ui/src/util/date-time.js
+++ b/opendc-web/opendc-web-ui/src/util/date-time.js
@@ -7,19 +7,7 @@
  * @returns {string} A human-friendly string version of that date and time.
  */
 export function parseAndFormatDateTime(dateTimeString) {
-    return formatDateTime(parseDateTime(dateTimeString))
-}
-
-/**
- * Parses date-time string representations and returns a parsed object.
- *
- * The format assumed is "YYYY-MM-DDTHH:MM:SS".
- *
- * @param dateTimeString A string expressing a date and a time, in the above mentioned format.
- * @returns {object} A Date object with the parsed date and time information as content.
- */
-export function parseDateTime(dateTimeString) {
-    return new Date(dateTimeString + '.000Z')
+    return formatDateTime(new Date(dateTimeString))
 }
 
 /**
diff --git a/opendc-web/opendc-web-ui/src/util/date-time.test.js b/opendc-web/opendc-web-ui/src/util/date-time.test.js
index 3d95eba6..431e39f7 100644
--- a/opendc-web/opendc-web-ui/src/util/date-time.test.js
+++ b/opendc-web/opendc-web-ui/src/util/date-time.test.js
@@ -1,18 +1,4 @@
-import { convertSecondsToFormattedTime, parseDateTime } from './date-time'
-
-describe('date-time parsing', () => {
-    it('reads components properly', () => {
-        const dateString = '2017-09-27T20:55:01'
-        const parsedDate = parseDateTime(dateString)
-
-        expect(parsedDate.getUTCFullYear()).toEqual(2017)
-        expect(parsedDate.getUTCMonth()).toEqual(8)
-        expect(parsedDate.getUTCDate()).toEqual(27)
-        expect(parsedDate.getUTCHours()).toEqual(20)
-        expect(parsedDate.getUTCMinutes()).toEqual(55)
-        expect(parsedDate.getUTCSeconds()).toEqual(1)
-    })
-})
+import { convertSecondsToFormattedTime } from './date-time'
 
 describe('tick formatting', () => {
     it("returns '0s' for numbers <= 0", () => {