368 pagination and filtering of rooms, on status page and on rest api

client/app/assets/font/config.json

@@ -331,6 +331,12 @@
       "css": "upload-cloud",
       "code": 61678,
       "src": "fontawesome"
+    },
+    {
+      "uid": "555ef8c86832e686fef85f7af2eb7cde",
+      "css": "left-big",
+      "code": 59422,
+      "src": "fontawesome"
     }
   ]
 }

client/app/assets/font/poinz.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: 'poinz';
-  src: url('../font/poinz.eot?99005502');
-  src: url('../font/poinz.eot?99005502#iefix') format('embedded-opentype'),
-       url('../font/poinz.woff2?99005502') format('woff2'),
-       url('../font/poinz.woff?99005502') format('woff'),
-       url('../font/poinz.ttf?99005502') format('truetype'),
-       url('../font/poinz.svg?99005502#poinz') format('svg');
+  src: url('../font/poinz.eot?88232377');
+  src: url('../font/poinz.eot?88232377#iefix') format('embedded-opentype'),
+       url('../font/poinz.woff2?88232377') format('woff2'),
+       url('../font/poinz.woff?88232377') format('woff'),
+       url('../font/poinz.ttf?88232377') format('truetype'),
+       url('../font/poinz.svg?88232377#poinz') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -15,23 +15,43 @@
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   @font-face {
     font-family: 'poinz';
-    src: url('../font/poinz.svg?99005502#poinz') format('svg');
+    src: url('../font/poinz.svg?88232377#poinz') format('svg');
   }
 }
 */
