New metrics graph support

deploy/docker-compose.yml

@@ -82,6 +82,7 @@ services:
       - AWS_ACCESS_KEY_ID=$AWS_ACCESS_KEY_ID
       - AWS_SECRET_ACCESS_KEY=$AWS_SECRET_ACCESS_KEY
       - AWS_SESSION_TOKEN=$AWS_SESSION_TOKEN
+      - AWS_DEFAULT_REGION=$AWS_REGION
 # for debug
 #    ports:
 #      - "8888:80"

src/gprofiler/backend/models/metrics_models.py

@@ -70,6 +70,18 @@ class MetricSummary(Metric):
 class MetricGraph(Metric):
     uniq_hostnames: Optional[int]
     time: datetime
+    avg_frequency: Optional[float]
+    max_frequency: Optional[float]
+    avg_cpi_count: Optional[float]
+    max_cpi_count: Optional[float]
+    avg_tma_front_end_bound: Optional[float]
+    max_tma_front_end_bound: Optional[float]
+    avg_tma_backend_bound: Optional[float]
+    max_tma_backend_bound: Optional[float]
+    avg_tma_bad_spec: Optional[float]
+    max_tma_bad_spec: Optional[float]
+    avg_tma_retiring: Optional[float]
+    max_tma_retiring: Optional[float]
 
 
 class MetricNodesCoresSummary(BaseModel):

src/gprofiler/frontend/src/api/hooks/useGetServiceMemoryAndCpu.jsx → src/gprofiler/frontend/src/api/hooks/useGetServiceMetrics.jsx

@@ -30,7 +30,7 @@ const areParamsDefined = (selectedService, timeSelection) => {
     return !_.isUndefined(selectedService) && !_.isUndefined(timeSelection);
 };
 
