From 6aba266b3cf20c8caa41fd246772ebc344051df8 Mon Sep 17 00:00:00 2001 From: shentao Date: Wed, 15 Nov 2017 16:38:31 +0800 Subject: Fix monitor display bugs Change-Id: I14e0e35331049d480beed1fdf721df1bf81dd4ba Issue-Id: USECASEUI-54 Signed-off-by: shentao --- docs/platform/administration.rst | 26 +++++++++++ docs/platform/delivery.rst | 6 +++ docs/platform/installation.rst | 18 ++++++++ .../src/main/webapp/app/uui/fusion/css/UUImain.css | 7 +-- .../webapp/app/uui/fusion/scripts/chartLoad.js | 2 +- .../scripts/controller/alarm-chartController.js | 20 ++++++--- .../scripts/controller/alarm-detailsController.js | 50 ++++++++++++---------- .../fusion/scripts/controller/alarmController.js | 5 +-- .../controller/performance-chartController.js | 20 ++++----- .../controller/performance-detailsController.js | 26 ++++++----- .../fusion/scripts/view-models/alarm-chart.html | 4 +- .../app/uui/fusion/scripts/view-models/alarm.html | 20 +++++---- .../uui/fusion/scripts/view-models/left-menu.html | 2 +- .../scripts/view-models/performance-chart.html | 4 +- .../fusion/scripts/view-models/performance.html | 16 ++++--- usecaseui-monitor/src/main/webapp/index.html | 9 ++-- 16 files changed, 153 insertions(+), 82 deletions(-) diff --git a/docs/platform/administration.rst b/docs/platform/administration.rst index 3b9f75c8..d4a6852c 100644 --- a/docs/platform/administration.rst +++ b/docs/platform/administration.rst @@ -3,3 +3,29 @@ Administration -------------- + +It is not hard to manage Usecase-UI becasue it's been dockerized and split into two dockers. One is for UI and the other for Server. + +Processes / Dockers +^^^^^^^^^^^^^^^^^^^ + +Usecase-UI mainly consists of two dockers: + +* Usecase-UI UI Docker + +* Usecase-UI Server Docker + +Actions +^^^^^^^ + +All actions performed on the Usecase-UI modules are docker-based. + +* Create a Container: ``sudo docker run [OPTIONS] IMAGE [COMMAND] [ARG...]`` + +* Kill a Container: ``sudo docker kill [OPTIONS] CONTAINER [CONTAINER...]`` + +* Stop a Container: ``sudo docker stop [OPTIONS] CONTAINER [CONTAINER...]`` + +* Start a Container: ``sudo docker start [OPTIONS] CONTAINER [CONTAINER...]`` + +* Restart a Container: ``sudo docker restart [OPTIONS] CONTAINER [CONTAINER...]`` diff --git a/docs/platform/delivery.rst b/docs/platform/delivery.rst index 2e359f20..30bf1d42 100644 --- a/docs/platform/delivery.rst +++ b/docs/platform/delivery.rst @@ -4,3 +4,9 @@ Delivery -------- +Describe how functions are packaged into run-time components. For some components a block diagram may be useful. +As mentioned in the architecture chapter, Usecase-UI mainly comprises two modules: the UI module and the Server module. + +* UI Docker: The main GUI for LCM and Monitor functions are performed in this module. The module provides Lifecycle CRUD operation interfaces and system alarm/performance monitor. + +* Server Docker: This module provides APIs for usecase-ui inside. Lifecycle Management and alarm/performance data Management are implemented by this module. diff --git a/docs/platform/installation.rst b/docs/platform/installation.rst index 79266801..42c7c151 100644 --- a/docs/platform/installation.rst +++ b/docs/platform/installation.rst @@ -3,3 +3,21 @@ Installation ------------ + +In case the users want to deploy Usecase-UI, the steps for the installation is as follows. + +Prerequisites +^^^^^^^^^^^^^ + +#. MSB must be installed and started. The user knows the IP address of the MSB API gateway service. + +Steps +^^^^^ + +#. Start UI module of Usecase-UI using the command below: + + ``sudo docker run -i -t -d --name uui_ui -p 8080:8080 -e MSB_ADDR=$OPENO_IP:80 nexus3.onap.org:10001/onap/usecase-ui`` + +#. Start Server module of Usecase-UI using the command below: + + ``sudo docker run -i -t -d --name uui_server -p 8082:8082 -e MSB_ADDR=$OPENO_IP:80 -e MR_ADDR=$MR_IP:3904 nexus3.onap.org:10001/onap/usecase-ui/usecase-ui-server`` diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/css/UUImain.css b/usecaseui-monitor/src/main/webapp/app/uui/fusion/css/UUImain.css index 99623316..0ab15391 100644 --- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/css/UUImain.css +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/css/UUImain.css @@ -41,7 +41,8 @@ h1 { font-size: 24px; } } .logo h1 { - font-size: 24px; + font-size: 22px; + color:black; margin: 10px 15px; } @@ -238,7 +239,7 @@ h1 { font-size: 24px; } position: relative; min-height: 50px; border: 1px solid transparent; - background-color: #0088CC; + background-color: #CCCCCC; } .btn{ border-radius: 10px; @@ -264,7 +265,7 @@ div .ui-grid-header-cell{ margin: 0; padding: 0; display: inline-block; - width: 26%; + padding-right: 2%; padding-top:20px; } diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/chartLoad.js b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/chartLoad.js index c3203aff..b56355af 100644 --- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/chartLoad.js +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/chartLoad.js @@ -14,7 +14,7 @@ limitations under the License. */ Chart = [ - { "type":"bar", "key": "disk", "yAxis": "1", "values": [ + { "type":"bar", "key": "value", "yAxis": "1", "values": [ { "x":'15min' , "y":4}, { "x":'30min' , "y":4}, { "x":'45min' , "y":12}, { "x":'60min' , "y":3.27} ] } ]; diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarm-chartController.js b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarm-chartController.js index 8096d702..5906c42c 100644 --- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarm-chartController.js +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarm-chartController.js @@ -16,6 +16,8 @@ app.controller('alarmchartCtrl', ['$scope', '$http', '$routeParams', '$window', function ($scope, $http, $routeParams, $window) { + $scope.goIsShow = false; + $scope.chartShow = false; $scope.valuess = []; $scope.today = function () { $scope.startTime = new Date(); @@ -29,7 +31,7 @@ app.controller('alarmchartCtrl', ['$scope', '$http', '$routeParams', '$window', "Authorization": "Basic " + btoa("usecase" + ':' + "usecase") } }).then(function successCallback(resp) { - console.info(resp); + //console.info(resp); $scope.sourceIds = resp.data; }, function errorCallback(resp) { @@ -55,13 +57,16 @@ app.controller('alarmchartCtrl', ['$scope', '$http', '$routeParams', '$window', return str.join("&"); } }).then(function successCallback(resp) { - //console.info(resp); + console.info(resp); + $scope.chartShow = true; if (resp.data.length > 0) for (var i = 0; i < resp.data.length; i++) { $scope.valuess[i] = {}; $scope.valuess[i].x = resp.data[i].Time; $scope.valuess[i].y = resp.data[i].Count; } + else + $scope.valuess = []; for (var d = 0; d < 5; d++) { window.setTimeout(function () { redraw("_alarm", $scope.valuess); @@ -72,17 +77,22 @@ app.controller('alarmchartCtrl', ['$scope', '$http', '$routeParams', '$window', }); } - + $scope.sourceIdChanged = function(){ + if ($scope.sourceId != null) + $scope.goIsShow = true; + else + $scope.goIsShow = false; + }; $scope.startTimeChanged = function () { if ($scope.startTime > $scope.endTime) $scope.endTime = ""; - console.info($scope.startTime); + // console.info($scope.startTime); }; $scope.endTimeChanged = function () { if ($scope.endTime < $scope.startTime) $scope.startTime = ""; - console.info($scope.endTime); + // console.info($scope.endTime); }; $scope.open1 = function () { diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarm-detailsController.js b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarm-detailsController.js index 65d1fc3d..f0e0605c 100644 --- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarm-detailsController.js +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarm-detailsController.js @@ -20,30 +20,34 @@ app.controller("alarmDetailsController",function ($scope,$http,$window) { }; $http({ method : "GET", - url : global_url + "/alarm/1/1/null/"+alarmDetailId+"/null/null/null/null" + url : global_url + "/alarm/1/1/"+alarmDetailId+"/null/null/null/null/null" }).then(function successCallback(resp) { - $scope.alarmCondition = resp.data.alarms[0].alarmsHeader.alarmCondition; - $scope.alarmInterfaceA = resp.data.alarms[0].alarmsHeader.alarmInterfaceA; - $scope.eventCategory = resp.data.alarms[0].alarmsHeader.eventCategory; - $scope.eventId = resp.data.alarms[0].alarmsHeader.eventId; - $scope.eventName = resp.data.alarms[0].alarmsHeader.eventName; - $scope.eventServrity = resp.data.alarms[0].alarmsHeader.eventServrity; - $scope.eventSourceType = resp.data.alarms[0].alarmsHeader.eventSourceType; - $scope.eventType = resp.data.alarms[0].alarmsHeader.eventType; - $scope.faultFieldsVersion = resp.data.alarms[0].alarmsHeader.faultFieldsVersion; - $scope.lastEpochMicroSec = resp.data.alarms[0].alarmsHeader.lastEpochMicroSec; - $scope.nfNamingCode = resp.data.alarms[0].alarmsHeader.nfNamingCode; - $scope.nfcNamingCode = resp.data.alarms[0].alarmsHeader.nfcNamingCode; - $scope.priority = resp.data.alarms[0].alarmsHeader.priority; - $scope.reportingEntityId = resp.data.alarms[0].alarmsHeader.reportingEntityId; - $scope.reportingEntityName = resp.data.alarms[0].alarmsHeader.reportingEntityName; - $scope.sequence = resp.data.alarms[0].alarmsHeader.sequence; - $scope.sourceId = resp.data.alarms[0].alarmsHeader.sourceId; - $scope.sourceName = resp.data.alarms[0].alarmsHeader.sourceName; - $scope.specificProblem = resp.data.alarms[0].alarmsHeader.specificProblem; - $scope.startEpochMicrosec = resp.data.alarms[0].alarmsHeader.startEpochMicrosec; - $scope.startTIme = resp.data.alarms[0].alarmsHeader.createTime; - $scope.alarmInformation = resp.data.alarms[0].alarmsInformation; + if (resp.data.alarms.length > 0){ + $scope.alarmCondition = resp.data.alarms[0].alarmsHeader.alarmCondition; + $scope.alarmInterfaceA = resp.data.alarms[0].alarmsHeader.alarmInterfaceA; + $scope.eventCategory = resp.data.alarms[0].alarmsHeader.eventCategory; + $scope.eventId = resp.data.alarms[0].alarmsHeader.eventId; + $scope.eventName = resp.data.alarms[0].alarmsHeader.eventName; + $scope.eventServrity = resp.data.alarms[0].alarmsHeader.eventServrity; + $scope.eventSourceType = resp.data.alarms[0].alarmsHeader.eventSourceType; + $scope.eventType = resp.data.alarms[0].alarmsHeader.eventType; + $scope.faultFieldsVersion = resp.data.alarms[0].alarmsHeader.faultFieldsVersion; + $scope.lastEpochMicroSec = resp.data.alarms[0].alarmsHeader.lastEpochMicroSec; + $scope.nfNamingCode = resp.data.alarms[0].alarmsHeader.nfNamingCode; + $scope.nfcNamingCode = resp.data.alarms[0].alarmsHeader.nfcNamingCode; + $scope.priority = resp.data.alarms[0].alarmsHeader.priority; + $scope.reportingEntityId = resp.data.alarms[0].alarmsHeader.reportingEntityId; + $scope.reportingEntityName = resp.data.alarms[0].alarmsHeader.reportingEntityName; + $scope.sequence = resp.data.alarms[0].alarmsHeader.sequence; + $scope.sourceId = resp.data.alarms[0].alarmsHeader.sourceId; + $scope.sourceName = resp.data.alarms[0].alarmsHeader.sourceName; + $scope.specificProblem = resp.data.alarms[0].alarmsHeader.specificProblem; + $scope.startEpochMicrosec = resp.data.alarms[0].alarmsHeader.startEpochMicrosec; + $scope.startTIme = resp.data.alarms[0].alarmsHeader.createTime; + $scope.alarmInformation = resp.data.alarms[0].alarmsInformation; + }else { + alert("No Data!"); + } },function errorCallback(resq) { }); diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarmController.js b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarmController.js index fccecb66..f5e92b50 100644 --- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarmController.js +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarmController.js @@ -70,14 +70,13 @@ app.controller('alarmGridCtrl', ['$scope', '$log', '$http', '$timeout', '$interv { field: 'alarmsHeader.eventName', displayName: 'eventName', - cellTemplate: '{{row.entity.alarmsHeader.eventName}}', - width : 500, + width : '10%', enableHiding: false, suppressRemoveSort: true, enableCellEdit: false }, {field: "alarmsHeader.eventId", displayName: 'eventId', enableCellEdit: false}, - {field: "alarmsHeader.sourceId", displayName: 'Source Id', enableCellEdit: false}, + {field: "alarmsHeader.sourceId", displayName: 'Source Id', enableCellEdit: false,cellTemplate: '{{row.entity.alarmsHeader.sourceId}}'}, {field: "alarmsHeader.sourceName", displayName: 'Source Name', enableCellEdit: false}, {field: "alarmsHeader.reportingEntityId", displayName: 'Reporting Entity Id', enableCellEdit: false}, {field: "alarmsHeader.reportingEntityName", displayName: 'Reporting Entity Name', enableCellEdit: false}, diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performance-chartController.js b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performance-chartController.js index b96abb95..39845e87 100644 --- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performance-chartController.js +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performance-chartController.js @@ -16,8 +16,7 @@ app.controller('pertabCtrl', ['$scope', '$http', '$routeParams', '$window' , function ($scope, $http, $routeParams, $window) { - $scope.sourceIds = ["112","119","101"]; - $scope.namePs = []; + $scope.chartShow = false; $scope.valuess = []; $scope.namesPIsShow = false; $scope.namesCIsShow = false; @@ -30,8 +29,7 @@ app.controller('pertabCtrl', ['$scope', '$http', '$routeParams', '$window' , url : global_url+"/performance/resourceIds", headers: { 'Access-Control-Allow-Origin': "*", - "Content-Type": "application/json", - "Authorization": "Basic " + btoa("usecase" + ':' + "usecase") + "Content-Type": "application/json" } }).then(function successCallback(resp) { $scope.sourceIds = resp.data; @@ -69,6 +67,7 @@ app.controller('pertabCtrl', ['$scope', '$http', '$routeParams', '$window' , }).then(function successCallback(resp) { $scope.namePs = resp.data; + $scope.nameP = null; },function errorCallback(resq) { }); @@ -96,14 +95,8 @@ app.controller('pertabCtrl', ['$scope', '$http', '$routeParams', '$window' , return str.join("&"); } }).then(function successCallback(resp) { - if (resp.data.length <= 0){ - $scope.namesCIsShow = false; - $scope.goIsShow = true; - }else{ - $scope.namesCIsShow = true; - $scope.goIsShow = false; - $scope.nameCs = resp.data; - } + $scope.goIsShow = true; + $scope.chartShow = true; },function errorCallback(resq) { }); @@ -135,6 +128,7 @@ app.controller('pertabCtrl', ['$scope', '$http', '$routeParams', '$window' , } }).then(function successCallback(resp) { console.info(resp.data); + chartShow = true; if (resp.data.length > 0) for (var i = 0 ; i 0){ + $scope.eventName = resp.data.performances[0].performanceHeader.eventName; + $scope.eventId = resp.data.performances[0].performanceHeader.eventId; + $scope.sourceId = resp.data.performances[0].performanceHeader.sourceId; + $scope.sourceName = resp.data.performances[0].performanceHeader.sourceName; + $scope.reportingEntityId = resp.data.performances[0].performanceHeader.reportingEntityId; + $scope.reportingEntityName = resp.data.performances[0].performanceHeader.reportingEntityName; + $scope.priority = resp.data.performances[0].performanceHeader.priority; + $scope.createTime = resp.data.performances[0].performanceHeader.createTime; + $scope.nfcNamingCode = resp.data.performances[0].performanceHeader.nfcNamingCode; + $scope.nfNamingCode = resp.data.performances[0].performanceHeader.nfNamingCode; + $scope.performanceInformation = resp.data.performances[0].performanceInformation; + }else { + alert("No Data"); + } },function errorCallback(resq) { }); diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm-chart.html b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm-chart.html index 03579f60..c04f1cff 100644 --- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm-chart.html +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm-chart.html @@ -77,14 +77,14 @@ -
+

-
+
Chart
diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm.html b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm.html index fdae95b9..0d83682e 100644 --- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm.html +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm.html @@ -14,7 +14,7 @@ limitations under the License. -->
-

VNF Alarm

+

VNF Alarm

@@ -40,14 +40,16 @@
    -
  • Start Time - +

  • +

    Start Time
    +
    -
    • -
  • - End Time +

    • +

  • +

    End Time
    +
    -
    • +

@@ -60,7 +62,7 @@
-

Another Table of Existing Users

+

Query Result

@@ -69,7 +71,7 @@
-
diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/left-menu.html b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/left-menu.html index cba16b59..728b3280 100644 --- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/left-menu.html +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/left-menu.html @@ -17,7 +17,7 @@
- +

-
+
Chart
diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/performance.html b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/performance.html index f2fc7320..83f4385e 100644 --- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/performance.html +++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/performance.html @@ -15,7 +15,7 @@ -->
-

Performance

+

Performance

  • Source Id
    • @@ -24,10 +24,14 @@
    -
  • Start Time -
    • -
  • End Time -
    • +

  • +

    StartTime
    +
    +

    • +

  • +

    End Time
    +
    +

@@ -42,7 +46,7 @@
-

Another Table of Existing Users

+

Query Result

diff --git a/usecaseui-monitor/src/main/webapp/index.html b/usecaseui-monitor/src/main/webapp/index.html index 58f73005..6c99a161 100644 --- a/usecaseui-monitor/src/main/webapp/index.html +++ b/usecaseui-monitor/src/main/webapp/index.html @@ -49,12 +49,13 @@ + + + + - - - - + -- cgit 1.2.3-korg