Generator-jhipster: Ehcache statistics not shown with react

[nbaiocco]

Overview of the issue

The "Ehcache statistics" section in /admin/metrics is not shown with react app.

Motivation for or Use Case

I would like to see cache statistics.

Reproduce the error

Generate a new project with react frontend and visualize metrics page: http://myapp/admin/metrics

Related issues

Suggest a Fix

JHipster Version(s)

[email protected]
+-- [email protected]
+-- [email protected]
| `-- [email protected]
`-- [email protected]
  `-- [email protected]

##### **JHipster configuration, a `.yo-rc.json` file generated in the root folder**

.yo-rc.json file

{
  "generator-jhipster": {
    "promptValues": {
      "nativeLanguage": "en"
    },
    "jhipsterVersion": "5.4.2",
    "applicationType": "monolith",
    "serverPort": "8080",
    "authenticationType": "jwt",
    "cacheProvider": "ehcache",
    "enableHibernateCache": true,
    "websocket": false,
    "databaseType": "sql",
    "devDatabaseType": "postgresql",
    "prodDatabaseType": "postgresql",
    "searchEngine": false,
    "messageBroker": false,
    "serviceDiscoveryType": false,
    "buildTool": "gradle",
    "enableSwaggerCodegen": false,
    "clientFramework": "react",
    "useSass": true,
    "clientPackageManager": "npm",
    "testFrameworks": [],
    "jhiPrefix": "jhi",
    "otherModules": [
      {
        "name": "generator-jhipster-nav-element",
        "version": "2.0.2"
      },
      {
        "name": "generator-jhipster-audit-helper",
        "version": "1.0.3"
      }
    ],
    "enableTranslation": true,
    "nativeLanguage": "en",
    "languages": [
      "en",
      "it"
    ]
  }
}

Environment and Tools

java version "1.8.0_171"
Java(TM) SE Runtime Environment (build 1.8.0_171-b11)
Java HotSpot(TM) 64-Bit Server VM (build 25.171-b11, mixed mode)

git version 2.12.0.windows.1

node: v8.11.3

npm: 6.4.1

yeoman: 2.0.1

yarn: 1.7.0

Docker version 18.06.1-ce, build e68fc7a

docker-compose version 1.22.0, build f46880fe

Entity configuration(s) entityName.json files generated in the .jhipster directory

Browsers and Operating System

Windows 10.
Chrome: 70.0.3538.77

• [x] Checking this box is mandatory (this is just to show you read everything)

[deepu105]

I think it was never implemented for React, would you like to do it with a
PR

Thanks & Regards,
Deepu

On Wed, Nov 7, 2018 at 4:46 PM nbaiocco [e-mail] wrote:

Overview of the issue

The "Ehcache statistics" section in /admin/metrics is not shown with react
app.
Motivation for or Use Case

I would like to see cache statistics.
Reproduce the error

Generate a new project with react frontend and visualize metrics page:
http://myapp/admin/metrics
Related issues Suggest a Fix JHipster Version(s)

[email protected]
+-- [email protected]
+-- [email protected]
| -- [email protected] -- [email protected]
`-- [email protected]

JHipster configuration, a .yo-rc.json file generated in the root folder .yo-rc.json
file

{
"generator-jhipster": {
"promptValues": {
"nativeLanguage": "en"
},
"jhipsterVersion": "5.4.2",
"applicationType": "monolith",
"serverPort": "8080",
"authenticationType": "jwt",
"cacheProvider": "ehcache",
"enableHibernateCache": true,
"websocket": false,
"databaseType": "sql",
"devDatabaseType": "postgresql",
"prodDatabaseType": "postgresql",
"searchEngine": false,
"messageBroker": false,
"serviceDiscoveryType": false,
"buildTool": "gradle",
"enableSwaggerCodegen": false,
"clientFramework": "react",
"useSass": true,
"clientPackageManager": "npm",
"testFrameworks": [],
"jhiPrefix": "jhi",
"otherModules": [
{
"name": "generator-jhipster-nav-element",
"version": "2.0.2"
},
{
"name": "generator-jhipster-audit-helper",
"version": "1.0.3"
}
],
"enableTranslation": true,
"nativeLanguage": "en",
"languages": [
"en",
"it"
]
}
}

Environment and Tools

java version "1.8.0_171"
Java(TM) SE Runtime Environment (build 1.8.0_171-b11)
Java HotSpot(TM) 64-Bit Server VM (build 25.171-b11, mixed mode)

git version 2.12.0.windows.1

node: v8.11.3

npm: 6.4.1

yeoman: 2.0.1

yarn: 1.7.0

Docker version 18.06.1-ce, build e68fc7a

docker-compose version 1.22.0, build f46880fe
Entity configuration(s) entityName.json files generated in the .jhipster
directory Browsers and Operating System

Windows 10.
Chrome: 70.0.3538.77

• Checking this box is mandatory (this is just to show you read
  everything)

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/jhipster/generator-jhipster/issues/8771, or mute the
thread
https://github.com/notifications/unsubscribe-auth/ABDlF2mU5_GEghUsni3026myO2uy8FSfks5uswBZgaJpZM4YSr_3
.

