Search results aren't shown with Angular and Elasticsearch

[mraible]

Overview of the issue

I'm in the process of trying to deploy 21-Points Health to production. As part of the upgrade, I used the JHipster reindexer module to sync database data with Elasticsearch. It worked great after fixing some imports.

That's when I noticed that if I search for a weight, it doesn’t filter the results. However, if I refresh my screen, it does. I’ve attached a video that shows this behavior.

search.mp4

Motivation for or Use Case

Search results return properly on the backend; they just aren't rendered correctly in the Angular UI. I used Chrome Developer tools to verify the XHR request returned the correct results.

Reproduce the error

Clone 21-points and re-created it using the main branch.

git clone https://github.com/mraible/21-points
cd 21-points
rm -rf *
jhipster --with-entities

Start the app, add several weight entries, or use the reindexer module to integrate Faker data with Elasticsearch. You'll see that the results are not reflected in the UI, but if you refresh your screen, the results will be filtered properly.

Suggest a Fix

JHipster Version(s)

7.9.3 and main branch.

It is a regression since JHipster 5.

21-points@7.0.0-SNAPSHOT /Users/mraible/dev/21-points
├─┬ generator-jhipster-es-entity-reindexer@1.0.4
│ └── generator-jhipster@7.9.3 deduped
└── generator-jhipster@7.9.3

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

.yo-rc.json file

{
  "applicationType": "monolith",
  "authenticationType": "jwt",
  "baseName": "TwentyOnePoints",
  "blueprints": [],
  "buildTool": "gradle",
  "cacheProvider": "ehcache",
  "clientFramework": "angularX",
  "clientPackageManager": "npm",
  "clientTheme": "none",
  "clientThemeVariant": "",
  "creationTimestamp": 1662997089611,
  "cypressAudit": false,
  "cypressCoverage": false,
  "databaseType": "sql",
  "devDatabaseType": "h2Disk",
  "devServerPort": 4200,
  "dtoSuffix": "DTO",
  "enableGradleEnterprise": false,
  "enableHibernateCache": true,
  "enableSwaggerCodegen": false,
  "enableTranslation": true,
  "entities": [
    "Points",
    "Weight",
    "BloodPressure",
    "Preferences"
  ],
  "entitySuffix": "",
  "herokuAppName": "health-by-pints",
  "herokuDeployType": "git",
  "herokuJavaVersion": "11",
  "jhiPrefix": "jhi",
  "jhipsterVersion": "7.9.3",
  "languages": [
    "en",
    "fr"
  ],
  "lastLiquibaseTimestamp": 1667866821000,
  "messageBroker": false,
  "microfrontend": false,
  "microfrontends": [],
  "nativeLanguage": "en",
  "otherModules": [],
  "packageName": "org.jhipster.health",
  "pages": [],
  "prodDatabaseType": "postgresql",
  "reactive": false,
  "searchEngine": "elasticsearch",
  "serverPort": "8080",
  "serverSideOptions": [
    "searchEngine:elasticsearch"
  ],
  "serviceDiscoveryType": "no",
  "skipCheckLengthOfIdentifier": false,
  "skipClient": false,
  "skipFakeData": false,
  "skipUserManagement": false,
  "testFrameworks": [
    "cypress"
  ],
  "websocket": false,
  "withAdminUi": true
}

Environment and Tools

openjdk version "17.0.6" 2023-01-17
OpenJDK Runtime Environment Temurin-17.0.6+10 (build 17.0.6+10)
OpenJDK 64-Bit Server VM Temurin-17.0.6+10 (build 17.0.6+10, mixed mode)

git version 2.39.2 (Apple Git-143)

node: v18.13.0
npm: 9.6.5

Docker version 20.10.23, build 7155243

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

JDL entity definitions

entity Points {
  date LocalDate required
  exercise Integer
  meals Integer
  alcohol Integer
  notes String maxlength(140)
}
entity Weight {
  timestamp ZonedDateTime required
  weight Double required
}
entity BloodPressure {
  timestamp ZonedDateTime required
  systolic Integer required
  diastolic Integer required
}
entity Preferences {
  weeklyGoal Integer required min(10) max(21)
  weightUnits Units required
}
enum Units {
  KG,
  LB
}

paginate Points with pagination
paginate Weight, BloodPressure with infinite-scroll

[mshima]

Any data refresh like reordering is broken with infinite scroll.
I wonder if the refresh button makes sense with infinite scroll. Maybe we should removed it.

[mraible]

Works great. Thanks for the quick fix, @mshima!

[mshima]

@DanielFran bounty claimed https://opencollective.com/generator-jhipster/expenses/154491

[DanielFran]

@mshima approved