diff --git a/frontend/src/actions/global.ts b/frontend/src/actions/global.ts index aeb2a47aa6..692dc5fca5 100644 --- a/frontend/src/actions/global.ts +++ b/frontend/src/actions/global.ts @@ -19,7 +19,6 @@ export const updateTimeInterval = (interval:string, datetimeRange?:[number,numbe let maxTime: number = 0; let minTime: number = 0; - console.log('interval', interval, typeof(interval)) // if interval string is custom, then datetimRange should be present and max & min time should be // set directly based on that. Assuming datetimeRange values are in ms, and minTime is 0th element @@ -28,13 +27,11 @@ export const updateTimeInterval = (interval:string, datetimeRange?:[number,numbe maxTime=Date.now()*1000000; // in nano sec minTime=(Date.now()-15*60*1000)*1000000; - console.log('max time 15 in case',maxTime) break; case '30min': maxTime=Date.now()*1000000; // in nano sec minTime=(Date.now()-30*60*1000)*1000000; - console.log('max time in 30 min case',maxTime) break; case '1hr': diff --git a/frontend/src/actions/metrics.ts b/frontend/src/actions/metrics.ts index 46dc5aed2c..2d40603317 100644 --- a/frontend/src/actions/metrics.ts +++ b/frontend/src/actions/metrics.ts @@ -62,7 +62,6 @@ export interface getFilteredTraceMetricsAction{ export const getServicesList = (globalTime: GlobalTime) => { return async (dispatch: Dispatch) => { let request_string = 'services?start='+globalTime.minTime+'&end='+globalTime.maxTime; - console.log(request_string); const response = await metricsAPI.get(request_string); dispatch({ diff --git a/frontend/src/actions/traceFilters.ts b/frontend/src/actions/traceFilters.ts index be459dea2a..5b08521fb9 100644 --- a/frontend/src/actions/traceFilters.ts +++ b/frontend/src/actions/traceFilters.ts @@ -26,7 +26,6 @@ export interface updateTraceFiltersAction { } export const updateTraceFilters = (traceFilters: TraceFilters) => { - console.log('in update trace filters',traceFilters) return { type: ActionTypes.updateTraceFilters, payload: traceFilters, diff --git a/frontend/src/api/metricsAPI.js b/frontend/src/api/metricsAPI.js index 72390d6047..4ce1789b2e 100644 --- a/frontend/src/api/metricsAPI.js +++ b/frontend/src/api/metricsAPI.js @@ -1,9 +1,9 @@ import axios from 'axios'; export default axios.create({ - // baseURL: 'http://104.211.113.204:8080/api/v1/', - // baseURL: process.env.REACT_APP_QUERY_SERVICE_URL, - baseURL: 'http://localhost:3000/api/v1/', - // console.log('in metrics API', process.env.QUERY_SERVICE_URL) + baseURL: 'http://104.211.113.204:8080/api/v1/', + + // baseURL: 'http://localhost:3000/api/v1/', + } ); \ No newline at end of file diff --git a/frontend/src/api/tracesAPI.js b/frontend/src/api/tracesAPI.js index 332c37c782..e9a907c038 100644 --- a/frontend/src/api/tracesAPI.js +++ b/frontend/src/api/tracesAPI.js @@ -3,14 +3,9 @@ import axios from 'axios'; export default axios.create({ // baseURL: 'http://104.211.113.204:8080/api/v1/' - // baseURL: process.env.QUERY_SERVICE_URL, - // console.log('in traces API', process.env.QUERY_SERVICE_URL) - baseURL: 'http://localhost:3000/api/v1/', + + baseURL: 'http://localhost:3000/api/v1/', // toggle to this before pushing }); -//individual trace format -//https://api.signoz.io/api/traces/146754946da0552e - -//http://104.211.113.204:8080/api/v1/traces/000000000000000053a5b7a93bc5e08a \ No newline at end of file diff --git a/frontend/src/components/App.tsx b/frontend/src/components/App.tsx index 6af2c6a145..e22dc786f3 100644 --- a/frontend/src/components/App.tsx +++ b/frontend/src/components/App.tsx @@ -45,7 +45,6 @@ const App = () => { const onCollapse = (): void => { - // console.log(collapsed); setCollapsed(!collapsed); }; diff --git a/frontend/src/components/CustomDateTimeModal.tsx b/frontend/src/components/CustomDateTimeModal.tsx index 71c6add974..950e47af36 100644 --- a/frontend/src/components/CustomDateTimeModal.tsx +++ b/frontend/src/components/CustomDateTimeModal.tsx @@ -1,7 +1,8 @@ import React, { useState } from 'react'; -import { Modal, Col, Row, DatePicker, TimePicker} from 'antd'; -import { Store } from 'antd/lib/form/interface'; +import { Modal, DatePicker} from 'antd'; import {DateTimeRangeType} from '../actions' +import { Moment } from 'moment' +import moment from 'moment'; const { RangePicker } = DatePicker; @@ -23,14 +24,17 @@ const CustomDateTimeModal: React.FC = ({ //destructuri const [customDateTimeRange, setCustomDateTimeRange]=useState(); function handleRangePickerOk(date_time: DateTimeRangeType) { - console.log('onhandleRangePickerOk: ', date_time?date_time[0]?.toDate():null,date_time?date_time[1]?.toDate():null ); setCustomDateTimeRange(date_time); } +function disabledDate(current:Moment){ - // function handleApplyDateTimeModal (){ - // if (customDateTimeRange !== null && customDateTimeRange !== undefined && customDateTimeRange[0] !== null && customDateTimeRange[1] !== null ) - // console.log('in handleApplyDateTimeModal', customDateTimeRange[0].toDate(),customDateTimeRange[1].toDate()) - // } + if (current > moment()){ + return true; + } + else { + return false; + } +} return ( = ({ //destructuri okText="Apply" cancelText="Cancel" onCancel={onCancel} - // style={{ position: "absolute", top: 60, left: parseInt(`${positionleft}`) }} //get position as a prop from parent component, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals style={{ position: "absolute", top: 60, right: 40 }} onOk={() => onCreate(customDateTimeRange?customDateTimeRange:null)} > - - {/* 'extra footer'} showTime /> */} - {/* - - - - - - - - - - - - - */} + ); diff --git a/frontend/src/components/DateTimeSelector.tsx b/frontend/src/components/DateTimeSelector.tsx index 9c5c2fd9d0..e81a3b8763 100644 --- a/frontend/src/components/DateTimeSelector.tsx +++ b/frontend/src/components/DateTimeSelector.tsx @@ -13,12 +13,6 @@ import FormItem from 'antd/lib/form/FormItem'; import {DateTimeRangeType} from '../actions' -import { - - RedoOutlined, - - } from '@ant-design/icons'; - const { Option } = Select; @@ -30,8 +24,6 @@ interface DateTimeSelectorProps extends RouteComponentProps { currentpath?:string; updateTimeInterval: Function; globalTime: GlobalTime; - // urlTime:string; - } @@ -43,11 +35,9 @@ const _DateTimeSelector = (props:DateTimeSelectorProps) => { const [form_dtselector] = Form.useForm(); - console.log('props in DateTimeSelector',props) const handleOnSelect = (value:string) => { - console.log(value); if (value === 'custom') { setCustomDTPickerVisible(true); @@ -58,8 +48,6 @@ const _DateTimeSelector = (props:DateTimeSelectorProps) => { search: '?time='+value, }) //pass time in URL query param for all choices except custom in datetime picker props.updateTimeInterval(value); - // console.log('in handle on select urlTime',props.urlTime) - // console.log('global time', props.globalTime.maxTime,props.globalTime.minTime) setTimeInterval(value); setRefreshButtonHidden(false); // for normal intervals, show refresh button } @@ -68,14 +56,13 @@ const _DateTimeSelector = (props:DateTimeSelectorProps) => { //function called on clicking apply in customDateTimeModal const handleOk = (dateTimeRange:DateTimeRangeType) => { - console.log('in handleOk of DateTimeSelector',dateTimeRange); // pass values in ms [minTime, maxTime] if (dateTimeRange!== null && dateTimeRange!== undefined && dateTimeRange[0]!== null && dateTimeRange[1]!== null ) { props.updateTimeInterval('custom',[dateTimeRange[0].valueOf(),dateTimeRange[1].valueOf()]) //setting globaltime setRefreshButtonHidden(true); - form_dtselector.setFieldsValue({interval:(dateTimeRange[0].valueOf().toString()+'-'+dateTimeRange[1].valueOf().toString()) ,}) + form_dtselector.setFieldsValue({interval:(dateTimeRange[0].format("YYYY/MM/DD HH:mm")+'-'+dateTimeRange[1].format("YYYY/MM/DD HH:mm")) ,}) } setCustomDTPickerVisible(false); } @@ -97,7 +84,6 @@ const _DateTimeSelector = (props:DateTimeSelectorProps) => { const handleRefresh = () => { - console.log('refreshing time interval', timeInterval) props.updateTimeInterval(timeInterval); } if (props.location.pathname.startsWith('/usage-explorer')) { @@ -110,14 +96,14 @@ const _DateTimeSelector = (props:DateTimeSelectorProps) => {
- - - - - - - + + + + + + @@ -140,14 +126,11 @@ const _DateTimeSelector = (props:DateTimeSelectorProps) => { } } -//const mapStateToProps = (state: StoreState, ownProps: RouteComponentProps -- ownProps is of type RouteComponentProps const mapStateToProps = (state: StoreState ): { globalTime: GlobalTime} => { return { globalTime : state.globalTime }; - // Check if we should pass as urltime or how do we handle this }; - // the name mapStateToProps is only a convention - // take state and map it to props which are accessible inside this component + export const DateTimeSelector = connect(mapStateToProps, { updateTimeInterval: updateTimeInterval, diff --git a/frontend/src/components/ShowBreadcrumbs.tsx b/frontend/src/components/ShowBreadcrumbs.tsx index e820284d6d..8219666b68 100644 --- a/frontend/src/components/ShowBreadcrumbs.tsx +++ b/frontend/src/components/ShowBreadcrumbs.tsx @@ -14,9 +14,6 @@ const breadcrumbNameMap :any = { // PNOTE - TO DO - Remove any and do typecheck '/traces': 'Traces', '/service-map': 'Service Map', '/usage-explorer': 'Usage Explorer', -// only top level things should be mapped here, rest should be taken dynamically from url -// Does this work if url has 2 levels of dynamic parameters? - Currently we have only 1 level -// this structure ignores query params like time -- which is good }; @@ -57,21 +54,4 @@ const ShowBreadcrumbs = withRouter(props => { ); }); - - - - -// const ShowBreadcrumbs = () => { - -// return ( -// -// -// Home -// Application -// -// //programmatically populate it with links -// ); - -// } - export default ShowBreadcrumbs; \ No newline at end of file diff --git a/frontend/src/components/metrics/ErrorRateChart.tsx b/frontend/src/components/metrics/ErrorRateChart.tsx index b236dc9179..5ff50adcf3 100644 --- a/frontend/src/components/metrics/ErrorRateChart.tsx +++ b/frontend/src/components/metrics/ErrorRateChart.tsx @@ -14,7 +14,7 @@ zIndex:10; position:absolute; top:${props => props.ycoordinate}px; left:${props => props.xcoordinate}px; -font-size:10px; +font-size:12px; border-radius:2px; `; @@ -32,8 +32,6 @@ padding-right:4px; // PNOTE - Check if this should be the case const theme = 'dark'; - - interface ErrorRateChartProps extends RouteComponentProps { data : metricItem[], } @@ -47,7 +45,6 @@ class ErrorRateChart extends React.Component{ constructor(props: ErrorRateChartProps) { super(props); - console.log('React CreatRef', React.createRef()); this.chartRef = React.createRef(); } @@ -64,25 +61,11 @@ class ErrorRateChart extends React.Component{ onClickhandler = async(e:any,event:any) => { - - //PNOTE - e has all key values from mouse event, event has only reference to handler functions - // PNOTE - https://github.com/emn178/angular2-chartjs/issues/29 - for listening only to element points - // var firstPoin = this.chart.current.getElementAtEvent(e) - - console.log('chartref',this.chartRef.current.chartInstance); - var firstPoint; if(this.chartRef){ firstPoint = this.chartRef.current.chartInstance.getElementAtEvent(e)[0]; } - - console.log('firstPoint', firstPoint); - - - // if (firstPoint) { - // var label = myChart.data.labels[firstPoint._index]; - // var value = myChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index]; - // } + if (firstPoint) {// PNOTE - TODO - Is await needed in this expression? await this.setState({ @@ -92,19 +75,13 @@ class ErrorRateChart extends React.Component{ // graphInfo:{...event} }) } - // console.log(this.state.graphInfo.payload.timestamp) - //this.props.applicationTimeStamp(e.payload.x) - // this.props.history.push('/traces?timestamp=' + e.payload.timestamp + '&service=' + this.props.service.name) } gotoTracesHandler=()=>{ - console.log('in gotoTraces handler') this.props.history.push('/traces') - // this.props.history.push('/traces?timestamp=' + this.state.graphInfo.payload.timestamp + '&service=' + this.props.service.name) } gotoAlertsHandler=()=>{ - console.log('in gotoAlerts handler') this.props.history.push('/service-map') // PNOTE - Keeping service map for now, will replace with alerts when alert page is made } @@ -147,25 +124,20 @@ class ErrorRateChart extends React.Component{ tooltips: { mode: 'label', - bodyFontSize: 10, - titleFontSize: 10, + bodyFontSize: 12, + titleFontSize: 12, callbacks: { label: function(tooltipItem, data) { if (typeof(tooltipItem.yLabel) === 'number') { - return data.datasets![tooltipItem.datasetIndex!].label +' : '+ tooltipItem.yLabel.toFixed(3); + return data.datasets![tooltipItem.datasetIndex!].label +' : '+ tooltipItem.yLabel.toFixed(2); } else { return ''; } - // return data.datasets![tooltipItem.datasetIndex!].label +' : '+ tooltipItem.yLabel!.Fixed(3); - // not able to do toFixed(3) in typescript as string|number type is not working with toFixed(3) function for - // as toFixed() function only works with numbers - // using type of check gives issues in 'label' variable name - //!That's the non-null assertion operator. It is a way to tell the compiler "this expression cannot be null or undefined here, so don't complain about the possibility of it being null or undefined." Sometimes the type checker is unable to make that determination itself. }, }, @@ -214,26 +186,15 @@ class ErrorRateChart extends React.Component{ } GraphTracePopUp = () => { - console.log('state in GraphTracePopPup',this.state); if (this.state.showpopUp){ return( - - //
- //

View Traces

- //

Set Alerts

- //
- // - //

View Traces

- //

Set Alerts

- // View Traces Set Alerts - - + ) } else @@ -245,18 +206,6 @@ class ErrorRateChart extends React.Component{ render(){ const ndata = this.props.data; - // console.log("in chartJS line render function") - // console.log(ndata); - - // const data_charts = data.map( s => ({label:s.ts, value:parseFloat(s.val)}) ); - // if(this.chartRef.ctx) - // { - // var gradient = this.chartRef.ctx.createLinearGradient(0, 0, 0, 400); - // gradient.addColorStop(0, 'rgba(250,174,50,1)'); - // gradient.addColorStop(1, 'rgba(250,174,50,0)'); - // } - - const data_chartJS = (canvas:any) => { const ctx = canvas.getContext("2d"); @@ -267,9 +216,6 @@ class ErrorRateChart extends React.Component{ datasets: [{ label: 'Errors per sec', data: ndata.map(s => s.errorRate), - // backgroundColor:'#000000', - // fill: true, - // backgroundColor: gradient, pointRadius: 0.5, borderColor: 'rgba(227, 74, 51,1)', // Can also add transparency in border color borderWidth: 2, diff --git a/frontend/src/components/metrics/GenericVisualization.tsx b/frontend/src/components/metrics/GenericVisualization.tsx index 1cb0d50869..5c7c1dcd12 100644 --- a/frontend/src/components/metrics/GenericVisualization.tsx +++ b/frontend/src/components/metrics/GenericVisualization.tsx @@ -14,38 +14,14 @@ interface GenericVisualizationsProps { } const GenericVisualizations = (props: GenericVisualizationsProps) => { - // const [serviceName, setServiceName] = useState('Frontend'); //default value of service name const data = { labels: props.data.map(s => new Date(s.timestamp/1000000)), datasets: [{ data: props.data.map(s => s.value), - // label: "Africa", borderColor: 'rgba(250,174,50,1)',// for line chart backgroundColor: props.chartType==='bar'?'rgba(250,174,50,1)':'', // for bar chart, don't assign backgroundcolor if its not a bar chart, may be relevant for area graph though }, - // { - // data: [282,350,411,502,635,809,947,1402,3700,5267,282,350,411,502,635,809,947,1402,3700,5267], - // label: "Asia", - // borderColor: 'rgba(227, 74, 51, 1.0)', - // backgroundColor: props.chartType==='bar'?'rgba(227, 74, 51, 1.0)':'', - // }, - //{ - // data: [168,170,178,190,203,276,408,547,675,734], - // label: "Europe", - // borderColor: "#3cba9f", - // fill: false - // }, { - // data: [40,20,10,16,24,38,74,167,508,784], - // label: "Latin America", - // borderColor: "#e8c3b9", - // fill: false - // }, { - // data: [6,3,2,2,7,26,82,172,312,433], - // label: "North America", - // borderColor: "#c45850", - // fill: false - // } ] }; @@ -66,10 +42,6 @@ const GenericVisualizations = (props: GenericVisualizationsProps) => { }], xAxes: [{ type: 'time', - // time: { - // unit: 'second' - // }, - //PNOTE - How to enable distribution == linear? // distribution: 'linear', //'linear': data are spread according to their time (distances can vary) // From https://www.chartjs.org/docs/latest/axes/cartesian/time.html diff --git a/frontend/src/components/metrics/LatencyLineChart.tsx b/frontend/src/components/metrics/LatencyLineChart.tsx index 29750b4649..024e505539 100644 --- a/frontend/src/components/metrics/LatencyLineChart.tsx +++ b/frontend/src/components/metrics/LatencyLineChart.tsx @@ -14,7 +14,7 @@ zIndex:10; position:absolute; top:${props => props.ycoordinate}px; left:${props => props.xcoordinate}px; -font-size:10px; +font-size:12px; border-radius:2px; `; @@ -29,40 +29,12 @@ padding-right:4px; `; -// const data_charts = { -// labels: ['1', '2', '3', '4', '5', '6'], -// datasets: [ -// { -// // label: '# of Votes', -// data: [12, 19, 3, 5, 2, 3], -// fill: false, -// backgroundColor: 'rgb(255, 99, 132)', -// borderColor: 'rgba(255, 99, 132, 0.2)', -// }, -// ], -// } - -// const onClickHandler = (e) => { -// console.log("ChartJS chart clicked"); -// console.log(e); -// }; - - // export interface ApiData { - // 0: number, // has epoch timestamp - // 1: string, // has value of the metric as a string - // } - - const theme = 'dark'; +const theme = 'dark'; -// PNOTE - accessing history object in typescript - https://stackoverflow.com/questions/49342390/typescript-how-to-add-type-check-for-history-object-in-react -// withRouter is used to pass on history object as prop - https://stackoverflow.com/questions/43107912/how-to-access-history-object-in-new-react-router-v4 - interface LatencyLineChartProps extends RouteComponentProps { data : metricItem[], - // chartRef: any, - // chartReference :ChartJSLineChart, - // data passed to ChartJSLineChart component is an array if json objects + popupClickHandler: Function, } interface LatencyLineChart { @@ -74,86 +46,60 @@ class LatencyLineChart extends React.Component{ constructor(props: LatencyLineChartProps) { super(props); - console.log('React CreatRef', React.createRef()); this.chartRef = React.createRef(); } state = { - // data: props.data, xcoordinate:0, ycoordinate:0, showpopUp:false, + firstpoint_ts:0, // graphInfo:{} } onClickhandler = async(e:any,event:any) => { - - console.log('e graph', e) - // console.log('event graph',event) - //PNOTE - e has all key values from mouse event, event has only reference to handler functions - // PNOTE - https://github.com/emn178/angular2-chartjs/issues/29 - for listening only to element points - // var firstPoin = this.chart.current.getElementAtEvent(e) - - console.log('chartref',this.chartRef.current.chartInstance); var firstPoint; if(this.chartRef){ firstPoint = this.chartRef.current.chartInstance.getElementAtEvent(e)[0]; } - console.log('firstPoint', firstPoint); - - - // if (firstPoint) { - // var label = myChart.data.labels[firstPoint._index]; - // var value = myChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index]; - // } if (firstPoint) - {// PNOTE - TODO - Is await needed in this expression? - await this.setState({ + { + this.setState({ xcoordinate:e.offsetX+20, ycoordinate:e.offsetY, showpopUp:true, + firstpoint_ts:this.props.data[firstPoint._index].timestamp, // graphInfo:{...event} }) } - // console.log(this.state.graphInfo.payload.timestamp) - //this.props.applicationTimeStamp(e.payload.x) - // this.props.history.push('/traces?timestamp=' + e.payload.timestamp + '&service=' + this.props.service.name) + else + { + // if clicked outside of the graph line, then firstpoint is undefined -> close popup. + // Only works for clicking in the same chart - as click handler only detects clicks in that chart + this.setState({ + + showpopUp:false, + + }) + } } - gotoTracesHandler=()=>{ - console.log('in gotoTraces handler') + gotoTracesHandler=(xc:any)=>{ this.props.history.push('/traces') - // this.props.history.push('/traces?timestamp=' + this.state.graphInfo.payload.timestamp + '&service=' + this.props.service.name) } gotoAlertsHandler=()=>{ - console.log('in gotoAlerts handler') this.props.history.push('/service-map') // PNOTE - Keeping service map for now, will replace with alerts when alert page is made } options_charts: ChartOptions = { - // onClick: function(evt, element) { - // // console.log(evt); - // }, - - //- PNOTE - TO DO -- element is of type ChartElement, how to define its type - // https://gitlab.com/signoz-frontend/sample-project/-/blob/darkthemechanges/src/Components/Application/Graphs/SimpleLineChart.js - // Code for popup - // onClick: function(evt, element :any[]) { - // if (element.length > 0) { - // var ind = element[0]._index; - // console.log(element) - // alert(ind); - // } - // }, - onClick: this.onClickhandler, maintainAspectRatio: true, @@ -168,8 +114,6 @@ class LatencyLineChart extends React.Component{ fontFamily: 'Arial', fontStyle: 'regular', fontColor:theme === 'dark'? 'rgb(200, 200, 200)':'rgb(20, 20, 20)' , - - }, legend: { @@ -189,26 +133,20 @@ class LatencyLineChart extends React.Component{ tooltips: { mode: 'label', - bodyFontSize: 10, - titleFontSize: 10, + bodyFontSize: 12, + titleFontSize: 12, callbacks: { label: function(tooltipItem, data) { if (typeof(tooltipItem.yLabel) === 'number') { - return data.datasets![tooltipItem.datasetIndex!].label +' : '+ tooltipItem.yLabel.toFixed(3); + return data.datasets![tooltipItem.datasetIndex!].label +' : '+ tooltipItem.yLabel.toFixed(2); } else { return ''; } - // return data.datasets![tooltipItem.datasetIndex!].label +' : '+ tooltipItem.yLabel!.Fixed(3); - // not able to do toFixed(3) in typescript as string|number type is not working with toFixed(3) function for - // as toFixed() function only works with numbers - // using type of check gives issues in 'label' variable name - //!That's the non-null assertion operator. It is a way to tell the compiler "this expression cannot be null or undefined here, so don't complain about the possibility of it being null or undefined." Sometimes the type checker is unable to make that determination itself. - }, }, }, @@ -224,12 +162,6 @@ class LatencyLineChart extends React.Component{ maxTicksLimit: 6, }, - // scaleLabel: { - // display: true, - // labelString: 'latency in ms', - // fontSize: 6, - // padding: 4, - // }, gridLines: { // You can change the color, the dash effect, the main axe color, etc. borderDash: [1, 4], @@ -258,22 +190,11 @@ class LatencyLineChart extends React.Component{ } GraphTracePopUp = () => { - console.log('state in GraphTracePopPup',this.state); if (this.state.showpopUp){ return( - - //
- //

View Traces

- //

Set Alerts

- //
- // - //

View Traces

- //

Set Alerts

- // - - View Traces + this.props.popupClickHandler(this.state.firstpoint_ts)}>View Traces Set Alerts @@ -289,18 +210,6 @@ class LatencyLineChart extends React.Component{ render(){ const ndata = this.props.data; - // console.log("in chartJS line render function") - // console.log(ndata); - - // const data_charts = data.map( s => ({label:s.ts, value:parseFloat(s.val)}) ); - // if(this.chartRef.ctx) - // { - // var gradient = this.chartRef.ctx.createLinearGradient(0, 0, 0, 400); - // gradient.addColorStop(0, 'rgba(250,174,50,1)'); - // gradient.addColorStop(1, 'rgba(250,174,50,0)'); - // } - - const data_chartJS = (canvas:any) => { const ctx = canvas.getContext("2d"); @@ -311,9 +220,6 @@ class LatencyLineChart extends React.Component{ datasets: [{ label: 'p99 Latency', data: ndata.map(s => s.p99/1000000), //converting latency from nano sec to ms - // backgroundColor:'#000000', - // fill: true, - // backgroundColor: gradient, pointRadius: 0.5, borderColor: 'rgba(250,174,50,1)', // Can also add transparency in border color borderWidth: 2, @@ -321,9 +227,6 @@ class LatencyLineChart extends React.Component{ { label: 'p90 Latency', data: ndata.map(s => s.p90/1000000), //converting latency from nano sec to ms - // backgroundColor:'#dd0000', - // fill: true, - // backgroundColor: 'rgba(227, 74, 51, 1.0)', pointRadius: 0.5, borderColor: 'rgba(227, 74, 51, 1.0)', borderWidth: 2, @@ -331,9 +234,6 @@ class LatencyLineChart extends React.Component{ { label: 'p50 Latency', data: ndata.map(s => s.p50/1000000), //converting latency from nano sec to ms - // backgroundColor:'#dd0000', - // fill: true, - // backgroundColor: 'rgba(227, 74, 51, 1.0)', pointRadius: 0.5, borderColor: 'rgba(57, 255, 20, 1.0)', borderWidth: 2, diff --git a/frontend/src/components/metrics/RequestRateChart.tsx b/frontend/src/components/metrics/RequestRateChart.tsx index 917221dc49..ce187eda49 100644 --- a/frontend/src/components/metrics/RequestRateChart.tsx +++ b/frontend/src/components/metrics/RequestRateChart.tsx @@ -14,7 +14,7 @@ zIndex:10; position:absolute; top:${props => props.ycoordinate}px; left:${props => props.xcoordinate}px; -font-size:10px; +font-size:12px; border-radius:2px; `; @@ -29,40 +29,10 @@ padding-right:4px; `; -// const data_charts = { -// labels: ['1', '2', '3', '4', '5', '6'], -// datasets: [ -// { -// // label: '# of Votes', -// data: [12, 19, 3, 5, 2, 3], -// fill: false, -// backgroundColor: 'rgb(255, 99, 132)', -// borderColor: 'rgba(255, 99, 132, 0.2)', -// }, -// ], -// } - -// const onClickHandler = (e) => { -// console.log("ChartJS chart clicked"); -// console.log(e); -// }; - - // export interface ApiData { - // 0: number, // has epoch timestamp - // 1: string, // has value of the metric as a string - // } - - const theme = 'dark'; - -// PNOTE - accessing history object in typescript - https://stackoverflow.com/questions/49342390/typescript-how-to-add-type-check-for-history-object-in-react -// withRouter is used to pass on history object as prop - https://stackoverflow.com/questions/43107912/how-to-access-history-object-in-new-react-router-v4 - +const theme = 'dark'; interface RequestRateChartProps extends RouteComponentProps { data : metricItem[], - // chartRef: any, - // chartReference :ChartJSLineChart, - // data passed to ChartJSLineChart component is an array if json objects } interface RequestRateChart { @@ -74,14 +44,10 @@ class RequestRateChart extends React.Component{ constructor(props: RequestRateChartProps) { super(props); - console.log('React CreatRef', React.createRef()); this.chartRef = React.createRef(); } - - state = { - // data: props.data, xcoordinate:0, ycoordinate:0, showpopUp:false, @@ -90,27 +56,12 @@ class RequestRateChart extends React.Component{ onClickhandler = async(e:any,event:any) => { - - console.log('e graph', e) - // console.log('event graph',event) - //PNOTE - e has all key values from mouse event, event has only reference to handler functions - // PNOTE - https://github.com/emn178/angular2-chartjs/issues/29 - for listening only to element points - // var firstPoin = this.chart.current.getElementAtEvent(e) - - console.log('chartref',this.chartRef.current.chartInstance); var firstPoint; if(this.chartRef){ firstPoint = this.chartRef.current.chartInstance.getElementAtEvent(e)[0]; } - - console.log('firstPoint', firstPoint); - - - // if (firstPoint) { - // var label = myChart.data.labels[firstPoint._index]; - // var value = myChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index]; - // } + if (firstPoint) {// PNOTE - TODO - Is await needed in this expression? await this.setState({ @@ -120,40 +71,20 @@ class RequestRateChart extends React.Component{ // graphInfo:{...event} }) } - // console.log(this.state.graphInfo.payload.timestamp) - //this.props.applicationTimeStamp(e.payload.x) - // this.props.history.push('/traces?timestamp=' + e.payload.timestamp + '&service=' + this.props.service.name) + } gotoTracesHandler=()=>{ - console.log('in gotoTraces handler') this.props.history.push('/traces') - // this.props.history.push('/traces?timestamp=' + this.state.graphInfo.payload.timestamp + '&service=' + this.props.service.name) } gotoAlertsHandler=()=>{ - console.log('in gotoAlerts handler') this.props.history.push('/service-map') // PNOTE - Keeping service map for now, will replace with alerts when alert page is made } options_charts: ChartOptions = { - // onClick: function(evt, element) { - // // console.log(evt); - // }, - - //- PNOTE - TO DO -- element is of type ChartElement, how to define its type - // https://gitlab.com/signoz-frontend/sample-project/-/blob/darkthemechanges/src/Components/Application/Graphs/SimpleLineChart.js - // Code for popup - // onClick: function(evt, element :any[]) { - // if (element.length > 0) { - // var ind = element[0]._index; - // console.log(element) - // alert(ind); - // } - // }, - onClick: this.onClickhandler, maintainAspectRatio: true, @@ -168,8 +99,6 @@ class RequestRateChart extends React.Component{ fontFamily: 'Arial', fontStyle: 'regular', fontColor:theme === 'dark'? 'rgb(200, 200, 200)':'rgb(20, 20, 20)' , - - }, legend: { @@ -182,32 +111,25 @@ class RequestRateChart extends React.Component{ fontSize: 10, boxWidth : 10, usePointStyle : true, - - } }, tooltips: { mode: 'label', - bodyFontSize: 10, - titleFontSize: 10, + bodyFontSize: 12, + titleFontSize: 12, callbacks: { label: function(tooltipItem, data) { if (typeof(tooltipItem.yLabel) === 'number') { - return data.datasets![tooltipItem.datasetIndex!].label +' : '+ tooltipItem.yLabel.toFixed(3); + return data.datasets![tooltipItem.datasetIndex!].label +' : '+ tooltipItem.yLabel.toFixed(2); } else { return ''; } - // return data.datasets![tooltipItem.datasetIndex!].label +' : '+ tooltipItem.yLabel!.Fixed(3); - // not able to do toFixed(3) in typescript as string|number type is not working with toFixed(3) function for - // as toFixed() function only works with numbers - // using type of check gives issues in 'label' variable name - //!That's the non-null assertion operator. It is a way to tell the compiler "this expression cannot be null or undefined here, so don't complain about the possibility of it being null or undefined." Sometimes the type checker is unable to make that determination itself. }, }, @@ -224,12 +146,7 @@ class RequestRateChart extends React.Component{ maxTicksLimit: 6, }, - // scaleLabel: { - // display: true, - // labelString: 'latency in ms', - // fontSize: 6, - // padding: 4, - // }, + gridLines: { // You can change the color, the dash effect, the main axe color, etc. borderDash: [1, 4], @@ -256,26 +173,13 @@ class RequestRateChart extends React.Component{ } GraphTracePopUp = () => { - console.log('state in GraphTracePopPup',this.state); if (this.state.showpopUp){ return( - - //
- //

View Traces

- //

Set Alerts

- //
- // - //

View Traces

- //

Set Alerts

- // - View Traces Set Alerts - - - + ) } else @@ -287,18 +191,6 @@ class RequestRateChart extends React.Component{ render(){ const ndata = this.props.data; - // console.log("in chartJS line render function") - // console.log(ndata); - - // const data_charts = data.map( s => ({label:s.ts, value:parseFloat(s.val)}) ); - // if(this.chartRef.ctx) - // { - // var gradient = this.chartRef.ctx.createLinearGradient(0, 0, 0, 400); - // gradient.addColorStop(0, 'rgba(250,174,50,1)'); - // gradient.addColorStop(1, 'rgba(250,174,50,0)'); - // } - - const data_chartJS = (canvas:any) => { const ctx = canvas.getContext("2d"); @@ -309,19 +201,14 @@ class RequestRateChart extends React.Component{ datasets: [{ label: 'Request per sec', data: ndata.map(s => s.callRate), - // backgroundColor:'#000000', - // fill: true, - // backgroundColor: gradient, pointRadius: 0.5, borderColor: 'rgba(250,174,50,1)', // Can also add transparency in border color borderWidth: 2, }, ]} - }; - return(
{this.GraphTracePopUp()} diff --git a/frontend/src/components/metrics/ServiceMetrics.tsx b/frontend/src/components/metrics/ServiceMetrics.tsx index d2e514bf72..936f293573 100644 --- a/frontend/src/components/metrics/ServiceMetrics.tsx +++ b/frontend/src/components/metrics/ServiceMetrics.tsx @@ -1,10 +1,10 @@ import React,{useEffect} from 'react'; import { Tabs, Card, Row, Col} from 'antd'; import { connect } from 'react-redux'; -import { useParams } from "react-router-dom"; +import { useParams, RouteComponentProps } from "react-router-dom"; +import { withRouter } from "react-router"; - -import { getServicesMetrics, metricItem, getTopEndpoints, topEndpointListItem, GlobalTime } from '../../actions'; +import { getServicesMetrics, metricItem, getTopEndpoints, topEndpointListItem, GlobalTime, updateTimeInterval } from '../../actions'; import { StoreState } from '../../reducers' import LatencyLineChart from "./LatencyLineChart" import RequestRateChart from './RequestRateChart' @@ -13,25 +13,30 @@ import TopEndpointsTable from './TopEndpointsTable'; const { TabPane } = Tabs; -interface ServicesMetricsProps { +interface ServicesMetricsProps extends RouteComponentProps{ serviceMetrics: metricItem[], getServicesMetrics: Function, topEndpointsList: topEndpointListItem[], getTopEndpoints: Function, globalTime: GlobalTime, + updateTimeInterval: Function, } const _ServiceMetrics = (props: ServicesMetricsProps) => { const params = useParams<{ servicename?: string; }>(); - console.log('service name',params.servicename); useEffect( () => { props.getServicesMetrics(params.servicename,props.globalTime); props.getTopEndpoints(params.servicename,props.globalTime); }, [props.globalTime,params.servicename]); + const onTracePopupClick = (timestamp:number) => { + + props.updateTimeInterval('custom',[(timestamp/1000000)-5*60*1000,(timestamp/1000000)])// updateTimeInterval takes second range in ms -- give -5 min to selected time, + props.history.push('/traces') + } return ( @@ -39,7 +44,7 @@ const _ServiceMetrics = (props: ServicesMetricsProps) => { - + @@ -88,11 +93,11 @@ const mapStateToProps = (state: StoreState): { serviceMetrics: metricItem[], top return { serviceMetrics : state.serviceMetrics, topEndpointsList: state.topEndpointsList, globalTime:state.globalTime}; }; -// the name mapStateToProps is only a convention -// take state and map it to props which are accessible inside this component -export const ServiceMetrics = connect(mapStateToProps, { +export const ServiceMetrics = withRouter(connect(mapStateToProps, { getServicesMetrics: getServicesMetrics, getTopEndpoints: getTopEndpoints, -})(_ServiceMetrics); + updateTimeInterval: updateTimeInterval, + +})(_ServiceMetrics)); diff --git a/frontend/src/components/metrics/ServicesTable.tsx b/frontend/src/components/metrics/ServicesTable.tsx index 4f1dc41ba9..4fb6d6fbcc 100644 --- a/frontend/src/components/metrics/ServicesTable.tsx +++ b/frontend/src/components/metrics/ServicesTable.tsx @@ -24,10 +24,6 @@ padding-right:40px; .ant-table tfoot>tr>td, .ant-table tfoot>tr>th, .ant-table-tbody>tr>td, .ant-table-thead>tr>th { padding: 10px; }; `; -//styling antd with styled components - https://codesandbox.io/s/8x1r670rxj - - - const columns = [ @@ -69,7 +65,6 @@ const _ServicesTable = (props: ServicesTableProps) => { const search = useLocation().search; const time_interval = new URLSearchParams(search).get('time'); - console.log(time_interval) useEffect( () => { props.getServicesList(props.globalTime); @@ -79,7 +74,6 @@ const _ServicesTable = (props: ServicesTableProps) => { return( - {console.log(props.servicesList)} @@ -88,11 +82,8 @@ const _ServicesTable = (props: ServicesTableProps) => { } const mapStateToProps = (state: StoreState): { servicesList: servicesListItem[], globalTime: GlobalTime } => { - // console.log(state); return { servicesList : state.servicesList, globalTime:state.globalTime}; }; - // the name mapStateToProps is only a convention - // take state and map it to props which are accessible inside this component export const ServicesTable = connect(mapStateToProps, { getServicesList: getServicesList, diff --git a/frontend/src/components/metrics/TopEndpointsTable.tsx b/frontend/src/components/metrics/TopEndpointsTable.tsx index 6d69eb58b0..f8af4ccf3b 100644 --- a/frontend/src/components/metrics/TopEndpointsTable.tsx +++ b/frontend/src/components/metrics/TopEndpointsTable.tsx @@ -26,9 +26,7 @@ const TopEndpointsTable = (props: TopEndpointsTableProps) => { title: 'Name', dataIndex: 'name', key: 'name', - // sorter: (a:any, b:any) => a.startTime - b.startTime, - // sortDirections: ['descend', 'ascend'], - //PNOTE - TO DO - Change this to API link if available + render: (text :string) => {text}, }, @@ -61,21 +59,15 @@ const TopEndpointsTable = (props: TopEndpointsTableProps) => { dataIndex: 'numCalls', key: 'numCalls', sorter: (a:any, b:any) => a.numCalls - b.numCalls, - // sortDirections: ['descend', 'ascend'], - // render: (value: number) => value.toFixed(2), }, ]; - - return(
Top Endpoints
- ) } - export default TopEndpointsTable; \ No newline at end of file diff --git a/frontend/src/components/servicemap/ServiceMap.tsx b/frontend/src/components/servicemap/ServiceMap.tsx index e2bfc23edd..622c7b76d2 100644 --- a/frontend/src/components/servicemap/ServiceMap.tsx +++ b/frontend/src/components/servicemap/ServiceMap.tsx @@ -6,7 +6,6 @@ const ServiceMap = () => { return (
- {/*
Service Map
*/}
diff --git a/frontend/src/components/traces/FilterStateDisplay.tsx b/frontend/src/components/traces/FilterStateDisplay.tsx index a2e31f9729..e0a5b188ea 100644 --- a/frontend/src/components/traces/FilterStateDisplay.tsx +++ b/frontend/src/components/traces/FilterStateDisplay.tsx @@ -15,7 +15,6 @@ interface FilterStateDisplayProps { const _FilterStateDisplay = (props: FilterStateDisplayProps) => { function handleCloseTag(value:string) { - console.log('on close tag', value) if (value==='service') props.updateTraceFilters({...props.traceFilters,service:''}) if (value==='operation') @@ -28,7 +27,6 @@ const _FilterStateDisplay = (props: FilterStateDisplayProps) => { } function handleCloseTagElement(item:TagItem){ - console.log('tag item closed in handle closeTagElement', item) props.updateTraceFilters({...props.traceFilters,tags:props.traceFilters.tags?.filter(elem => elem !== item)}) } @@ -56,7 +54,6 @@ const _FilterStateDisplay = (props: FilterStateDisplayProps) => { onClose={e => {handleCloseTag('maxLatency');}}> maxLatency:{(parseInt(props.traceFilters.latency!.max)/1000000).toString()}ms } - {console.log('tagfilters before showing on card',props.traceFilters.tags)} {props.traceFilters.tags === undefined? null: props.traceFilters.tags.map( item => ( {handleCloseTagElement(item);}}> diff --git a/frontend/src/components/traces/LatencyModalForm.tsx b/frontend/src/components/traces/LatencyModalForm.tsx index 58fe27e0f3..bd748b9b0b 100644 --- a/frontend/src/components/traces/LatencyModalForm.tsx +++ b/frontend/src/components/traces/LatencyModalForm.tsx @@ -2,11 +2,6 @@ import React from 'react'; import { Modal, Form, InputNumber, Col, Row} from 'antd'; import { Store } from 'antd/lib/form/interface'; -// interface Values { -// title: string; -// description: string; -// modifier: string; -// } interface LatencyModalFormProps { visible: boolean; @@ -32,7 +27,6 @@ const LatencyModalForm: React.FC = ({ .validateFields() .then(values => { form.resetFields(); - // onCreate({title:"hello",description:'good',modifier:'public'}); onCreate(values); // giving error for values }) .catch(info => { diff --git a/frontend/src/components/traces/SelectedSpanDetails.tsx b/frontend/src/components/traces/SelectedSpanDetails.tsx index 5f06a672e9..aefa8d8990 100644 --- a/frontend/src/components/traces/SelectedSpanDetails.tsx +++ b/frontend/src/components/traces/SelectedSpanDetails.tsx @@ -17,7 +17,6 @@ interface SelectedSpanDetailsProps { const SelectedSpanDetails = (props: SelectedSpanDetailsProps) => { const callback = (key:any) => { - console.log(key); } return ( diff --git a/frontend/src/components/traces/TraceCustomVisualizations.tsx b/frontend/src/components/traces/TraceCustomVisualizations.tsx index bbbea91982..94736bb206 100644 --- a/frontend/src/components/traces/TraceCustomVisualizations.tsx +++ b/frontend/src/components/traces/TraceCustomVisualizations.tsx @@ -67,7 +67,6 @@ interface TraceCustomVisualizationsProps { const _TraceCustomVisualizations = (props: TraceCustomVisualizationsProps) => { const [selectedEntity, setSelectedEntity] = useState('calls'); - // const [defaultOption, setDefaultOption]=useState('count'); const [selectedAggOption, setSelectedAggOption] = useState('count'); const [selectedStep, setSelectedStep] = useState('60'); // Step should be multiples of 60, 60 -> 1 min @@ -98,40 +97,27 @@ const _TraceCustomVisualizations = (props: TraceCustomVisualizationsProps) => { const [form] = Form.useForm(); function handleChange(value:string) { - console.log(value); + // console.log(value); } - // function handleChangeEntity(value:string) { - // // console.log(value); - // // setSelectedEntity(value); - // setDefaultOption(aggregation_options.filter((item) => item.linked_entity === selectedEntity)[0].default_selected) - // } - function handleFinish(value:string) { - console.log(value); + // console.log(value); } // PNOTE - Can also use 'coordinate' option in antd Select for implementing this - https://ant.design/components/select/ const handleFormValuesChange = (changedValues:any) => { const formFieldName = Object.keys(changedValues)[0]; - // console.log('Object keys',Object.keys(changedValues) ); if (formFieldName === 'entity') { - - // const a = selectedEntity; // why is selected entity not set instantly?? - - // setDefaultOption(aggregation_options.filter((item) => item.linked_entity === selectedEntity)[0].default_selected) const temp_entity = aggregation_options.filter((item) => item.linked_entity === changedValues[formFieldName])[0]; form.setFieldsValue( { - // agg_options : aggregation_options.filter((item) => item.linked_entity === selectedEntity)[0].default_selected, agg_options : temp_entity.default_selected.title, // PNOTE - TO DO Check if this has the same behaviour as selecting an option? }) let temp = form.getFieldsValue(['agg_options','entity']); - console.log('custom metric field values',temp,temp.entity,temp.agg_options); setSelectedEntity(temp.entity); setSelectedAggOption(temp.agg_options); @@ -146,13 +132,6 @@ const _TraceCustomVisualizations = (props: TraceCustomVisualizationsProps) => { } - - // Make api calls here and display data - // PNOTE - TO DO - API CALL location - may be through action creators and set states in redux store? - - // PNOTE - Change this - // API call via useEffects after monitoring traces - } @@ -167,12 +146,10 @@ const _TraceCustomVisualizations = (props: TraceCustomVisualizationsProps) => { form={form} onFinish={handleFinish} onValuesChange={handleFormValuesChange} - // initialValues={ agg_options: 'Count'} initialValues={{ agg_options: 'Count', chart_style:'line', interval:'5m', group_by:'none' }} > - {/* {entity.map((item) => ( @@ -197,11 +174,7 @@ const _TraceCustomVisualizations = (props: TraceCustomVisualizationsProps) => { } - {/* */} + {operationList.map( item => )} - {/* We need to URL encode before making API call on form submission */} - {/* - - - - */} - @@ -271,10 +232,7 @@ const _TraceFilter = (props: TraceFilterProps) => { - {/* - status:200 customerid:123 - {tagKeyValueApplied.map( item => onTagClose(item)} closable> {item} )} - */} + {/* // What will be the empty state of card when there is no Tag , it should show something */} Select Service to get Tag suggestions @@ -282,8 +240,7 @@ const _TraceFilter = (props: TraceFilterProps) => { - {/* */} - {/* Not using tag count data to show in options */} + { return ({'value' : s.tagKeys}) })} @@ -296,14 +253,12 @@ const _TraceFilter = (props: TraceFilterProps) => { } placeholder="Tag Key" /> - {/* // ! means that we are saying object can't be undefined */} @@ -329,7 +284,6 @@ const _TraceFilter = (props: TraceFilterProps) => { } const mapStateToProps = (state: StoreState): { traceFilters: TraceFilters, globalTime: GlobalTime } => { - // console.log(state); return { traceFilters: state.traceFilters, globalTime: state.globalTime }; }; diff --git a/frontend/src/components/traces/TraceGraph.tsx b/frontend/src/components/traces/TraceGraph.tsx index e3a4484af4..b4d50ee28b 100644 --- a/frontend/src/components/traces/TraceGraph.tsx +++ b/frontend/src/components/traces/TraceGraph.tsx @@ -8,7 +8,6 @@ import * as d3Tip from 'd3-tip'; //import * as d3Tip from 'd3-tip'; // PNOTE - uninstall @types/d3-tip. issues with importing d3-tip https://github.com/Caged/d3-tip/issues/181 -// import styled from 'styled-components'; import './TraceGraph.css' import { spanToTreeUtil } from '../../utils/spanToTree' @@ -31,7 +30,6 @@ const _TraceGraph = (props: TraceGraphProps) => { const [clickedSpanTags,setClickedSpanTags]=useState([]) useEffect( () => { - console.log('inside initial fetch trace for flamegraph') props.fetchTraceItem(params.id); }, []); @@ -45,29 +43,12 @@ const _TraceGraph = (props: TraceGraphProps) => { // if this monitoring of props.traceItem.data is removed then zoom on click doesn't work // Doesn't work if only do initial check, works if monitor an element - as it may get updated in sometime - // PNOTE - Is this being called multiple times? - //PNOTE - Do we fetch trace data again based on id or do we call again using rest calls - // d3-flame-graph repository -- https://github.com/spiermar/d3-flame-graph + - // const tip = d3.tip().attr('class', 'd3-tip').html(function(d) { return d; }); - // const tip = d3Tip.default().attr('class', 'd3-flame-graph-tip').html(function(d:any) { console.log(d);return 'Name -> '+d.data.name+'
Duration -> '+d.data.value}); - //https://stackoverflow.com/questions/5934928/javascript-return-value-for-tooltip -> How to display tooltip - //const tip = d3Tip.default().attr('class', 'd3-tip').html(function(d:any) { console.log(d);return {d.data.name}}); - - // var tip = flamegraph.tooltip.defaultFlamegraphTooltip().html(function(d) { return "name: " + d.data.name + ", value: " + d.data.value; }); const tip = d3Tip.default().attr('class', 'd3-tip').html(function(d:any) { return d.data.name+'
duration: '+d.data.value}); - // PNOTE - Used this example for tooltip styling const onClick = (z:any) => { - // props.tagsInfo(d.data.tags) - // let new_tags = z.data.tags; - // let new_tags = [{ - // key: 'Ankit', - // type: 'testin', - // value: 'Nothing', - // }] - // setClickedSpanTags(new_tags); - // setNum(9); + setClickedSpanTags(z.data.tags); console.log(`Clicked on ${z.data.name}, id: "${z.id}"`); } @@ -86,25 +67,7 @@ const _TraceGraph = (props: TraceGraphProps) => { // .title("Trace Flame graph") .differential(false) .selfValue(true); //sets span width based on value - which is mapped to duration - //PNOTE - // used inverted() instead of passing a function in Sort - // .sort(function(a :pushDStree,b :pushDStree) :number{ - // if(a.startTime < b.startTime) return -1; - // else return 1; - // }) - //removed transition ease - easeCubic as it was giving type error. d3.easeCubic is the default transition easing function - //Example to sort in reverse order - //.sort(function(a,b){ return d3.descending(a.name, b.name);}) - - - - - // PNOTE - filter based on traceid - trace should already be in redux-state, will redux-state become very big if all trace reponses are stored in it - - //if tree - // d3.select("#chart").datum(tree).call(chart) - const resetZoom = () => { chart.resetZoom(); } @@ -136,11 +99,9 @@ const _TraceGraph = (props: TraceGraphProps) => { } const mapStateToProps = (state: StoreState): { traceItem: spansWSameTraceIDResponse } => { - // console.log(state); return { traceItem: state.traceItem }; }; -// the name mapStateToProps is only a convention -// take state and map it to props which are accessible inside this component + export const TraceGraph = connect(mapStateToProps, { fetchTraceItem: fetchTraceItem, diff --git a/frontend/src/components/traces/TraceGraphColumn.tsx b/frontend/src/components/traces/TraceGraphColumn.tsx index e6b147b2d9..b0a26f5635 100644 --- a/frontend/src/components/traces/TraceGraphColumn.tsx +++ b/frontend/src/components/traces/TraceGraphColumn.tsx @@ -29,7 +29,6 @@ const _TraceGraphColumn = (props: TraceGraphColumnProps) => { sortDirections: ['descend', 'ascend'], render: (value: number) => (new Date(Math.round(value/1000))).toUTCString() - // render: (value: number) => (new Date(Math.round(value/1000))).toLocaleDateString()+' '+(new Date(Math.round(value/1000))).toLocaleTimeString() }, { title: 'Duration (in ms)', @@ -49,12 +48,6 @@ const _TraceGraphColumn = (props: TraceGraphColumnProps) => { let dataSource :TableDataSourceItem[] = []; - // PNOTE - Define new array - // if (props.traces.data.length > 0) - // { - // props.traces.data[0].spans.map((item: spanItem, index ) => dataSource.push({startTime: item.startTime, operationName: item.operationName , duration: item.duration, key:index.toString()}) ); - // } - if (props.traces[0].events.length > 0) { props.traces[0].events.map((item: (number|string|string[]|pushDStree[])[], index ) => { @@ -66,7 +59,6 @@ const _TraceGraphColumn = (props: TraceGraphColumnProps) => { return (
- {/*
Tracing Graph Column Page
*/}
; ); @@ -74,10 +66,8 @@ const _TraceGraphColumn = (props: TraceGraphColumnProps) => { } const mapStateToProps = (state: StoreState): { traces: traceResponseNew } => { - // console.log(state); return { traces : state.traces }; }; - // the name mapStateToProps is only a convention - // take state and map it to props which are accessible inside this component + export const TraceGraphColumn = connect(mapStateToProps)(_TraceGraphColumn); \ No newline at end of file diff --git a/frontend/src/components/traces/TraceList.tsx b/frontend/src/components/traces/TraceList.tsx index 2b0fc7d78a..959df73ea3 100644 --- a/frontend/src/components/traces/TraceList.tsx +++ b/frontend/src/components/traces/TraceList.tsx @@ -51,7 +51,6 @@ const _TraceList = (props: TraceListProps) => { // new Date() assumes input in milliseconds. Start Time stamp returned by druid api for span list is in ms - // render: (value: number) => (new Date(Math.round(value/1000))).toLocaleDateString()+' '+(new Date(Math.round(value/1000))).toLocaleTimeString() }, { title: 'Duration (in ms)', @@ -83,9 +82,7 @@ const _TraceList = (props: TraceListProps) => { if (typeof props.traces[0]!== 'undefined' && props.traces[0].events.length > 0) { //PNOTE - Template literal should be wrapped in curly braces for it to be evaluated - // return props.traces.data[0].spans.map((item: spanItem) =>
Span ID is {item.spanID} --- Trace id is {item.traceID}
) - //dataSource.push({spanid:{item.spanID}},traceid:{item.traceID}} - //Populating dataSourceArray + props.traces[0].events.map((item: (number|string|string[]|pushDStree[])[], index ) => { if (typeof item[0] === 'number' && typeof item[4] === 'string' && typeof item[6] === 'string' && typeof item[1] === 'string' && typeof item[2] === 'string' ) dataSource.push({startTime: item[0], operationName: item[4] , duration:parseInt(item[6]), spanid:item[1], traceid:item[2], key:index.toString()}); @@ -96,13 +93,11 @@ const _TraceList = (props: TraceListProps) => { return
; } else { - //return ; return
No spans found for given filter!
} };// end of renderTraces - // console.log(props.traces.data); return(
List of traces with spanID
@@ -110,23 +105,11 @@ const _TraceList = (props: TraceListProps) => {
) - // PNOTE - code snippet - - // return props.traces.data.map((item) => { - // return ( - //
- // {item.traceID} - //
- // ); - // }); - } const mapStateToProps = (state: StoreState): { traces: traceResponseNew } => { - // console.log(state); return { traces : state.traces }; }; -// the name mapStateToProps is only a convention -// take state and map it to props which are accessible inside this component export const TraceList = connect(mapStateToProps, { fetchTraces: fetchTraces, diff --git a/frontend/src/components/usage/UsageExplorer.tsx b/frontend/src/components/usage/UsageExplorer.tsx index 3b3548d41c..8b790c35fb 100644 --- a/frontend/src/components/usage/UsageExplorer.tsx +++ b/frontend/src/components/usage/UsageExplorer.tsx @@ -62,7 +62,6 @@ const _UsageExplorer = (props: UsageExplorerProps) => { return( - {/*
Usage Explorer
*/} {/* PNOTE - TODO - Keep it in reponsive row column tab */} @@ -73,11 +72,8 @@ const _UsageExplorer = (props: UsageExplorerProps) => { } const mapStateToProps = (state: StoreState): { usageData: usageDataItem[], globalTime: GlobalTime } => { - // console.log(state); return { usageData : state.usageDate, globalTime: state.globalTime }; }; -// the name mapStateToProps is only a convention -// take state and map it to props which are accessible inside this component export const UsageExplorer = connect(mapStateToProps, { getUsageData: getUsageData, diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index 37e3e757f7..0dd4771c65 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -13,7 +13,7 @@ import { reducers } from './reducers'; const store = createStore(reducers, applyMiddleware(thunk)) const themes = { - dark: `${process.env.PUBLIC_URL}/dark-theme.css`, // How is process.env.PUBLIC_URL defined? - even when we are not using gitlab ci + dark: `${process.env.PUBLIC_URL}/dark-theme.css`, light: `${process.env.PUBLIC_URL}/light-theme.css`, }; diff --git a/frontend/src/reducers/index.ts b/frontend/src/reducers/index.ts index 84967994f5..9c71904630 100644 --- a/frontend/src/reducers/index.ts +++ b/frontend/src/reducers/index.ts @@ -32,4 +32,3 @@ export const reducers = combineReducers({ filteredTraceMetrics:filteredTraceMetricsReducer, }); -//input state should ideally be in component state rather than redux application state diff --git a/frontend/src/reducers/traceFilters.ts b/frontend/src/reducers/traceFilters.ts index 871fecbe6c..7650986b58 100644 --- a/frontend/src/reducers/traceFilters.ts +++ b/frontend/src/reducers/traceFilters.ts @@ -1,6 +1,5 @@ import { ActionTypes, TraceFilters, updateInputTagAction, updateTraceFiltersAction } from '../actions'; -// does each reducer process individual states? Yes. Slice of the state export const traceFiltersReducer = (state:TraceFilters = {'service':'', 'tags':[],'operation':'','latency':{'min':'','max':''}}, action: updateTraceFiltersAction) => { switch (action.type){ diff --git a/frontend/src/reducers/traces.ts b/frontend/src/reducers/traces.ts index abfce0fcd2..e6a27a208f 100644 --- a/frontend/src/reducers/traces.ts +++ b/frontend/src/reducers/traces.ts @@ -2,8 +2,6 @@ import { ActionTypes, Action, traceResponseNew, spanList, spansWSameTraceIDRespo // PNOTE - Initializing is a must for state variable otherwise it gives an error in reducer var spanlistinstance :spanList ={ events: [], segmentID: '', columns: []} ; -// let traceResponseNew_instance : traceResponseNew; -// traceResponseNew_instance = [spanlistinstance]; export const tracesReducer = (state: traceResponseNew = {"0": spanlistinstance} , action: Action) => { switch (action.type) { case ActionTypes.fetchTraces: diff --git a/frontend/src/utils/spanToTree.ts b/frontend/src/utils/spanToTree.ts index 968cf3e6d4..98b780cb05 100644 --- a/frontend/src/utils/spanToTree.ts +++ b/frontend/src/utils/spanToTree.ts @@ -12,15 +12,12 @@ export const spanToTreeUtil = (spanlist :span[]) :pushDStree => { // let spans :spanItem[]= trace.spans; if(spanlist){ - // console.log('spans',spans.length) - // - // console.log(processes) + // Create a dict with spanIDs as keys // PNOTE // Can we now assign different strings as id - Yes // https://stackoverflow.com/questions/15877362/declare-and-initialize-a-dictionary-in-typescript - // SPAN TREE processing is let mapped_array : {[id: string] : span;} = {}; @@ -28,7 +25,6 @@ export const spanToTreeUtil = (spanlist :span[]) :pushDStree => { mapped_array[spanlist[i][1]] = spanlist[i]; mapped_array[spanlist[i][1]][10] = []; } - // console.log('mapped_array',mapped_array) for(let id in mapped_array){ let child_span = mapped_array[id]; @@ -70,8 +66,6 @@ export const spanToTreeUtil = (spanlist :span[]) :pushDStree => { let references :RefItem[] = []; refArray.forEach(element => { - // element = element.replaceAll("=", ":") - // let refObj = JSON.parse(element) element = element.replaceAll("{", "").replaceAll("}", "").replaceAll(" ", "") let arr = element.split(",") let refItem = {"traceID": "", "spanID": "", "refType": ""};