Stacks fix app events logs by adding time buffer on the backend + add logging + fix styling (#3115)

api/server/handlers/porter_app/get_logs_within_time_range.go

@@ -4,6 +4,7 @@ import (
 	"fmt"
 	"net/http"
 	"strings"
+	"time"
 
 	"github.com/porter-dev/porter/api/server/authz"
 	"github.com/porter-dev/porter/api/server/handlers"
@@ -50,6 +51,9 @@ func (c *GetLogsWithinTimeRangeHandler) ServeHTTP(w http.ResponseWriter, r *http
 		return
 	}
 
+	request.StartRange = request.StartRange.Add(-1 * time.Minute)
+	request.EndRange = request.EndRange.Add(1 * time.Minute)
+
 	agent, err := c.GetAgent(r, cluster, "")
 	if err != nil {
 		_ = telemetry.Error(ctx, span, err, "unable to get agent")
@@ -126,6 +130,13 @@ func (c *GetLogsWithinTimeRangeHandler) ServeHTTP(w http.ResponseWriter, r *http
 		}
 	}
 
+	telemetry.WithAttributes(
+		span,
+		telemetry.AttributeKV{Key: "pod-selector", Value: podSelector},
+		telemetry.AttributeKV{Key: "start-range", Value: request.StartRange.String()},
+		telemetry.AttributeKV{Key: "end-range", Value: request.EndRange.String()},
+	)
+
 	logRequest := &types.GetLogRequest{
 		Limit:       request.Limit,
 		StartRange:  &request.StartRange,

dashboard/src/components/porter/Text.tsx

@@ -6,13 +6,15 @@ type Props = {
   color?: string;
   weight?: number;
   children: any;
+  additionalStyles?: string;
 };
 
 const Text: React.FC<Props> = ({
   size,
   weight,
   color,
-  children
+  children,
+  additionalStyles
 }) => {
   const getColor = () => {
     switch (color) {
@@ -22,12 +24,13 @@ const Text: React.FC<Props> = ({
         return color;
     }
   };
-  
+
   return (
     <StyledText
       size={size}
       color={getColor()}
       weight={weight}
+      additionalStyles={additionalStyles}
     >
       {children}
     </StyledText>
@@ -36,10 +39,11 @@ const Text: React.FC<Props> = ({
 
 export default Text;
 
-const StyledText = styled.div<{ 
-  size?: number; 
+const StyledText = styled.div<{
+  size?: number;
   color?: string;
   weight?: number;
+  additionalStyles?: string;
 }>`
   line-height: 1.5;
   font-weight: ${props => props.weight || 400};
@@ -47,4 +51,5 @@ const StyledText = styled.div<{
   font-size: ${props => props.size || 13}px;
   display: inline;
   align-items: center;
+  ${props => props.additionalStyles ? props.additionalStyles : ""}
 `;

dashboard/src/main/home/app-dashboard/expanded-app/activity-feed/events/AppEventCard.tsx

@@ -69,7 +69,7 @@ const AppEventCard: React.FC<Props> = ({ event, appData }) => {
         <Container row spaced>
           <Icon height="18px" src={app_event} />
           <Spacer inline width="10px" />
-          <Text size={14}>{event.metadata.detail}</Text>
+          <Text size={14} additionalStyles={"overflow: auto;max-height: 70px;max-width: 600px;"}>{event.metadata.detail}</Text>
         </Container>
       </Container>
       <Container row spaced>