-
Notifications
You must be signed in to change notification settings - Fork 76
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added access to Grafana dashboard from TaskReview app
- Loading branch information
Showing
13 changed files
with
280 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
34 changes: 34 additions & 0 deletions
34
mephisto/review_app/client/src/pages/TaskChartsPage/TaskChartsPage.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| /* | ||
| * Copyright (c) Meta Platforms and its affiliates. | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
|
|
||
| .task-charts { | ||
| box-sizing: border-box; | ||
| -moz-box-sizing: border-box; | ||
| -webkit-box-sizing: border-box; | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .task-charts .header { | ||
| padding: 10px 20px; | ||
| background-color: #ecdadf; | ||
| } | ||
|
|
||
| .task-charts .header .task-name { | ||
| font-size: 25px; | ||
| } | ||
|
|
||
| .task-charts .content { | ||
| padding: 10px 20px; | ||
| } | ||
|
|
||
| .task-charts .loading { | ||
| width: 100%; | ||
| height: 100px; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } |
128 changes: 128 additions & 0 deletions
128
mephisto/review_app/client/src/pages/TaskChartsPage/TaskChartsPage.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,128 @@ | ||
| /* | ||
| * Copyright (c) Meta Platforms and its affiliates. | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
|
|
||
| import { setPageTitle } from "pages/TaskPage/helpers"; | ||
| import * as React from "react"; | ||
| import { useEffect } from "react"; | ||
| import { Spinner } from "react-bootstrap"; | ||
| import { useParams } from "react-router-dom"; | ||
| import { getTaskCharts } from "requests/tasks"; | ||
| import TasksHeader from "../TasksPage/TasksHeader/TasksHeader"; | ||
| import "./TaskChartsPage.css"; | ||
|
|
||
| type ParamsType = { | ||
| id: string; | ||
| }; | ||
|
|
||
| interface TaskChartsPagePropsType { | ||
| setErrors: Function; | ||
| } | ||
|
|
||
| function TaskChartsPage(props: TaskChartsPagePropsType) { | ||
| const params = useParams<ParamsType>(); | ||
|
|
||
| const [taskCharts, setTaskCharts] = React.useState<TaskChartsType>(null); | ||
| const [loading, setLoading] = React.useState(false); | ||
|
|
||
| function onError(errorResponse: ErrorResponseType | null) { | ||
| if (errorResponse) { | ||
| props.setErrors((oldErrors) => [...oldErrors, ...[errorResponse.error]]); | ||
| } | ||
| } | ||
|
|
||
| // Effects | ||
| useEffect(() => { | ||
| // Set default title | ||
| setPageTitle("Mephisto - Task Charts"); | ||
|
|
||
| if (taskCharts === null) { | ||
| getTaskCharts(params.id, setTaskCharts, setLoading, onError, null); | ||
| } | ||
| }, []); | ||
|
|
||
| useEffect(() => { | ||
| if (taskCharts) { | ||
| if (taskCharts.server_is_available) { | ||
| // Redirect to Grafana dashboard | ||
| window.location.replace(taskCharts.dashboard_url); | ||
| } else { | ||
| // Update title with current task name | ||
| setPageTitle(`Mephisto - Task Charts - ${taskCharts.task_name}`); | ||
| } | ||
| } | ||
| }, [taskCharts]); | ||
|
|
||
| if (taskCharts === null) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <div className={"task-charts"}> | ||
| {/* Header */} | ||
| <TasksHeader /> | ||
|
|
||
| {!loading && taskCharts && ( | ||
| // Task name | ||
| <div className={"header"}> | ||
| <div className={"task-name"}>Task: {taskCharts.task_name}</div> | ||
| </div> | ||
| )} | ||
|
|
||
| <div className={"content"}> | ||
| {/* Preloader when we request task charts */} | ||
| {loading ? ( | ||
| <div className={"loading"}> | ||
| <Spinner animation="border" role="status"> | ||
| <span className="visually-hidden">Loading...</span> | ||
| </Spinner> | ||
| </div> | ||
| ) : ( | ||
| <> | ||
| {!taskCharts.server_is_available && ( | ||
| <> | ||
| <h4>Grafana server is unreachable</h4> | ||
|
|
||
| <br /> | ||
|
|
||
| <div> | ||
| To see Grafana dashboard, you need: | ||
| <ol> | ||
| <li> | ||
| Install metrics (should have be done before running this | ||
| Task) | ||
| </li> | ||
| <li>Start metrics server</li> | ||
| <li>Refresh this page</li> | ||
| </ol> | ||
| How to install and start metrics, you can find in{" "} | ||
| <a | ||
| href={ | ||
| "https://mephisto.ai/docs/guides/how_to_use/efficiency_organization/metrics_dashboard/" | ||
| } | ||
| target={"_blank"} | ||
| > | ||
| documentation | ||
| </a> | ||
| . | ||
| <br /> | ||
| <br /> | ||
| <button | ||
| className={"btn btn-primary btn-sm"} | ||
| onClick={() => window.location.reload()} | ||
| > | ||
| Refresh page | ||
| </button> | ||
| </div> | ||
| </> | ||
| )} | ||
| </> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default TaskChartsPage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| #!/usr/bin/env python3 | ||
|
|
||
| # Copyright (c) Meta Platforms and its affiliates. | ||
| # This source code is licensed under the MIT license found in the | ||
| # LICENSE file in the root directory of this source tree. | ||
|
|
||
| import requests | ||
| from flask import current_app as app | ||
| from flask.views import MethodView | ||
|
|
||
| from mephisto.data_model.task import Task | ||
| from mephisto.utils import metrics | ||
|
|
||
|
|
||
| class TaskChartsView(MethodView): | ||
| def get(self, task_id: str = None) -> dict: | ||
| """Check if Grafana server is available and redirect or return error""" | ||
|
|
||
| task: Task = Task.get(db=app.db, db_id=task_id) | ||
| app.logger.debug(f"Found Task in DB: {task}") | ||
|
|
||
| try: | ||
| grafana_url = metrics.get_grafana_url() | ||
| r = requests.get(grafana_url) | ||
| grafana_server_is_ok = r.ok | ||
| except requests.exceptions.ConnectionError as e: | ||
| grafana_server_is_ok = False | ||
|
|
||
| data = { | ||
| "dashboard_url": None, | ||
| "server_is_available": False, | ||
| "task_name": task.task_name, | ||
| } | ||
|
|
||
| if grafana_server_is_ok: | ||
| data.update( | ||
| { | ||
| "dashboard_url": "http://" + metrics.get_default_dashboard_url(), | ||
| "server_is_available": True, | ||
| } | ||
| ) | ||
|
|
||
| return data |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters