Files
Drew Slobodnjak 03d6d8f854 Table: Move library to react-data-grid (#102482)
* Changes galore

* Freedom 🗽

* Add feature flag

* Latest changes

* Basic auto cell type

* Partially working bar-gauge

* Brokenish but whatevs

* Include the toggle doc

* TableNG: Context menu (#94094)

* feat(table-ng): context menu init commit

* betterer

* feat(table-ng): re-use contextmenu component

* fix(table-ng): close context menu issue

* TableNG: Sorting columns (#94200)

feat(table-ng): sorting column

* fix feature toggle conflict

* TableNG: Sorting with custom table header (#95351)

* TableNG: Header Toggle (#95310)

* TableNG: Multi-column sorting (#95395)

feat(table-ng): multi-sorting

* TableNG: Column width options (#95426)

* feat(table-ng): column width

* mouse handle drag event

* move resizing task

* TableNG: Fix icon sorting direction (#95653)

fix(table-ng): sorting icon direction

* TableNG: Show table footer (#95313)

* TableNG: Show table footer

* Revert betterer

* Update betterer

* Incorporate reducer calculations into footer

* Update imports in FooterRow

* Use getFooterValue for summary cell render

* TableNG: Min column width (#95657)

* feat(table-ng): min column width

* feat(table-ng): set a min width constant

* TableNG: Column alignment (#95679)

* feat(table-ng): column alignment

* cleaning

* feat(table-ng): header cell alignment

* optimizations

* feat(table-ng): footer cell alignment

* calc counter

* TableNG: use compiled fn for columns -> records conversion (#95914)

* use compiled fn for columns -> records conversion

* TableNG: Move key rev and fix width overrides (#95921)

* meh

* add index to records

---------

Co-authored-by: Drew Slobodnjak <60050885+drew08t@users.noreply.github.com>

* TableNG: Sparkline Cell Parity (#95690)

* sparkline value

* todo

* Remove unsued shallowField

* Pass justifyContent to sparkline

---------

Co-authored-by: drew08t <drew08@gmail.com>

* TableNG: BarGauge cell updates (#95521)

* fix bargauge cell

* merge and fix props

* cleanup imports

* TableNG: Text wrapping (#96041)

* feat(table-ng): fix long text cell width

* feat(table-ng): fix long text cell width 2

* comment out column rowHeight

* fix long text column width

* fix types

* fix types

* naming

* Check current header cell ref is defined for key

* cleaning

* make table re-render when data changed

* eslint

---------

Co-authored-by: drew08t <drew08@gmail.com>

* TableNG: Text overflow (#96641)

* feat(table-ng): text overflow

* cleaning

* TableNG: Fix footer for count (#96802)

* TableNG: Table column filter (#96767)

* feat(table-ng): add filter form

---------

Co-authored-by: drew08t <drew08@gmail.com>
Co-authored-by: Leon Sorokin <leeoniya@gmail.com>

* TableNG: On column resize trigger (#97004)

chore(table-ng): trigger on resize on text wrap only

* TableNG: Improve sort performance (#97767)

* TableNG: Improve sort performance

* clean a bit

* a bit more

* Remove const that was breaking sort

---------

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>

* TableNG: Fix sorting (#98141)

fix(table-ng): sorting

* TableNG: fix multi sorting (#98668)

fix(table-ng): multi sorting

* TableNG: Column re-size handler (#98901)

* feat(table-ng): column re-size handler

* TableNG: Fix footer calcs with no reducer (#99347)

* TableNG: Update renderHeaderCell with filter dep (#99483)

* TableNG: Updated styles for demo (#99530)

* style proposal: table ng

* chore: revert gauge cell custom stuff

* TableNG: Cross-filter (#99459)

* feat(table-ng): cross-filter

* fix filter update issue

* fix filter reset issue

* Fix spacebar for filter input

---------

Co-authored-by: drew08t <drew08@gmail.com>

* TableNG: Filter perfomance optimization (#99620)

fix(table-ng): filter performance optimization

* TableNG: Refine styling closer to original table (#99625)

* TableNG: Support groupToNestedTableTransform (#97134)

* TableNG: Support groupToNestedTableTransform

* Fix merge issues

* Force refresh for now

* Remove log

* Fix some conflicts

* Fix more conflicts

* Help avoid clash with compiled frameToRecords keys

* Make subtable height unconstrained

* Support show field names in nested tables toggle

* TableNG: Fix footer + some other misc updates (#99846)

fix: footer fixes huzzah

* TableNG: Styling - Update styling for cells (#99851)

* fix(table-ng): bargauge inner width issue

* TableNG: Move header cell component (#99844)

* fix(table-ng): move header cell into separate file

* Fix sub table

---------

Co-authored-by: drew08t <drew08@gmail.com>

* TableNG: Auto cell feature parity (#100095)

* feat(table-ng): auto cell feature parity

* TableNG: JSON cell implementation + hover fixes (#100152)

* feat: tableNG json cell + auto fixes

* chore: add comment

* add justify content to json cell

---------

Co-authored-by: Ihor Yeromin <yeryomin.igor@gmail.com>

* TableNG: Fix cell hover issue (#100207)

* fix(table-ng): cell hover issue

* better commenting

* TableNG: Text color cell (#100120)

feat(table-ng): text color cell feature parity

* TableNG: Image cell implementation (#100132)

* feat: tableNG image cell

* fix: incorporate justify-content correctly

* chore: pass down cell options from fieldConfig

---------

Co-authored-by: Ihor Yeromin <yeryomin.igor@gmail.com>

* TableNG: Cell height performance improvement (#100544)

* chore: perf improvement

* chore: minor fix

* Update packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>

* chore: fix betterer

---------

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>

* TableNG: Add pagination (#100165)

* TableNG: Add pagination

* TableNG: Get collapsed icon state correct + update `rowHeight` (#100556)

* fix: get collapsed icon state correct + update condition for calculating row height

* chore: some cleanup!

* chore: naming to avoid confusion with local state name

* TableNG: Add support for `DataLinksCell` (#100459)

* TableNG: Improve sub table styling (#100772)

* Move files temporarily to fix conflicts

* Fix feature flag conflicts

* Move files back to cell dir

* TableNG: Update inner height of bar gauge cell (#100996)

* fix: change inner height of bar gauge cell

* chore: move function to utils, cleanup

* Remove testing line

* TableNG: Add bottom border to column headers + fix footer styling (#101016)

* feat: add bottom border to column headers for table parity

* feat: summary row style fix

* chore: remove redundant style

---------

Co-authored-by: drew08t <drew08@gmail.com>

* TableNG: Add support for `ActionsCell` (#101024)

* TableNG: Cell hover styles + header resize handler indicator (#100770)

* fix: tableNG styles

* chore: clean up comments

* chore: remove column header stuffz for now

* fix: refactor to transform/translate + resize handler hover styling

* chore: re-think approach - change a lot of things

* chore: most recent iteration

* chore: wait i like this better

* chore: hoist into colors function + clean it up!

* moar better

* chore: define constants for clarity

* chore: calculate rbga to rgb values given background color

---------

Co-authored-by: drew08t <drew08@gmail.com>

* TableNG: Fix scoll hover jumpy behavior (#101085)

* fix(table-ng): hover scroll jumping

* Account for panel padding during pagination

---------

Co-authored-by: Drew Slobodnjak <60050885+drew08t@users.noreply.github.com>
Co-authored-by: drew08t <drew08@gmail.com>

* TableNG: Fix imports (#101059)

* fix(table-ng): clean imports

Co-authored-by: Drew Slobodnjak <60050885+drew08t@users.noreply.github.com>

* TableNG: Sorted rows dependent upon filtered rows (#100985)

TableNG: Improve multi-sort performance

* TableNG: Fix sparkline width (#101164)

fix(table-ng): sparkline width

* TableNG: Type TableNG (#101257)

* feat: type tableNG

* chore: push betterer

* chore: fix linter + why can't I have inline if statements... GRR!

* fix: linter - props name got changed at some point...

* feedback: data links prop consistency + json cell robustness

* chore: remove unused rowIndex prop

---------

Co-authored-by: drew08t <drew08@gmail.com>

* TableNG: Add support for datalinks (#100769)

Co-authored-by: drew08t <drew08@gmail.com>

* Chore: Remove unused import (#102064)

remove unused import

* Update betterer

* BarGauge: Remove z-index (#102220)

fix(bargauge): remove z-index

* TableNG: Refactor + testing (#102045)

* feat: type tableNG

* chore: push betterer

* chore: fix linter + why can't I have inline if statements... GRR!

* fix: linter - props name got changed at some point...

* feedback: data links prop consistency + json cell robustness

* feat: refactor + tests

* chore: fix import lint errors

* betterer

* chore: fix image cell

* chore: revert width function

* add test

* betterer

* chore: fix sorting + add tests

* chore: pr feedback

---------

Co-authored-by: Ihor Yeromin <yeryomin.igor@gmail.com>
Co-authored-by: drew08t <drew08@gmail.com>

* TableNG: Fix table suggestion (#102497)

fix: defensively guard against missing cellOptions

* TableNG: Footer fields calc fix (#102487)

* fix: respect footer fields calc selection

* chore: add test

* TableNG: Image cell hover fix (#102489)

fix: image cell hover

* TableNG: Persist scrollbars during re render (#102559)

* TableNG: Persist scrollbars during re render

* Update improved betterer

* TableNG: Fix column width override (#102474)

* fix(table): column width override

* TableNG: Add support for crosshair share (#102410)

* TableNG: Add support for crosshair share

* Add tests

* TableNG: Fix table ng tests (#102645)

fix: cellType causing tests to fail

* Remove empty file

* TableNG: Update util tests (#102646)

* TableNG: Add column type icon (#102686)

* chore(table-ng): add column type icon

* chore(table-ng): clean styling

* Use core internationalization outside grafana ui

* Import popover directly

* Add count to grafana-ui locales

* TableNG: Change feature flag to tableNextGen (#102814)

Change feature flag to tableNextGen

* TableNG: Add row colors (#102706)

* chore(table-ng): add row colors

* clean up

* fix params

* fix(table-ng): cell color background indexing

---------

Co-authored-by: Kyle Cunningham <kyle@codeincarnate.com>
Co-authored-by: Ihor Yeromin <yeryomin.igor@gmail.com>
Co-authored-by: Adela Almasan <adela.almasan@grafana.com>
Co-authored-by: Leon Sorokin <leeoniya@gmail.com>
Co-authored-by: Adela Almasan <88068998+adela-almasan@users.noreply.github.com>
Co-authored-by: Alex Spencer <52186778+alexjonspencer1@users.noreply.github.com>
2025-03-25 20:57:57 -07:00
..
2025-03-07 10:38:11 +00:00
2025-03-07 10:38:11 +00:00
2025-03-06 13:59:08 +01:00

Building the docs locally

When you contribute to documentation, it's a good practice to build the docs on your local machine to make sure your changes appear as you expect. This README explains the process for doing that.

To build a local version, you need to run a process in a Docker container. Grafana periodically updates the Docker image, docs-base, to update the styling of the Docs.

Requirements

  • Docker >= 2.1.0.3
  • Yarn >= 1.22.4

Build the doc site

First, make sure the Docker daemon is running on your machine. Then, follow these steps:

  1. On the command line, first change to the docs folder: cd docs.
  2. Run make docs. This launches a preview of the website with the current grafana docs at http://localhost:3002/docs/grafana/latest/ which will refresh automatically when changes are made to content in the sources directory.

If you have the grafana/website repo checked out in the same directory as the grafana repo, then you can run make docs-local-static to use local assets (such as images).

Deploy preview

When you open a PR that changes files in the docs/sources/ directory, CI builds a deploy preview. After the deploy preview has been built, the Deploy pr preview workflow comments a link to the preview URL and adds a commit status check .


Content guidelines

Generally, one can edit content in the sources directory.

The following paths are built instead from a typescript file and are auto-generated. Please do not edit these files directly. Instead, navigate to the appropriate typescript source file and edit the content there, then follow the build instructions to generate the markdown files.

Transformations

Auto-generated markdown location:

  • docs/sources/panels-visualizations/query-transform-data/transform-data/index.md

Typescript location for editing and instructions:

  • scripts/docs/generate-transformations.ts - Includes all content not specific to a transformation.
  • public/app/features/transformers/docs/content.ts - Transformation-specific content.

Only use reference style links in the content.ts file or else link text will be visible in the UI.

Contributing

Managing redirects

When moving content around or removing pages it's important that users following old links are properly redirected to the new location. We do this using the aliases feature in Hugo.

If you are moving a page, add an aliases entry in the front matter referencing the old location of the page which will redirect the old url to the new location.

If you are removing a page, add an aliases entry in the front matter of the most-applicable page referencing the location of the page being removed.

If you are copying an existing page as the basis for a new one, be sure to remove any aliases entries in the front matter in your copy to avoid conflicting redirects.

Edit the side menu

The side menu is automatically build from the file structure. Use the weight front matter parameter to order pages.

To specify different menu text from the page title, use the front matter parameter menuTitle.

Add images

Please see our help documentation on Image, diagram, and screenshot guidelines for comprehensive information.


Deploy changes to grafana.com

When a PR is merged with changes in the docs/sources directory, those changes are automatically synced by a GitHub action (.github/workflows/publish.yml) to the grafana/website repo.

  • A PR that targets the main branch syncs to the content/docs/grafana/next directory in the website repository, and publishes to https://grafana.com/docs/grafana/next/.
  • A PR targeting the latest/current release branch syncs to the content/docs/grafana/latest directory in the website repository, and publishes to https://grafana.com/docs/grafana/latest/.

Once the sync is complete, the website will automatically publish to production - no further action is needed.