Issue/917 inject result for media pressure image broken link

openbas-front/src/admin/components/atomic_testings/atomic_testing/TargetResultsDetail.tsx

@@ -14,6 +14,7 @@ import nodeTypes from './types/nodes';
 import useAutoLayout, { type LayoutOptions } from '../../../../utils/flows/useAutoLayout';
 import { InjectResultDtoContext, InjectResultDtoContextType } from '../InjectResultDtoContext';
 import ItemResult from '../../../../components/ItemResult';
+import InjectIcon from '../../common/injects/InjectIcon';
 
 interface Steptarget {
   label: string;
@@ -49,6 +50,7 @@ interface Props {
 
 const TargetResultsDetailFlow: FunctionComponent<Props> = ({
   injectId,
+  injectType,
   lastExecutionStartDate,
   lastExecutionEndDate,
   target,
@@ -229,11 +231,18 @@ const TargetResultsDetailFlow: FunctionComponent<Props> = ({
                 result.inject_expectation_results.map((collector, index) => (
                   <Grid key={index} item={true} xs={4}>
                     <div style={{ display: 'flex', alignItems: 'center', marginBottom: 10 }}>
-                      <img
-                        src={`/api/images/collectors/id/${collector.sourceId}`}
-                        alt={collector.sourceId}
-                        style={{ width: 20, height: 20, borderRadius: 4 }}
-                      />
+                      {collector.sourceId != null
+                        ? (<img
+                            src={`/api/images/collectors/${collector.sourceId}`}
+                            alt={collector.sourceId}
+                            style={{ width: 20, height: 20, borderRadius: 4 }}
+                           />) : (
+                             <InjectIcon
+                               tooltip={t(injectType)}
+                               type={injectType}
+                               variant="inline"
+                             />)
+                    }
                       <Typography variant="h4" style={{ margin: '2px 0 0 10px' }}>
                         {collector.sourceName}
                       </Typography>

openbas-front/src/public/components/challenges/ChallengesPlayer.js

@@ -260,7 +260,7 @@ const ChallengesPlayer = () => {
             color="primary"
             variant="outlined"
             component={Link}
-            to={`/admin/exercises/${exerciseId}/definition/challenges`}
+            to={`/admin/exercises/${exerciseId}/definition`}
             style={{ position: 'absolute', top: 20, left: 20 }}
           >
             {t('Back to administration')}

openbas-front/src/public/components/channels/ChannelNewspaper.js

@@ -1,13 +1,15 @@
 import React, { useState } from 'react';
 import { makeStyles, useTheme } from '@mui/styles';
 import * as R from 'ramda';
-import { Typography, Grid, Card, CardHeader, CardContent, Avatar, CardMedia, Button, Dialog, DialogTitle, DialogContent, Slide } from '@mui/material';
+import { Typography, Grid, Card, CardHeader, CardContent, Avatar, CardMedia, Button, Dialog, DialogTitle, DialogContent, Slide, Chip, Tooltip } from '@mui/material';
 import { ChatBubbleOutlineOutlined, FavoriteBorderOutlined, ShareOutlined, MoreHorizOutlined } from '@mui/icons-material';
 import { useFormatter } from '../../../components/i18n';
 import Empty from '../../../components/Empty';
 import { useHelper } from '../../../store';
 import ExpandableMarkdown from '../../../components/ExpandableMarkdown';
 import { useQueryParameter } from '../../../utils/Environment';
+// eslint-disable-next-line import/extensions
+import ChannelIcon from '../../../admin/components/components/channels/ChannelIcon.js';
 
 const Transition = React.forwardRef((props, ref) => (
   <Slide direction="up" ref={ref} {...props} />
@@ -22,10 +24,6 @@ const useStyles = makeStyles(() => ({
   card: {
     position: 'relative',
   },
-  logo: {
-    maxHeight: 200,
-    maxWidth: 300,
-  },
   footer: {
     width: '100%',
     position: 'absolute',
@@ -42,6 +40,18 @@ const ChannelNewspaper = ({ channelReader }) => {
   const [userId] = useQueryParameter(['user']);
   const [currentArticle, setCurrentArticle] = useState(null);
   const isDark = theme.palette.mode === 'dark';
+  const channelColor = (type) => {
+    switch (type) {
+      case 'newspaper':
+        return '#3f51b5';
+      case 'microblogging':
+        return '#00bcd4';
+      case 'tv':
+        return '#ff9800';
+      default:
+        return '#ef41e1';
+    }
+  };
   const {
     channel_exercise: exercise,
     channel_scenario: scenario,
@@ -75,10 +85,27 @@ const ChannelNewspaper = ({ channelReader }) => {
         <div
           style={{ margin: '0 auto', textAlign: 'center', marginBottom: 15 }}
         >
-          <img
-            src={`${baseUri}/documents/${logo}/file${queryParams}`}
-            className={classes.logo}
-          />
+          <Tooltip title={channel?.channel_name}>
+            <Chip
+              icon={
+                <ChannelIcon
+                  type={channel?.channel_type}
+                  variant="chip"
+                />
+                }
+              classes={{ root: classes.channel }}
+              style={{
+                color: channelColor(
+                  channel?.channel_type,
+                ),
+                borderColor: channelColor(
+                  channel?.channel_type,
+                ),
+              }}
+              variant="outlined"
+              label={channel.channel_name}
+            />
+          </Tooltip>
         </div>
       )}
       {channel.channel_mode !== 'logo' && (

openbas-front/src/public/components/channels/ChannelPlayer.js

@@ -59,7 +59,7 @@ const ChannelPlayer = () => {
             color="primary"
             variant="outlined"
             component={Link}
-            to={`/admin/exercises/${exerciseId}/definition/channel`}
+            to={`/admin/exercises/${exerciseId}/definition`}
             style={{ position: 'absolute', top: 20, left: 20 }}
           >
             {t('Back to administration')}

openbas-front/src/public/components/lessons/LessonsPlayer.js

@@ -148,7 +148,7 @@ const LessonsPlayer = () => {
             color="primary"
             variant="outlined"
             component={Link}
-            to={`/admin/exercises/${exerciseId}/results/lessons`}
+            to={`/admin/exercises/${exerciseId}/lessons`}
             style={{ position: 'absolute', top: 20, left: 20 }}
           >
             {t('Back to administration')}

openbas-front/src/utils/hooks/useDataLoader.js

@@ -25,7 +25,9 @@ const useDataLoader = (loader = () => {}) => {
       const current = new Date().getTime();
       if (current - lastPingDate > EVENT_PING_MAX_TIME) {
         clearInterval(autoReConnect);
-        sseClient.close();
+        if (sseClient != null) {
+          sseClient.close();
+        }
         sseConnect();
       }
     }, EVENT_TRY_DELAY);
@@ -56,7 +58,9 @@ const useDataLoader = (loader = () => {}) => {
     });
     sseClient.onerror = () => {
       clearInterval(autoReConnect);
-      sseClient.close();
+      if (sseClient != null) {
+        sseClient.close();
+      }
       const timeFromLastPingDate = new Date().getTime() - lastPingDate;
       if (timeFromLastPingDate < ERROR_30S_MAX_TIME) {
         setTimeout(sseConnect, ERROR_500MS_DELAY);// Before 30s time to retry is 500ms