feat(LogSheet): Update UI of log download links (#670)

- Added a new function `truncateUrl` used to truncate the URL in the log
  viewer
- Changed the title of the download log table to "Full logs"
- Changed the messaged of the QuerySwitcher to "Download your logs
  here"
- Changed the style of the log links, making their font size greater and
  their color blue with an underline hover effect

Closes #655

dashboard/src/lib/string.ts

@@ -8,3 +8,27 @@ export const truncateBigText = (
   text && text.length > maxTextLength
     ? text.slice(0, maxTextLength) + '...'
     : valueOrEmpty(text);
+
+export const truncateUrl = (
+  url: string | undefined,
+  domainLength = 50,
+  endPathLength = 20,
+): string => {
+  if (url) {
+    if (url.length <= domainLength + endPathLength) {
+      return url;
+    }
+    const protocolRegex = /^\w+:\/\//;
+    const searchParamsRegex = /\?.*$/;
+    const replacedUrl = url
+      .replace(protocolRegex, '')
+      .replace(searchParamsRegex, '');
+    const splittedUrl = replacedUrl.split('/');
+    const hostname = splittedUrl[0];
+    const pathname = splittedUrl?.pop();
+    const domain = hostname ? hostname.slice(0, domainLength) : '';
+    const lastPath = pathname ? pathname.slice(-endPathLength) : '';
+    return `${domain}...${lastPath}`;
+  }
+  return valueOrEmpty(url);
+};

dashboard/src/locales/messages/index.ts

@@ -125,6 +125,7 @@ export const messages = {
     'global.failedCount': 'Failed: {count}',
     'global.fails': 'Fails',
     'global.filters': 'Filters',
+    'global.fullLogs': 'Full logs',
     'global.github': 'GitHub',
     'global.hardware': 'Hardware',
     'global.hardwares': 'Hardwares',
@@ -175,9 +176,12 @@ export const messages = {
       'Results from {startDate} and {startTime} to {endDate} {endTime}',
     'hardwareDetails.treeBranch': 'Tree / Branch',
     'issue.noIssueFound': 'No issue found.',
+    'logSheet.downloadLog': 'You can download the full log here: {link}',
     'logSheet.fileName': 'File Name',
     'logSheet.fileSize': 'File Size',
-    'logSheet.indexOf': 'Index of {link}',
+    'logSheet.logQueryCustomError':
+      'This log url is not supported in the log viewer yet, but you can still download the log in the link above',
+    'logSheet.noLogFound': 'No logs available',
     'logSheet.title': 'Logs Viewer',
     'routes.buildDetails': 'Build',
     'routes.hardwareMonitor': 'Hardware',

dashboard/src/pages/TreeDetails/Tabs/LogSheet.tsx

@@ -15,7 +15,7 @@ import {
 import { DumbTableHeader, TableHead } from '@/components/Table/BaseTable';
 import { Button } from '@/components/ui/button';
 import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table';
-import { truncateBigText } from '@/lib/string';
+import { truncateUrl } from '@/lib/string';
 import { useLogFiles } from '@/api/treeDetails';
 import QuerySwitcher from '@/components/QuerySwitcher/QuerySwitcher';
 import type { LogFile } from '@/types/tree/TreeDetails';
@@ -179,42 +179,53 @@ export const LogSheet = ({
           <FormattedMessage id="logSheet.title" />
         </SheetTitle>
       </SheetHeader>
-      <BaseCard className="gap-0" title={<FormattedMessage id="global.logs" />}>
-        <div className="px-2 py-3 font-mono text-sm text-[#454545]">
-          <FormattedMessage
-            id="logSheet.indexOf"
-            values={{
-              link: (
-                <a
-                  href={logUrl}
-                  className="flex gap-2 transition-all hover:text-blue"
-                >
-                  <span>{truncateBigText(logUrl)}</span>
-                  <GrDocumentDownload className="text-blue" />
-                </a>
-              ),
-            }}
-          />
+      <BaseCard
+        className="gap-0"
+        title={<FormattedMessage id="global.fullLogs" />}
+      >
+        <div className="px-2 py-3 font-mono text-[#454545]">
+          {navigationLogsActions?.isLoading ? (
+            <FormattedMessage id="global.loading" />
+          ) : (
+            <FormattedMessage
+              id={logUrl ? 'logSheet.downloadLog' : 'logSheet.noLogFound'}
+              values={{
+                link: (
+                  <a
+                    href={logUrl}
+                    className="flex gap-2 text-blue transition-all hover:underline"
+                  >
+                    <span>{truncateUrl(logUrl)}</span>
+                    <GrDocumentDownload className="text-blue" />
+                  </a>
+                ),
+              }}
+            />
+          )}
         </div>
-        <QuerySwitcher
-          data={logFilesData}
-          status={status}
-          skeletonClassname="h-[3rem]"
-          customError={
-            <div className="p-4 text-center">
-              This log url is not supported in the log viewer yet
-            </div>
-          }
-        >
-          <Table containerClassName="rounded-none border-none">
-            {logFilesData?.log_files && !!logUrl && (
-              <MemoizedLogFilesTable
-                logFiles={logFilesData?.log_files}
-                logUrl={logUrl}
-              />
-            )}
-          </Table>
-        </QuerySwitcher>
+        {logUrl ? (
+          <QuerySwitcher
+            data={logFilesData}
+            status={status}
+            skeletonClassname="h-[3rem]"
+            customError={
+              <div className="p-4 text-center">
+                <FormattedMessage id="logSheet.logQueryCustomError" />
+              </div>
+            }
+          >
+            <Table containerClassName="rounded-none border-none">
+              {logFilesData?.log_files && !!logUrl && (
+                <MemoizedLogFilesTable
+                  logFiles={logFilesData?.log_files}
+                  logUrl={logUrl}
+                />
+              )}
+            </Table>
+          </QuerySwitcher>
+        ) : (
+          <div className="p-9"></div>
+        )}
       </BaseCard>
 
       {navigationLogsActions?.isLoading ? (