Describe the bug
Closing a modal throws a maximum call stack exceeded error.

404 page should contains a simple cards points to the link, icon use font awesome

• title: Jina 101
  Long text: Understanding all key concepts of Jina in 3 minutes!
  https://fontawesome.com/icons/egg?style=solid
  https://101.jina.ai
• Jina Documentations
  Long: The best way to learn Jina in depth.
  https://fontawesome.com/icons/book?style=solid
  https://docs.jina.ai
• Jina "Hello World"
  https://fontawesome.com/icons/globe-europe?style=solid
  Long: A simple demo of image neural search for Fashion-MNIST.
  https://github.com/jina-ai/jina#jina-hello-world-
• Visit Us on Github!
  https://fontawesome.com/icons/github?style=brands
  Long: Explore more exciting open-source projects from us
  https://opensource.jina.ai
• We are hiring!
  https://fontawesome.com/icons/linkedin?style=brands
  Long: Join us and build the next neural search eco system!
  https://www.linkedin.com/company/jinaai/jobs/

Describe the bug
When editing type definitions, the hot reloading feature for developing doesn't work. One has to restart the dev server manually with npm run start-dashboard

Right now most actions are describing what the effect of the action is (SHOW_MODAL).
Best practices though are, that they should describe what has happened (MODAL_TOGGLED)

Hi, thanks for the fabulous Jina!

TL;DR:
When i try to access them logs on the dashboard i get the following error:

More Details:

Self-hosted a dashboard and it worked out fine (the pod_api line for mylogserver.yml is not yet in the docs). The dashboard is hosted on a remote machine and i can access from my local machine. So far so good.

On the same remote machine i am indexing the southpark example. I edited flow-index.yml to use logserver.
root@tmk-0-fra1:~/ex2/examples/southpark-search# cat flow-index.yml:

!Flow
with:
  read_only: true
  port_expose: $JINA_PORT
  logserver: true
  logserver_config: mylogserver.yml
pods:
  reader:
    yaml_path: pods/extract.yml
  splittor:
    yaml_path: pods/craft-split.yml
    replicas: $REPLICAS
    read_only: true
  encoder:
    yaml_path: pods/encode.yml
    replicas: $REPLICAS
    timeout_ready: 1200000
    read_only: true
  chunk_indexer:
    yaml_path: pods/index-chunk.yml
    replicas: $SHARDS
    separated_workspace: true
  doc_indexer:
    yaml_path: pods/index-doc.yml
    needs: gateway
  join_all:
    yaml_path: _merge
    needs: [doc_indexer, chunk_indexer]
    read_only: true

root@tmk-0-fra1:~/ex2/examples/southpark-search# cat mylogserver.yml:

host: 0.0.0.0
port: 5000
endpoints:
  log: /stream/log  # fetching log in SSE stream
  profile: /stream/profile  # fetching profiling log in SSE stream
  yaml: /data/yaml  # get the YAML spec of a flow
  shutdown: /action/shutdown  # shutdown the log server
  ready: /status/ready  # tell if the log server is ready, return 200 if yes
  podapi: /data/api/pod  # get the api spec of the pod

run python3 app.py -t index -n 250

But when i try to access them logs it gives a bunch of erros (they're all the same):

Describe the bug
When playing with flows (adding/deleting) the state of the flows should persist the next time you refresh. Flows should be saved to local storage with relevant data (except for things like connection status, jinad flow_id etc)

As it can be seen in the next screenshots (768 x 1024 pixels and 320 x 568 pixels respectively), the home page view is broken for certain screen sizes:

The following issues are observed:

• Progress chart falls outside of its card in some screens.
• Network Load chart does not properly display for certain screen sizes.

Hi @hanxiao,
I am new to jina-ai but I decided to spend more time to play with it and hopefully contribute with PRs(appreciate any recommendation about which repo to start).
I have tried to host the dashboard on my localhost following the doc but I am having an authentication issue.
I followed the code and it looks like the github authentication goes through jina hub url.
And when it returns successfully it redirects to jina ai dashboard instead of localhost dashboard.

So I have a few questions:

• Why is the authentication is part of hub but not dashboard if this is a standalone project?
• Should I also run hub locally to be able to host the dashboard?(I will try this after posting this but writing here on parallel maybe I can gain some time:))

Or am I missing something?
Thanks

it is not stable enough. My experience is more than half of the time it doesn't scroll.

I published an npm package under my user name when I implemented tooltips and multi-select in order to implement both into the flowcharts. It would be better to put them, as long as the pull request into the official package doesn't go anywhere. under jinas namespace. That way we can maintain it as a company

Current Behvaiour:
On the home tab, whenever a card is clicked, the new "outside" link opens in the same tab.

Clicking on any of these cards leads us to a new link outside of the project.

Expected Behaviour:
Whenever an outside link is clicked, it should open up in a new tab.

┆Issue is synchronized with this Jira Task by Unito

• optimized for LinkedIn, Facebook and Twitter sharing

Example:

I've checked Settings.js which supposed to be ( maybe) SettingsCard as a name of the file.

I find that component is complex and it does many things and I suggest decomposing it into small components that do one thing ( SRP) ( Header, Body, Footer) because it's a Card. This will make scaling easy in the future and will help you maintain the Unit Test in decomposable files and in Isolation.

related jina-ai/jina#281

Problem

Currently, this project has jest setup to do unit tests but there is no tool to do integration tests.

Goal

Have integration, end-to-end tests to make sure that the components work together. This will give us more confidence in releasing. We are now using cypress for integration tests.

Next steps
We'll create issues to help community tackle this. It would be a good way for new people to start engaging with this project too.
I'll maintain a list of issues we create on this topic.

• LogsTable
• help view

As it can be seen in the next screenshot (768 x 1024 pixels), the home page view is broken for certain screen sizes:

The following issues are observed:

• Word wrapping does not divide words between syllables.
• Icons overflow cards.

The reason why this might be happening is because there might be not enough horizontal space for displaying all the cards that are being displayed.

Describe the bug

Sometimes the pods in FlowView increase in size infinitely.

🧪 This is the view that should be tested

💻 How to run this project locally

1. Fork this repository by clicking on fork button on the top right. This will create a copy of this repository on your account.

2. Clone your fork.
   Get the URL of your fork by clicking on code button on GitHub.
   Clone it to your local with command git clone <URL you copied>

   git clone <https://github.com/><your-username>/dashboard.git.

3. Install dependencies using command npm i.

cd dashboard
npm i

4. Run dashboard via the following ways .

Run in the debug mode

1. npm run start_dev-server

   testServer will be running on http://localhost:5000 by default

2. npm run start-dashboard

   Dashboard will be served on http://localhost:3000 by default

🏃‍♀️ How to get there.

Click on the option Help from the sidebar on the left

The component of interest are NotFound

🧪 How to run integration tests

Run npm run cy:dev from your console. This will open cypress and you can run the test suites you want to run by clicking on it.

When you're done working, make sure that npm run cy:run passes without any errors.

📝 Where to make changes?

In cypress/integration/views directory and in the components you want to test.
Check this pull request

Pay attention to the changes in files cypress/integration/views/logsView.ts and src/components/LogStream/BarChartBase.tsx. You'll have to make similar changes.

📖 How to learn about writing integration tests?

We use a framework called cypress for integration tests. Their documentation is quite helpful.
Go through their best practices, interacting with elements, structuring tests and you'll get a great understanding of how to write good integration tests

🖐️ I want to work on this.

If you're interested in working on this issue, please write a comment down below. 💬

If you need any help or have questions, you can ask questions here or ask in our slack group

Describe the bug
Running npm run start-dashboard script produces an error on Windows when trying to run REACT_APP_TARGET=dashboard

Have you solved it? If so, let us know how!
Windows has to use the SET command to set environment variables. Below script works on my machine for starting the dashboard.