[PierreBesson]

As the metrics are in progress of being migrated to Micrometer, it will be the opportunity to achieve parity between Angular and React screens.

[jdubois]

@deepu105 @PierreBesson indeed everything is currently being migrated (oh and we should use components, coming from our own libs), so that should be improved and solved soon

[agaspardcilia]

I wouldn't mind helping out on this one, just ping me if you need.

[PierreBesson]

@agaspardcilia Can you work on adding more stats to JHOnline, I would like to have the serviceDiscoveryType, authenticationType, searchEngine, websocket, clientPackageManager and enableTranslation graphs. This is very important to base project decisions on actual usage data !

[agaspardcilia]

@PierreBesson Sure, I'm gonna create a ticket on the jhonline to keep track of what needs to be added.

[jdubois]

Yes this is being done by @clement26695 who is my trainee, and who is making the upgrade to micrometer. But helping him is of course always good!

[agaspardcilia]

@clement26695 Alright, as far as I remember I made a good part of that screen, so if you got any question just ping me or send me a mail. :wink:

[agaspardcilia]

I've been looking a bit the cause of this issue and it seems pretty easy to fix. Idk how long until the upgrade to micrometer is done but I could PR something if we want it to work meanwhile.

[PierreBesson]

@agaspardcilia For me this feature is mostly useless for now as we will get it soon with the micrometer migration. Also IMO those screens look good but are actually not that useful in production where you will want to ship those metrics to an external monitoring system to have a historical view.

[techguy-bhushan]

hi @nbaiocco

there is a cause check in metrics.tsx

if (!this.props.isFetching && metrics && metrics.timers) {
      Object.keys(metrics.timers).forEach((key, indexNm) => {
        if (key.indexOf('web.rest') !== -1 || key.indexOf('service') !== -1) {
          stat.servicesStats[key] = metrics.timers[key];
        }
        if (key.indexOf('net.sf.ehcache.Cache') !== -1) {
          // remove gets or puts
          const index = key.lastIndexOf('.');
          const newKey = key.substr(0, index);
          // Keep the name of the domain
          stat.cachesStats[newKey] = {
            name: newKey,
            value: metrics.timers[key]
          };
        }
      });
    }

if (key.indexOf('net.sf.ehcache.Cache') !== -1) {
but jhipster is using jcache statistics, And if you check payload of metrics, jcache statistics wrap under metrics.gauges not in metrics.timers

you need to add a additional check in metrics.tsx react app:

if (!this.props.isFetching && metrics && metrics.gauges) {
      Object.keys(metrics.gauges).forEach((key, indexNm) => {
        if (key.indexOf('jcache.statistics') !== -1) {
          // remove gets or puts
          const index = key.lastIndexOf('.');
          const newKey = key.substr(0, index);
          // Keep the name of the domain
          stat.cachesStats[newKey] = {
            name: newKey,
            value: metrics.gauges[key].value
          };
        }
      });
    }

Also need to replace jsx for cachesStats with below code

{cachesStats ? (
          <Row>
            <Col sm="12">
              <h3>Cache statistics</h3>
              <Table dark> 
                <thead>
                  <tr>
                  <th>Cache Name</th>
                    <th>Cache Hits</th>
                    <th>Cache Misses</th>
                    <th>Cache Gets</th>
                    <th>Cache Puts</th>
                    <th>Cache Removals</th>
                    <th>Cache Evictions</th>
                    <th>Cache Hit %</th>
                    <th>Cache Miss %</th>
                    <th>Average get time (µs)</th>
                    <th>Average put time (µs)</th>
                    <th>Average remove time (µs)</th>
                  </tr>
                </thead>
                <tbody>
                  {Object.keys(cachesStats).map((k, v) => (
                    <tr key={k}>
                      <td>{cachesStats[k].name}</td>

                      <td>{metrics.gauges[`${k}.cache-hits`].value}</td>
                      <td>{metrics.gauges[`${k}.cache-misses`].value}</td>
                      <td>{metrics.gauges[`${k}.cache-gets`].value}</td>
                      <td>{metrics.gauges[`${k}.cache-puts`].value}</td>
                      <td>{metrics.gauges[`${k}.cache-removals`].value}</td>
                      <td>{metrics.gauges[`${k}.cache-evictions`].value}</td>
                      <td>{metrics.gauges[`${k}.cache-hit-percentage`].value}</td>
                      <td>{metrics.gauges[`${k}.cache-miss-percentage`].value}</td>
                      <td>{metrics.gauges[`${k}.average-get-time`].value}</td>
                      <td>{metrics.gauges[`${k}.average-put-time`].value}</td>
                      <td>{metrics.gauges[`${k}.cache-miss-percentage`].value}</td>

                    </tr>
                  ))}
                </tbody>
              </Table>
            </Col>
          </Row>
        ) : (
            ''
          )}

[jdubois]

Fixed by #8812