Use monospace font in the superset timers

[bkyryliuk]

CATEGORY

Choose one

• Bug Fix

SUMMARY

Truncates timer to seconds, ms make ui very jiggly
More info in #9708

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

before:

after

TEST PLAN

Locally

ADDITIONAL INFORMATION

• Has associated issue: Timer in SQL Lab and Explore view became jiggly / jumpy #9708
• Changes UI

REVIEWERS

[mistercrunch]

We should use a monospace font of some kind too, the div space changing is a tiny regression from the recent font change. @rusackas FYI

[mistercrunch]

Actually I wonder if anyone would ever care about sub-second reporting, maybe when testing / tweaking indexes (which I've done before in an OLTP context, along with EXPLAIN statements).

We could show the millisecs in on an tooltip / hover if we want to be perfectionists

[mistercrunch]

Actually on your gif I still see some width movement, let's use our monospace font (I forgot what it's called)

[john-bodley]

I agree with @mistercrunch regarding the monospace font. This should also resolve the need to truncate the sub-seconds.

[bkyryliuk]

+1 for the monospace, I am not well familiar with this part of the codebase - where can I change it ?

[kingo55]

Might this be the spot?:

https://github.com/apache/incubator-superset/blob/dcbffed9bb1a9826952b0bc28323f599cb475264/superset-frontend/src/SqlLab/main.less#L160

I added font-family: monospace; to this clause and it makes it much less jittery:

We have some existing monospace font families here though:

https://github.com/apache/incubator-superset/search?q=monospace&unscoped_q=monospace

[bkyryliuk]

great suggestions, made it monospace:

cc @mistercrunch @john-bodley @kingo55

[bkyryliuk]

@rusackas sure thing, done. Thanks

[mistercrunch]

close/reopen to trigger CI

[codecov-io]

Codecov Report

Merging #9709 into master will decrease coverage by 4.74%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master    #9709      +/-   ##
==========================================
- Coverage   70.72%   65.97%   -4.75%     
==========================================
  Files         584      585       +1     
  Lines       30381    30429      +48     
  Branches     3112     3115       +3     
==========================================
- Hits        21486    20077    -1409     
- Misses       8781    10168    +1387     
- Partials      114      184      +70     

Flag	Coverage Δ
#cypress	?
#javascript	58.95% <ø> (+0.05%)	⬆️
#python	70.92% <ø> (+0.04%)	⬆️

Impacted Files	Coverage Δ
superset-frontend/src/SqlLab/App.jsx	0.00% <0.00%> (-100.00%)	⬇️
superset-frontend/src/explore/App.jsx	0.00% <0.00%> (-100.00%)	⬇️
superset-frontend/src/SqlLab/index.jsx	0.00% <0.00%> (-100.00%)	⬇️
superset-frontend/src/dashboard/App.jsx	0.00% <0.00%> (-100.00%)	⬇️
superset-frontend/src/explore/index.jsx	0.00% <0.00%> (-100.00%)	⬇️
superset-frontend/src/dashboard/index.jsx	0.00% <0.00%> (-100.00%)	⬇️
superset-frontend/src/setup/setupColors.js	0.00% <0.00%> (-100.00%)	⬇️
superset-frontend/src/chart/ChartContainer.jsx	0.00% <0.00%> (-100.00%)	⬇️
superset-frontend/src/setup/setupFormatters.js	0.00% <0.00%> (-100.00%)	⬇️
superset-frontend/src/explore/reducers/index.js	0.00% <0.00%> (-100.00%)	⬇️
... and 146 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 858082f...83cabf0. Read the comment docs.

[mistercrunch]

[mistercrunch]

Had to restart the "Cypress" job in CI twice and wanted to leave a trace somewhere that this is happening.