"start-dashboard": "SET \"REACT_APP_TARGET=dashboard\" && react-scripts start"

Thinking this command could be added to the package.json file as a separate script, something like "start-dashboard_win".

Screenshots and logs

The file that should be updated is https://github.com/jina-ai/dashboard/blob/master/src/components/FlowChart/NodePort.tsx

In components like NodePort and NodePortInner, colors are hard-coded. Change this to use color from theme.

For example,
Change

  const NodePortInner = styled.div`
    background-color: #099;
    color: white;
    border-radius: 0.25rem;
    width: 0.5rem;
    height: 0.5rem; ;
  `;

to

  const NodePortInner = styled.div`
    background-color: ${(props) => props.theme.palette.primary};
    color: ${(props) => props.theme.palette.background};
    border-radius: 0.25rem;
    width: 0.5rem;
    height: 0.5rem; ;
  `;

🧪 This is the view that should be tested

💻 How to run this project locally

1. Fork this repository by clicking on fork button on the top right. This will create a copy of this repository on your account.

2. Clone your fork.
   Get the URL of your fork by clicking on code button on GitHub.
   Clone it to your local with command git clone <URL you copied>

   git clone <https://github.com/><your-username>/dashboard.git.

3. Install dependencies using command npm i.

cd dashboard
npm i

4. Run dashboard via the following ways .

Run in the debug mode

1. npm run start_dev-server

   testServer will be running on http://localhost:5000 by default

2. npm run start-dashboard

   Dashboard will be served on http://localhost:3000 by default

🏃‍♀️ How to get there.

Click on the option Log Stream from the sidebar on the left

The components of interest are LogsTable and LogsTableHeader

🧪 How to run integration tests

Run npm run cy:dev from your console. This will open cypress and you can run the test suites you want to run by clicking on it.

When you're done working, make sure that npm run cy:run passes without any errors.

📝 Where to make changes?

In cypress/integration/views directory and in the components you want to test.
Check this pull request

Pay attention to the changes in files cypress/integration/views/logsView.ts and src/components/LogStream/BarChartBase.tsx. You'll have to make similar changes.

📖 How to learn about writing integration tests?

We use a framework called cypress for integration tests. Their documentation is quite helpful.
Go through their best practices, interacting with elements, structuring tests and you'll get a great understanding of how to write good integration tests

🖐️ I want to work on this.

If you're interested in working on this issue, please write a comment down below. 💬

If you need any help or have questions, you can ask questions here or ask in our slack group

when stream endpoint is correct, flow yaml endpoint is wrong, clicking on flow panel will not show red bad connection alert. It seems that flow panel connectivity checks on the stream endpoint therefore does not complain?

Describe the bug

There is a typo in the hello world json for the dev server

https://github.com/jina-ai/dashboard/blob/master/dev-resources/examples/hello-world-gradual.json

Instead of levelname it should be levelName.

Therefore it's also wrong in the whole codebase

currently is log/stream

Home: https://jina.ai
Opensource: https://opensource.jina.ai
Learn: https://docs.jina.ai
Community: https://twitter.com/JinaAI_
Jobs: https://www.linkedin.com/company/jinaai/jobs/
Privacy & Terms: https://github.com/jina-ai/legal

Copyright 2020 © Jina AI Limited. All rights reserved.

jina-ai/jina#335

very first version of the pod api export, available at /data/api/pod (logserver.default.yml)

It returns {'pod': d, 'version': jina_version, 'usage': pod_cli_usage}, where d is the 'help', 'choices', 'default' and 'type' of each arg.

Limits:

• enum is stringify to int and becomes 0,1,2... semantics are lost
• default is only for reference, as some random default args will give random value everytime you call it.

The file that should be updated is https://github.com/jina-ai/dashboard/blob/master/src/components/FlowChart/CommandBar.tsx

In components like ButtonGroup and Button, background is hard-coded. Change this to use color from theme.

