Merge branch 'SigNoz:develop' into develop

.gitignore

@@ -67,3 +67,6 @@ e2e/.auth
 # go
 vendor/
 **/main/**
+
+# git-town
+.git-branches.toml

ee/query-service/app/server.go

@@ -376,6 +376,7 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler) (*http.Server, e
  }, nil
 }
 
+// TODO(remove): Implemented at pkg/http/middleware/logging.go
 // loggingMiddleware is used for logging public api calls
 func loggingMiddleware(next http.Handler) http.Handler {
  return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
@@ -387,6 +388,7 @@ func loggingMiddleware(next http.Handler) http.Handler {
  })
 }
 
+// TODO(remove): Implemented at pkg/http/middleware/logging.go
 // loggingMiddlewarePrivate is used for logging private api calls
 // from internal services like alert manager
 func loggingMiddlewarePrivate(next http.Handler) http.Handler {
@@ -399,27 +401,32 @@ func loggingMiddlewarePrivate(next http.Handler) http.Handler {
  })
 }
 
+// TODO(remove): Implemented at pkg/http/middleware/logging.go
 type loggingResponseWriter struct {
  http.ResponseWriter
  statusCode int
 }
 
+// TODO(remove): Implemented at pkg/http/middleware/logging.go
 func NewLoggingResponseWriter(w http.ResponseWriter) *loggingResponseWriter {
  // WriteHeader(int) is not called if our response implicitly returns 200 OK, so
  // we default to that status code.
  return &loggingResponseWriter{w, http.StatusOK}
 }
 
+// TODO(remove): Implemented at pkg/http/middleware/logging.go
 func (lrw *loggingResponseWriter) WriteHeader(code int) {
  lrw.statusCode = code
  lrw.ResponseWriter.WriteHeader(code)
 }
 
+// TODO(remove): Implemented at pkg/http/middleware/logging.go
 // Flush implements the http.Flush interface.
 func (lrw *loggingResponseWriter) Flush() {
  lrw.ResponseWriter.(http.Flusher).Flush()
 }
 
+// TODO(remove): Implemented at pkg/http/middleware/logging.go
 // Support websockets
 func (lrw *loggingResponseWriter) Hijack() (net.Conn, *bufio.ReadWriter, error) {
  h, ok := lrw.ResponseWriter.(http.Hijacker)
@@ -565,6 +572,7 @@ func (s *Server) analyticsMiddleware(next http.Handler) http.Handler {
  })
 }
 
+// TODO(remove): Implemented at pkg/http/middleware/timeout.go
 func setTimeoutMiddleware(next http.Handler) http.Handler {
  return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
  ctx := r.Context()

frontend/src/assets/CustomIcons/GroupByIcon.tsx

@@ -0,0 +1,27 @@
+import { Color } from '@signozhq/design-tokens';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+function GroupByIcon(): JSX.Element {
+ const isDarkMode = useIsDarkMode();
+ return (
+ <svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <g
+ clipPath="url(#prefix__clip0_4344_1236)"
+ stroke={isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500}
+ strokeWidth="1.167"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ >
+ <path d="M4.667 1.167H2.333c-.644 0-1.166.522-1.166 1.166v2.334c0 .644.522 1.166 1.166 1.166h2.334c.644 0 1.166-.522 1.166-1.166V2.333c0-.644-.522-1.166-1.166-1.166zM8.167 1.167a1.17 1.17 0 011.166 1.166v2.334a1.17 1.17 0 01-1.166 1.166M11.667 1.167a1.17 1.17 0 011.166 1.166v2.334a1.17 1.17 0 01-1.166 1.166M5.833 10.5H2.917c-.992 0-1.75-.758-1.75-1.75v-.583" />
+ <path d="M4.083 12.25l1.75-1.75-1.75-1.75M11.667 8.167H9.333c-.644 0-1.166.522-1.166 1.166v2.334c0 .644.522 1.166 1.166 1.166h2.334c.644 0 1.166-.522 1.166-1.166V9.333c0-.644-.522-1.166-1.166-1.166z" />
+ </g>
+ <defs>
+ <clipPath id="prefix__clip0_4344_1236">
+ <path fill="#fff" d="M0 0h14v14H0z" />
+ </clipPath>
+ </defs>
+ </svg>
+ );
+}
+
+export default GroupByIcon;

frontend/src/components/LogDetail/LogDetail.interfaces.ts

@@ -3,12 +3,18 @@ import { AddToQueryHOCProps } from 'components/Logs/AddToQueryHOC';
 import { ActionItemProps } from 'container/LogDetailedView/ActionItem';
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
 import { VIEWS } from './constants';
 
 export type LogDetailProps = {
  log: ILog | null;
  selectedTab: VIEWS;
+ onGroupByAttribute?: (
+ fieldKey: string,
+ isJSON?: boolean,
+ dataType?: DataTypes,
+ ) => Promise<void>;
  isListViewPanel?: boolean;
  listViewPanelSelectedFields?: IField[] | null;
 } & Pick<AddToQueryHOCProps, 'onAddToQuery'> &

frontend/src/components/LogDetail/index.tsx

@@ -37,6 +37,7 @@ function LogDetail({
  log,
  onClose,
  onAddToQuery,
+ onGroupByAttribute,
  onClickActionItem,
  selectedTab,
  isListViewPanel = false,
@@ -209,6 +210,7 @@ function LogDetail({
  logData={log}
  onAddToQuery={onAddToQuery}
  onClickActionItem={onClickActionItem}
+ onGroupByAttribute={onGroupByAttribute}
  isListViewPanel={isListViewPanel}
  selectedOptions={options}
  listViewPanelSelectedFields={listViewPanelSelectedFields}

frontend/src/components/Logs/AddToQueryHOC.styles.scss

@@ -1,3 +1,16 @@
 .addToQueryContainer {
  cursor: pointer;
+ display: flex;
+ align-items: center;
+ &.small {
+ height: 16px;
+ }
+
+ &.medium {
+ height: 20px;
+ }
+
+ &.large {
+ height: 24px;
+ }
 }

frontend/src/components/Logs/AddToQueryHOC.tsx

@@ -1,13 +1,16 @@
 import './AddToQueryHOC.styles.scss';
 
 import { Popover } from 'antd';
+import cx from 'classnames';
 import { OPERATORS } from 'constants/queryBuilder';
+import { FontSize } from 'container/OptionsMenu/types';
 import { memo, MouseEvent, ReactNode, useMemo } from 'react';
 
 function AddToQueryHOC({
  fieldKey,
  fieldValue,
  onAddToQuery,
+ fontSize,
  children,
 }: AddToQueryHOCProps): JSX.Element {
  const handleQueryAdd = (event: MouseEvent<HTMLDivElement>): void => {
@@ -21,7 +24,7 @@ function AddToQueryHOC({
 
  return (
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
- <div className="addToQueryContainer" onClick={handleQueryAdd}>
+ <div className={cx('addToQueryContainer', fontSize)} onClick={handleQueryAdd}>
  <Popover placement="top" content={popOverContent}>
  {children}
  </Popover>
@@ -33,6 +36,7 @@ export interface AddToQueryHOCProps {
  fieldKey: string;
  fieldValue: string;
  onAddToQuery: (fieldKey: string, fieldValue: string, operator: string) => void;
+ fontSize: FontSize;
  children: ReactNode;
 }
 

frontend/src/components/Logs/ListLogView/ListLogView.styles.scss

@@ -6,6 +6,21 @@
  font-weight: 400;
  line-height: 18px; /* 128.571% */
  letter-spacing: -0.07px;