-const useGetServiceMemoryAndCpu = ({ resolution }) => {
+const useGetServiceMetrics = ({ resolution }) => {
     const { selectedService, timeSelection } = useContext(SelectorsContext);
     const { activeFilterTag } = useContext(FilterTagsContext);
     const metricsParams = {
@@ -41,9 +41,9 @@ const useGetServiceMemoryAndCpu = ({ resolution }) => {
 
     const timeParams = getStartEndDateTimeFromSelection(timeSelection);
     const {
-        data: memoryAndCpuData,
-        loading: memoryAndCupLoading,
-        run: callMemoryAndCpuGraph,
+        data: metricsData,
+        loading: metricsLoading,
+        run: callMetricsGraph,
     } = useFetchWithRequest(
         {
             url: DATA_URLS.GET_GRAPH_METRICS + '?' + stringify(_.assign({ ...timeParams }, metricsParams)),
@@ -55,10 +55,10 @@ const useGetServiceMemoryAndCpu = ({ resolution }) => {
     );
 
     return {
-        memoryAndCpuData: memoryAndCpuData,
-        memoryAndCupLoading,
-        callMemoryAndCpuGraph,
+        metricsData,
+        metricsLoading,
+        callMetricsGraph,
     };
 };
 
-export default useGetServiceMemoryAndCpu;
+export default useGetServiceMetrics;

src/gprofiler/frontend/src/components/profiles/views/service/ServiceGraph.jsx

@@ -19,13 +19,19 @@
 import TabContext from '@mui/lab/TabContext';
 import { Box } from '@mui/material';
 import Typography from '@mui/material/Typography';
-import { memo, useCallback, useContext, useEffect, useState } from 'react';
+import { memo, useCallback, useContext, useState } from 'react';
 
-import useGetServiceMemoryAndCpu from '@/api/hooks/useGetServiceMemoryAndCpu';
+import useGetServiceMetrics from '@/api/hooks/useGetServiceMetrics';
 import useGetServiceNodesAndCores from '@/api/hooks/useGetServiceNodesAndCores';
 import useGetServiceSamples from '@/api/hooks/useGetServiceSamples';
 import Flexbox from '@/components/common/layout/Flexbox';
+import CpiCountGraph from '@/components/profiles/views/service/graphs/CpiCountGraph';
 import ResoultionDropDown from '@/components/profiles/views/service/ResolutionDropDown';
+import TmaBackendBoundGraph from '@/components/profiles/views/service/graphs/TmaBackendBoundGraph';
+import TmaBadSpecGraph from '@/components/profiles/views/service/graphs/TmaBadSpecGraph';
+import TmaFrontEndBoundGraph from '@/components/profiles/views/service/graphs/TmaFrontEndBoundGraph';
+import TmaRetiringGraph from '@/components/profiles/views/service/graphs/TmaRetiringGraph';
+import FrequencyGraph from '@/components/profiles/views/service/graphs/FrequencyGraph';
 import { SelectorsContext } from '@/states';
 
 import CoresGraph from './graphs/CoresGraph';
@@ -44,7 +50,7 @@ const ServiceGraph = memo(() => {
 
     const { samplesData, samplesLoading } = useGetServiceSamples({ resolution: resolutionValue });
 
-    const { memoryAndCpuData, memoryAndCpuLoading } = useGetServiceMemoryAndCpu({ resolution: resolutionValue });
+    const { metricsData, metricsLoading } = useGetServiceMetrics({ resolution: resolutionValue });
     const { nodesAndCoresData, nodesAndCoresLoading } = useGetServiceNodesAndCores({
         resolution: resolutionValue,
     });
@@ -65,18 +71,29 @@ const ServiceGraph = memo(() => {
     const changeTab = (event, newTab) => {
         setSelectedGraphTab(newTab);
     };
-
+    const isTmaFrontEndBoundExist = !!metricsData?.find((metric) => (metric?.avg_tma_front_end_bound || metric?.max_tma_front_end_bound));
+    const isTmaBackendBoundExist = !!metricsData?.find((metric) => (metric?.avg_tma_backend_bound || metric?.max_tma_backend_bound));
+    const isTmaBadSpecExist = !!metricsData?.find((metric) => (metric?.avg_tma_bad_spec || metric?.max_tma_bad_spec));
+    const isTmaRetiringExist = !!metricsData?.find((metric) => (metric?.avg_tma_retiring || metric?.max_tma_retiring));
+    const isCpiCountExist = !!metricsData?.find((metric) => (metric?.avg_cpi_count || metric?.max_cpi_count));
+    const isFrequencyExist = !!metricsData?.find((metric) => (metric?.avg_frequency || metric?.max_frequency));
     return (
         <Box sx={{ backgroundColor: 'fieldBlue.main', p: 8, pt: 6, borderRadius: 2, height: '340px' }}>
             <TabContext value={selectedGraphTab}>
                 <Flexbox column={false} justifyContent={'space-between'} alignItems={'flex-start'}>
-                    <Box sx={{ borderBottom: 1, borderColor: 'divider', width: '370px', mb: 8 }}>
+                    <Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 8 }}>
                         <StyledTabs onChange={changeTab}>
                             <StyledTab label='CPU' value='1' />
                             <StyledTab label='MEMORY' value='2' />
                             <StyledTab label='SAMPLES' value='3' />
                             <StyledTab label='NODES' value='4' />
                             <StyledTab label='CORES' value='5' />
+                            {isTmaFrontEndBoundExist && <StyledTab label='TMA FRONT END BOUND' value='6' />}
+                            {isTmaBackendBoundExist && <StyledTab label='TMA BACKEND BOUND' value='7' />}
+                            {isTmaBadSpecExist && <StyledTab label='TMA BAD SPEC' value='8' />}
+                            {isTmaRetiringExist && <StyledTab label='TMA RETIRING' value='9' />}
+                            {isCpiCountExist && <StyledTab label='CPI COUNT' value='10' />}
+                            {isFrequencyExist && <StyledTab label='FREQUENCY' value='11' />}
                         </StyledTabs>
                     </Box>
                     <Flexbox alignItems={'center'} sx={{ width: '200px' }}>
@@ -89,17 +106,17 @@ const ServiceGraph = memo(() => {
                     </Flexbox>
                 </Flexbox>
                 <StyledTabPanel value='1'>
-                    {memoryAndCpuLoading ? (
+                    {metricsLoading ? (
                         <GraphSkeleton />
                     ) : (
-                        <CpuGraph data={memoryAndCpuData} edges={edges} setZoomedTime={setZoomedTime} />
+                        <CpuGraph data={metricsData} edges={edges} setZoomedTime={setZoomedTime} />
                     )}
                 </StyledTabPanel>
                 <StyledTabPanel value='2'>
-                    {memoryAndCpuLoading ? (
+                    {metricsLoading ? (
                         <GraphSkeleton />
                     ) : (
-                        <MemoryGraph data={memoryAndCpuData} edges={edges} setZoomedTime={setZoomedTime} />
+                        <MemoryGraph data={metricsData} edges={edges} setZoomedTime={setZoomedTime} />
                     )}
                 </StyledTabPanel>
                 <StyledTabPanel value='3'>
@@ -123,6 +140,48 @@ const ServiceGraph = memo(() => {
                         <CoresGraph data={nodesAndCoresData} edges={edges} setZoomedTime={setZoomedTime} />
                     )}
                 </StyledTabPanel>
+                <StyledTabPanel value='6'>
+                    {metricsLoading ? (
+                        <GraphSkeleton />
+                    ) : (
+                        <TmaFrontEndBoundGraph data={metricsData} edges={edges} setZoomedTime={setZoomedTime} />
+                    )}
+                </StyledTabPanel>
+                <StyledTabPanel value='7'>
+                    {metricsLoading ? (
+                        <GraphSkeleton />
+                    ) : (
+                        <TmaBackendBoundGraph data={metricsData} edges={edges} setZoomedTime={setZoomedTime} />
+                    )}
+                </StyledTabPanel>
+                <StyledTabPanel value='8'>
+                    {metricsLoading ? (
+                        <GraphSkeleton />
+                    ) : (
+                        <TmaBadSpecGraph data={metricsData} edges={edges} setZoomedTime={setZoomedTime} />
+                    )}
+                </StyledTabPanel>
+                <StyledTabPanel value='9'>
+                    {metricsLoading ? (
+                        <GraphSkeleton />
+                    ) : (
+                        <TmaRetiringGraph data={metricsData} edges={edges} setZoomedTime={setZoomedTime} />
+                    )}
+                </StyledTabPanel>
+                <StyledTabPanel value='10'>
+                    {metricsLoading ? (
+                        <GraphSkeleton />
+                    ) : (
+                        <CpiCountGraph data={metricsData} edges={edges} setZoomedTime={setZoomedTime} />
+                    )}
+                </StyledTabPanel>
+                <StyledTabPanel value='11'>
+                    {metricsLoading ? (
+                        <GraphSkeleton />
+                    ) : (
+                        <FrequencyGraph data={metricsData} edges={edges} setZoomedTime={setZoomedTime} />
+                    )}
+                </StyledTabPanel>
             </TabContext>
         </Box>
     );

src/gprofiler/frontend/src/components/profiles/views/service/graphs/CpiCountGraph.jsx

@@ -0,0 +1,42 @@
+{
+    /*
+     * Copyright (C) 2023 Intel Corporation
+     *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *    http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+}
+
+import 'chartjs-adapter-date-fns';
+
+import { CategoryScale, Chart as ChartJS, LinearScale, LineElement, PointElement, TimeScale, Tooltip } from 'chart.js';
+import zoomPlugin from 'chartjs-plugin-zoom';
+import { useEffect, useState } from 'react';
+import { Line } from 'react-chartjs-2';
+
+import { calcGraphData, calcGraphOptions } from './graphUtils';
+
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Tooltip, TimeScale, zoomPlugin);
+
+const CpiCountGraph = ({ data, edges, setZoomedTime }) => {
+    const [parsedData, setParsedData] = useState(calcGraphData(data, edges, 'avg_cpi_count', 'max_cpi_count'));
+    const [options, setOptions] = useState(calcGraphOptions(data, setZoomedTime));
+
+    useEffect(() => {
+        setParsedData(calcGraphData(data, edges, 'avg_cpi_count', 'max_cpi_count'));
+        setOptions(calcGraphOptions(data, setZoomedTime));
+    }, [data, edges, setZoomedTime]);
+
+    return <Line options={options} data={parsedData} />;
+};
+
+export default CpiCountGraph;

src/gprofiler/frontend/src/components/profiles/views/service/graphs/FrequencyGraph.jsx

@@ -0,0 +1,42 @@
+{
+    /*
+     * Copyright (C) 2023 Intel Corporation
+     *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *    http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+}
+
+import 'chartjs-adapter-date-fns';
+
+import { CategoryScale, Chart as ChartJS, LinearScale, LineElement, PointElement, TimeScale, Tooltip } from 'chart.js';
+import zoomPlugin from 'chartjs-plugin-zoom';
+import { useEffect, useState } from 'react';
+import { Line } from 'react-chartjs-2';
+
+import { calcGraphData, calcGraphOptions } from './graphUtils';
+
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Tooltip, TimeScale, zoomPlugin);
+
+const FrequencyGraph = ({ data, edges, setZoomedTime }) => {
+    const [parsedData, setParsedData] = useState(calcGraphData(data, edges, 'avg_frequency', 'max_frequency'));
+    const [options, setOptions] = useState(calcGraphOptions(data, setZoomedTime));
+
+    useEffect(() => {
+        setParsedData(calcGraphData(data, edges, 'avg_frequency', 'max_frequency'));
+        setOptions(calcGraphOptions(data, setZoomedTime));
+    }, [data, edges, setZoomedTime]);
+
+    return <Line options={options} data={parsedData} />;
+};
+
+export default FrequencyGraph;

src/gprofiler/frontend/src/components/profiles/views/service/graphs/TmaBackendBoundGraph.jsx

@@ -0,0 +1,42 @@
+{
+    /*
+     * Copyright (C) 2023 Intel Corporation
+     *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *    http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+}
+
+import 'chartjs-adapter-date-fns';
+
+import { CategoryScale, Chart as ChartJS, LinearScale, LineElement, PointElement, TimeScale, Tooltip } from 'chart.js';
+import zoomPlugin from 'chartjs-plugin-zoom';
+import { useEffect, useState } from 'react';
+import { Line } from 'react-chartjs-2';
+
+import { calcGraphData, calcGraphOptions } from './graphUtils';
+
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Tooltip, TimeScale, zoomPlugin);
+
+const TmaBackendBoundGraph = ({ data, edges, setZoomedTime }) => {
+    const [parsedData, setParsedData] = useState(calcGraphData(data, edges, 'avg_tma_backend_bound', 'max_tma_backend_bound'));
+    const [options, setOptions] = useState(calcGraphOptions(data, setZoomedTime));
+
+    useEffect(() => {
+        setParsedData(calcGraphData(data, edges, 'avg_tma_backend_bound', 'max_tma_backend_bound'));
+        setOptions(calcGraphOptions(data, setZoomedTime));
+    }, [data, edges, setZoomedTime]);
+
+    return <Line options={options} data={parsedData} />;
+};
+
+export default TmaBackendBoundGraph;

src/gprofiler/frontend/src/components/profiles/views/service/graphs/TmaBadSpecGraph.jsx

@@ -0,0 +1,42 @@
+{
+    /*
+     * Copyright (C) 2023 Intel Corporation
+     *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *    http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+}
+
+import 'chartjs-adapter-date-fns';
+
+import { CategoryScale, Chart as ChartJS, LinearScale, LineElement, PointElement, TimeScale, Tooltip } from 'chart.js';
+import zoomPlugin from 'chartjs-plugin-zoom';
+import { useEffect, useState } from 'react';
+import { Line } from 'react-chartjs-2';
+
+import { calcGraphData, calcGraphOptions } from './graphUtils';
+
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Tooltip, TimeScale, zoomPlugin);
+
+const TmaBadSpecGraph = ({ data, edges, setZoomedTime }) => {
+    const [parsedData, setParsedData] = useState(calcGraphData(data, edges, 'avg_tma_bad_spec', 'max_tma_bad_spec'));
+    const [options, setOptions] = useState(calcGraphOptions(data, setZoomedTime));
+
+    useEffect(() => {
+        setParsedData(calcGraphData(data, edges, 'avg_tma_bad_spec', 'max_tma_bad_spec'));
+        setOptions(calcGraphOptions(data, setZoomedTime));
+    }, [data, edges, setZoomedTime]);
+
+    return <Line options={options} data={parsedData} />;
+};
+
+export default TmaBadSpecGraph;