ecomp-portal-FE/client/kpi-dashboard/views/DCAE/DCAE_KPI.html

   1 <!--
   2   ================================================================================
   3   eCOMP Portal
   4   ================================================================================
   5   Copyright (C) 2017 AT&T Intellectual Property
   6   ================================================================================
   7   Licensed under the Apache License, Version 2.0 (the "License");
   8   you may not use this file except in compliance with the License.
   9   You may obtain a copy of the License at
  10
  11        http://www.apache.org/licenses/LICENSE-2.0
  12
  13   Unless required by applicable law or agreed to in writing, software
  14   distributed under the License is distributed on an "AS IS" BASIS,
  15   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16   See the License for the specific language governing permissions and
  17   limitations under the License.
  18   ================================================================================
  19   -->
  20 <div class="kpi-page-main">
  21 <!--<button style="float: left; margin-left: 200px; width: 80%" ng-click="gotoKPIState('root.kpidash_ECOMP')">Hello</button>    -->
  22 <div ng-include="'kpi-dashboard/views/top-level-tabs.html'"></div>
  23 <div ng-include="'kpi-dashboard/views/sec-level-tabs.html'"></div>
  24
  25         <div class="DCAE_KPI_class">
  26                 <div style="float: left; margin-left: 200px; width: 80%">
  27                         <h4>
  28                                 <b><font color="6633FF">Open DCAE-2016 Metrics &
  29                                                 Measurements</font></b>
  30                         </h4>
  31                         <div>
  32                                 <div id="dcae_kpi_table_user_stories">
  33                                         <div class="pull-left" style="margin-right: 10px;">
  34                                                 <h3>
  35                                                         <b><font color="purple">User Stories</font></b>
  36                                                 </h3>
  37                                         </div>
  38         <!--                            <div class="pull-left"
  39                                                 ng-click="updateUserStory(releases,userStories,progressReadinessList,progressReadinessListIndexMap)"
  40                                                 style="vertical-align: bottom; font-size: 30px;">
  41                                                 <a href="javascript:void(0)" class="ion-edit"></a>
  42                                         </div> -->
  43                                 </div>
  44                                 <!--                    <table att-table table-data="tableData" view-per-page="viewPerPage"
  45                                         current-page="currentPage" search-category="searchCategory"
  46                                         search-string="searchString" total-page="totalPage"> -->
  47                                 <table>
  48                                         <thead type="header">
  49                                                 <tr class="info">
  50                                                         <th>Release</th>
  51                                                         <th>User Stories Delivered / In-Progress</th>
  52                                                         <th>IST Progress / Readiness</th>
  53                                                         <th>ETE Progress / Readiness</th>
  54                                                         <th><div style="float: left; vertical-align: bottom;">Key
  55                                                                         Highlights in Release</div></th>
  56                                                 </tr>
  57                                         </thead>
  58                                         <tbody att-table-row type="body">
  59                                                 <tr ng-repeat="userStory in userStories | orderBy:'releaseKey'">
  60                                                         <td><b><font color="purple">{{userStory.releaseKey}}</font></b></td>
  61                                                         <td>{{userStory.delivered}}/{{userStory.inProgress}}
  62                                                                 ({{(userStory.delivered/userStory.inProgress*100)|number:0}}%)</td>
  63                                                         <td><font
  64                                                                 color={{progressReadinessColorMap[userStory.istprogressReadiness]}}>{{progressReadinessMap[userStory.istprogressReadiness]}}</font></td>
  65                                                         <td><font
  66                                                                 color={{progressReadinessColorMap[userStory.e2EProgressReadiness]}}>{{progressReadinessMap[userStory.e2EProgressReadiness]}}</font></td>
  67                                                         <td>{{userStory.keyHighlights}}</td>
  68                                                 </tr>
  69                                         </tbody>
  70                                 </table>
  71                         </div>
  72
  73                         <div id="dcae_kpi_table_lines_of_code">
  74                                 <h3>
  75                                         <b><font color="green">Lines of Code</font></b>
  76                                 </h3>
  77                                 <!-- <table att-table table-data="tableData" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">  -->
  78                                 <table>
  79                                         <thead att-table-row type="header">
  80                                                 <tr class="info">
  81                                                         <th>Total LOC</th>
  82                                                         <th ng-repeat="singleloc in sortedLocArray">
  83                                                                 {{singleloc.category}}</th>
  84                                                         <!--                             <th>Delete</th> -->
  85                                                 </tr>
  86                                         </thead>
  87                                         <tbody att-table-row type="body">
  88                                                 <tr>
  89                                                         <td><b><font color="green">{{totalLOC}}</font></b></td>
  90                                                         <td ng-repeat="singleloc in sortedLocArray"><b><font
  91                                                                         color="green">{{singleloc.LOC}}</font></b></td>
  92                                                         <!--                        <td><div ng-click="" style="font-size:20px;"><a href="javascript:void(0)" class="icon-trash"></a></div></td> -->
  93                                                 </tr>
  94                                         </tbody>
  95                                 </table>
  96                         </div>
  97
  98                         <div id="dcae_kpi_table_api">
  99                                 <div>
 100                                         <div class="pull-left" style="margin-right: 10px;">
 101                                                 <h3>
 102                                                         <b><font color="66CCFF">API</font></b>
 103                                                 </h3>
 104                                         </div>
 105         <!--                            <div class="pull-left"
 106                                                 ng-click="updateUserApi(userApiTypes,userApis)"
 107                                                 style="vertical-align: bottom; font-size: 30px;">
 108                                                 <a href="javascript:void(0)" class="ion-edit"></a>
 109                                         </div> -->
 110                                 </div>
 111                                 <!--                     <h3><b><font color="66CCFF">API</font></b></h3>
 112                             <div ng-click="updateUserApi(userApiTypes,userApis)" style="float:right;font-size:20px;"><a href="javascript:void(0)" class="icon-edit"></a></div> -->
 113                                 <!-- <table att-table table-data="tableData" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">  -->
 114                                 <table>
 115                                         <thead att-table-row type="header">
 116                                                 <tr class="info">
 117                                                         <th ng-repeat="userApi in userApis">{{userApi.apiType}}</th>
 118                                                 </tr>
 119                                         </thead>
 120                                         <tbody att-table-row type="body">
 121                                                 <tr>
 122                                                         <td ng-repeat="userApi in userApis"><b><font
 123                                                                         color="66CCFF">{{userApi.totalApi}}</font></b></td>
 124                                                 </tr>
 125                                                 <tr>
 126                                                         <td ng-repeat="userApi in userApis"><font color="black">{{userApi.comment}}</font></td>
 127                                                 </tr>
 128                                         </tbody>
 129                                 </table>
 130                         </div>
 131
 132                         <div id="dcae_kpi_services_supported">
 133                                 <h3>
 134                                         <b><font color="orange">Services Supported</font></b>
 135                                 </h3>
 136                                 <!-- <table att-table table-data="tableData" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">  -->
 137                                 <table>
 138                                         <thead att-table-row type="header">
 139                                                 <tr class="info">
 140                                                         <!--                             <th>Mobility (in 1607)</th>
 141                                     <th>To be Migrated</th> -->
 142                                                         <th ng-repeat="kpiService in kpiServiceSupported">{{kpiService.serviceType}}</th>
 143                                                         <!--                                 <th ng-repeat = "userApi in userApis">{{userApi.apiType}} </th> -->
 144                                                 </tr>
 145                                         </thead>
 146                                         <tbody att-table-row type="body">
 147                                                 <tr>
 148                                                         <!--                                 <td ng-repeat = "userApi in userApis"><b><font color="66CCFF">{{userApi.totalApi}}</font></b></td> -->
 149                                                         <td ng-repeat="kpiService in kpiServiceSupported">{{kpiService.totalCount}}</td>
 150                                                 </tr>
 151                                         </tbody>
 152                                 </table>
 153                         </div>
 154
 155
 156                         <div id="dcae_kpi_dmaap_traffic_stats">
 157                                 <h3>
 158                                         <b><font color="purple">DMaaP Traffic Stats</font></b>
 159                                 </h3>
 160                                 <h6>
 161                                         <font color="purple">DataRouter</font></b>
 162                                 </h6>
 163                                 <!-- <table att-table table-data="tableData" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">  -->
 164                                 <table>
 165                                         <thead att-table-row type="header">
 166                                                 <tr class="info">
 167                                                         <th ng-repeat="trafficStat in kpiTrafficStats">{{trafficStat.title}}</th>
 168
 169                                                         <!--                                 <th ng-repeat = "userApi in userApis">{{userApi.apiType}} </th> -->
 170                                                 </tr>
 171                                         </thead>
 172                                         <tbody att-table-row type="body">
 173                                                 <tr>
 174                                                         <!--                                 <td ng-repeat = "userApi in userApis"><b><font color="66CCFF">{{userApi.totalApi}}</font></b></td> -->
 175                                                         <td ng-repeat="trafficStat in kpiTrafficStats">{{trafficStat.count}}</td>
 176                                                 </tr>
 177                                         </tbody>
 178                                 </table>
 179                         </div>
 180
 181                         <div id="dcae_kpi_dmaap_feed_stats">
 182                                 <h3>
 183                                         <b><font color="green">DMaaP Feed Stats</font></b>
 184                                 </h3>
 185                                 <!-- <table att-table table-data="tableData" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">  -->
 186                                 <table>
 187                                         <thead att-table-row type="header">
 188                                                 <tr class="info">
 189                                                         <th ng-repeat="FeedStat in kpiFeedStats">{{FeedStat.title}}</th>
 190
 191                                                         <!--                                 <th ng-repeat = "userApi in userApis">{{userApi.apiType}} </th> -->
 192                                                 </tr>
 193                                         </thead>
 194                                         <tbody att-table-row type="body">
 195                                                 <tr>
 196                                                         <!--                                 <td ng-repeat = "userApi in userApis"><b><font color="66CCFF">{{userApi.totalApi}}</font></b></td> -->
 197                                                         <td ng-repeat="FeedStat in kpiFeedStats">{{FeedStat.count}}</td>
 198                                                 </tr>
 199                                         </tbody>
 200                                 </table>
 201                         </div>
 202                 </div>
 203         </div>
 204 </div>