Interactive UI for analyzing logs, designing flows and viewing Hub images

Interactive UI for analyzing logs, designing flows and viewing Hub images

Interactive UI for analyzing logs, designing flows and viewing Hub images Dashboard offers the insight of running tasks in Jina. With dashboard, one can analyze logs, design flows and view Jina Hub images.

Dashboard (beta)

Dashboard offers the insight of running tasks in Jina. With dashboard, one can analyze logs, design flows and view Jina Hub images.

flow demo

🌟 Features:

  • Log streaming, real-time chart on log-level.
  • Grouping logs by Pods, Executors. Full text search on logs.
  • Drag & drop flow design, setting properties of each Pod via a webform.
  • Flow can be imported from/exported to YAML.

Monitor Jina "Hello, World!" with Dashboard

Jina "Hello, World" is a simple demo of image neural search for Fashion-MNIST.

  1. Run the following command in the console

    • (Python >=3.7 required)

      JINA_LOG_PROFILING=1 jina hello-world
    • ...or if you use Docker (no install required)

      docker run -e "JINA_LOG_PROFILING=1" -p 5000:5000 jinaai/jina:devel hello-world --logserver
      
  2. Open https://dashboard.jina.ai in your browser

It should start streaming. If not, please refer to this step.

Getting started

1. Start the log server

Set environment variable JINA_LOG_PROFILING to 1 to enable Task tab in the dashboard.

Log server is a helper thread in Jina flow. It exposes HTTP endpoints to the public which the dashboard can use to fetch logs, visualize the flow.

By default the log server is disabled. To enable it you can,

| If you use Flow API in Python, |

from jina.flow import Flow

f = (Flow(logserver=True)
        .add(...)
        .add(...))

with f.build() as fl:
    fl.index(...)

| | ...or write a Flow from YAML |

# myflow.yml

!Flow
with:
  logserver: true
pods:
  ...
f = Flow.load_config('myflow.yml')

with f.build() as fl:
    fl.index(...)

| | ...or start a Flow from CLI |

jina flow --logserver --yaml-path myflow.yml

| | ...or start a Flow with Docker Container |

docker run -p 5000:5000 jina flow --logserver ...

|

Either way, if you see the following logs show up in the console, then your log server is successfully running. You can now move to the next step.

logserver success started

2. Connect the Dashboard to your log server

Go to: https://dashboard.jina.ai

Click on the globe icon on the top-left corner to connect to the log server.

It should turn into a green check mark, which means the connection is success.

log server settings

You should now see the log-streaming and flow visualization.

If it has a red cross, it means the connection is lost or the endpoint is not set correctly. Please move to the next step for instruction.

Customize the endpoints

By default the configurations of the log server is as follows:

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

You can customize the endpoints of the log server via a YAML, say mylogserver.yml. Then pass it to the Flow API via

| If you use Flow API in Python, |

f = Flow(logserver=True, logserver_config='mylogserver.yml')

| | ...or write a Flow from YAML |

!Flow
with:
  logserver: true
  logserver_config: mylogserver.yml 

| | ...or start a Flow from CLI |

jina flow --logserver --logserver-config mylogserver.yml ...

| | ...or start a Flow with Docker Container |

docker run -p PORT:PORT -v "$(PWD)/mylogserver.yml:/mylogserver.yml" jina flow --logserver --logserver-config /mylogserver.yml ...

|

Don't forget to update endpoint in the dashboard accordingly.

log server settings

Self-host Dashboard

One can self-host a dashboard locally.

  1. git clone https://github.com/jina-ai/dashboard.git && cd dashboard.
  2. Install dependencies using command yarn.
  3. Run dashboard via the following ways .

Run in the debug mode

  1. node testServer
  2. testServer will be running on http://localhost:5000 by default
  3. yarn start
  4. dashboard will be served on http://localhost:3000 by default

Run in the live mode

  1. yarn build
  2. node dashboard
  3. dashboard will be served on http://localhost:3030 by default

Contributing

We welcome all kinds of contributions from the open-source community, individuals and partners. Without your active involvement, Jina can't be successful.

The following resources help you to make a good first contribution:

Download Details:

Author: jina-ai

Demo: https://dashboard.jina.ai/#/logs

Source Code: https://github.com/jina-ai/dashboard

reactjs react javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

Routing in React without React-Router

I have been using React JS in my projects for quite some time now and am used to managing routing in my app using the react-router package. I have always been keen on having as little dependencies in my apps as possible, so, I always felt perturbed by the use of this particular package in simpler apps which did not have complex routes.

The Ugly Side of React Hooks

In this post, I will share my own point of view about React Hooks, and as the title of this post implies, I am not a big fan.

ReactJS: The Javascript Developer’s Guide

This article will walk you through the concepts you would need to know to step into the world of widely used ReactJS.