Merge pull request #227 from calyptia/tarruda/fixes-and-optimizations

Multiple fixes and optimizations

Dockerfile

@@ -15,7 +15,7 @@ ENV NEXT_PUBLIC_VIVO_BASE_PATH=${vivo_base_path}
 SHELL ["/bin/ash", "-eo", "pipefail", "-c"]
 RUN \
       apk add --no-cache git openssh && \
-      yarn install --network-timeout 1000000000 && \
+      yarn install --frozen-lockfile --network-timeout 1000000000 && \
       yarn next build && \
       yarn next export && \
       # There's no way to change absolute URL references in css files using next.js

packages/frontend/components/VivoFilterBar/elements/SelectFilter.tsx

@@ -8,6 +8,14 @@ export interface SelectFilterProps {
   defaultRate: number;
 }
 
+const intervals = [
+  { label: '0.1s', value: 100 },
+  { label: '1s', value: 1000 },
+  { label: '5s', value: 5000 },
+  { label: '10s', value: 10000 },
+  { label: '20s', value: 20000 },
+]
+
 const SelectFilter = ({ selectHandler, defaultRate }: SelectFilterProps) => {
   return (
     <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
@@ -20,18 +28,10 @@ const SelectFilter = ({ selectHandler, defaultRate }: SelectFilterProps) => {
         onChange={(e) => selectHandler(Number(e.target.value))}
         sx={RATE_SELECT}
       >
-        <MenuItem key={1000} value={1000}>
-          1s
-        </MenuItem>
-        <MenuItem key={5000} value={5000}>
-          5s
-        </MenuItem>
-        <MenuItem key={10000} value={10000}>
-          10s
-        </MenuItem>
-        <MenuItem key={20000} value={20000}>
-          20s
-        </MenuItem>
+        {intervals.map(i => (
+          <MenuItem key={i.value} value={i.value}>
+            {i.label}
+          </MenuItem>))}
       </TextField>
     </Box>
   );

packages/frontend/components/VivoLogTable/elements/Event.tsx

@@ -0,0 +1,110 @@
+import { CodeBoxCM } from '@calyptia-vivo/components/VivoLogTable/elements';
+import FirstPageIcon from '@mui/icons-material/FirstPage';
+import { Box, Collapse, Stack, Typography } from '@mui/material';
+import { useState, useEffect } from 'react';
+import type { LogEvent, MetricTraceEvent } from '@calyptia-vivo/lib/types';
+
+import { LOG_DETAIL_PANEL, LOG_EVENT_BOX_STYLE, LOG_EVENT_ROW_STYLE } from '@calyptia-vivo/components/VivoLogTable/constants';
+
+const formatTimestamp = (timestamp: number) => {
+  const date = new Date(timestamp);
+  const formatTime = date.toLocaleString('en-US', { second: 'numeric', hour: 'numeric', minute: 'numeric', hour12: true })
+  const formatDate = date.toLocaleString('en-US', { day: '2-digit', month: '2-digit', year: '2-digit' })
+  return `${formatDate} | ${formatTime}`
+}
+
+function beautify(json: string) {
+  return JSON.stringify(JSON.parse(json), null, 2);
+}
+
+interface LogEventProps extends LogEvent {
+  truncate?: number
+}
+
+const LogEventItem = ({
+  record,
+  rawMetadata: meta,
+  rawEvent: event,
+  truncate = 72
+}: LogEventProps) => {
+  const timestamp = Math.floor(record[0][0] / 1e6);
+
+  const [expandedView, setExpandedView] = useState<boolean | undefined>(false);
+  const [expandedData, setExpandedData] = useState(['', ''] as [string, string]);
+
+  useEffect(() => {
+    if (!expandedData[0] && expandedView) {
+      setExpandedData([
+        beautify(meta),
+        beautify(event),
+      ]);
+    }
+  }, [expandedView, event, meta, expandedData]);
+
+  const truncateValue = (value: string) => (value.length > truncate ? `${value.substring(0, truncate)}...` : value);
+  return (
+    <Box sx={LOG_EVENT_BOX_STYLE}>
+      <Stack direction="row" sx={LOG_EVENT_ROW_STYLE}>
+        <Typography className={`cell-0 ${expandedView ? 'expanded' : ''}`}>{formatTimestamp(timestamp || 0)}</Typography>
+        <Typography className={`cell-1 cell ${expandedView ? 'hidden' : ''}`}>{truncateValue(meta)}</Typography>
+        <Typography className={`cell-2 cell ${expandedView ? 'hidden' : ''}`}>{truncateValue(event)}</Typography>
+        <Typography className={'chevron-label'}>{expandedView ? 'Close' : 'Open'}</Typography>
+        <FirstPageIcon
+          className={`chevron ${expandedView ? 'expanded' : ''}`}
+          onClick={() => setExpandedView(!expandedView)}
+        />
+      </Stack>
+      <Collapse in={expandedView}>
+        <Stack direction="column" sx={LOG_DETAIL_PANEL}>
+          <Typography>Metadata</Typography>
+          <CodeBoxCM readOnly={true} value={expandedData[0]} height="152px" language="json" />
+          <Typography>Event</Typography>
+          <CodeBoxCM readOnly={true} value={expandedData[1]} height="266px" language="json" />
+        </Stack>
+      </Collapse>
+    </Box>
+  );
+};
+
+
+interface MetricTraceEventProps extends MetricTraceEvent {
+  truncate?: number
+}
+
+const MetricTraceEventItem = ({
+  rawEvent: event,
+  truncate = 72
+}: MetricTraceEventProps) => {
+
+  const [expandedView, setExpandedView] = useState(false);
+  const [expandedData, setExpandedData] = useState('');
+
+  useEffect(() => {
+    if (!expandedData && expandedView) {
+      setExpandedData(beautify(event));
+    }
+  }, [expandedView, event, expandedData]);
+
+  const truncateValue = (value: string) => (value.length > truncate ? `${value.substring(0, truncate)}...` : value);
+  return (
+    <Box sx={LOG_EVENT_BOX_STYLE}>
+      <Stack direction="row" sx={LOG_EVENT_ROW_STYLE}>
+        <Typography className={`cell-2 cell ${expandedView ? 'hidden' : ''}`}>{truncateValue(event)}</Typography>
+        <Typography className={'chevron-label'}>{expandedView ? 'Close' : 'Open'}</Typography>
+        <FirstPageIcon
+          className={`chevron ${expandedView ? 'expanded' : ''}`}
+          onClick={() => setExpandedView(!expandedView)}
+        />
+      </Stack>
+      <Collapse in={expandedView}>
+        <Stack direction="column" sx={LOG_DETAIL_PANEL}>
+          <Typography>Event</Typography>
+          <CodeBoxCM readOnly={true} value={expandedData} height="266px" language="json" />
+        </Stack>
+
+      </Collapse>
+    </Box>
+  );
+};
+
+export { LogEventItem, MetricTraceEventItem };

packages/frontend/components/VivoLogTable/elements/index.tsx

@@ -1,3 +1,3 @@
 export * from './Header';
-export * from './LogEvent';
+export * from './Event';
 export * from './CodeBoxCM';

packages/frontend/components/VivoLogTable/index.tsx

@@ -1,39 +1,36 @@
-import { Header, LogEvent } from '@calyptia-vivo/components/VivoLogTable/elements';
+import { Header, LogEventItem, MetricTraceEventItem } from '@calyptia-vivo/components/VivoLogTable/elements';
 import { Box } from '@mui/material';
 import List from "@mui/material/List"
+import { Stream } from '@calyptia-vivo/lib/types';
 
 import { PAPER_STYLE } from './constants'
 
-type FluentBitData = {
-  id: number;
-  record: Array<any>;
-}
-
 export interface VivoLogTableProps {
-  rows: FluentBitData[];
-  kind: string
+  stream: Stream;
 }
 
 type ContentSwitcher = { [key: string]: string[]; }
 
-const VivoLogTable = ({ rows, kind }: VivoLogTableProps) => {
+const VivoLogTable = ({ stream }: VivoLogTableProps) => {
   const columns : ContentSwitcher = {
     'logs': ['Time', 'Metadata', 'Event'],
     'metrics': ['Metric'],
     'traces': ['Trace']
   }
+  const kind = stream.kind;
+  const logStream = kind === 'logs' ? stream : null;
+  const metricsTracesStream = kind !== 'logs' ? stream : null;
 
   return (
     <Box sx={PAPER_STYLE} >
-      <Header headings={columns[kind]} />
+      <Header headings={columns[stream.kind]} />
       <List sx={{ display: "flex", flexDirection: "column" }}>
-      {rows && rows.map((row) => {
-        const key = row.id.toString();
-        const timestamp = kind === 'logs' ? Math.floor(row.record[0][0] / 1e6) : 0;
-        const meta = kind === 'logs' ? JSON.stringify(row.record[0][1]) : undefined
-        const event = kind === 'logs' ? JSON.stringify(row.record[1]) : JSON.stringify(row.record)
-        return <LogEvent key={key} timestamp={timestamp} meta={meta} event={event} kind={kind} />
-      })}
+      {logStream ? logStream.records.map((row) => {
+        return <LogEventItem key={row.id} {...row} />
+      }): ''}
+      {metricsTracesStream ? metricsTracesStream.records.map((row) => {
+        return <MetricTraceEventItem key={row.id} {...row} />
+      }) : ''}
       </List>
     </Box>
   );

packages/frontend/components/VivoPage/index.tsx

@@ -2,17 +2,14 @@ import { Box, Stack } from '@mui/material';
 
 import VivoFilterBar from '@calyptia-vivo/components/VivoFilterBar';
 import VivoLogTable from '@calyptia-vivo/components/VivoLogTable';
-import VivoPaginator from '@calyptia-vivo/components/VivoPaginator';
 import VivoSideBar from '@calyptia-vivo/components/VivoSideBar';
 import { CONTENT_STYLES, PAGE_STYLES } from '@calyptia-vivo/components/VivoPage/constants';
 import { Header } from '@calyptia-vivo/components/VivoPage/elements';
+import { Stream, StreamKind } from '@calyptia-vivo/lib/types';
 
 export interface VivoPageProps {
-  menuActionHandler: (target: string) => void;
+  menuActionHandler: (target: StreamKind) => void;
   learnHowActionHandler: () => void;
-  recordStart: string;
-  recordEnd?: string;
-  recordsPerPage: string;
   page: number;
   pageChangeHandler: (value: number) => void;
   rowsPerPageHandler: (value: number) => void;
@@ -22,54 +19,36 @@ export interface VivoPageProps {
   playActionHandler: (play: boolean) => void;
   clearActionHandler: () => void;
   play: boolean;
-  tab: string;
-  data: any;
+  stream: Stream;
 }
 
 const VivoPage = ({
   menuActionHandler,
   learnHowActionHandler,
-  recordStart,
-  recordEnd,
-  recordsPerPage,
-  page,
-  pageChangeHandler,
-  rowsPerPageHandler,
   filterActionHandler,
   rateActionHandler,
   defaultRate,
   playActionHandler,
   clearActionHandler,
   play,
-  tab,
-  data
+  stream,
 }: VivoPageProps) => {
   return (
     <Stack sx={PAGE_STYLES} direction="row">
-      <VivoSideBar menuActionHandler={menuActionHandler} learnHowActionHandler={learnHowActionHandler} active={tab} />
+      <VivoSideBar menuActionHandler={menuActionHandler} learnHowActionHandler={learnHowActionHandler} active={stream.kind} />
       <Box className={'content-container'}>
         <Stack sx={CONTENT_STYLES} direction="column">
-          <Header kind={tab} />
+          <Header kind={stream.kind} />
           <VivoFilterBar 
             filterActionHandler={filterActionHandler}
             rateActionHandler={rateActionHandler}
             defaultRate={defaultRate}
             playActionHandler={playActionHandler}
             clearActionHandler={clearActionHandler}
             play={play}
-            kind={tab}
+            kind={stream.kind}
           />
-          <VivoLogTable rows={data} kind={tab} />
-          { recordEnd ? (
-            <VivoPaginator
-              page={page}
-              recordStart={recordStart}
-              recordEnd={recordEnd}
-              rowsPerPage={recordsPerPage}
-              pageChangeHandler={pageChangeHandler}
-              rowsPerPageHandler={rowsPerPageHandler}
-            />
-        ): ''} 
+          <VivoLogTable stream={stream} />
         </Stack>
       </Box>
     </Stack>

packages/frontend/components/VivoPaginator/elements/PageSelector.tsx

@@ -3,8 +3,8 @@ import ArrowForwardIosOutlinedIcon from '@mui/icons-material/ArrowForwardIosOutl
 import { Stack } from '@mui/material';
 
 export interface PageSelectorProps {
-  rows: string;
-  end: string;
+  rows: number;
+  end: number;
   page: number;
   pageChangeHandler: (value: number) => void;
 }
@@ -15,8 +15,8 @@ const PageSelector = ({ page, rows, end, pageChangeHandler }: PageSelectorProps)
 
   return (
     <Stack direction="row">
-      <ArrowBackIosNewOutlinedIcon className={isBackDisabled} onClick={() => pageChangeHandler(-1)} />
-      <ArrowForwardIosOutlinedIcon className={isForwardDisabled} onClick={() => pageChangeHandler(1)} />
+      <ArrowBackIosNewOutlinedIcon className={isBackDisabled} onClick={() => pageChangeHandler(page-1)} />
+      <ArrowForwardIosOutlinedIcon className={isForwardDisabled} onClick={() => pageChangeHandler(page + 1)} />
     </Stack>
   );
 };