Hawkular UI more or less working

- Backend connections ok - React routing almost ok (bug on chart not being refreshed) This is still WIP
hawkular · Jul 11, 2017 · ecf329d · ecf329d
1 parent 758a13b
commit ecf329d
Show file tree

Hide file tree

Showing 3 changed files with 290 additions and 58 deletions.
diff --git a/api/metrics-api-jaxrs/src/main/webapp/static/css/main.css b/api/metrics-api-jaxrs/src/main/webapp/static/css/main.css
@@ -1,19 +1,3 @@
-/*
- * Copyright 2014-2017 Red Hat, Inc. and/or its affiliates
- * and other contributors as indicated by the @author tags.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
 .navbar .brand-name {
     font-size: 18pt;
     padding-top: 15px;
@@ -27,6 +11,80 @@
     color: #f5f5f5;
 }
 
+.navbar-sidebar {
+    background: #292e33;
+    border: 0;
+    border-radius: 0;
+    bottom: 0;
+    left: -240px;
+    margin: 0;
+    padding: 0;
+    position: fixed;
+    top: 58px;
+    width: 240px;
+    z-index: 1029;
+}
+
+@media (min-width: 992px) {
+    .navbar-sidebar {
+        box-shadow: none!important;
+        left: 0;
+        overflow-x: hidden;
+        overflow-y: auto;
+        padding-right: 0;
+    }
+}
+
+.navbar-sidebar {
+    text-align: initial;
+}
+
+.navbar-sidebar .section {
+    color: #fff;
+    display: block;
+    padding: 0 20px 20px 20px;
+    border-bottom: 1px solid #393f44;
+    margin-bottom: 10px;
+}
+
+.navbar-sidebar .title {
+    font-size: 16px;
+    line-height: 60px;
+}
+
+.navbar-sidebar ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.navbar-sidebar ul li a {
+    text-decoration: none;
+    cursor: pointer;
+    color: #fff;
+    line-height: 24px;
+}
+
+.navbar-sidebar input {
+    width: 200px;
+    color: #363636;
+}
+
+.container-fluid {
+    padding-left: 45px;
+}
+
+.container-fluid {
+    padding-bottom: 50px;
+    padding-top: 58px;
+}
+
+@media (min-width: 992px) {
+    .container-fluid {
+        padding-left: 260px;
+    }
+}
+
 .content {
     background-color: #f5f5f5;
     width: 100%;
@@ -53,3 +111,7 @@ h1, h3 {
   text-align: center;
   word-wrap:break-word;
 }
+
+#line-chart {
+    margin-top: 50px;
+}
diff --git a/api/metrics-api-jaxrs/src/main/webapp/static/index.html b/api/metrics-api-jaxrs/src/main/webapp/static/index.html
@@ -1,16 +1,39 @@
+<!--
+  ~ Copyright 2014-2017 Red Hat, Inc. and/or its affiliates
+  ~ and other contributors as indicated by the @author tags.
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
     <title>Hawkular Metrics</title>
     <link rel="shortcut icon" href="/hawkular/metrics/static/img/favicon.ico" type="image/x-icon">
 
     <!-- PatternFly Styles -->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.25.0/css/patternfly.min.css" rel="stylesheet" media="screen, print">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.25.0/css/patternfly-additions.min.css" rel="stylesheet" media="screen, print">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.25.0/css/patternfly-additions.min.css" rel="stylesheet" media="screen, print">-->
 
     <script src="https://fb.me/react-15.0.0.js"></script>
     <script src="https://fb.me/react-dom-15.0.0.js"></script>
     <script src="https://npmcdn.com/react-router@3.0.2/umd/ReactRouter.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.25.0/js/patternfly.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.13/c3.min.js"></script>
+
     <link href="/hawkular/metrics/static/css/main.css" rel="stylesheet">
     <script src="/hawkular/metrics/static/js/navigation.js" type="text/babel"></script>
 </head>