| <!DOCTYPE html> |
| <html lang="en"> |
| <!-- Global site tag (gtag.js) - Google Analytics --> |
| <script async src="https://www.googletagmanager.com/gtag/js?id=UA-112407000-2"></script> |
| <script> |
| window.dataLayer = window.dataLayer || []; |
| |
| function gtag() { |
| dataLayer.push(arguments); |
| } |
| gtag('js', new Date()); |
| |
| gtag('config', 'UA-112407000-2'); |
| </script> |
| |
| <!-- Google Tag Manager --> |
| <script> |
| (function (w, d, s, l, i) { |
| w[l] = w[l] || []; |
| w[l].push({ |
| 'gtm.start': new Date().getTime(), |
| event: 'gtm.js' |
| }); |
| var f = d.getElementsByTagName(s)[0], |
| j = d.createElement(s), |
| dl = l != 'dataLayer' ? '&l=' + l : ''; |
| j.async = true; |
| j.src = |
| 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; |
| f.parentNode.insertBefore(j, f); |
| })(window, document, 'script', 'dataLayer', 'GTM-KS8HHSF'); |
| </script> |
| <!-- End Google Tag Manager --> |
| |
| <head> |
| <title>Understanding the Metrics Dashboard | Codewind</title> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <meta name="description" content="Understanding the Metrics Dashboard"> |
| <meta name="keywords" content="import, help, metrics, Swift, Node.js, Java, performance monitoring, app monitor, dashboard, CPU, HTTP incoming requests, memory, HTTP throughput, Heap, HTTP..."/> |
| <link rel="icon" type="image/png" sizes="16x16" href="images/favicon/favicon-16x16.png"> |
| <link rel="icon" type="image/png" sizes="32x32" href="images/favicon/favicon-32x32.png"> |
| <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300,400,600&display=swap" rel="stylesheet"> |
| <!-- Bootstrap CSS CDN --> |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" |
| integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> |
| <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> |
| <link rel="stylesheet" href="css/styles.css"> |
| <link rel="stylesheet" href="css/docs.css"> |
| <link rel="stylesheet" href="css/blog.css"> |
| <link rel="stylesheet" href="css/guides.css"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism.min.css"> |
| |
| |
| </head> |
| |
| <body data-spy="scroll" data-target="#toc"> |
| <!-- Google Tag Manager (noscript) --> |
| <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KS8HHSF" |
| height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> |
| <!-- End Google Tag Manager (noscript) --> |
| <div class="main"> |
| <!-- Bootstrap NavBar --> |
| <nav class="navbar navbar-expand-lg navbar-light cw-banner fixed-top" aria-label="topnav"> |
| <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" |
| data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" |
| aria-label="Toggle navigation"> |
| <span class="navbar-toggler-icon"></span> |
| </button> |
| <a class="navbar-brand" href="/codewind/"> |
| <img alt="Codewind logo image" title="Codewind logo image" src="images/header/header-logo.svg" class="cw-header-logo" alt=""> |
| </a> |
| <div class="collapse navbar-collapse justify-content-end cw-navbar-padding" id="navbarNavDropdown"> |
| <ul class="navbar-nav cw-navbar-nav"> |
| |
| <li class="nav-item cw-navbar-item cw-header-link-docs"> |
| <a class="nav-link cw-nav-link cw-header-link-text" href="overview.html">Docs</a> |
| </li> |
| <li class="nav-item cw-navbar-item cw-header-link-news"> |
| <a class="nav-link cw-nav-link cw-header-link-text" href="news.html">News</a> |
| </li> |
| |
| <li class="nav-item cw-navbar-item cw-header-link-blog"> |
| <a class="nav-link cw-nav-link cw-header-link-text" href="blog.html">Blog</a> |
| </li> |
| |
| <li class="nav-item cw-navbar-item cw-header-link-guides"> |
| <a class="nav-link cw-nav-link cw-header-link-text" href="guides.html">Guides</a> |
| </li> |
| |
| <li class="nav-item cw-navbar-item cw-header-link"> |
| <a class="nav-link cw-nav-link" href="https://github.com/eclipse/codewind"><img alt="Codewind Github" class="banner-image" title="Codewind Github" data-toggle="tooltip" data-placement="top" id="cw_github_stars" title="..." src="images/header/github.svg"/></a> |
| </li> |
| |
| <li class="nav-item cw-navbar-item cw-header-link"> |
| <a class="nav-link cw-nav-link" href="https://twitter.com/EclipseCodewind"><img alt="Codewind Twitter" class="banner-image" title="Codewind Twitter" src="images/header/twitter.png"/></a> |
| </li> |
| <li class="nav-item cw-navbar-item cw-header-link"> |
| <a class="nav-link cw-nav-link" href="https://mattermost.eclipse.org/eclipse/channels/eclipse-codewind"><img alt="Codewind Mattermost" class="banner-image" title="Codewind Mattermost" src="images/header/mattermost.png"/></a> |
| </li> |
| <li class="nav-item cw-navbar-item cw-header-link"> |
| <a class="nav-link cw-nav-link" href="https://www.youtube.com/channel/UCnKCVK6RFDyHFqUmXlAhCHQ"><img alt="Codewind YouTube" class="banner-image" title="Codewind YouTube" src="images/header/youtube.png"/></a> |
| </li> |
| |
| |
| <!-- li class="nav-item cw-navbar-item" id="download-li"> |
| <button onClick="window.location.href='https://microclimate.dev/download/codewind';" type="button" class="btn cw-download-button">Download</button> |
| <a href="https://microclimate.dev/download/codewind" class="nav-link cw-nav-link cw-download-link" href="#">Download</a> |
| </li> --> |
| |
| |
| |
| <!-- Smaller devices menu END --> |
| |
| </ul> |
| </div> |
| |
| </nav> |
| <!-- End Bootstrap NavBar --> |
| <!-- Bootstrap row --> |
| <div class="row" id="body-row"> |
| <!-- Sidebar --> |
| <div id="sidebar-container" class="bg-light" role="navigation" aria-label="sidebar"> |
| <!-- Bootstrap List Group --> |
| <ul class="list-group sticky-top bg-light cw-sticky-offset"> |
| |
| |
| |
| |
| <a href="overview.html" class="bg-light list-group-item list-group-item-action flex-column align-items-start" data-url="overview.html"> |
| What is Codewind? |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="#getting_started" id="#getting_started" class="bg-light list-group-item list-group-item-action flex-column align-items-start" data-toggle="collapse" aria-expanded="false">Getting started<span class="submenu-icon"></span></a> |
| <div class="cw-sidebar-div cw-sidebar-submenu collapse" id="getting_started"> |
| |
| |
| |
| |
| <a href="gettingstarted.html" class="bg-light list-group-item" data-parent="#getting_started" data-url="gettingstarted.html">Overview: Getting started</a> |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="#vs_code" id="#vs_code" class="bg-light list-group-item list-group-item-action flex-column align-items-start" data-toggle="collapse" data-parent="#getting_started" aria-expanded="false">VS Code<span class="submenu-icon"></span></a> |
| |
| <div class="cw-sidebar-div cw-sidebar-submenu-submenu collapse" id="vs_code"> |
| |
| |
| <a href="vsc-getting-started.html" class="bg-light list-group-item" data-parent="#vs_code" data-url="vsc-getting-started.html">Installing Codewind for VS Code</a> |
| |
| <a href="vsc-firstproject.html" class="bg-light list-group-item" data-parent="#vs_code" data-url="vsc-firstproject.html">Creating your first Codewind project with Codewind for VS Code</a> |
| |
| <a href="vsc-codechange.html" class="bg-light list-group-item" data-parent="#vs_code" data-url="vsc-codechange.html">Making a code change with VS Code</a> |
| |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="#eclipse" id="#eclipse" class="bg-light list-group-item list-group-item-action flex-column align-items-start" data-toggle="collapse" data-parent="#getting_started" aria-expanded="false">Eclipse<span class="submenu-icon"></span></a> |
| |
| <div class="cw-sidebar-div cw-sidebar-submenu-submenu collapse" id="eclipse"> |
| |
| |
| <a href="eclipse-getting-started.html" class="bg-light list-group-item" data-parent="#eclipse" data-url="eclipse-getting-started.html">Installing Codewind for Eclipse</a> |
| |
| <a href="eclipse-firstproject.html" class="bg-light list-group-item" data-parent="#eclipse" data-url="eclipse-firstproject.html">Creating your first Codewind project with Codewind for Eclipse</a> |
| |
| <a href="eclipse-codechange.html" class="bg-light list-group-item" data-parent="#eclipse" data-url="eclipse-codechange.html">Making a code change with Eclipse</a> |
| |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="#intellij" id="#intellij" class="bg-light list-group-item list-group-item-action flex-column align-items-start" data-toggle="collapse" data-parent="#getting_started" aria-expanded="false">IntelliJ<span class="submenu-icon"></span></a> |
| |
| <div class="cw-sidebar-div cw-sidebar-submenu-submenu collapse" id="intellij"> |
| |
| |
| <a href="intellij-getting-started.html" class="bg-light list-group-item" data-parent="#intellij" data-url="intellij-getting-started.html">Installing Codewind for IntelliJ</a> |
| |
| <a href="intellij-firstproject.html" class="bg-light list-group-item" data-parent="#intellij" data-url="intellij-firstproject.html">Creating your first Codewind project with Codewind for IntelliJ</a> |
| |
| <a href="intellij-codechange.html" class="bg-light list-group-item" data-parent="#intellij" data-url="intellij-codechange.html">Making a code change with IntelliJ</a> |
| |
| </div> |
| |
| |
| |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="#using_codewind_as_a_hosted_application_on_the_cloud" id="#using_codewind_as_a_hosted_application_on_the_cloud" class="bg-light list-group-item list-group-item-action flex-column align-items-start" data-toggle="collapse" aria-expanded="false">Using Codewind as a hosted application on the cloud<span class="submenu-icon"></span></a> |
| <div class="cw-sidebar-div cw-sidebar-submenu collapse" id="using_codewind_as_a_hosted_application_on_the_cloud"> |
| |
| |
| |
| |
| <a href="eclipseche-codewind-overview.html" class="bg-light list-group-item" data-parent="#using_codewind_as_a_hosted_application_on_the_cloud" data-url="eclipseche-codewind-overview.html">Overview: Using Codewind as a hosted application on the cloud</a> |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="#eclipse_che" id="#eclipse_che" class="bg-light list-group-item list-group-item-action flex-column align-items-start" data-toggle="collapse" data-parent="#using_codewind_as_a_hosted_application_on_the_cloud" aria-expanded="false">Eclipse Che<span class="submenu-icon"></span></a> |
| |
| <div class="cw-sidebar-div cw-sidebar-submenu-submenu collapse" id="eclipse_che"> |
| |
| |
| <a href="che-installinfo.html" class="bg-light list-group-item" data-parent="#eclipse_che" data-url="che-installinfo.html">Installing Eclipse Che for Codewind</a> |
| |
| <a href="che-createcodewindworkspace.html" class="bg-light list-group-item" data-parent="#eclipse_che" data-url="che-createcodewindworkspace.html">Creating a Codewind workspace in Che</a> |
| |
| <a href="che-setupregistries.html" class="bg-light list-group-item" data-parent="#eclipse_che" data-url="che-setupregistries.html">Adding an image registry in Codewind in Che</a> |
| |
| <a href="che-codechange.html" class="bg-light list-group-item" data-parent="#eclipse_che" data-url="che-codechange.html">Making a code change with Codewind for Eclipse Che</a> |
| |
| <a href="che-createfirstproject.html" class="bg-light list-group-item" data-parent="#eclipse_che" data-url="che-createfirstproject.html">Creating your first Codewind project with Codewind for Eclipse Che</a> |
| |
| <a href="che-tektonpipelines.html" class="bg-light list-group-item" data-parent="#eclipse_che" data-url="che-tektonpipelines.html">Configuring Codewind for Tekton pipelines</a> |
| |
| <a href="che-odo-support.html" class="bg-light list-group-item" data-parent="#eclipse_che" data-url="che-odo-support.html">OpenShift Do (odo) support in Codewind</a> |
| |
| <a href="openshiftregistry.html" class="bg-light list-group-item" data-parent="#eclipse_che" data-url="openshiftregistry.html">Adding the OpenShift internal registry with Codewind</a> |
| |
| <a href="che-uninstall.html" class="bg-light list-group-item" data-parent="#eclipse_che" data-url="che-uninstall.html">Uninstalling Codewind for Eclipse Che</a> |
| |
| </div> |
| |
| |
| |
| </div> |
| |
| |
| |
| |
| |
| <a href="remote-deploying-codewind.html" class="bg-light list-group-item list-group-item-action flex-column align-items-start" data-url="remote-deploying-codewind.html"> |
| Deploying Codewind remotely |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="#using_codewind_remotely" id="#using_codewind_remotely" class="bg-light list-group-item list-group-item-action flex-column align-items-start" data-toggle="collapse" aria-expanded="false">Using Codewind remotely<span class="submenu-icon"></span></a> |
| <div class="cw-sidebar-div cw-sidebar-submenu collapse" id="using_codewind_remotely"> |
| |
| |
| |
| |
| <a href="remote-codewind-overview.html" class="bg-light list-group-item" data-parent="#using_codewind_remotely" data-url="remote-codewind-overview.html">Overview: Using Codewind remotely</a> |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="#connecting_your_ide_to_remote_codewind" id="#connecting_your_ide_to_remote_codewind" class="bg-light list-group-item list-group-item-action flex-column align-items-start" data-toggle="collapse" data-parent="#using_codewind_remotely" aria-expanded="false">Connecting your IDE to remote Codewind<span class="submenu-icon"></span></a> |
| |
| <div class="cw-sidebar-div cw-sidebar-submenu-submenu collapse" id="connecting_your_ide_to_remote_codewind"> |
| |
| |
| <a href="remotedeploy-vscode.html" class="bg-light list-group-item" data-parent="#connecting_your_ide_to_remote_codewind" data-url="remotedeploy-vscode.html">Connecting VS Code to remote Codewind</a> |
| |
| <a href="remotedeploy-eclipse.html" class="bg-light list-group-item" data-parent="#connecting_your_ide_to_remote_codewind" data-url="remotedeploy-eclipse.html">Connecting Eclipse to remote Codewind</a> |
| |
| </div> |
| |
| |
| |
| |
| |
| <a href="remote-setupregistries.html" class="bg-light list-group-item" data-parent="#using_codewind_remotely" data-url="remote-setupregistries.html">Adding an image registry in remote Codewind</a> |
| |
| |
| |
| |
| |
| <a href="remotedeploy-projects-vscode.html" class="bg-light list-group-item" data-parent="#using_codewind_remotely" data-url="remotedeploy-projects-vscode.html">Creating and importing projects</a> |
| |
| |
| |
| </div> |
| |
| |
| |
| |
| |
| <a href="workingwithtemplates.html" class="bg-light list-group-item list-group-item-action flex-column align-items-start" data-url="workingwithtemplates.html"> |
| Working with templates |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="#developing_projects" id="#developing_projects" class="bg-light list-group-item list-group-item-action flex-column align-items-start" data-toggle="collapse" aria-expanded="false">Developing projects<span class="submenu-icon"></span></a> |
| <div class="cw-sidebar-div cw-sidebar-submenu collapse" id="developing_projects"> |
| |
| |
| |
| |
| <a href="checkingstatuses.html" class="bg-light list-group-item" data-parent="#developing_projects" data-url="checkingstatuses.html">Understanding application and build statuses</a> |
| |
| |
| |
| |
| |
| <a href="importing-existing-projects.html" class="bg-light list-group-item" data-parent="#developing_projects" data-url="importing-existing-projects.html">Importing existing projects</a> |
| |
| |
| |
| |
| |
| <a href="project-actions.html" class="bg-light list-group-item" data-parent="#developing_projects" data-url="project-actions.html">Project actions</a> |
| |
| |
| |
| |
| |
| <a href="project-settings.html" class="bg-light list-group-item" data-parent="#developing_projects" data-url="project-settings.html">Project settings</a> |
| |
| |
| |
| |
| |
| <a href="referencing-files.html" class="bg-light list-group-item" data-parent="#developing_projects" data-url="referencing-files.html">Referencing files external to a project</a> |
| |
| |
| |
| |
| |
| <a href="private-registries.html" class="bg-light list-group-item" data-parent="#developing_projects" data-url="private-registries.html">Developing with packages from private registries and repositories</a> |
| |
| |
| |
| |
| |
| <a href="offline-codewind.html" class="bg-light list-group-item" data-parent="#developing_projects" data-url="offline-codewind.html">Using Codewind offline</a> |
| |
| |
| |
| |
| |
| <a href="debugging.html" class="bg-light list-group-item" data-parent="#developing_projects" data-url="debugging.html">Debugging in Codewind</a> |
| |
| |
| |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="#performance_monitoring" id="#performance_monitoring" class="bg-light list-group-item list-group-item-action flex-column align-items-start" data-toggle="collapse" aria-expanded="false">Performance monitoring<span class="submenu-icon"></span></a> |
| <div class="cw-sidebar-div cw-sidebar-submenu collapse" id="performance_monitoring"> |
| |
| |
| |
| |
| <a href="metrics-dashboard.html" class="bg-light list-group-item" data-parent="#performance_monitoring" data-url="metrics-dashboard.html">Understanding the Metrics Dashboard</a> |
| |
| |
| |
| |
| |
| <a href="performance.html" class="bg-light list-group-item" data-parent="#performance_monitoring" data-url="performance.html">Monitoring applications with the Performance Dashboard</a> |
| |
| |
| |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="#openapi_tools" id="#openapi_tools" class="bg-light list-group-item list-group-item-action flex-column align-items-start" data-toggle="collapse" aria-expanded="false">OpenAPI Tools<span class="submenu-icon"></span></a> |
| <div class="cw-sidebar-div cw-sidebar-submenu collapse" id="openapi_tools"> |
| |
| |
| |
| |
| <a href="open-api-tools-for-vscode.html" class="bg-light list-group-item" data-parent="#openapi_tools" data-url="open-api-tools-for-vscode.html">Codewind OpenAPI Tools for VS Code</a> |
| |
| |
| |
| |
| |
| <a href="open-api-tools-for-eclipse.html" class="bg-light list-group-item" data-parent="#openapi_tools" data-url="open-api-tools-for-eclipse.html">Codewind OpenAPI Tools for Eclipse</a> |
| |
| |
| |
| </div> |
| |
| |
| |
| |
| |
| <a href="troubleshooting.html" class="bg-light list-group-item list-group-item-action flex-column align-items-start" data-url="troubleshooting.html"> |
| Troubleshooting |
| </a> |
| |
| |
| |
| |
| </ul> |
| <!-- List Group END--> |
| </div> |
| <!-- sidebar-container END --> |
| <!-- MAIN --> |
| <div id="content-container"> |
| <div class="py-5 px-5"> |
| <div class="cw-docs-spacer"></div> |
| <div role="main"><h1 id="understanding-the-metrics-dashboard">Understanding the Metrics Dashboard</h1> |
| |
| <p>Application Metrics instruments Java, Node.js, and Swift runtimes for performance monitoring and provides the monitoring data through an API. The Metrics Dashboard is a method for you to visualize this data.</p> |
| |
| <h2 id="what-youll-learn">What you’ll learn</h2> |
| |
| <p>Learn how to use the Metrics Dashboard to monitor Java, Node.js, and Swift projects. Furthermore, learn how to use the Metrics Dashboard’s features to verify if your application is performing as expected.</p> |
| |
| <h2 id="prerequisites">Prerequisites</h2> |
| |
| <ul> |
| <li>Eclipse, Eclipse Che, IntelliJ, or VS Code</li> |
| <li>A Codewind installation</li> |
| </ul> |
| |
| <h2 id="metrics-dashboard-types">Metrics Dashboard types</h2> |
| |
| <p>The Metrics Dashboard is available for Java, Node.js, and Swift. You can monitor the projects that you create in these languages.</p> |
| <ul> |
| <li><a href="https://developer.ibm.com/javasdk/application-metrics-java/">Application Metrics for Java</a></li> |
| <li><a href="https://developer.ibm.com/node/monitoring-post-mortem/application-metrics-node-js/">Application Metrics for Node.js</a></li> |
| <li><a href="https://developer.ibm.com/swift/monitoring-diagnostics/application-metrics-for-swift/">Application Metrics for Swift</a></li> |
| </ul> |
| |
| <h2 id="accessing-the-metrics-dashboard">Accessing the Metrics Dashboard</h2> |
| |
| <ol> |
| <li>From your IDE, go to the Codewind plug-in and right-click on a project.</li> |
| <li>Then, select <strong>Metrics Dashboard</strong>. A window appears that displays the Metrics Dashboard.</li> |
| <li>Toggle between the <strong>Dashboard</strong> and <strong>Summary</strong> tabs. If you have a Node.js project, you can also access the <strong>Profiling</strong> tab.<br /></li> |
| </ol> |
| |
| <p><img src="images/metricsdashboard/metrics-dashboard.png" alt="Metrics Dashboard" height="450px" width="800px" /><br /></p> |
| |
| <h2 id="enabling-application-metrics">Enabling Application Metrics</h2> |
| |
| <p>If you import a project that does not include Application Metrics monitoring data associated with it, you can add Application Metrics by including the appropriate resource or performance monitoring application. For more information, see <a href="https://github.com/RuntimeTools/">RuntimeTools</a>.</p> |
| |
| <h2 id="understanding-performance-metrics-in-the-dashboard-tab">Understanding performance metrics in the <strong>Dashboard</strong> tab</h2> |
| |
| <p>View these metrics to learn if your application is performing as intended. An application might look like it’s functioning well, but these metrics can reveal if an application is working harder than it should be.</p> |
| <ul> |
| <li><strong>CPU:</strong> View this graph to see whether your computer is keeping up with the work you’re doing. If you have spare CPU cycles, your machine is likely keeping up with your throughput. If you don’t have spare CPU cycles, you might notice a degradation in performance.</li> |
| <li><strong>HTTP Incoming Requests:</strong> View this graph to see the incoming requests that your microservice receives. You can track the incoming requests and their response times. The graph doesn’t show each request. Instead, it shows requests at specific points in time. Use this graph to see whether your application responds to the requests as quickly as intended or if a change created delays in response times.</li> |
| <li><strong>Memory:</strong> Straight horizontal lines and lines that plateau indicates good memory. An ascending line indicates a memory leak and that the computer is running out of memory.</li> |
| <li><strong>HTTP Throughput:</strong> This graph indicates how fast the application is processing the requests that are coming into it.</li> |
| <li><strong>Heap:</strong> This graph is only available for Java and Node.js projects. It displays the heap size and the used heap on a timeline.</li> |
| <li><strong>HTTP Outbound Requests:</strong> This graph is similar to the HTTP Incoming Requests graph and shows the number of outbound requests at specific points in time.</li> |
| <li><strong>Loop Times:</strong> This graph indicates how fast a Node.js project is processing through an event loop.</li> |
| <li><strong>Other Requests:</strong> This graph indicates the Socket.IO and other requests that the application processes.</li> |
| </ul> |
| |
| <h2 id="viewing-metrics-information-in-the-summary-tab">Viewing metrics information in the <strong>Summary</strong> tab</h2> |
| |
| <p>View a summary of the information from the performance metrics graphs that you saw in the <strong>Dashboard</strong> tab.</p> |
| <ul> |
| <li><strong>HTTP Requests:</strong> This table displays how many times an endpoint is hit. If you repeatedly run a test while making code changes, you can see how the code changes are impacting application performance.</li> |
| </ul> |
| |
| <p><img src="images/metricsdashboard/http-requests.png" alt="HTTP Requests" height="220px" width="800px" /></p> |
| |
| <ul> |
| <li><strong>Environment:</strong> This table shows information about the environment you’re running, such as the OS architecture and the number of processors you have. Having this information can make troubleshooting easier if you need to contact support and provide it.</li> |
| </ul> |
| |
| <p><img src="images/metricsdashboard/environment.png" alt="Environment" height="200px" width="800px" /></p> |
| |
| <ul> |
| <li><strong>Resource Usage:</strong> This table shows the <strong>Average Process CPU</strong>, which shows what the application is using, and the <strong>Average System CPU</strong>, which shows what the environment as a whole is using. This information can help determine whether application issues are caused by something else in the environment that is external to the application.</li> |
| </ul> |
| |
| <p><img src="images/performanceguide/viewing_metrics.png" alt="Resource Usage" /></p> |
| |
| <h2 id="viewing-the-graph-in-the-profiling-tab">Viewing the graph in the <strong>Profiling</strong> tab</h2> |
| |
| <p>The <strong>Profiling</strong> tab is available only in Node.js projects. This tab pulls information from the CPU metric in the <strong>Dashboard</strong> tab. CPU cycles are caused by an execution of code. Receiving an endpoint doesn’t cause many CPU cycles, but receiving an incoming payload can. Profiling shows you what occurs when a spike appears in the CPU metric. Each spike on the flame graph shows a call stack in the path. The width of a spike indicates how much time the CPU spends on a function. Wide spikes indicate that your CPU spends much time on a particular function and where you might want to change the code to optimize it.</p> |
| |
| <h2 id="code-highlighting-for-profiling-data">Code highlighting for profiling data</h2> |
| |
| <p>Code highlighting for profiling data highlights the most heavily used functions based on profiling data gathered through <a href="performance.html">load testing</a>. Support for code highlighting is available for Node.js or Java projects that are created through Codewind and then profiled.</p> |
| |
| <p>To enable code highlighting, you must install the appropriate VS Code extension:</p> |
| <ul> |
| <li>For Node.js projects, install the <a href="https://marketplace.visualstudio.com/items?itemName=IBM.codewind-node-profiler">Codewind Node Profiler</a>.</li> |
| <li>For Java projects, install the <a href="https://marketplace.visualstudio.com/items?itemName=IBM.codewind-java-profiler">Codewind Java Profiler</a>. Java is supported, however, if the Metrics Dashboard does not show profiling data, use the editor plug-in to display it instead.</li> |
| <li>To execute a load test, please refer to <strong>Running a load test</strong> section of the <a href="performance.html">Performance Dashboard</a>.</li> |
| <li>Profiling data is written to the workspace only on a successfully completed load run. If the load run is cancelled, it won’t be written to the workspace.</li> |
| <li>Run the load run for a minimum of 45 seconds for enough profiling data to be gathered.</li> |
| <li>You can configure the load run time in the <strong>Edit load run settings</strong> window. Please, refer to the <a href="performance.html">Performance Dashboard</a> for additional information. The default time is 3 minutes.</li> |
| <li>Out of all the <code class="highlighter-rouge">load-test</code> folders that contain profiling data, the most up-to-date <code class="highlighter-rouge">.hcd</code> file for Java projects or .json file for Node.js projects is the one that is displayed. The code for the older profiling data might be out of date, such as pointing to lines that have been moved.</li> |
| </ul> |
| |
| <p>To display code highlighting:</p> |
| <ol> |
| <li>Open a project created with Codewind and profiled using the <a href="performance.html">load testing</a> feature of Codewind. |
| <ul> |
| <li>For Java, the profiling data is created in a <code class="highlighter-rouge">load-test/[timestamp]/xxxx.hcd</code> file in your Codewind project.</li> |
| <li>For Node.js, the profiling data is created in a <code class="highlighter-rouge">load-test/[timestamp]/profiling.json</code> file in your Codewind project.</li> |
| </ul> |
| </li> |
| <li>In the <strong>Editor</strong> view, open a Java file for Java projects or a JavaScript file for Node.js projects. The editor highlights any lines that were found in the profiling data and annotates them to show how often they were seen and where they were called from.</li> |
| </ol> |
| |
| <p>For more information on sample-based profiling, see <a href="https://www.ibm.com/support/knowledgecenter/en/SS3KLZ/com.ibm.java.diagnostics.healthcenter.doc/topics/profiling_using.html">Sample-based profiling</a>.</p> |
| |
| <p>If profiling markers do not appear, check to see if your project and load run conform to the <a href="troubleshooting.html#profiling-markers-do-not-appear">necessary requirements to use profiling</a>.</p> |
| |
| <h2 id="interpreting-the-annotation-tooltip">Interpreting the annotation tooltip</h2> |
| |
| <p>After you start the load test and the test completes, view the source code. Theia displays an annotation tooltip with a specified message in a similar format to the following example:</p> |
| |
| <p><img src="images/theia-annotation-tooltip.png" alt="image of Theia annotation tooltip" /></p> |
| |
| <ul> |
| <li>The bullet points indicate the parent callers of the function. The percentages equal the number of times that a parent caller called a function. In this example, <code class="highlighter-rouge"><anonymous function></code> probably made 2 calls to the <code class="highlighter-rouge">app.get()</code> function, and the <code class="highlighter-rouge">handle()</code> function probably made 1 call.</li> |
| <li>The numbers in the parenthesis indicate the position of the parent function in the file, such as the line and character number. This position information is ambiguous for anonymous functions, but the message includes the information regardless.</li> |
| <li>If a function runs quickly, in less than 5 milliseconds with the default configuration, then the function might not run during any of the samples, so it might not be included in the profiling data for that load run.</li> |
| </ul> |
| |
| <h2 id="need-help">Need help?</h2> |
| |
| <p>If you encounter problems with the Metrics Dashboard, check the <a href="troubleshooting.html#understanding-application-metrics">Troubleshooting</a> page.</p> |
| </div> |
| </div> |
| |
| <div class="py-5 px-5 text-right"> |
| Last update: Apr 21, 2020 |
| </div> |
| |
| </div> |
| |
| </div> |
| <!-- footer row --> |
| <footer> |
| |
| <div id="footer-div-mobile"> |
| |
| <div class="row"> |
| <div class="col-sm-12 text-center"> |
| <span>Useful Links:</span> |
| <br/><br/> |
| <a class="cw-footer-links" href="http://www.eclipse.org">Eclipse Foundation</a><br/> |
| <a class="cw-footer-links" href="http://www.eclipse.org/legal/privacy.php">Privacy Policy</a><br/> |
| <a class="cw-footer-links" href="http://www.eclipse.org/legal/termsofuse.php">Website Terms of Use</a><br/> |
| <a class="cw-footer-links" href="http://www.eclipse.org/legal/copyright.php">Copyright Agent</a><br/> |
| <a class="cw-footer-links" href="http://www.eclipse.org/legal">Legal</a><br/> |
| </div> |
| </div> |
| <div class="cw_footer_display_flex cw-footer-same-height cw-footer-center"> |
| |
| <div class="cw_footer_display_icons row"> |
| <div class="cw-footer-col text-center col-md-3 col-sm-6 col-xs-12"> |
| <div> |
| <div> |
| <a href="mailto:codewind-dev@eclipse.org"><img alt="Send us an email" title="Send us an email" src="images/footer/email-icon.svg" class="cw-logo" /></a> |
| </div> |
| </div> |
| </div> |
| <div class="cw-footer-col text-center col-md-3 col-sm-6 col-xs-12"> |
| <div> |
| <div> |
| <a href="https://twitter.com/EclipseCodewind"><img alt="Codewind Twitter" title="Codewind Twitter" src="images/footer/twitter-logo.svg" class="cw-logo" /></a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="cw-footer-col text-center col-md-3 col-sm-6 col-xs-12"> |
| <div> |
| <div> |
| <a href="https://github.com/eclipse/codewind"><img alt="Codewind Github" title="Codewind Github" src="images/footer/github-logo.svg" |
| class="cw-logo" /></a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class=" cw-footer-col text-center col-md-3 col-sm-6 col-xs-12"> |
| <div> |
| <div> |
| <a href="https://mattermost.eclipse.org/eclipse/channels/eclipse-codewind"><img alt="Codewind Mattermost" title="Codewind Mattermost" src="images/footer/mattermost-logo.png" class="cw-logo-mm" /></a> |
| </div> |
| </div> |
| </div> |
| <div class="cw-footer-col text-center col-md-3 col-sm-6 col-xs-12"> |
| <div> |
| <div> |
| <a href="https://www.youtube.com/channel/UCnKCVK6RFDyHFqUmXlAhCHQ"><img alt="Codewind YouTube" title="Codewind YouTube" src="images/footer/youtube-logo-dark.svg" |
| class="cw-logo" /></a> |
| </div> |
| </div> |
| </div> |
| <div class="cw-footer-col text-center col-md-3 col-sm-6 col-xs-12"> |
| <div> |
| <div> |
| |
| <a href="http://www.eclipse.org"><img class="cw-logo-eclipse-mobile" alt="Eclipse" title="Eclipse" src="images/footer/eclipse.svg"/></a> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| |
| <div class="row cw-footer-desktop" id="footer-div"> |
| <div class="cw-footer-left"> |
| <div class="px-5 cw-font-12> |
| <span class="cw-font-14">Useful Links:</span> |
| <br/><br/> |
| <a class="cw-footer-links" href="http://www.eclipse.org">Eclipse Foundation</a><br/> |
| <a class="cw-footer-links" href="http://www.eclipse.org/legal/privacy.php">Privacy Policy</a><br/> |
| <a class="cw-footer-links" href="http://www.eclipse.org/legal/termsofuse.php">Website Terms of Use</a><br/> |
| <a class="cw-footer-links" href="http://www.eclipse.org/legal/copyright.php">Copyright Agent</a><br/> |
| <a class="cw-footer-links" href="http://www.eclipse.org/legal">Legal</a><br/> |
| </div> |
| |
| </div> |
| <div class="cw-footer-border-right"></div> |
| <div class="cw_footer_display_flex cw-footer-same-height cw-footer-center"> |
| <div class="cw_footer_display_icons"> |
| <div class="cw-footer-col text-center"> |
| <div> |
| <div> |
| <a href="mailto:codewind-dev@eclipse.org"><img alt="Send us an email" title="Send us an email" src="images/footer/email-icon.svg" class="cw-logo" /></a> |
| </div> |
| </div> |
| </div> |
| <div class="cw-footer-col text-center"> |
| <div> |
| <div> |
| <a href="https://twitter.com/EclipseCodewind"><img alt="Codewind Twitter" title="Codewind Twitter" src="images/footer/twitter-logo.svg" class="cw-logo" /></a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="cw-footer-col text-center"> |
| <div> |
| <div> |
| <a href="https://github.com/eclipse/codewind"><img alt="Codewind Github" title="Codewind Github" src="images/footer/github-logo.svg" |
| class="cw-logo" /></a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class=" cw-footer-col text-center"> |
| <div class="cw-logo-mm" > |
| <div class="cw-logo-mm" > |
| <a href="https://mattermost.eclipse.org/eclipse/channels/eclipse-codewind"><img alt="Codewind Mattermost" title="Codewind Mattermost" src="images/footer/mattermost-logo.png" class="cw-logo-mm" /></a> |
| </div> |
| </div> |
| </div> |
| <div class="cw-footer-col text-center"> |
| <div> |
| <div> |
| <a href="https://www.youtube.com/channel/UCnKCVK6RFDyHFqUmXlAhCHQ"><img alt="Codewind YouTube" title="Codewind YouTube" src="images/footer/youtube-logo-dark.svg" |
| class="cw-logo" /></a> |
| </div> |
| </div> |
| </div> |
| |
| </div> |
| |
| </div> |
| <div class="cw-footer-border-right"></div> |
| <div class="cw-footer-right cw-footer-same-height cw-footer-vcenter"> |
| <div class="cw-footer-eclipse-img cw-footer-same-height px-5 "> |
| |
| <a href="http://www.eclipse.org"> |
| <img alt="Eclipse" title="Eclipse" src="images/footer/eclipse.svg"/> |
| </a> |
| </div> |
| </div> |
| </div> |
| </footer> |
| <!-- footer row END --> |
| <!-- Main Col END --> |
| <!-- Jquery --> |
| <script |
| src="https://code.jquery.com/jquery-3.4.1.min.js" |
| integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" |
| crossorigin="anonymous"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" |
| integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"> |
| </script> |
| |
| |
| |
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" |
| integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"> |
| </script> |
| |
| |
| <!-- Font Awesome JS --> |
| <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" |
| integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"> |
| </script> |
| <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" |
| integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"> |
| </script> |
| |
| <script src="js/jquery.matchHeight-min.js"></script> |
| <script src="js/index.js"></script> |
| <script src="js/docs.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/prism.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-docker.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-json.min.js"></script> |
| |
| </div> |
| </body> |
| |
| </html> |
| |
| |
| |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.2.0/anchor.min.js"></script> |
| <script> |
| $(document).ready(function(){ |
| |
| anchors.options.placement = 'left'; |
| anchors.add('h1'); |
| anchors.add('h2'); |
| anchors.add('h3'); |
| anchors.add('h4'); |
| }); |
| </script> |
| |
