Skip to content

Commit

Permalink
New UI, first shot
Browse files Browse the repository at this point in the history
- React-based
- Navigation bar + old status page
- DEV/WIP VERSION (Using cdn / babel on the fly)
  • Loading branch information
jotak committed Jul 11, 2017
1 parent ed5c239 commit 758a13b
Show file tree
Hide file tree
Showing 7 changed files with 166 additions and 93 deletions.
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
* Copyright 2014-2016 Red Hat, Inc. and/or its affiliates
* 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");
Expand All @@ -14,30 +14,36 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
html {
width: 100%;
.navbar .brand-name {
font-size: 18pt;
padding-top: 15px;
}

body {
font-family: 'Exo 2', sans-serif;
.navbar .brand-statement {
padding-top: 17px;
}

.navbar .brand-statement:hover {
color: #f5f5f5;
}

.content {
margin-left: auto;
margin-right: auto;
max-width: 100%;
width: 50em;
padding: 1em;
text-align: center;
background-color: #f5f5f5;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
padding: 1em;
text-align: center;
}

.logo {
.logo-big {
margin-left: auto;
margin-right: auto;
text-align: center;
}

.logo img {
.logo-big img {
max-width: 100%;
margin-left: auto;
margin-right: auto;
Expand Down
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
47 changes: 13 additions & 34 deletions api/metrics-api-jaxrs/src/main/webapp/static/index.html
Original file line number Diff line number Diff line change
@@ -1,41 +1,20 @@
<!--
~ Copyright 2014-2015 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/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="/hawkular/metrics/static/welcome.css" type="text/css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Exo+2" type="text/css">
<script src="/hawkular/metrics/static/status.js" type="text/javascript"></script>
</head>

<body>
<div class="content">
<div class="logo">
<img src="/hawkular/metrics/static/hawkular_logo.png" alt="Hawkular Logo"/>
</div>
<h1>Hawkular Metrics</h1>
<h3>A time series metrics engine based on Cassandra</h3>
<link rel="shortcut icon" href="/hawkular/metrics/static/img/favicon.ico" type="image/x-icon">

<p id="implementation-version"></p>
<p id="built-from-git-sha1" style="font-size:12px;"></p>
<!-- 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">

<p id="status">Status: <i>Checking...</i></p>
</div>
<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>
<link href="/hawkular/metrics/static/css/main.css" rel="stylesheet">
<script src="/hawkular/metrics/static/js/navigation.js" type="text/babel"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
134 changes: 134 additions & 0 deletions api/metrics-api-jaxrs/src/main/webapp/static/js/navigation.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
/*
* 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.
*/
const { Router,
Route,
IndexRoute,
IndexLink,
hashHistory,
Link } = ReactRouter;

const Metrics = () => (
<div>
<h2>Metrics</h2>
</div>
)

class Status extends React.Component {
constructor(props) {
super(props);
this.state = {
"Status": "Status: checking...",
"Implementation-Version": "",
"Built-From-Git-SHA1": ""
};
}

render() {
return (
<div>
<div className="logo-big">
<img src="/hawkular/metrics/static/img/hawkular_logo.png" alt="Hawkular Logo"/>
</div>
<h1>Hawkular Metrics</h1>
<h3>A time series metrics engine based on Cassandra</h3>

<p>{this.state.version}</p>
<p>{this.state.gitref}</p>
<p>{this.state.status}</p>
</div>
)
}

componentDidMount() {
var httpRequest;

if (window.XMLHttpRequest) {
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
}

httpRequest.onreadystatechange = () => {
if (httpRequest.readyState === 4) {
if (httpRequest.status === 200) {
const statusJson = JSON.parse(httpRequest.responseText);
this.setState({
version: statusJson["Implementation-Version"],
gitref: "(Git SHA1 - " + statusJson["Built-From-Git-SHA1"] + ")",
status: "Metrics Service: " + statusJson.MetricsService
});
} else if (httpRequest.status === 404 || httpRequest.status === 503) {
this.setState({
status: "The server is not available"
});
} else {
this.setState({
status: "An error occured while accessing the server :" + httpRequest.responseText
});
}
}
};
httpRequest.open("GET", "/hawkular/metrics/status");
httpRequest.send();
}
}

const Menu = (
<nav className="navbar navbar-default navbar-pf" role="navigation">
<div className="collapse navbar-collapse navbar-collapse-1">
<div>
<a href="http://www.hawkular.org/" className="navbar-brand">
<img className="navbar-brand-icon" src="/hawkular/metrics/static/img/hawkular_logo_small.png" alt=""/>
</a>
<a href="http://www.hawkular.org/" className="navbar-brand brand-name">Hawkular</a>
<span className="navbar-brand brand-statement">A time series metrics engine based on Cassandra</span>
<ul className="nav navbar-nav navbar-primary navbar-right">
<li><Link to="/metrics" activeClassName="active">Metrics</Link></li>
<li><Link to="/status" activeClassName="active">Status</Link></li>
</ul>
</div>
</div>
</nav>
)

const App = React.createClass({
render: function() {
return (
<div>
<div className="menu">{Menu}</div>
<div className="content">
{this.props.children}
</div>
</div>
)
}
});

ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={App}>
<IndexRoute component={Metrics}/>
<Route path="metrics" component={Metrics} />
<Route path="status" component={Status} />
</Route>
</Router>,
document.getElementById('root')
);
46 changes: 0 additions & 46 deletions api/metrics-api-jaxrs/src/main/webapp/static/status.js

This file was deleted.

0 comments on commit 758a13b

Please sign in to comment.