meilisearch / mini-dashboard

mini-dashboard for Meilisearch

Mini Dashboard

---

🚨 IMPORTANT NOTICE: Reduced Maintenance & Support 🚨

Dear Community,

We'd like to share some updates regarding the future maintenance of this repository:

Our team is small, and our availability will be reduced in the upcoming times. As such, response times might be slower, and we will not be accepting enhancements for this repository moving forward.

If you're looking for reliable alternatives, consider using Meilisearch Cloud. For instance, it offers a convenient solution for managing your index settings.

Seeking immediate support? Please join us on our Discord server.

---

Website | Meilisearch Cloud | Blog | Documentation | Discord

Meilisearch is an open-source search engine that offers fast, relevant search out of the box.

👉 Meilisearch repository

Meilisearch's mini-dashboard. A web-app served by the engine with a minimal search experience on your data.

Table of Contents:

• Setup
• Run
• Build
  • Generate build
  • Specify Meilisearch's server URL
  • Run your build
• Storybook
• Contributing

Setup

yarn

Run

yarn start

Go to http://localhost:3000/ and enjoy ! 🎉

Build

Generate build

You can generate a build of this project with the following command:

yarn build

Specify Meilisearch's server URL

⚠️ By default, the application will call Meilisearch at the exact same address as it is running. Example: if your app is running at http://localhost:5000, it will try to call http://localhost:5000/indexes to retrieve the list of your indexes.

If you want to specify the URL where your Meilisearch is running, use the REACT_APP_MEILI_SERVER_ADDRESS environment variable.

Example:

REACT_APP_MEILI_SERVER_ADDRESS=http://0.0.0.0:7700 yarn build

Run your build

The above commands will generate an optimized version of the app, inside the build folder.

You can then serve it with any web server of your choice.

Example:

serve build

Storybook

Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively test components.

yarn storybook

Contributing

If you want to contribute to this project, please make sure to read the contributing guidelines

Compatibility with Meilisearch

This package guarantees compatibility with version v1.x of Meilisearch, but some features may not be present. Please check the issues for more info.

mini-dashboard's Issues

`API Key` Modal isn't accessible

Current behaviour

When opening the API Key Modal, the focus is still on the API Key button, causing the next tabulation to close the Modal.

Expected behaviour

Tabulating again should focus the elements inside the Modal

Mini dashboard does not work on meilisearch running on sub routes

Description
see issue

The mini dashboard only works when MeiliSearch is running at the root of it's domain.
For example if the instance is hosted here http://mymeili.com then the dashboard will show correctly

If for example the dashboard is in a sub route like http://myapp.com/api then the mini dashboard does not show up.

For example http://104.248.162.211/api/. It is a white page.
But if you curl on the same URL

➜  ~ curl http://104.248.162.211/api/health
{"status":"available"}%

Meaning that while the mini dashboard does not show up, meilisearch is still running correctly.

The problematic line is this one in src/App.js:

export const baseUrl =
  process.env.REACT_APP_MEILI_SERVER_ADDRESS ||
  (process.env.NODE_ENV === 'development'
    ? 'http://0.0.0.0:7700'
    : window.location.origin)

window.location.origin takes the root of the domain whereas href takes the current position:

On this page for example

The problem with changing to href is that now the mini dashboard is accessible on every sub-route on not only the root of the meilisearch instance.

example nginx config to reproduce:

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    server_name _;

    location /api/ { # trailing slash is important
        proxy_pass http://127.0.0.1:7700/; # trailing slash is important
    }
}

Expected behavior
The mini dashboard should show up at the root of where meilisearch is running

Current behavior
It only works when meilisearch is at the root

Environment (please complete the following information):

• Meilisearch version: v0.25.2

Add Cypress

We should add tests with Cypress for example, to avoid bugs.
It is important as the mini-dashboard is going to be released with the 0.21.0 of MeiliSearch.

Display MeiliSearch version in front-end

Is your feature request related to a problem? Please describe.
When running a MeiliSearch instance with a front-end, I would like to see which version is running