+[class^="icon-"]:before, [class*=" icon-"]:before {
+  font-family: "poinz";
+  font-style: normal;
+  font-weight: normal;
+  speak: never;
 
-
-[class^="icon-"], [class*=" icon-"] {
   display: inline-block;
-  font: normal normal normal 14px/1 poinz;
-  font-size: inherit;
-  text-rendering: auto;
-  -webkit-font-smoothing: antialiased;
-}
+  text-decoration: inherit;
+  width: 1em;
+  margin-right: .2em;
+  text-align: center;
+  /* opacity: .8; */
 
+  /* For safety - reset parent styles, that can break glyph codes*/
+  font-variant: normal;
+  text-transform: none;
 
-[class^="icon-"]:before, [class*=" icon-"]:before {
+  /* fix buttons height, for twitter bootstrap */
+  line-height: 1em;
+
+  /* Animation center compensation - margins should be symmetric */
+  /* remove if not needed */
+  margin-left: .2em;
+
+  /* you can be more comfortable with increased icons size */
+  /* font-size: 120%; */
+
+  /* Font smoothing. That was taken from TWBS */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 
+  /* Uncomment for 3D effect */
+  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
 }
 
 .icon-minus-circled:before { content: '\e800'; } /* '' */
@@ -64,6 +84,7 @@
 .icon-cancel-circled:before { content: '\e81b'; } /* '' */
 .icon-markdown:before { content: '\e81c'; } /* '' */
 .icon-list-alt:before { content: '\e81d'; } /* '' */
+.icon-left-big:before { content: '\e81e'; } /* '' */
 .icon-check-empty:before { content: '\f096'; } /* '' */
 .icon-list-bullet:before { content: '\f0ca'; } /* '' */
 .icon-table:before { content: '\f0ce'; } /* '' */

client/app/components/AppStatus/AppStatus.js

@@ -13,7 +13,14 @@ import {
   StyledTopLeft,
   StyledTopRight
 } from '../TopBar/_styled';
-import {StyledAppStatus, StyledAppStatusMain, StyledRoomsList} from './_styled';
+import {
+  StyledAppStatus,
+  StyledAppStatusMain,
+  StyledRoomsList,
+  StyledRoomsListPagination
+} from './_styled';
+
+const ROOMS_PAGE_SIZE = 50;
 
 /**
  * Our "operations" view. Displays application status (which is fetched from the backend via REST).
@@ -22,11 +29,13 @@ import {StyledAppStatus, StyledAppStatusMain, StyledRoomsList} from './_styled';
  */
 const AppStatus = () => {
   const [appStatus, setAppStatus] = useState();
+  const [roomsPage, setRoomsPage] = useState(1);
+  const [onlyActiveRooms, setOnlyActiveRooms] = useState(false);
 
   const {format} = useContext(L10nContext);
 
   useEffect(() => {
-    loadAndSet();
+    loadAndSet(roomsPage, onlyActiveRooms);
   }, [format]);
 
   if (!appStatus) {
@@ -51,7 +60,7 @@ const AppStatus = () => {
             <StyledQuickMenuButton
               data-testid="reloadDataButton"
               className="clickable pure-button pure-button-primary"
-              onClick={loadAndSet}
+              onClick={() => loadAndSet(roomsPage, onlyActiveRooms)}
             >
               <i className="icon-arrows-cw"></i>
             </StyledQuickMenuButton>
@@ -69,11 +78,44 @@ const AppStatus = () => {
           Version: {appConfig.version} {format.formatDateTime(appConfig.buildTime)}
         </p>
         <p>Uptime: {appStatus.uptime}</p>
-        <p>Total rooms: {appStatus.roomCount}</p>
         <p>Running on: {appStatus.storeInfo}</p>
 
         <h3>Rooms</h3>
 
+        <StyledRoomsListPagination>
+          <button
+            type="button"
+            className="pure-button pure-button-primary"
+            onClick={onPrevClick}
+            disabled={roomsPage <= 1}
+          >
+            <i className="icon-left-big button-icon-left"></i>
+            PREV
+          </button>
+
+          <div>
+            Page {roomsPage} / {appStatus.totalPages}
+          </div>
+
+          <button
+            type="button"
+            className="pure-button pure-button-primary"
+            onClick={onFwdClick}
+            disabled={roomsPage >= appStatus.totalPages}
+          >
+            FWD <i className="icon-right-big button-icon-right"></i>
+          </button>
+
+          <span onClick={onActiveOnlyToggled} className="clickable">
+            <i className={onlyActiveRooms ? 'icon-check' : 'icon-check-empty'}></i> Show only active
+            rooms
+          </span>
+        </StyledRoomsListPagination>
+
+        <div>
+          <span>{appStatus.totalRoomCount} rooms</span>
+        </div>
+
         <StyledRoomsList>
           <TableHeaders />
           {appStatus.rooms.map((room, index) => (
@@ -84,17 +126,42 @@ const AppStatus = () => {
     </StyledAppStatus>
   );
 
-  function loadAndSet() {
+  function loadAndSet(page, onlyActive) {
     if (!format) {
       return; //  L10 not quite ready...
     }
 
-    getAppStatus().then((data) => {
+    getAppStatus(ROOMS_PAGE_SIZE, (page - 1) * ROOMS_PAGE_SIZE, onlyActive).then((data) => {
       data.uptime = format.secondsToDaysHoursMinutes(data.uptime);
       data.rooms.sort(roomComparator);
+      data.totalPages = Math.ceil(data.totalRoomCount / ROOMS_PAGE_SIZE);
+      data.totalPages = data.totalPages < 1 ? 1 : data.totalPages;
       setAppStatus(data);
     });
   }
+
+  function onActiveOnlyToggled() {
+    const switchedFlag = !onlyActiveRooms;
+    setOnlyActiveRooms(switchedFlag);
+    setRoomsPage(1);
+    loadAndSet(1, switchedFlag);
+  }
+
+  function onPrevClick() {
+    if (roomsPage > 1) {
+      const newPage = roomsPage - 1;
+      setRoomsPage(newPage);
+      loadAndSet(newPage, onlyActiveRooms);
+    }
+  }
+
+  function onFwdClick() {
+    if (roomsPage < appStatus.totalPages) {
+      const newPage = roomsPage + 1;
+      setRoomsPage(newPage);
+      loadAndSet(newPage, onlyActiveRooms);
+    }
+  }
 };
 
 AppStatus.propTypes = {

client/app/components/AppStatus/_styled.js

@@ -11,19 +11,37 @@ export const StyledAppStatusMain = styled.div`
 
 export const StyledRoomsList = styled.ul`
   display: table;
-  margin: 0;
+  margin: 4px 0;
   padding: 0;
 
   .headers {
     font-weight: 700;
+
+    > div {
+      border-bottom: 1px solid #ccc;
+    }
   }
 
   li {
     display: table-row;
 
     > div {
       display: table-cell;
-      padding: 0 4px;
+      padding: 2px 4px;
     }
   }
 `;
+
+export const StyledRoomsListPagination = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+
+  > button {
+    font-size: 60%;
+  }
+
+  > div {
+    margin: 0 12px;
+  }
+`;

client/app/services/restApi/appStatusService.js

@@ -4,8 +4,15 @@
  */
 import checkStatusCode from './checkStatusCode';
 
-export function getAppStatus() {
-  return fetch('/api/status')
+/**
+ *
+ * @param {number} roomLimit
+ * @param {number} roomOffset
+ * @param onlyActiveRooms
+ * @return {Promise<any>}
+ */
+export function getAppStatus(roomLimit, roomOffset, onlyActiveRooms) {
+  return fetch(`/api/status?limit=${roomLimit}&offset=${roomOffset}&onlyActive=${onlyActiveRooms}`)
     .then(checkStatusCode)
     .then((response) => response.json());
 }

client/test/integration/eventActionReducersScenarios/events/disconnectAndKickTest.json

@@ -1 +1 @@
-[{"id":"iz0xn1lubjrwe9uwr628w","userId":"j8j1xfx9j0w96f2f95ru5","correlationId":"px12fnyotv4jegg2yriev","name":"roomCreated","roomId":"50o2rgl3jl__62wpkqnjw","restricted":true,"payload":{}},{"id":"a42z015qzqq8p0w3n39mh","userId":"j8j1xfx9j0w96f2f95ru5","correlationId":"px12fnyotv4jegg2yriev","name":"joinedRoom","roomId":"50o2rgl3jl__62wpkqnjw","payload":{"users":[{"disconnected":false,"id":"j8j1xfx9j0w96f2f95ru5","avatar":0}],"stories":[],"cardConfig":[{"label":"?","value":-2,"color":"#bdbfbf"},{"label":"1/2","value":0.5,"color":"#667a66"},{"label":"1","value":1,"color":"#839e7a"},{"label":"2","value":2,"color":"#8cb876"},{"label":"3","value":3,"color":"#96ba5b"},{"label":"5","value":5,"color":"#b6c76b"},{"label":"8","value":8,"color":"#c9c857"},{"label":"13","value":13,"color":"#d9be3b"},{"label":"21","value":21,"color":"#d6cda1"},{"label":"34","value":34,"color":"#9fa6bd"},{"label":"55","value":55,"color":"#6a80ab"},{"label":"BIG","value":-1,"color":"#1d508f"}],"autoReveal":true,"withConfidence":false,"passwordProtected":false}},{"id":"660i9n41gsx0qry_4dww9","userId":"j8j1xfx9j0w96f2f95ru5","correlationId":"px12fnyotv4jegg2yriev","name":"usernameSet","roomId":"50o2rgl3jl__62wpkqnjw","payload":{"username":"Jim"}},{"id":"bhd98vetn-37ud5l10-b4","userId":"j8j1xfx9j0w96f2f95ru5","correlationId":"px12fnyotv4jegg2yriev","name":"avatarSet","roomId":"50o2rgl3jl__62wpkqnjw","payload":{"avatar":0}},{"id":"w9oip_we25t89g_c6l8ep","userId":"j8j1xfx9j0w96f2f95ru5","correlationId":"px12fnyotv4jegg2yriev","name":"storyAdded","roomId":"50o2rgl3jl__62wpkqnjw","payload":{"createdAt":1692944374282,"storyId":"4rtxhvz4jgpulus79y8_b","title":"Welcome to your Poinz room!","description":"This is a sample story that we already created for you.\n\n - On the left, you can edit your stories and add new ones.\n - Below you can estimate this story by clicking on one of the cards.\n - Invite your teammates by sharing the url with them.\n\nPlease note: If a Poinz room is unused for more than two months, it will get deleted automatically!\n\nFor more information, refer to the manual https://github.com/Zuehlke/poinz/blob/master/docu/manual.md","estimations":{}}},{"id":"9us-zlk62zk0_lndslntw","userId":"j8j1xfx9j0w96f2f95ru5","correlationId":"px12fnyotv4jegg2yriev","name":"storySelected","roomId":"50o2rgl3jl__62wpkqnjw","payload":{"storyId":"4rtxhvz4jgpulus79y8_b"}},{"id":"nt02axfu7yybqk5k9di6q","userId":"9266pmjmy5qdf2eog3is8","correlationId":"jh-m2mkyjrm0s2024x0h0","name":"joinedRoom","roomId":"50o2rgl3jl__62wpkqnjw","payload":{"stories":[{"id":"4rtxhvz4jgpulus79y8_b","title":"Welcome to your Poinz room!","estimations":{},"createdAt":1692944374282,"description":"This is a sample story that we already created for you.\n\n - On the left, you can edit your stories and add new ones.\n - Below you can estimate this story by clicking on one of the cards.\n - Invite your teammates by sharing the url with them.\n\nPlease note: If a Poinz room is unused for more than two months, it will get deleted automatically!\n\nFor more information, refer to the manual https://github.com/Zuehlke/poinz/blob/master/docu/manual.md"}],"selectedStory":"4rtxhvz4jgpulus79y8_b","cardConfig":[{"label":"?","value":-2,"color":"#bdbfbf"},{"label":"1/2","value":0.5,"color":"#667a66"},{"label":"1","value":1,"color":"#839e7a"},{"label":"2","value":2,"color":"#8cb876"},{"label":"3","value":3,"color":"#96ba5b"},{"label":"5","value":5,"color":"#b6c76b"},{"label":"8","value":8,"color":"#c9c857"},{"label":"13","value":13,"color":"#d9be3b"},{"label":"21","value":21,"color":"#d6cda1"},{"label":"34","value":34,"color":"#9fa6bd"},{"label":"55","value":55,"color":"#6a80ab"},{"label":"BIG","value":-1,"color":"#1d508f"}],"autoReveal":true,"withConfidence":false,"passwordProtected":false,"users":[{"disconnected":false,"id":"j8j1xfx9j0w96f2f95ru5","avatar":0,"username":"Jim"},{"id":"9266pmjmy5qdf2eog3is8","username":"John","avatar":0,"disconnected":false,"excluded":false}]}},{"id":"kow-dii66boy4cm7e4pv2","userId":"9266pmjmy5qdf2eog3is8","correlationId":"jh-m2mkyjrm0s2024x0h0","name":"usernameSet","roomId":"50o2rgl3jl__62wpkqnjw","payload":{"username":"John"}},{"id":"f01_zdsiui3zfi1qxedcc","userId":"9266pmjmy5qdf2eog3is8","correlationId":"jh-m2mkyjrm0s2024x0h0","name":"avatarSet","roomId":"50o2rgl3jl__62wpkqnjw","payload":{"avatar":0}},{"id":"pqztv6al1yqs-ahsmd2c5","userId":"9266pmjmy5qdf2eog3is8","correlationId":"zd5-n829jik8djqzukzfj","name":"storyEstimateGiven","roomId":"50o2rgl3jl__62wpkqnjw","payload":{"storyId":"4rtxhvz4jgpulus79y8_b","value":8}},{"id":"t391mvsse-m3-w2zpehlg","userId":"9266pmjmy5qdf2eog3is8","correlationId":"nd6_t_twooqwrl3v4mqnn","name":"connectionLost","roomId":"50o2rgl3jl__62wpkqnjw","payload":{}},{"id":"idrjxvwrarr3zz8-d2_9z","userId":"j8j1xfx9j0w96f2f95ru5","correlationId":"4bhjci68ksn9bf6vhz7a8","name":"kicked","roomId":"50o2rgl3jl__62wpkqnjw","payload":{"userId":"9266pmjmy5qdf2eog3is8"}}]
+[{"id":"ko6y5eaehvl66o_prfby2","userId":"wspxac8nz2d8ciu_vbker","correlationId":"41rjiehakhdxnuduw0ok2","name":"roomCreated","roomId":"kaan1p66udc_utjji6kkt","restricted":true,"payload":{}},{"id":"tlez9-zu-1cqf-11o4lcp","userId":"wspxac8nz2d8ciu_vbker","correlationId":"41rjiehakhdxnuduw0ok2","name":"joinedRoom","roomId":"kaan1p66udc_utjji6kkt","payload":{"users":[{"disconnected":false,"id":"wspxac8nz2d8ciu_vbker","avatar":0}],"stories":[],"cardConfig":[{"label":"?","value":-2,"color":"#bdbfbf"},{"label":"1/2","value":0.5,"color":"#667a66"},{"label":"1","value":1,"color":"#839e7a"},{"label":"2","value":2,"color":"#8cb876"},{"label":"3","value":3,"color":"#96ba5b"},{"label":"5","value":5,"color":"#b6c76b"},{"label":"8","value":8,"color":"#c9c857"},{"label":"13","value":13,"color":"#d9be3b"},{"label":"21","value":21,"color":"#d6cda1"},{"label":"34","value":34,"color":"#9fa6bd"},{"label":"55","value":55,"color":"#6a80ab"},{"label":"BIG","value":-1,"color":"#1d508f"}],"autoReveal":true,"withConfidence":false,"passwordProtected":false}},{"id":"129ozckhh3sz8s-ewx9ki","userId":"wspxac8nz2d8ciu_vbker","correlationId":"41rjiehakhdxnuduw0ok2","name":"usernameSet","roomId":"kaan1p66udc_utjji6kkt","payload":{"username":"Jim"}},{"id":"pg08xxzfzl6fr-gkh1u28","userId":"wspxac8nz2d8ciu_vbker","correlationId":"41rjiehakhdxnuduw0ok2","name":"avatarSet","roomId":"kaan1p66udc_utjji6kkt","payload":{"avatar":0}},{"id":"a00cyoxqcmk86y3yer08v","userId":"wspxac8nz2d8ciu_vbker","correlationId":"41rjiehakhdxnuduw0ok2","name":"storyAdded","roomId":"kaan1p66udc_utjji6kkt","payload":{"createdAt":1696148404816,"storyId":"252y7yyk4f3hfnofai_n7","title":"Welcome to your Poinz room!","description":"This is a sample story that we already created for you.\n\n - On the left, you can edit your stories and add new ones.\n - Below you can estimate this story by clicking on one of the cards.\n - Invite your teammates by sharing the url with them.\n\nPlease note: If a Poinz room is unused for more than two months, it will get deleted automatically!\n\nFor more information, refer to the manual https://github.com/Zuehlke/poinz/blob/master/docu/manual.md","estimations":{}}},{"id":"8w1unw64a88uy0_rzq1n5","userId":"wspxac8nz2d8ciu_vbker","correlationId":"41rjiehakhdxnuduw0ok2","name":"storySelected","roomId":"kaan1p66udc_utjji6kkt","payload":{"storyId":"252y7yyk4f3hfnofai_n7"}},{"id":"kg_oelb391tl9htch45ce","userId":"7kk5s8qyar7jl_9nwc8oi","correlationId":"7psf__3g2zy553r5p-jaj","name":"joinedRoom","roomId":"kaan1p66udc_utjji6kkt","payload":{"stories":[{"id":"252y7yyk4f3hfnofai_n7","title":"Welcome to your Poinz room!","estimations":{},"createdAt":1696148404816,"description":"This is a sample story that we already created for you.\n\n - On the left, you can edit your stories and add new ones.\n - Below you can estimate this story by clicking on one of the cards.\n - Invite your teammates by sharing the url with them.\n\nPlease note: If a Poinz room is unused for more than two months, it will get deleted automatically!\n\nFor more information, refer to the manual https://github.com/Zuehlke/poinz/blob/master/docu/manual.md"}],"selectedStory":"252y7yyk4f3hfnofai_n7","cardConfig":[{"label":"?","value":-2,"color":"#bdbfbf"},{"label":"1/2","value":0.5,"color":"#667a66"},{"label":"1","value":1,"color":"#839e7a"},{"label":"2","value":2,"color":"#8cb876"},{"label":"3","value":3,"color":"#96ba5b"},{"label":"5","value":5,"color":"#b6c76b"},{"label":"8","value":8,"color":"#c9c857"},{"label":"13","value":13,"color":"#d9be3b"},{"label":"21","value":21,"color":"#d6cda1"},{"label":"34","value":34,"color":"#9fa6bd"},{"label":"55","value":55,"color":"#6a80ab"},{"label":"BIG","value":-1,"color":"#1d508f"}],"autoReveal":true,"withConfidence":false,"issueTrackingUrl":null,"passwordProtected":false,"users":[{"disconnected":false,"id":"wspxac8nz2d8ciu_vbker","avatar":0,"username":"Jim"},{"id":"7kk5s8qyar7jl_9nwc8oi","username":"John","avatar":0,"disconnected":false,"excluded":false}]}},{"id":"xfggnq9jfdxwnrx1togu4","userId":"7kk5s8qyar7jl_9nwc8oi","correlationId":"7psf__3g2zy553r5p-jaj","name":"usernameSet","roomId":"kaan1p66udc_utjji6kkt","payload":{"username":"John"}},{"id":"mxdfluc2w89o92vns07lq","userId":"7kk5s8qyar7jl_9nwc8oi","correlationId":"7psf__3g2zy553r5p-jaj","name":"avatarSet","roomId":"kaan1p66udc_utjji6kkt","payload":{"avatar":0}},{"id":"4s20ymbl7rjzk2bml-t0m","userId":"7kk5s8qyar7jl_9nwc8oi","correlationId":"rpoh56x0t0oap2ntpbzpm","name":"storyEstimateGiven","roomId":"kaan1p66udc_utjji6kkt","payload":{"storyId":"252y7yyk4f3hfnofai_n7","value":8}},{"id":"j2m4vn8x2oknz93owxqrj","userId":"7kk5s8qyar7jl_9nwc8oi","correlationId":"6ua2m0_ri8amm-0rqhw6u","name":"connectionLost","roomId":"kaan1p66udc_utjji6kkt","payload":{}},{"id":"ilabxrl_vjp04i-9u_oop","userId":"wspxac8nz2d8ciu_vbker","correlationId":"ezy4h6ki4d9c05lp4nsaj","name":"kicked","roomId":"kaan1p66udc_utjji6kkt","payload":{"userId":"7kk5s8qyar7jl_9nwc8oi"}}]