diff options
author | Zuul <zuul@review.opendev.org> | 2023-05-03 00:30:33 +0000 |
---|---|---|
committer | Gerrit Code Review <review@openstack.org> | 2023-05-03 00:30:33 +0000 |
commit | 51194abf561de04972996199d825613a94cd3b2f (patch) | |
tree | ad759bc813af0bb716135251da1e54135748c276 /web/src/containers/jobgraph | |
parent | bbdbe81790f4926e5e00085309589a2c52e5230b (diff) | |
parent | 59cd5de78baa31150958e6d0d6733407c0e95805 (diff) | |
download | zuul-51194abf561de04972996199d825613a94cd3b2f.tar.gz |
Merge "web: add dark mode and theme selection"
Diffstat (limited to 'web/src/containers/jobgraph')
-rw-r--r-- | web/src/containers/jobgraph/JobGraphDisplay.jsx | 26 |
1 files changed, 20 insertions, 6 deletions
diff --git a/web/src/containers/jobgraph/JobGraphDisplay.jsx b/web/src/containers/jobgraph/JobGraphDisplay.jsx index e5cff9cbc..c8fb938ac 100644 --- a/web/src/containers/jobgraph/JobGraphDisplay.jsx +++ b/web/src/containers/jobgraph/JobGraphDisplay.jsx @@ -21,10 +21,15 @@ import { useHistory } from 'react-router-dom' import { makeJobGraphKey, fetchJobGraphIfNeeded } from '../../actions/jobgraph' import { graphviz } from 'd3-graphviz' -function makeDot(tenant, pipeline, project, branch, jobGraph) { +function makeDot(tenant, pipeline, project, branch, jobGraph, dark) { let ret = 'digraph job_graph {\n' + ret += ' bgcolor="transparent"\n' ret += ' rankdir=LR;\n' - ret += ' node [shape=box];\n' + if (dark) { + ret += ' node [shape=box color="white" fontcolor="white"];\n' + } else { + ret += ' node [shape=box];\n' + } jobGraph.forEach((job) => { const searchParams = new URLSearchParams('') searchParams.append('pipeline', pipeline) @@ -43,8 +48,15 @@ function makeDot(tenant, pipeline, project, branch, jobGraph) { if (job.dependencies.length) { job.dependencies.forEach((dep) => { let soft = ' [dir=back]' + if (dark) { + soft = ' [dir=back color="white" fontcolor="white"]' + } if (dep.soft) { - soft = ' [style=dashed dir=back]' + if (dark) { + soft = ' [style=dashed dir=back color="white" fontcolor="white"]' + } else { + soft = ' [style=dashed dir=back]' + } } ret += ' "' + dep.name + '" -> "' + job.name + '"' + soft + ';\n' }) @@ -99,7 +111,7 @@ GraphViz.propTypes = { function JobGraphDisplay(props) { const [dot, setDot] = useState() - const {fetchJobGraphIfNeeded, tenant, project, pipeline, branch} = props + const {fetchJobGraphIfNeeded, tenant, project, pipeline, branch, preferences } = props useEffect(() => { fetchJobGraphIfNeeded(tenant, project.name, pipeline, branch) @@ -112,9 +124,9 @@ function JobGraphDisplay(props) { const jobGraph = tenantJobGraph ? tenantJobGraph[jobGraphKey] : undefined useEffect(() => { if (jobGraph) { - setDot(makeDot(tenant, pipeline, project, branch, jobGraph)) + setDot(makeDot(tenant, pipeline, project, branch, jobGraph, preferences.darkMode)) } - }, [tenant, pipeline, project, branch, jobGraph]) + }, [tenant, pipeline, project, branch, jobGraph, preferences]) return ( <> {dot && <GraphViz dot={dot}/>} @@ -131,11 +143,13 @@ JobGraphDisplay.propTypes = { jobgraph: PropTypes.object, dispatch: PropTypes.func, state: PropTypes.object, + preferences: PropTypes.object, } function mapStateToProps(state) { return { tenant: state.tenant, jobgraph: state.jobgraph, + preferences: state.preferences, state: state, } } |