Merge pull request #6 from mvougiou/dev

Dev

README.md

@@ -0,0 +1,23 @@
+# DAQ View React
+
+## Introduction
+
+An implementation of client-side daqview monitoring application for the CMS DAQ FED Builder and Filter-Based Filter Farm infrastructure.
+
+Data are provided by the DAQ Aggregator snapshots in form of JSON files and React.js is used for processing and rendering monitoring information on the client, without any need for server-side logic.
+
+
+## Todo
+- [x] add and update styles {handle issue with frl enabled yet srcId is 0/check what happens with frlMasked when L0 flashlist is unavailable => takes DAQAggregator debugging}
+- [x] handle special cases at %W, %B TTCP columns, as done in the P,A,F columns => possibly requires DAQAggregator changes
+- [x] more resolution to the value of #frags in RU col at FEDBuilder summary
+- [ ] move FED errors from RU warn column into the FED space
+- [ ] add clever polling in snapshot provider => requires support from the API
+- [x] add additional information (beam mode etc.)
+- [ ] when paused, page-wide colour change should occur to attract shifter's attention
+- [ ] add page-wide styles and/or notifications to draw the shifter's attention to a problem
+- [x] add navigation option by time
+- [ ] add other navigation options (display snapshot by run, session, time, next/previous snapshot) => requires server-side API
+- [ ] add expert option to display additional data from the snapshot
+
+- [x] switch back to production React before deploying

dist/css/components/fed-builder/fb-table.css

@@ -52,7 +52,7 @@
 }
 
 .fb-table-header {
-    background-color: #DDDDAA;
+    background-color: #C8C5C5;
 }
 
 .fb-table-foot {
@@ -133,22 +133,34 @@
 
 }
 
-.fb-table-fb-row:nth-of-type(even) {
+.fb-table-fb-row-running:nth-of-type(even) {
     background-color: #DDDDAA;
 }
 
-.fb-table-fb-row:nth-of-type(odd) {
+.fb-table-fb-row-running:nth-of-type(odd) {
+    background-color:  #F5F2F2 ;
+}
+
+.fb-table-fb-row-paused:nth-of-type(even) {
+    background-color: #FFFFFF;
+}
 
+.fb-table-fb-row-paused:nth-of-type(odd) {
+    background-color:  #F5F2F2 ;
 }
 
 .fb-table-subfb-row {
 
 }
 
-.fb-table-fb-summary-row {
+.fb-table-fb-summary-row-running {
     background-color: #DDDDAA;
 }
 
+.fb-table-fb-summary-row-paused {
+    background-color: #FFFFFF;
+}
+
 .fb-table-subfb-tts-state,
 .fb-table-subfb-tts-state a,
 .fb-table-subfb-tts-state a:hover,

dist/css/components/filter-farm/fff-table.css

@@ -45,25 +45,37 @@
 }
 
 .fff-table-header {
-    background-color: #DDDDAA;
+    background-color: #C8C5C5;
 }
 
 .fff-table-bu-row {
 
 }
 
-.fff-table-bu-row:nth-of-type(even) {
+.fff-table-bu-row-running:nth-of-type(even) {
     background-color: #DDDDAA;
 }
 
-.fff-table-bu-row:nth-of-type(odd) {
+.fff-table-bu-row-running:nth-of-type(odd) {
+    background-color: #F5F2F2;
+}
+
+.fff-table-bu-row-paused:nth-of-type(even) {
+    background-color: #FFFFFF;
+}
 
+.fff-table-bu-row-paused:nth-of-type(odd) {
+    background-color: #F5F2F2;
 }
 
-.fff-table-bu-summary-row {
+.fff-table-bu-summary-row-running {
     background-color: #DDDDAA;
 }
 
+.fff-table-bu-summary-row-paused {
+    background-color: #FFFFFF;
+}
+
 .fff-table-rate {
     font-weight: bold;
 }
@@ -120,6 +132,13 @@
     color: #FF0000;
 }
 
+.fff-table-bwout {
+}
+
+.fff-table-bwout-over {
+    color: #FF0000;
+}
+
 .fff-table-sort-image {
     width: 8px;
     height: 8px;

dist/css/components/metadata/about-table.css

@@ -0,0 +1,28 @@
+.about-table {
+    width: 30%;
+    border-width: 0;
+    border-collapse: collapse;
+
+}
+
+.about-table-head {
+    background-color: #DDDDAA;
+}
+
+.about-table-body {
+
+}
+
+.about-table-header-row {
+
+}
+
+.about-table-content-row td{
+    font-size: x-small;
+    font-style: italic;
+}
+
+.about-table,
+.about-table-header-row th {
+
+}

dist/css/components/metadata/loader.css

@@ -0,0 +1,14 @@
+.loader {
+    border: 16px solid #f3f3f3; /* Light grey */
+    border-top: 16px solid #3498db; /* Blue */
+    border-radius: 50%;
+    width: 120px;
+    height: 120px;
+    animation: spin 2s linear infinite;
+    margin: auto;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}

dist/css/components/metadata/metadata-table.css

@@ -5,24 +5,25 @@
 }
 
 .metadata-table-head {
-    background-color: #DDDDAA;
+    background-color: #C8C5C5;
 }
 
 .metadata-table-body {
 
 }
 
-.metadata-table-header-row {
+.metadata-table-header-row th{
     text-align: left;
-    background-color: #DDDDAA;
+    background-color: #C8C5C5;
+    border: 1px solid rgba(0, 0, 0, 0.2);
 }
 
-.metadata-table-content-row {
-
+.metadata-table-content-row td{
+    font-weight: bold;
 }
 
 .metadata-table,
-.metadata-table-body td,
+.metadata-table-content-row td,
 .metadata-table-header-row th {
-    border: 1px solid rgba(0, 0, 0, 0.2);
+
 }

dist/css/daqview.css

@@ -22,6 +22,12 @@ html, body {
     text-align: center;
 }
 
+#daqview-time-navigation {
+    font-weight: lighter;
+    font-size: small;
+    font-style: italic;
+}
+
 .daqview-control-previous,
 .daqview-control-pause-resume ,
 .daqview-control-next {