update err output when failed get logs (stolostron#3260)

* update err output when failed get logs

Signed-off-by: Zhiwei Yin <zyin@redhat.com>

* Update frontend/src/routes/Home/Search/Details/LogsPage.tsx

Co-authored-by: Oliver Fischer <ofischer@redhat.com>
Signed-off-by: Zhiwei Yin <zyin@redhat.com>

* Use Trans component to translate and format error message

Signed-off-by: Kevin Cormier <kcormier@redhat.com>

---------

Signed-off-by: Zhiwei Yin <zyin@redhat.com>
Signed-off-by: Kevin Cormier <kcormier@redhat.com>
Co-authored-by: Oliver Fischer <ofischer@redhat.com>
Co-authored-by: Kevin Cormier <kcormier@redhat.com>

Author: 3 people

frontend/public/locales/en/translation.json

@@ -371,6 +371,7 @@
   "access.users": "Users",
   "access.usersInGroup": "Users in group",
   "access.usersInGroup.view": "View users in group",
+  "acm.logs.error": "Red Hat Advanced Cluster Management version 2.10 and newer requires the <code>cluster-proxy</code> and <code>managed-serviceaccount</code> add-ons to retrieve logs. Make sure that these add-ons are enabled on the hub cluster.",
   "acm.plugin.not.ready": "The <bold>Red Hat Advanced Cluster Management for Kubernetes</bold> operator is installed, but the console plugin is not available. If you just completed the installation procedure within the last few minutes, wait a few moments for a web console update alert to appear. Click the link in the alert to refresh the web console to the latest version.",
   "acm.plugin.not.ready.tips": "If the alert does not appear, confirm that a <code>MultiClusterHub</code> resource has been created and is available, and that the <code>acm</code> console plugin is enabled.",
   "Action": "Action",

frontend/src/routes/Home/Search/Details/LogsPage.tsx

@@ -14,11 +14,10 @@ import {
 } from '@patternfly/react-core'
 import { CompressIcon, DownloadIcon, ExpandIcon, OutlinedWindowRestoreIcon } from '@patternfly/react-icons'
 import { LogViewer } from '@patternfly/react-log-viewer'
-import { Dispatch, MutableRefObject, SetStateAction, useEffect, useMemo, useRef, useState } from 'react'
+import { Dispatch, MutableRefObject, ReactNode, SetStateAction, useEffect, useMemo, useRef, useState } from 'react'
 import screenfull from 'screenfull'
-import { useTranslation } from '../../../../lib/acm-i18next'
-import { DOC_BASE_PATH } from '../../../../lib/doc-util'
-import { fetchRetry, getBackendUrl, ManagedCluster } from '../../../../resources'
+import { Trans, useTranslation } from '../../../../lib/acm-i18next'
+import { fetchRetry, getBackendUrl } from '../../../../resources'
 import { useRecoilValue, useSharedAtoms } from '../../../../shared-recoil'
 import { AcmAlert, AcmLoadingPage } from '../../../../ui-components'
 import { LogViewerSearch } from './LogsViewerSearch'
@@ -297,7 +296,7 @@ export default function LogsPage(props: {
   const { t } = useTranslation()
   const [isLoadingLogs, setIsLoadingLogs] = useState<boolean>(false)
   const [logs, setLogs] = useState<string>('')
-  const [logsError, setLogsError] = useState<string>()
+  const [logsError, setLogsError] = useState<ReactNode>()
   const [container, setContainer] = useState<string>(sessionStorage.getItem(`${name}-${cluster}-container`) || '')
 
   const [showJumpToBottomBtn, setShowJumpToBottomBtn] = useState<boolean>(false)
@@ -372,15 +371,8 @@ export default function LogsPage(props: {
           setIsLoadingLogs(false)
         })
         .catch((err) => {
-          const managedCluster = managedClusters.find(
-            (mc: ManagedCluster) => /* istanbul ignore next */ mc.metadata?.name === cluster
-          )
-          const labels = managedCluster?.metadata?.labels ?? {}
-          const vendor = labels['vendor'] ?? ''
-          if (err.code === 400 && vendor.toLowerCase() !== 'openshift') {
-            setLogsError(
-              `Non-OpenShift Container Platform clusters require LoadBalancer to be enabled to retrieve logs. Follow the steps here to complete LoadBalancer setup: ${DOC_BASE_PATH}/release_notes/red-hat-advanced-cluster-management-for-kubernetes-release-notes#non-ocp-logs`
-            )
+          if (err.code === 400) {
+            setLogsError(<Trans i18nKey="acm.logs.error" components={{ code: <code /> }} />)
           } else {
             setLogsError(err.message)
           }