feat(ui): Migrate to PatternFly 4 design framework

This change is a rewrite of the existing OpenDC frontend in order to
migrate to the PatternFly 4 design framework.

PatternFly is used by Red Hat for various computing related services such
as OpenShift, Red Hat Virtualization and Cockpit. Since their design
requirements are very similar to those of OpenDC (modeling computing
services), migrating to PatternFly 4 allows us to re-use design choices
from these services.

See https://www.patternfly.org/v4/ for more information about
PatternFly.

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", () => {