Merge pull request #901 from SigNoz/release/v0.7.3

Release/v0.7.3

deploy/docker-swarm/clickhouse-setup/docker-compose.yaml

@@ -29,7 +29,7 @@ services:
         condition: on-failure
 
   query-service:
-    image: signoz/query-service:0.7.2
+    image: signoz/query-service:0.7.3
     command: ["-config=/root/config/prometheus.yml"]
     ports:
       - "8080:8080"
@@ -51,7 +51,7 @@ services:
     - clickhouse
 
   frontend:
-    image: signoz/frontend:0.7.2
+    image: signoz/frontend:0.7.3
     depends_on:
       - query-service
     ports:

deploy/docker/clickhouse-setup/docker-compose.arm.yaml

@@ -24,7 +24,7 @@ services:
       - '--storage.path=/data'
 
   query-service:
-    image: signoz/query-service:0.7.2
+    image: signoz/query-service:0.7.3
     container_name: query-service
     command: ["-config=/root/config/prometheus.yml"]
     volumes:
@@ -44,7 +44,7 @@ services:
         condition: service_healthy
 
   frontend:
-    image: signoz/frontend:0.7.2
+    image: signoz/frontend:0.7.3
     container_name: frontend
     depends_on:
       - query-service

deploy/docker/clickhouse-setup/docker-compose.yaml

@@ -27,7 +27,7 @@ services:
 
 
   query-service:
-    image: signoz/query-service:0.7.2
+    image: signoz/query-service:0.7.3
     container_name: query-service
     command: ["-config=/root/config/prometheus.yml"]
     volumes:
@@ -47,7 +47,7 @@ services:
         condition: service_healthy
 
   frontend:
-    image: signoz/frontend:0.7.2
+    image: signoz/frontend:0.7.3
     container_name: frontend
     depends_on:
       - query-service

deploy/install.sh

