[CORD-2869] Adding service status dropdown
Change-Id: I8faa6d96f202fc097cc12df87e1825d7dff2852f
diff --git a/conf/proxy.js b/conf/proxy.js
index 387bd57..fa0c1a7 100644
--- a/conf/proxy.js
+++ b/conf/proxy.js
@@ -19,7 +19,7 @@
const httpProxy = require('http-proxy');
const target = process.env.PROXY || '127.0.0.1:9101';
-const wsTarget = process.env.WS || '127.0.0.1:3000';
+const wsTarget = process.env.WS || target || '127.0.0.1:3000';
const proxy = httpProxy.createProxyServer({
target: `http://${target}`,
@@ -36,7 +36,7 @@
});
wsProxy.on('error', function(error, req, res) {
res.writeHead(500, {'Content-Type': 'text/plain'});
- console.error('[Proxy]', error);
+ console.error('[wsProxy]', error);
});
module.exports = {
diff --git a/src/app/core/header/header.html b/src/app/core/header/header.html
index 56cf7f1..f416204 100644
--- a/src/app/core/header/header.html
+++ b/src/app/core/header/header.html
@@ -52,6 +52,16 @@
typeahead-template-url="customTemplate.html"
typeahead-on-select="vm.routeSelected($item, $model, $label)">
</form>
+ <div class="nav navbar-nav navbar-right">
+ <div class="btn-group" uib-dropdown is-open="status.isopen">
+ <a id="single-button" class="btn btn-accent" uib-dropdown-toggle>
+ Service Status <span class="caret"></span>
+ </a>
+ <div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
+ <service-status></service-status>
+ </div>
+ </div>
+ </div>
</div>
</div>
</nav>
diff --git a/src/app/core/header/header.scss b/src/app/core/header/header.scss
index 30347f8..f6006d2 100644
--- a/src/app/core/header/header.scss
+++ b/src/app/core/header/header.scss
@@ -39,24 +39,29 @@
.dropdown-menu {
background: #2a2d35 !important;
- min-width: 275px;
- max-height: 600px;
- overflow-y: scroll;
+ min-width: 300px;
- .active > a {
- border-left: 6px solid #f6a821;
- background: #494b54;
- color: #fff !important;
+ .table {
+ margin-bottom: 0;
}
- a {
- color: #c0c4c8 !important;
- display: block;
- width: 100%;
+ .table tr th:first-child {
+ padding-left: 20px;
}
- a:hover {
- background: #494b54 !important;
+ .table tr th:last-child {
+ padding-right: 20px;
}
}
+
+ .navbar-nav a {
+ margin: 10px;
+ }
+
+ .navbar-nav > .open > a,
+ .navbar-nav > .open > a:hover {
+ color:#ffffff !important;
+ background-color:rgba(246,168,33,0.1) !important;;
+ border-color:#f6a821;
+ }
}
\ No newline at end of file
diff --git a/src/app/core/index.ts b/src/app/core/index.ts
index 3f9d503..ae5796c 100644
--- a/src/app/core/index.ts
+++ b/src/app/core/index.ts
@@ -49,6 +49,7 @@
import {xosDebugModel} from './debug/debug-model';
import {xosConfirm} from './confirm/confirm';
import {XosConfirm} from './confirm/confirm.service';
+import {xosServiceStatus} from './service-status/service-status';
export const xosCore = 'xosCore';
@@ -89,5 +90,6 @@
.component('xosDebugSummary', xosDebugSummary)
.component('xosDebugModel', xosDebugModel)
.component('xosConfirm', xosConfirm)
+ .component('serviceStatus', xosServiceStatus)
.filter('pagination', PaginationFilter)
.filter('arrayToList', ArrayToListFilter);
diff --git a/src/app/core/service-status/service-status.html b/src/app/core/service-status/service-status.html
new file mode 100644
index 0000000..665dc72
--- /dev/null
+++ b/src/app/core/service-status/service-status.html
@@ -0,0 +1,34 @@
+<!--
+Copyright 2017-present Open Networking Foundation
+
+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.
+-->
+
+<div class="loader" ng-if="!vm.loaded"></div>
+
+<table class="table table-striped" ng-if="vm.loaded">
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Version</th>
+ <th>State</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr ng-repeat="service in vm.services">
+ <td>{{service.name}}</td>
+ <td><code>{{service.version}}</code></td>
+ <td>{{service.state}}</td>
+ </tr>
+ </tbody>
+</table>
\ No newline at end of file
diff --git a/src/app/core/service-status/service-status.ts b/src/app/core/service-status/service-status.ts
new file mode 100644
index 0000000..05ac971
--- /dev/null
+++ b/src/app/core/service-status/service-status.ts
@@ -0,0 +1,74 @@
+
+/*
+ * Copyright 2017-present Open Networking Foundation
+
+ * 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.
+ */
+
+import {IXosAppConfig} from '../../../index';
+import IHttpPromise = angular.IHttpPromise;
+
+interface IXosServiceStatus {
+ name: string;
+ state: 'load' | 'unload' | 'present';
+ version: string;
+}
+
+interface IXosServiceStatusResponse {
+ model_output: string;
+ model_status: number;
+ services: IXosServiceStatus[];
+}
+
+class XosServiceStatusController {
+
+ static $inject = [
+ '$log',
+ '$http',
+ '$interval',
+ 'AppConfig'
+ ];
+
+ public services: IXosServiceStatus[] = [];
+ public error: boolean;
+ public loaded: boolean = false;
+
+ constructor (
+ private $log: angular.ILogService,
+ private $http: angular.IHttpService,
+ private $interval: ng.IIntervalService,
+ private AppConfig: IXosAppConfig,
+ ) {
+ this.$interval(() => {
+ this.getServiceStatus()
+ .then(res => {
+ this.services = res.data.services;
+ this.loaded = true;
+ })
+ .catch(e => {
+ this.error = true;
+ this.$log.error(`[XosServiceStatus] Cannot read status from the backend`, e);
+ });
+ }, 10 * 1000);
+ }
+
+ private getServiceStatus(): IHttpPromise<IXosServiceStatusResponse> {
+ return this.$http.get(`${this.AppConfig.apiEndpoint}/dynamicload/load_status`);
+ }
+}
+
+export const xosServiceStatus: angular.IComponentOptions = {
+ template: require('./service-status.html'),
+ controllerAs: 'vm',
+ controller: XosServiceStatusController,
+};