For example,
Change

const ButtonGroup = styled.div`
  height: 3.125rem;
  background: #009999;
  border-radius: 8px;
  display: flex;
`;

to

const ButtonGroup = styled.div`
  height: 3.125rem;
  background: ${(props) => props.theme.palette.primary};
  border-radius: 8px;
  display: flex;
`;

!Flow
pods:
  chunk_seg:
    yaml_path: helloworld.crafter.yml
    replicas: $REPLICAS
    read_only: true
  doc_idx:
    yaml_path: helloworld.indexer.doc.yml
  encode:
    yaml_path: helloworld.encoder.yml
    needs: chunk_seg
    replicas: $REPLICAS
  chunk_idx:
    yaml_path: helloworld.indexer.chunk.yml
    replicas: $SHARDS
    separated_workspace: true
  join_all:
    yaml_path: _merge
    needs: [doc_idx, chunk_idx]
    read_only: true

gives a wrong rendering

the correct graph should be join_all receive outputs from doc_idx and chunk_idx.

Copy from https://redux.js.org/recipes/using-immutablejs-with-redux#why-should-i-use-an-immutable-focused-library-such-as-immutablejs

Immutable.JS was designed to provide immutability in a performant manner in an effort to overcome the limitations of immutability with JavaScript. Its principle advantages include:

Guaranteed immutability#
Data encapsulated in an Immutable.JS object is never mutated. A new copy is always returned. This contrasts with JavaScript, in which some operations do not mutate your data (e.g. some Array methods, including map, filter, concat, forEach, etc.), but some do (Array’s pop, push, splice, etc.).

Rich API#
Immutable.JS provides a rich set of immutable objects to encapsulate your data (e.g. Maps, Lists, Sets, Records, etc.), and an extensive set of methods to manipulate it, including methods to sort, filter, and group the data, reverse it, flatten it, and create subsets.

Performance#
Immutable.JS does a lot of work behind the scenes to optimize performance. This is the key to its power, as using immutable data structures can involve a lot of expensive copying. In particular, immutably manipulating large, complex data sets, such as a nested Redux state tree, can generate many intermediate copies of objects, which consume memory and slow down performance as the browser’s garbage collector fights to clean things up.

Immutable.JS avoids this by cleverly sharing data structures under the surface, minimizing the need to copy data. It also enables complex chains of operations to be carried out without creating unnecessary (and costly) cloned intermediate data that will quickly be thrown away.

You never see this, of course - the data you give to an Immutable.JS object is never mutated. Rather, it’s the intermediate data generated within Immutable.JS from a chained sequence of method calls that is free to be mutated. You therefore get all the benefits of immutable data structures with none (or very little) of the potential performance hits.

This comes from an action item in #127. We have made a decision to move to css-in-js to have atomic styles, to make it easy to use themes, make it easy to find and update styles.

The general idea is to the styles we currently have in css, scss files to css-in-js, use theming and improve, refactor our current emotion styles when needed

This issue will spawn multiple smaller issues. I'll keep track of them in a checklist below.

• 🎨 Use colors from theme palette in CommandBar.tsx
• 🎨 Use colors from theme palette in NodePort.tsx
• 🎨 Use colors from theme palette in HubOverviewActions.tsx

git config --local

When importing YAML in FlowView, for example

https://github.com/jina-ai/examples/blob/master/multires-lyrics-search/flows/index.yml

the browser throws an Error. I disabled the functionality for now, but we need to look into it.

It will be more convenient if we can select multiple pods by clicking and holding the mouse. Currently, it is impossible to move several pods at the same time.

We need to convert the parser to the new syntax

One has to delete the connection and create a new one if s/he wants to edit the connection between two Pods.

How to reproduce:

• pull the current master
• switch to a new branch
• change a CSS or SCSS file
• commit

The way Google Analytics handles log streaming is in an absolute time frame:

But our logging time frame is relative:

I would suggest to change that to the way google handles it.

aka name in JSON log.