+
+ &.small {
+ font-size: 11px;
+ line-height: 16px;
+ }
+
+ &.medium {
+ font-size: 13px;
+ line-height: 20px;
+ }
+
+ &.large {
+ font-size: 14px;
+ line-height: 24px;
+ }
 }
 .log-value {
  color: var(--text-vanilla-400, #c0c1c3);
@@ -14,6 +29,21 @@
  font-weight: 400;
  line-height: 18px; /* 128.571% */
  letter-spacing: -0.07px;
+
+ &.small {
+ font-size: 11px;
+ line-height: 16px;
+ }
+
+ &.medium {
+ font-size: 13px;
+ line-height: 20px;
+ }
+
+ &.large {
+ font-size: 14px;
+ line-height: 24px;
+ }
 }
 .log-line {
  display: flex;
@@ -40,6 +70,20 @@
  font-weight: 400;
  line-height: 18px; /* 128.571% */
  letter-spacing: -0.07px;
+ &.small {
+ font-size: 11px;
+ line-height: 16px;
+ }
+
+ &.medium {
+ font-size: 13px;
+ line-height: 20px;
+ }
+
+ &.large {
+ font-size: 14px;
+ line-height: 24px;
+ }
  }
 
  .selected-log-value {
@@ -52,12 +96,37 @@
  line-height: 18px;
  letter-spacing: -0.07px;
  font-size: 14px;
+ &.small {
+ font-size: 11px;
+ line-height: 16px;
+ }
+
+ &.medium {
+ font-size: 13px;
+ line-height: 20px;
+ }
+
+ &.large {
+ font-size: 14px;
+ line-height: 24px;
+ }
  }
 
  .selected-log-kv {
  min-height: 24px;
  display: flex;
  align-items: center;
+ &.small {
+ min-height: 16px;
+ }
+
+ &.medium {
+ min-height: 20px;
+ }
+
+ &.large {
+ min-height: 24px;
+ }
  }
 }