@@ -158,7 +158,9 @@ install_docker() {
         echo
         # yum install docker
         # service docker start
-        $sudo_cmd amazon-linux-extras install docker
+        $sudo_cmd yum install -y amazon-linux-extras
+        $sudo_cmd amazon-linux-extras enable docker
+        $sudo_cmd yum install -y docker
     else
 
         yum_cmd="$sudo_cmd yum --assumeyes --quiet"
@@ -195,16 +197,16 @@ install_docker_compose() {
 
 start_docker() {
     echo -e "🐳 Starting Docker ...\n"
-    if [ $os = "Mac" ]; then
+    if [[ $os == "Mac" ]]; then
         open --background -a Docker && while ! docker system info > /dev/null 2>&1; do sleep 1; done
     else 
         if ! $sudo_cmd systemctl is-active docker.service > /dev/null; then
             echo "Starting docker service"
             $sudo_cmd systemctl start docker.service
         fi
-        if [ -z $sudo_cmd ]; then
+        if [[ -z $sudo_cmd ]]; then
             docker ps > /dev/null && true
-            if [ $? -ne 0 ]; then
+            if [[ $? -ne 0 ]]; then
                 request_sudo
             fi
         fi
@@ -230,7 +232,7 @@ wait_for_containers_start() {
 }
 
 bye() {  # Prints a friendly good bye message and exits the script.
-    if [ "$?" -ne 0 ]; then
+    if [[ "$?" -ne 0 ]]; then
         set +o errexit
 
         echo "🔴 The containers didn't seem to start correctly. Please run the following command to check containers that may have errored out:"
@@ -266,17 +268,17 @@ bye() {  # Prints a friendly good bye message and exits the script.
 
 request_sudo() {
     if hash sudo 2>/dev/null; then
-        sudo_cmd="sudo"
         echo -e "\n\n🙇 We will need sudo access to complete the installation."
-        if ! $sudo_cmd -v && (( $EUID != 0 )); then
+        if (( $EUID != 0 )); then
-            echo -e "Please enter your sudo password now:"
+            sudo_cmd="sudo"
-            
+            echo -e "Please enter your sudo password, if prompt."
-            if ! $sudo_cmd -v; then
+            $sudo_cmd -l | grep -e "NOPASSWD: ALL" > /dev/null
+            if [[ $? -ne 0 ]] && ! $sudo_cmd -v; then
                 echo "Need sudo privileges to proceed with the installation."
                 exit 1;
             fi
 
-            echo -e "Thanks! 🙏\n"
+            echo -e "Got it! Thanks!! 🙏\n"
             echo -e "Okay! We will bring up the SigNoz cluster from here 🚀\n"
         fi
 	fi
@@ -291,9 +293,6 @@ sudo_cmd=""
 # Check sudo permissions
 if (( $EUID != 0 )); then
     echo "🟡 Running installer with non-sudo permissions."
-    if ! is_command_present docker; then
-        $sudo_cmd docker ps
-    fi
     echo "   In case of any failure or prompt, please consider running the script with sudo privileges."
     echo ""
 else
@@ -309,7 +308,7 @@ check_os
 
 # Obtain unique installation id
 sysinfo="$(uname -a)"
-if [ $? -ne 0 ]; then
+if [[ $? -ne 0 ]]; then
     uuid="$(uuidgen)"
     uuid="${uuid:-$(cat /proc/sys/kernel/random/uuid)}"
     sysinfo="${uuid:-$(cat /proc/sys/kernel/random/uuid)}"
@@ -324,7 +323,7 @@ elif hash openssl 2>/dev/null; then
     digest_cmd="openssl dgst -sha256"
 fi
 
-if [ -z $digest_cmd ]; then
+if [[ -z $digest_cmd ]]; then
     SIGNOZ_INSTALLATION_ID="$sysinfo"
 else
     SIGNOZ_INSTALLATION_ID=$(echo "$sysinfo" | $digest_cmd | grep -E -o '[a-zA-Z0-9]{64}')
@@ -407,7 +406,7 @@ send_event() {
             ;;
     esac
 
-    if [ "$error" != "" ]; then
+    if [[ "$error" != "" ]]; then
         error='"error": "'"$error"'", '
     fi
 

frontend/src/components/Editor/index.tsx

@@ -9,6 +9,12 @@ function Editor({ value }: EditorProps): JSX.Element {
 			value={value.current}
 			options={{ fontSize: 16, automaticLayout: true }}
 			height="40vh"
+			onChange={(newValue): void => {
+				if (value.current && newValue) {
+					// eslint-disable-next-line no-param-reassign
+					value.current = newValue;
+				}
+			}}
 		/>
 	);
 }

frontend/src/container/GridGraphComponent/index.tsx

@@ -1,6 +1,7 @@
 import { Typography } from 'antd';
 import { ChartData } from 'chart.js';
 import Graph, { graphOnClickHandler } from 'components/Graph';
+import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 import ValueGraph from 'components/ValueGraph';
 import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider';
 import history from 'lib/history';
@@ -57,7 +58,11 @@ function GridGraphComponent({
 					<Typography>{title}</Typography>
 				</TitleContainer>
 				<ValueContainer isDashboardPage={isDashboardPage}>
-					<ValueGraph value={value.toString()} />
+					<ValueGraph
+						value={
+							yAxisUnit ? getYAxisFormattedValue(value, yAxisUnit) : value.toString()
+						}
+					/>
 				</ValueContainer>
 			</>
 		);

frontend/src/container/MetricsApplication/Tabs/Application.tsx

@@ -15,7 +15,7 @@ import MetricReducer from 'types/reducer/metrics';
 
 import { Card, Col, GraphContainer, GraphTitle, Row } from '../styles';
 import TopEndpointsTable from '../TopEndpointsTable';
-import { Button } from './styles';
+import { Button, TableContainerCard } from './styles';
 
 function Application({ getWidget }: DashboardProps): JSX.Element {
 	const { servicename } = useParams<{ servicename?: string }>();
@@ -232,9 +232,9 @@ function Application({ getWidget }: DashboardProps): JSX.Element {
 				</Col>
 
 				<Col span={12}>
-					<Card>
+					<TableContainerCard>
 						<TopEndpointsTable data={topEndPoints} />
-					</Card>
+					</TableContainerCard>
 				</Col>
 			</Row>
 		</>

frontend/src/container/MetricsApplication/Tabs/styles.ts

@@ -1,6 +1,8 @@
 import { Button as ButtonComponent } from 'antd';
 import styled from 'styled-components';
 
+import { Card } from '../styles';
+
 export const Button = styled(ButtonComponent)`
 	&&& {
 		position: absolute;
@@ -8,3 +10,6 @@ export const Button = styled(ButtonComponent)`
 		display: none;
 	}
 `;
+export const TableContainerCard = styled(Card)`
+	overflow-x: scroll;
+`;

frontend/src/container/MetricsTable/index.tsx

@@ -5,6 +5,7 @@ import { SKIP_ONBOARDING } from 'constants/onboarding';
 import ROUTES from 'constants/routes';
 import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
+import { Link } from 'react-router-dom';
 import { servicesListItem } from 'store/actions/MetricsActions/metricsInterfaces';
 import { AppState } from 'store/reducers';
 import MetricReducer from 'types/reducer/metrics';
@@ -46,9 +47,9 @@ function Metrics(): JSX.Element {
 			key: 'serviceName',
 			// eslint-disable-next-line react/display-name
 			render: (text: string): JSX.Element => (
-				<div onClick={(): void => onClickHandler(`${ROUTES.APPLICATION}/${text}`)}>
+				<Link to={`${ROUTES.APPLICATION}/${text}`}>
 					<Name>{text}</Name>
-				</div>
+				</Link>
 			),
 		},
 		{

frontend/src/container/NewWidget/RightContainer/YAxisUnitSelector.tsx

@@ -9,7 +9,7 @@ const findCategoryById = (searchValue) =>
 const findCategoryByName = (searchValue) =>
 	find(flattenedCategories, (option) => option.name == searchValue);
 
-function YAxisUnitSelector({ defaultValue, onSelect }): JSX.Element {
+function YAxisUnitSelector({ defaultValue, onSelect, fieldLabel }): JSX.Element {
 	const onSelectHandler = (selectedValue: string): void => {
 		onSelect(findCategoryByName(selectedValue)?.id);
 	};
@@ -19,7 +19,7 @@ function YAxisUnitSelector({ defaultValue, onSelect }): JSX.Element {
 	return (
 		<Col style={{ marginTop: '1rem' }}>
 			<div style={{ margin: '0.5rem 0' }}>
-				<Typography.Text>Y Axis Unit</Typography.Text>
+				<Typography.Text>{fieldLabel}</Typography.Text>
 			</div>
 			<AutoComplete
 				style={{ width: '100%' }}

frontend/src/container/NewWidget/RightContainer/index.tsx

@@ -148,7 +148,11 @@ function RightContainer({
 					setSelectedTime,
 				}}
 			/>
-			<YAxisUnitSelector defaultValue={yAxisUnit} onSelect={setYAxisUnit} />
+			<YAxisUnitSelector
+				defaultValue={yAxisUnit}
+				onSelect={setYAxisUnit}
+				fieldLabel={selectedGraphType === 'Value' ? 'Unit' : 'Y Axis Unit'}
+			/>
 		</Container>
 	);
 }

frontend/src/container/Trace/TraceTable/index.tsx

@@ -1,11 +1,11 @@
-import { TableProps, Tag } from 'antd';
+import { TableProps, Tag, Typography } from 'antd';
 import Table, { ColumnsType } from 'antd/lib/table';
 import ROUTES from 'constants/routes';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
-import history from 'lib/history';
 import React from 'react';
 import { connect, useSelector } from 'react-redux';
+import { Link } from 'react-router-dom';
 import { bindActionCreators } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
 import {
@@ -35,59 +35,99 @@ function TraceTable({ getSpansAggregate }: TraceProps): JSX.Element {
 
 	type TableType = FlatArray<TraceReducer['spansAggregate']['data'], 1>;
 
+	const getLink = (record: TableType): string => {
+		return `${ROUTES.TRACE}/${record.traceID}?spanId=${record.spanID}`;
+	};
+
 	const columns: ColumnsType<TableType> = [
 		{
 			title: 'Date',
 			dataIndex: 'timestamp',
 			key: 'timestamp',
 			sorter: true,
-			render: (value: TableType['timestamp']): JSX.Element => {
+			render: (value: TableType['timestamp'], record): JSX.Element => {
 				const day = dayjs(value);
-				return <div>{day.format('YYYY/MM/DD HH:mm:ss')}</div>;
+				return (
+					<Link to={getLink(record)}>
+						<Typography>{day.format('YYYY/MM/DD HH:mm:ss')}</Typography>
+					</Link>
+				);
 			},
 		},
 		{
 			title: 'Service',
 			dataIndex: 'serviceName',
 			key: 'serviceName',
+			render: (value, record): JSX.Element => {
+				return (
+					<Link to={getLink(record)}>
+						<Typography>{value}</Typography>
+					</Link>
+				);
+			},
 		},
 		{
 			title: 'Operation',
 			dataIndex: 'operation',
 			key: 'operation',
+			render: (value, record): JSX.Element => {
+				return (
+					<Link to={getLink(record)}>
+						<Typography>{value}</Typography>
+					</Link>
+				);
+			},
 		},
 		{
 			title: 'Duration',
 			dataIndex: 'durationNano',
 			key: 'durationNano',
-			render: (value: TableType['durationNano']): JSX.Element => (
+			render: (value: TableType['durationNano'], record): JSX.Element => (
-				<div>
+				<Link to={getLink(record)}>
+					<Typography>
 						{`${dayjs
 							.duration({ milliseconds: value / 1000000 })
 							.asMilliseconds()} ms`}
-				</div>
+					</Typography>
+				</Link>
 			),
 		},
 		{
 			title: 'Method',
 			dataIndex: 'httpMethod',
 			key: 'httpMethod',
-			render: (value: TableType['httpMethod']): JSX.Element => {
+			render: (value: TableType['httpMethod'], record): JSX.Element => {
 				if (value.length === 0) {
-					return <div>-</div>;
+					return (
+						<Link to={getLink(record)}>
+							<Typography>-</Typography>
+						</Link>
+					);
 				}
-				return <Tag color="magenta">{value}</Tag>;
+				return (
+					<Link to={getLink(record)}>
+						<Tag color="magenta">{value}</Tag>
+					</Link>
+				);
 			},
 		},
 		{
 			title: 'Status Code',
 			dataIndex: 'httpCode',
 			key: 'httpCode',
-			render: (value: TableType['httpCode']): JSX.Element => {
+			render: (value: TableType['httpMethod'], record): JSX.Element => {
 				if (value.length === 0) {
-					return <div>-</div>;
+					return (
+						<Link to={getLink(record)}>
+							<Typography>-</Typography>
+						</Link>
+					);
 				}
-				return <Tag color="magenta">{value}</Tag>;
+				return (
+					<Link to={getLink(record)}>
+						<Tag color="magenta">{value}</Tag>
+					</Link>
+				);
 			},
 		},
 	];
@@ -118,12 +158,6 @@ function TraceTable({ getSpansAggregate }: TraceProps): JSX.Element {
 			dataSource={spansAggregate.data}
 			loading={loading || filterLoading}
 			columns={columns}
-			onRow={(record) => ({
-				onClick: (): void => {
-					window.open(`${ROUTES.TRACE}/${record.traceID}?spanId=${record.spanID}`);
-				},
-			})}
-			size="middle"
 			rowKey="timestamp"
 			style={{
 				cursor: 'pointer',