Merge branch 'count-my-IOCs-with-issues-homepage-ICSHWI-9280' into 'develop'

Count my IOCs with issues homepage ICSHWI-9280

See merge request !165

src/views/home/HomeView.js

 import { Container, Grid, Paper, Button, Box, Typography } from "@material-ui/core";
-import React, { useState} from "react";
+import React, { useState } from "react";
 import { useGlobalAppBar } from "../../components/navigation/GlobalAppBar/GlobalAppBar";
 import { CreateIOC } from "../../components/IOC/CreateIOC";
 import { KeyValueTable } from "../../components/common/KeyValueTable/KeyValueTable";
@@ -44,51 +44,56 @@ export function HomeView() {
 
   const closeModal = () => {
     setIOCFormOpen(false);
-  }  
+  }
 
   return (
     <Container>
       <Paper className={classes.root}>
-          <Grid container spacing={1} justify="flex-end">
-            <Grid item xs={10}>
-              <Box display="flex" flexDirection="row" p={2} m={1}>
+        <Grid container spacing={1} justify="flex-end">
+          <Grid item xs={10}>
+            <Box display="flex" flexDirection="row" p={2} m={1}>
               <Typography variant="h2">
                 My statistics
               </Typography>
-              </Box>
-            </Grid>
-            <Grid item xs={2}>
-              <Box display="flex" flexDirection="row-reverse" p={2} m={1}>
-                <Button variant="contained" color="secondary" onClick={() => { setIOCFormOpen(true) }}>New IOC</Button>
-              </Box>
-            </Grid>
-            {statistics &&
-            <Grid item xs={12}>
-              <KeyValueTable obj={{"Total number of my IOCs": statistics.numberOfActiveIocs}} variant="table" />
-            </Grid>
-            }
+            </Box>
+          </Grid>
+          <Grid item xs={2}>
+            <Box display="flex" flexDirection="row-reverse" p={2} m={1}>
+              <Button variant="contained" color="secondary" onClick={() => { setIOCFormOpen(true) }}>New IOC</Button>
+            </Box>
+          </Grid>
+          {statistics &&
             <Grid item xs={12}>
-              <SimpleAccordion summary="My IOCs with alarms" defaultExpanded>
-                    <IOCAsyncList iocs={iocsWithAlarms} asyncDetails={false} rowType="own" loading={loading}
-                      lazyParams={lazyParams} setLazyParams={setLazyParams} 
-                      columnSort={columnSort} setColumnSort={setColumnSort}
-                      totalCount={iocsWithAlarms?.length}
-                      paginator={false} />
-              </SimpleAccordion>
+              <KeyValueTable
+                obj={{
+                  "Total number of my IOCs": statistics.numberOfActiveIocs,
+                  "Number of my IOCs with issues": iocsWithAlarms.length
+                }}
+                variant="table" />
             </Grid>
+          }
+          <Grid item xs={12}>
+            <SimpleAccordion summary="My IOCs with alarms" defaultExpanded>
+              <IOCAsyncList iocs={iocsWithAlarms} asyncDetails={false} rowType="own" loading={loading}
+                lazyParams={lazyParams} setLazyParams={setLazyParams}
+                columnSort={columnSort} setColumnSort={setColumnSort}
+                totalCount={iocsWithAlarms?.length}
+                paginator={false} />
+            </SimpleAccordion>
           </Grid>
-          {announcements?.announcementsText &&
+        </Grid>
+        {announcements?.announcementsText &&
           <Grid container justify="flex-start" className={classes.announcements}>
             <Grid item xs={12}>
-                <ReactMarkdown>
-                  {announcements.announcementsText}
-                </ReactMarkdown>
+              <ReactMarkdown>
+                {announcements.announcementsText}
+              </ReactMarkdown>
             </Grid>
           </Grid>
-          }
-          <SimpleModal open={iocFormOpen} setOpen={setIOCFormOpen}>
-            <CreateIOC open={iocFormOpen} setOpen={setIOCFormOpen} isUpdateIoc={false} submitCallback={closeModal} hook={useCreateIOC} title="Create new IOC" buttonText="Create"/>
-          </SimpleModal>
+        }
+        <SimpleModal open={iocFormOpen} setOpen={setIOCFormOpen}>
+          <CreateIOC open={iocFormOpen} setOpen={setIOCFormOpen} isUpdateIoc={false} submitCallback={closeModal} hook={useCreateIOC} title="Create new IOC" buttonText="Create" />
+        </SimpleModal>
       </Paper>
     </Container>
   );