Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

GBDSCI 6277 #127

Merged
merged 10 commits into from
Jun 4, 2024
Merged

GBDSCI 6277 #127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
3cbbf5c
Change error log toggle to show latest TI for latest WFR
everdyke May 20, 2024
76ec2ae
Fix linting
everdyke May 20, 2024
9355da6
Move error logic from WorkflowDetails to Errors
everdyke May 21, 2024
d6433a1
Server side pagination for errors table
everdyke May 21, 2024
c2089fb
Error log toggle is working for hard coded value
everdyke May 21, 2024
be083e6
Toggle is now working; need to cleanup
everdyke May 21, 2024
336496e
Clean up
everdyke May 21, 2024
c7be963
Fix linting and typecheck
everdyke May 21, 2024
f00fdff
Fix test
everdyke May 22, 2024
aaa0945
Merge branch 'release/3.2' into GBDSCI-6277
everdyke Jun 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion jobmon_gui/src/components/navigation/Bifrost.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const bifrostEnabled = () => {
const enableEnvVar = import.meta.env.VITE_APP_DEPLOYMENT_TYPE
try {
if (enableEnvVar && enableEnvVar.toLowerCase() == "ihme") {
if (enableEnvVar && enableEnvVar.toLowerCase() === "ihme") {
return true
}
} catch {console.log("Bifrost ENV Var not defined. Bifrost will not be loaded")}
Expand Down
132 changes: 89 additions & 43 deletions jobmon_gui/src/components/workflow_details/Errors.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import React, { useEffect, useState } from 'react';
import React, {useEffect, useState} from 'react';
import BootstrapTable from "react-bootstrap-table-next";
import filterFactory, { textFilter, dateFilter } from 'react-bootstrap-table2-filter';
import DOMPurify from 'dompurify';
import paginationFactory from "react-bootstrap-table2-paginator";
import 'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css';
import { HashLink } from 'react-router-hash-link';

import {HashLink} from 'react-router-hash-link';
import axios from "axios";
export const sanitize = (html: string): string => DOMPurify.sanitize(html);
import '@jobmon_gui/styles/jobmon_gui.css';
import { convertDatePST } from '@jobmon_gui/utils/formatters';
import { safe_rum_start_span, safe_rum_unit_end } from '@jobmon_gui/utils/rum';
import CustomModal from '@jobmon_gui/components/Modal';

export default function Errors({ errorLogs, tt_name, loading, apm }) {
export default function Errors({taskTemplateName, taskTemplateId, workflowId, apm}) {

const [errorDetail, setErrorDetail] = useState({
'error': '', 'error_time': '', 'task_id': '',
Expand All @@ -22,46 +22,76 @@ export default function Errors({ errorLogs, tt_name, loading, apm }) {
const [helper, setHelper] = useState("");
const [showModal, setShowModal] = useState(false)
const [justRecentErrors, setRecentErrors] = useState(false)
const [errorLoading, setErrorLoading] = useState(false);
const [errorLogs, setErrorLogs] = useState([]);
const [page, setPage] = useState(1);
const [sizePerPage, setSizePerPage] = useState(10);
const [totalSize, setTotalSize] = useState(0);

function handleToggle() {
setRecentErrors(!justRecentErrors)
}

function getAsyncErrorLogs(wf_id: string, tt_id?: string) {
setErrorLoading(true);
const url = process.env.REACT_APP_BASE_URL + "/tt_error_log_viz/" + wf_id + "/" + tt_id;
const fetchData = async () => {
const result: any = await axios({
method: 'get',
url: url,
data: null,
params: {
page: page,
page_size: sizePerPage,
just_recent_errors: justRecentErrors,
},
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
}
)
setErrorLogs(result.data.error_logs);
setErrorLoading(false);
setTotalSize(result.data.total_count);
};
return fetchData
}

function get_error_brief(errors) {
let r: any = [];

for (let i in errors) {

let e = errors[i];
if (!justRecentErrors || (justRecentErrors && e.most_recent_attempt)) {

let date_display = `
<div class="error-time">
<span>${convertDatePST(e.error_time)}</span>
</div>
let date_display = `
<div class="error-time">
<span>${convertDatePST(e.error_time)}</span>
</div>
`;
let error_display = `
<div class="error-log">${e.error.trim().split("\n").slice(-1)}</div>
let error_display = `
<div class="error-log">
${e.error.trim().split("\n").slice(-1)}
</div>
`;

r.push({
"id": e.task_instance_err_id,
"task_id": e.task_id,
"task_instance_id": e.task_instance_id,
"brief": error_display,
"date": date_display,
"time": e.error_time,
"error": e.error,
"task_instance_stderr_log": e.task_instance_stderr_log
})
}
r.push({
"id": e.task_instance_err_id,
"task_id": e.task_id,
"task_instance_id": e.task_instance_id,
"brief": error_display,
"date": date_display,
"time": e.error_time,
"error": e.error,
"task_instance_stderr_log": e.task_instance_stderr_log
})
}
return r;
}

const htmlFormatter = cell => {
// add sanitize to prevent xss attack
return <div dangerouslySetInnerHTML={{ __html: sanitize(`${cell}`) }} />;
return <div dangerouslySetInnerHTML={{__html: sanitize(`${cell}`)}}/>;
};

const error_brief = get_error_brief(errorLogs);
Expand All @@ -74,12 +104,12 @@ export default function Errors({ errorLogs, tt_name, loading, apm }) {
{
dataField: "task_id",
text: "Task ID",
headerStyle: { width: "10%" },
headerStyle: {width: "10%"},
},
{
dataField: "task_instance_id",
text: "Task Instance ID",
headerStyle: { width: "15%" },
headerStyle: {width: "15%"},
sort: true,
formatter: (cell, row) => <nav>
<HashLink
Expand All @@ -93,11 +123,10 @@ export default function Errors({ errorLogs, tt_name, loading, apm }) {
dataField: "date",
text: "Error Date",
formatter: htmlFormatter,
headerStyle: { width: "20%" },
headerStyle: {width: "20%"},
filter: dateFilter()

},

{
dataField: "brief",
text: "Error Log",
Expand All @@ -119,8 +148,12 @@ export default function Errors({ errorLogs, tt_name, loading, apm }) {
}
}
];
useEffect(() => {
if (typeof workflowId !== 'undefined' && taskTemplateId !== 'undefined' && taskTemplateId !== '') {
getAsyncErrorLogs(workflowId, taskTemplateId)();
}
}, [taskTemplateId, workflowId, page, sizePerPage, justRecentErrors]);

//hook
useEffect(() => {
// clean the error log detail display (right side) when task template changes
let temp = {
Expand All @@ -139,25 +172,30 @@ export default function Errors({ errorLogs, tt_name, loading, apm }) {
};
}, [apm]);

const handleTableChange = (type, {page, sizePerPage}) => {
setPage(page);
setSizePerPage(sizePerPage);
};


// logic: when task template name selected, show a loading spinner; when loading finished and there is no error, show a no error message; when loading finished and there are errors, show error logs
return (
<div>
<div>
<span className="span-helper"><i>{helper}</i></span>
<br />
{errorLogs.length !== 0 && loading === false &&
<br/>
{errorLogs.length !== 0 && !errorLoading &&
<>
<div className="d-flex pt-4">
<p className=''>Show only most recent task instances</p>
<p className=''>Show latest TaskInstances for latest WorkflowRun</p>
<div className='px-4' onClick={handleToggle}>
<div className={"toggle-switch " + (justRecentErrors ? "active" : "")}>
<div />
<span className={"toggle-slider " + (justRecentErrors ? "active" : "")}
></span>
<div/>
<span className={"toggle-slider " + (justRecentErrors ? "active" : "")}></span>
</div>
</div>
</div>
<hr />
<hr/>

<BootstrapTable
keyField="id"
Expand All @@ -167,7 +205,15 @@ export default function Errors({ errorLogs, tt_name, loading, apm }) {
data={error_brief}
columns={columns}
filter={filterFactory()}
pagination={error_brief.length === 0 ? undefined : paginationFactory({ sizePerPage: 10 })}
pagination={paginationFactory({
page,
sizePerPage,
totalSize,
onPageChange: (page) => setPage(page),
onSizePerPageChange: (sizePerPage) => setSizePerPage(sizePerPage),
})}
remote={{pagination: true}}
onTableChange={handleTableChange}
selectRow={{
mode: "radio",
hideSelectColumn: true,
Expand Down Expand Up @@ -197,17 +243,17 @@ export default function Errors({ errorLogs, tt_name, loading, apm }) {
/>


{errorLogs.length === 0 && tt_name !== "" && loading === false &&
{errorLogs.length === 0 && taskTemplateName !== "" && !errorLoading &&
<div>
<br />
There is no error log associated with task template <i>{tt_name}</i>.
<br/>
There is no error log associated with task template <i>{taskTemplateName}</i>.
</div>
}

{tt_name !== "" && loading &&
{taskTemplateName !== "" && errorLoading &&
<div>
<br />
<div className="loader" />
<br/>
<div className="loader"/>
</div>
}
</div>
Expand Down
17 changes: 6 additions & 11 deletions jobmon_gui/src/screens/WorkflowDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,8 +135,6 @@ function WorkflowDetails({ subpage }) {
'num_attempts_avg': 0, 'num_attempts_min': 0, 'num_attempts_max': 0, 'MAXC': 0
});
const [ttDict, setTTDict] = useState([]);
const [errorLogs, setErrorLogs] = useState([]);
const [error_loading, setErrorLoading] = useState(false);
const [task_loading, setTaskLoading] = useState(false);
const [wf_status, setWFStatus] = useState([]);
const [wf_status_desc, setWFStatusDesc] = useState([]);
Expand All @@ -156,19 +154,21 @@ function WorkflowDetails({ subpage }) {
getWorkflowAttributes(params.workflowId, setWFTool, setWFName, setWFArgs, setWFSubmitted, setWFStatusDate, setWFStatus, setWFStatusDesc, setWFElapsedTime, setJobmonVersion)();
}
}, [params.workflowId]);

useEffect(() => {
if (typeof params.workflowId !== 'undefined') {
getAsyncWFdetail(setWFDict, params.workflowId)();
getAsyncTTdetail(setTTDict, params.workflowId, setTTLoaded)();
safe_rum_add_label(rum_t, "wf_id", params.workflowId);
}
}, [params.workflowId, rum_t]);

// Update the progress bar every 60 seconds
useEffect(() => {
const interval = setInterval(() => {
if (wfDict['PENDING'] + wfDict['SCHEDULED'] + wfDict['RUNNING'] !== 0) {
if (typeof params.workflowId !== 'undefined') {
//only query server when wf is unfinised
// only query server when wf is unfinished
getAsyncWFdetail(setWFDict, params.workflowId)();
getAsyncTTdetail(setTTDict, params.workflowId, setTTLoaded)();
getWorkflowAttributes(params.workflowId, setWFTool, setWFName, setWFArgs, setWFSubmitted, setWFStatusDate, setWFStatus, setWFStatusDesc, setWFElapsedTime, setJobmonVersion)();
Expand Down Expand Up @@ -203,13 +203,8 @@ function WorkflowDetails({ subpage }) {
};
fetchData();
}, [task_template_name, workflowId]);
useEffect(() => {
if (typeof params.workflowId !== 'undefined' && tt_id !== 'undefined' && tt_id !== '') {
getAsyncErrorLogs(setErrorLogs, params.workflowId, setErrorLoading, tt_id)();
}
}, [tt_id, params.workflowId]);

// Get resource usage information

useEffect(() => {
if (!task_template_version_id) {
return
Expand Down Expand Up @@ -350,7 +345,7 @@ function WorkflowDetails({ subpage }) {
}
</ul>
}
{tt_loaded === false &&
{!tt_loaded &&
<div className="loader" />
}

Expand Down Expand Up @@ -390,7 +385,7 @@ function WorkflowDetails({ subpage }) {

{(subpage === "tasks") && <Tasks tasks={tasks} onSubmit={onSubmit} register={register} loading={task_loading} apm={apm} />}
{(subpage === "usage") && <Usage taskTemplateName={task_template_name} taskTemplateVersionId={task_template_version_id} usageInfo={usage_info} apm={apm} />}
{(subpage === "errors") && <Errors errorLogs={errorLogs} tt_name={task_template_name} loading={error_loading} apm={apm} />}
{(subpage === "errors") && <Errors taskTemplateName={task_template_name} taskTemplateId={tt_id} workflowId={params.workflowId} apm={apm} />}

</div>

Expand Down
Loading
Loading