Describe the solution you'd like
The Front-end could specify which MeiliSearch version is running, this makes it very easy and accessible, and avoid the user a few API calls or getting mixed with different versions

Describe alternatives you've considered

Additional context

• I am thinking of devops and deployment tools, where users request a MEiliSearch instance without necessarily being actively involved in the creation process. The only way to know the version in this case is doing an HTTP call to /version which requires from my POV too much actions/knowledge/involvment in the task for such a basic and important info

• Happy to do a PR if this idea is accepted

Support file:/// link in dashboard for click

Discussed in meilisearch/product#466

^{Originally posted by jet10000 May 3, 2022}
Support click file:/// open like url

file:///Users/mac/github/mlsearch/jpg/34.jpg

Add script to test Prettier

Adding a script to test if file are well formatted could save us time (for example with dependencies updates).
We can run Prettier with the following command: yarn prettier -c .
We will also need a .prettierignore.
Maybe we can also run this script on the CI like we do with eslint.

Add Facet count and filtering

It's great to have a better generic backend than the one which is included. I'd really like when this frontend would allow to use more of Meilisearch's included features:

• show facets and facet values (including counts)
• allow filtering based on facet values
• show if facet counts are exhaustive or not
• (later) use patterns to detect e.g. hierarchical facets and show them in a hierarchy

Feature: Show Indexation Status

As the Mini-Dashboard may serve as kind of an Admin-UI, it would be great if there was some information on the index updates.

I'm thinking of

• the time of the last successfully processed update
• the number of failed updates since then, if any (and maybe also the time)
• the number of enqueued updates since the last processed, if any (and maybe also the time of the first/last unprocessed enqueued

If this was shown all the time, I think it is hard to decide when to update that and it might spoil the clean design. So maybe it could be in a modal like the API key. Whenever the modal is opened via the "Status" button, show update status (and maybe other stats as well) and never update it, except when modal is closed and opened again. (Later, there might be a refresh button and a time selector after how many seconds to update, etc... but first, the minimal feature set would be great).

Add tests

The following tests should be added :

No MeiliSearch running:

• If no MeiliSearch is running, it should ask to start MeiliSearch

No API key required:

• If no API key is required, it should display the help cards view
• If a user clicks on the Api key button, it should display a message telling that no API key is required

API Key required:

• If an API key is required but none is provided, it should ask for an API Key
• If a wrong API key is provided, it should display a message telling that the provided API key is wrong
• If a correct API key is provided, it should display the help cards view
• If a user clicks on the Api Key button, it should display an input with its API key inside
• If a user clicks on the Api Key button and edit the API key field with a wrong API key, it should display a message telling that the API key is wrong

Indexes:

• If there is an index without documents, it should inform that the current index is empty
• If a user clicks on the indexes select, it should display the list of indexes
• If there is an index, it should display its documents
• If there is more than one index, it should display the first one in localeCompare order (on the uid)
• If a user clicks on an other index, it should display the documents of this new index

Search tests:

• If a user searches for a document, it should return its corresponding match
• If a user searches for a document but there is no result, it should display a message telling that there is no match
• If there is more that 20 results, it should display the Load more button.
• If the user clicks on the Load more button, it should load the 20 next documents

Interface tests:

• If a user clicks on the ? button, it should open the help center
• If a card has more than 6 fields, it should display a Show more button
• If the user clicks on the Show more button, it should display all the fields
• If there is a json field, it should display a json button
• If the users clicks of the json button, it should display a json
• If there is an array field, it should display an array button
• If the users clicks of the array button, it should display an array

Allow (de-)selecting and reordering fields in fancy view

If there are maaaany fields in the index but for a quick research I'm just interested in a few, I'd like to select only a subset of the available ones to be shown in the view.

Also, it would be great to be able to reorder the shown fields, e.g. I'd want "title" before "description".

An extended version could later also add something like "transformers":
The default would be "auto" (or maybe "plain").
Then, I'd like to select (from a fixed/hard coded list): e.g. "h1", "h2", to make a field show up as headline.

Other candidates for transformers might be "markdown", "make-links-clickable" or even "embed-as-iframe". Of course, one might go even further but that's most likely out of scope for this project.

Add dependencies cache in CI

See https://docs.github.com/en/actions/guides/caching-dependencies-to-speed-up-workflows

Index uid shouldn't be capitalized

Example:

index uid is mission-cleopatre. In the dashboard, the uid is capitalized. It shouldn't be.

Replace Instant MeiliSearch client with MeiliSearch JS client

Exposure of Instant MeiliSearch's client will be removed.
We need to replace it with the MeiliSearch JS client.

Update Meilisearch version in licence file

Replace Copyright (c) 2019-2021 Meili with Copyright (c) 2019-2022 Meili SAS

Clearing the input causes a focus loss

By clicking on the cross inside the input to clear content, the cross gets the focus. But once it is cleared (and the cross disappeared), the focus is lost.
The input should get the focus back, allowing the user to make another search.

New logo makes text underneath hard to center

It is centered but it doesnt look centered:

Can we disable mini dashboard website?

Hi maintainer, we have a meilisearch mini dashboard up and running on our subdomain. We don't want to access it from browser, we only need to access it from postman. can we disable the web but still use it as API?

Thank you..

Fields with "." are not displayed correctly

If a field contains "." anywhere in the name, dashboard does not render the field value.

Edit publish-build to start on release

Currently, the publish-build.yml only works on tag push.
We have to update it, to work on release with type released. See here

Update the Select component

The Select component should not have a conditional render for the Menu component from Reakit.
This is a duplicate because it is already handled by Reakit and can cause some unpredictable behavior.
https://reakit.io/docs/menu/

Also, we should add type="button" to the buttons MenuItem in case this is used in a form.

Display an image instead of placeholder

Hello!

I use Meilisearch with Laravel Scout, I install locally Meilisearch and everything works, I can add indexes from Laravel with Scout. On mini-dashboard, I can check these indexes, no problem.

But I have a placeholder for image.

I would to know how to set an image in results like poster for movies example.

Update Index document count more often

In a fresh Meilisearch 0.21.rc2 I was trying the mini dashboard while indexing was running.
I noticed the count next to the index name in the index selector did not update. Also, when I clicked it and reselected it (there's only one right now) it did not update.

Support for mobile

The UI is completely broken on mobile, rendering it unusable.

Here are two screenshots of Chrome running on Android.

Highlight isn't working on the poster url

With the old dashboard and the movies dataset, on query: "psg", the following was returned

As you can see, the poster URL is highlighted. With the new mini dashboard, it isn't so it makes it more difficult to know why we get that result:

Slowness during the display

As it was reported on our Slack community, some slowness is noticeable using the mini-dashboard.

This slowness is not present when only using instant-meilisearch (the dependency used by this repo).
As you can see:

Mini-dashboard:
https://user-images.githubusercontent.com/20380692/139108096-d4e8d7fc-03f8-4157-adc6-11697c02f239.mp4

Only instant-meilisearch
https://user-images.githubusercontent.com/20380692/139108334-2cd7f9fd-a200-46a2-a618-ced5a453a086.mp4

Also here are the processing time of Instant MeiliSearch

Can interest @bidoubiwa
Ask for @bidoubiwa for the dataset

Add release-drafter to the project

See: https://github.com/release-drafter/release-drafter/
And: https://github.com/meilisearch/integration-guides/blob/main/guides/release-drafter.md

Code for current version of Web interface

Hi,

Silly question, but where is the code for the current version of the Web interface? Haven't been able to find it.

Thanks!

Add check-release script

Add check-release.sh script to test that the tag to be released matches the tag inside package.json.
The script can be found here

Need to change the gif according to the new rebranding

Need to change the gif according to the new rebranding in the README

Change the naming of `Private Key`

Since v0.25.0 the term private key is not used anywhere.
See gatsby section on API keys.

Another naming, or another formulation, should be used to tell user which key to use here:

Any suggestion @gmourier

OSS image display bug

When the first image is an OOS image link, Meilisearch will not display the OSS image normally; if the first image is in .png, .jpeg and other formats, the OSS image below can be displayed normally

[v0.24.0] Rename `errorCode` to `code`

See meilisearch/integration-guides#149

Edit workflow to upload build to the release

Currently, the publish-build.yml pushes on the existing release and overrides the content of the release.
We don't need the Create release section, and we can replace it by upload-release-action.
An example can be found here

Meilisearch logo disappears and reappears on Safari by making a precise sequence of actions

See this video:

Screen.Recording.2022-02-16.at.15.03.34.mov

CI tests should run automatically on latest release or pre-release of MeiliSearch

For the moment, in tests.yml I have hard-coded the version of MeiliSearch, on which to launch the tests.

 services:
      meilisearch:
        image: getmeili/meilisearch:v0.24.0rc2
        env:
          MEILI_MASTER_KEY: 'masterKey'
          MEILI_NO_ANALYTICS: 'true'
        ports:
          - '7700:7700'

This means that on every release, or pre-release I have to manually update the version.
We should find a way to automate the version update.

Accessibility: make pressing the "enter" key, validate the admin key modal

When providing the admin key in the modal

Pressing on the enter key does not validate the input.

For accessibility purposes we should maybe trigger the ok when pressing on enter

Browser: Chrome Version 103.0.5060.53 (Official Build) (arm64)

Link detection too greedy

The link detection in the FieldValue component is too greedy. The regular expression in

mini-dashboard/src/components/Results/Hit.js

Line 103 in a71bf04

if (value.match(/(https|http):\/\//)) {

should at least have a ^ before https and maybe also check if there are only URL-Characters until the end. Out of my head, a naive approach might be match(/^https?:\/\/[^\s]+$/).

Example document:

[{
  "id": 1,
  "description": "When I need a fast search engine, I go to https://www.meilisearch.com/"
},
{
  "id": 2,
  "description": "https://www.meilisearch.com/ is the place to go when you need instant search."
}]

Actual

Both documents have their description field currently rendered as a full link, i.e.

<a href="When I need a fast search engine, I go to https://www.meilisearch.com/"
   target="_blank" rel="noreferrer" class="sc-pNWdM kMtlSK sc-iklJeh fNZzln">
  <span class="sc-gtsrHT kSJQSN">
    <span>When I need a</span>
    <mark>fast search engine</mark>
    <span> .... 

Expected

I expect the description of neither of the example documents to be rendered as a link.
Rendering a link inside is fine, but not the whole field.

Remove `lint-staged` package

lint-staged is unused. We can remove it safely

Update `browsersList` in config.json

The current list is too detailed, we can simply pass the following config :

  "browserslist": [
    "defaults"
  ]

Replace `client.client` with `client.MeiliSearchClient`

Caused by the v0.5.0 of instant-meilisearch, see #47

Display big arrays inside JSON toggler

Currently, objects are displayed inside a toggable JSON component :

But arrays are not :

This can lead to really big array being displayed inside the cards.

It would be nice to display those arrays as toggable JSON too, but only if they are bigger than XXX characters.

`<em>` tags present inside arrays

What's wrong ?

Highlight doesn't seem to work inside arrays.

Output on the dashboard:

Output from MeiliSearch:

    {
      "Title": "Brazilian Musicians",
      "Artist": "Tomas Santa Rosa Junior",
      "Nationality": [
        "Brazilian"
      ],
      "Gender": [
        "Male"
      ],
      "Date": "1941"
  }

What's the expected behaviour ?

The element inside the array should either be highlighted, or not have the <em> tag

How to test

Use the Moma database:

• https://github.com/MuseumofModernArt/collection/blob/master/Artworks.json
• https://github.com/meilisearch/demo-MoMA/

Unable to set the master key

Description
My server is in production mode and I'm unable to browse the index because there is no way to enter the master key in frontend (I'm assuming that is the way of doing it).

Is there another way of setting up the master key?

Expected behavior
Ability to set the master key.

Current behavior
As stated in description.

Screenshots or Logs

Fresh installation of mini-dashboard shows this:

Environment:

• Meilisearch version: [v.0.26.1]
• Browser: [Firefox version 98.0.2]

The placeholder search does not work right after adding a new index with documents

Description
Follow the next steps

• Add documents to a new fresh index, let's say "lol". To see the bug it's better if it's a lot of documents like the movies.json dataset

• go to the mini dashboard, you will see the "lol" index with 0 documents

• Once all the documents are imported, I can search on the search bar (do NOT reload before doing this). The search bar is working for any search

• But when I erase my query, the placeholder search is not working

• I need to reload to make it work

Expected behavior
In the best world, I shouldn't need to reload to make it everything work

Environment (please complete the following information):

• Meilisearch version: v.0.28.1 and before (at least v0.27.2)
• Browser: Firefox 102.0

Remove npm installation method in contributing guide

Since the app uses a yarn.lock file to track every dependency's version, we can only guarantee a reliable dev and prod environment when using yarn.

To avoid creating unsafe/unreliable environments, every mention of npm install, npm run .. etc should be removed from both the readme and the contributing guide.

To make npm installation reliable, we would need to provide a package-lock.json file. Nonetheless, if we decide to do so it would mean that both need to be kept updated which would require some further maintenance.

Update node version to build the dashboard to a higher version than 12

Node 12 is now end of life. See issue here.

Nonetheless the mini-dashboard is still building in node 12.

I looked at your CI and saw that you are building and testing in node 14.

• For security reasons
• To stay up to date with your own local node environment (which should be updated to a higher version)
• To be compatible with the dependencies that might update to versions using features that are not in node 12.

maybe the node version should be changed to either 16 or 18.

TypeError: Cannot convert undefined or null to object at Function.entries

Describe the bug
Mini-dashboard gives an error after indexing via C# API an object like this. But, properties are not null. Also, I am able to search with the API. Only the dashboard is not working.

public class Bodrum
{
  public string Yalikavak { get; set; }
  public string Istanbul { get; set; }
  public int Ankara { get; set; }
  public int Biga { get; set; }
  public IEnumerable<string> Izmir { get; set; }
  public IEnumerable<string> Fethiye { get; set; }
}

To Reproduce
Steps to reproduce the behavior:

1. Index this object
2. Open Mini-dasboard
3. Set the API key
4. Mini-dasboard shows the error.

It also gives header is missing error.

Screenshots

MeiliSearch version: [e.g. v0.24.0]

Replace `MeiliSearch` occurrences with `Meilisearch` in the code

I see some naming used in the code base using MeiliSearch, like isMeiliSearchRunning. Since it's in the code, I did not want to take the risk to change it here #229

Maybe you don't want to change it at the end @mdubus, but I open this issue to let you know :)

Style InstantSearch's components instead of using `connect-[component]`

As much as possible, we should try to style directly the InstantSearch's component, intead of using the connect functions.

Example :

const Highlight = connectHighlight(
  ({ highlight, attribute, hit, indexContextValue, ...props }) => {
    const parsedHit = highlight({
      highlightProperty: '_highlightResult',
      attribute,
      hit,
    })

    return (
        ...
    )
  }
)

This could result in the dashboard being a little faster than it currently is.

Improve mini-dashboard for Meilisearch v0.27.0

Maybe the mini-dashboard could be updated in Meilisearch v0.27.0?

This would involved using the latest version of instant-meilisearch that adds performance improvement by removing the default 200 fetch during pagination -> https://github.com/meilisearch/instant-meilisearch/releases/tag/v0.7.0

It would avoid us using a beta version as well :)

mini-dashboard/package.json

Line 6 in 227b316

"@meilisearch/instant-meilisearch": "^0.6.0-beta.0",