Skip to content

Commit d91b510

Browse files
beckermrbeckermr
authored
Merge pull request #2294 from jaimergp/fix-version-update-contrast
Fix version updates badge contrast in dark mode and make this section full-width, below Migrations
2 parents 14ac9ba + eabfd87 commit d91b510

File tree

7 files changed

+49
-30
lines changed

7 files changed

+49
-30
lines changed

‎src/components/StatusDashboard/incidents.jsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,12 @@ export default function Incidents({ ongoing, onLoad, ...props }) {
9292
</div>
9393
<div className={`card__body ${styles.incidents}`}>
9494
{open.map((issue, i) => <Incident key={i}>{issue}</Incident>)}
95-
{closed.map((issue, i) => <Incident key={i}>{issue}</Incident>)}
95+
{closed.length ? (
96+
<details>
97+
<summary>See previous incidents</summary>
98+
{closed.map((issue, i) => <Incident key={i}>{issue}</Incident>)}
99+
</details>
100+
) : null}
96101
</div>
97102
</div>
98103
);

‎src/components/StatusDashboard/index.jsx

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export default function StatusDashboard() {
3535
const onLoadIncidents = incidents =>
3636
setState((prev) => ({ ...prev, incidents, loaded: prev.loaded + 1 }));
3737
return (
38-
<main className="container">
38+
<main className="container" style={{ paddingBottom: "1em" }}>
3939
<div className="row row--no-gutters">
4040
<div className="col col--2"><TOC /></div>
4141
<div className="col col--10">
@@ -59,6 +59,12 @@ export default function StatusDashboard() {
5959
<CurrentMigrations onLoad={onLoad} />
6060
</div>
6161
</div>
62+
<div className="row row--no-gutters">
63+
<div className="col col--12">
64+
<div id="version" className={styles.toc_anchor}></div>
65+
<VersionUpdates onLoad={onLoad} />
66+
</div>
67+
</div>
6268
<div className="row row--no-gutters">
6369
<div className="col col--12">
6470
<div id="azure" className={styles.toc_anchor}></div>
@@ -90,14 +96,10 @@ export default function StatusDashboard() {
9096
</div>
9197
</div>
9298
<div className="row row--no-gutters">
93-
<div className="col col--6">
99+
<div className="col col--12">
94100
<div id="incidents" className={styles.toc_anchor}></div>
95101
<Incidents onLoad={onLoadIncidents} />
96102
</div>
97-
<div className="col col--6">
98-
<div id="version" className={styles.toc_anchor}></div>
99-
<VersionUpdates onLoad={onLoad} />
100-
</div>
101103
</div>
102104
</div>
103105
</div>

‎src/components/StatusDashboard/styles.module.css

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -193,11 +193,20 @@
193193
font-weight: 600;
194194
}
195195

196+
[data-theme="dark"] .version_updates_content .badge a {
197+
color: var(--ifm-color-primary-darkest);
198+
}
199+
196200
.version_updates_content .badge:hover {
197201
border-width: var(--ifm-badge-border-width);
198202
border-color: var(--ifm-color-primary);
199203
}
200204

205+
[data-theme="dark"] .version_updates_content .badge:hover {
206+
border-width: var(--ifm-badge-border-width);
207+
border-color: var(--ifm-color-primary-light);
208+
}
209+
201210
.errored_item {
202211
border: var(--ifm-table-border-width) solid transparent;
203212
cursor: pointer;
@@ -262,3 +271,7 @@
262271
right: 0;
263272
text-align: right;
264273
}
274+
275+
.progress_bar progress {
276+
accent-color: var(--ifm-color-primary);
277+
}

‎src/components/StatusDashboard/toc.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@ export default function TOC({ incident }) {
1414
<li className="menu__list-item">
1515
<a className="menu__link" href="#migrations">Current Migrations</a>
1616
</li>
17+
<li className="menu__list-item">
18+
<a className="menu__link" href="#version">Version Updates</a>
19+
</li>
1720
<li className="menu__list-item">
1821
<a className="menu__link" href="#azure">Azure Pipelines Usage</a>
1922
</li>
@@ -26,9 +29,6 @@ export default function TOC({ incident }) {
2629
<li className="menu__list-item">
2730
<a className="menu__link" href="#incidents">Incidents</a>
2831
</li>
29-
<li className="menu__list-item">
30-
<a className="menu__link" href="#version">Version Updates</a>
31-
</li>
3232
</ul>
3333
</aside>
3434
);

‎src/components/StatusDashboard/version_updates.jsx

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,12 @@ import React, { useEffect, useState } from "react";
44
import styles from "./styles.module.css";
55

66
export default function VersionUpdates({ onLoad }) {
7-
const [{ collapsed, errored, expanded, errors, queued }, setState] =
7+
const [{ collapsed, expanded, errors, queued }, setState] =
88
useState({
9-
collapsed: { queued: true, errored: true },
9+
collapsed: { queued: false, errored: true },
1010
expanded: {},
11-
errored: [],
1211
errors: {},
13-
queued: []
12+
queued: {}
1413
});
1514
const toggleItem = item => () => setState(prev => (
1615
{ ...prev, expanded: { ...prev.expanded, [item]: !prev.expanded[item] } }
@@ -35,9 +34,9 @@ export default function VersionUpdates({ onLoad }) {
3534
<h3>
3635
Version Updates
3736
{" "}
38-
<span className="badge badge--secondary">{queued.length}</span>
37+
<span className="badge badge--secondary">{Object.keys(queued).length}</span>
3938
{" "}
40-
<span className="badge badge--warning">{errored.length}</span>
39+
<span className="badge badge--warning">{Object.keys(errors).length}</span>
4140
</h3>
4241
</div>
4342
<div className="card__body">
@@ -47,19 +46,19 @@ export default function VersionUpdates({ onLoad }) {
4746
(collapsed.queued ? styles.collapsed : styles.expanded)
4847
}>
4948
Queued Version Updates{" "}
50-
<span className="badge badge--secondary">{queued.length}</span>
49+
<span className="badge badge--secondary">{Object.keys(queued).length}</span>
5150
</div>
5251
<div className={styles.version_updates_content}
5352
style={collapsed.queued ?
5453
{ display: "none" } :
5554
{ display: "flex", flexDirection: "row" }
5655
}>
57-
{queued.map((item, index) => (
56+
{Object.entries(queued).map(([name, version], index) => (
5857
<div key={index}
5958
style={{ margin: 2 }}
6059
className={`${styles.badge} badge badge--secondary`}>
61-
<Link href={urls.versions.pr.replace("<NAME>", item)}>
62-
{item}
60+
<Link href={urls.versions.pr.replace("<NAME>", name)}>
61+
{`${name} ${version}`}
6362
</Link>
6463
</div>
6564
))}
@@ -70,29 +69,29 @@ export default function VersionUpdates({ onLoad }) {
7069
(collapsed.errored ? styles.collapsed : styles.expanded)
7170
}>
7271
Errored Version Updates{" "}
73-
<span className="badge badge--warning">{errored.length}</span>
72+
<span className="badge badge--warning">{Object.keys(errors).length}</span>
7473
</div>
7574
<div className={styles.version_updates_content}
7675
style={collapsed.errored ?
7776
{ display: "none" } :
7877
{ display: "flex", flexDirection: "column" }}>
79-
{errored.map((item, index) => (
78+
{Object.entries(errors).map(([name, message], index) => (
8079
<React.Fragment key={index}>
8180
<div className={
8281
styles.errored_item + " " +
83-
(expanded[item] ? styles.expanded : styles.collapsed)}
84-
onClick={toggleItem(item)}>
82+
(expanded[name] ? styles.expanded : styles.collapsed)}
83+
onClick={toggleItem(name)}>
8584
<HoverEllipsis />
8685
<div className={`${styles.badge} badge badge--secondary`}>
8786
{/* Prevent link clicks from expanding/collapsing. */}
8887
<Link onClick={event => event.stopPropagation()}
89-
href={urls.versions.pr.replace("<NAME>", item)}>{item}
88+
href={urls.versions.pr.replace("<NAME>", name)}>{name}
9089
</Link>
9190
</div>
9291
</div>
9392
<div className={styles.errored_item_content}
94-
style={{ display: !expanded[item] && "none" }}>
95-
<pre dangerouslySetInnerHTML={{ __html: errors[item]}} />
93+
style={{ display: !expanded[name] && "none" }}>
94+
<pre dangerouslySetInnerHTML={{ __html: message}} />
9695
</div>
9796
</React.Fragment>
9897
))}

‎src/constants.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -138,8 +138,8 @@ export const urls = {
138138
usage: "https://conda-forge.herokuapp.com/status-monitor/report/travis-ci",
139139
},
140140
versions: {
141-
api: "https://raw.githubusercontent.com/regro/cf-graph-countyfair/master/status/version_status.json",
142-
pr: "https://github.com/conda-forge/<NAME>-feedstock/blob/main/recipe/meta.yaml",
141+
api: "https://raw.githubusercontent.com/regro/cf-graph-countyfair/master/status/version_status.v2.json",
142+
pr: "https://github.com/conda-forge/<NAME>-feedstock/tree/main/recipe",
143143
},
144144
schemas: {
145145
"conda-forge.yml":

‎src/pages/status/index.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export default function Home() {
88
title="Status dashboard"
99
description="Status dashboard for conda-forge"
1010
>
11-
<StatusDashboard />
11+
<StatusDashboard/>
1212
</Layout>
1313
);
1414
}

0 commit comments

Comments
 (0)