diff --git a/lib/public/components/common/table/SortModel.js b/lib/public/components/common/activeColumnsTable/SortModel.js similarity index 100% rename from lib/public/components/common/table/SortModel.js rename to lib/public/components/common/activeColumnsTable/SortModel.js diff --git a/lib/public/components/common/table/table.js b/lib/public/components/common/activeColumnsTable/activeColumnsTable.js similarity index 99% rename from lib/public/components/common/table/table.js rename to lib/public/components/common/activeColumnsTable/activeColumnsTable.js index b4ffe37128..ef25cb821a 100644 --- a/lib/public/components/common/table/table.js +++ b/lib/public/components/common/activeColumnsTable/activeColumnsTable.js @@ -104,7 +104,7 @@ const parseColumnsConfiguration = (columns, currentProfile) => { * @param {TableModels|null} [models] the models that handle the table state * @returns {vnode} Return the total view of the table to rendered */ -export const table = ( +export const activeColumnsTable = ( data, columnsConfiguration, rowsConfiguration = null, diff --git a/lib/public/components/common/table/headers.js b/lib/public/components/common/activeColumnsTable/headers.js similarity index 100% rename from lib/public/components/common/table/headers.js rename to lib/public/components/common/activeColumnsTable/headers.js diff --git a/lib/public/components/common/table/noDataRow.js b/lib/public/components/common/activeColumnsTable/noDataRow.js similarity index 100% rename from lib/public/components/common/table/noDataRow.js rename to lib/public/components/common/activeColumnsTable/noDataRow.js diff --git a/lib/public/components/common/table/profiles.js b/lib/public/components/common/activeColumnsTable/profiles.js similarity index 100% rename from lib/public/components/common/table/profiles.js rename to lib/public/components/common/activeColumnsTable/profiles.js diff --git a/lib/public/components/common/table/remoteDataTableBody.js b/lib/public/components/common/activeColumnsTable/remoteDataTableBody.js similarity index 100% rename from lib/public/components/common/table/remoteDataTableBody.js rename to lib/public/components/common/activeColumnsTable/remoteDataTableBody.js diff --git a/lib/public/components/common/table/rows.js b/lib/public/components/common/activeColumnsTable/rows.js similarity index 100% rename from lib/public/components/common/table/rows.js rename to lib/public/components/common/activeColumnsTable/rows.js diff --git a/lib/public/components/common/newTable/columnModels/columnModel.js b/lib/public/components/common/newTable/columnModels/columnModel.js new file mode 100644 index 0000000000..8a7fc4a893 --- /dev/null +++ b/lib/public/components/common/newTable/columnModels/columnModel.js @@ -0,0 +1,17 @@ +/** + * Inteface for column models. They should have a method that takes + * a row of the table, and returns the data to be displayed in this column + * + * @interface ColumnModel + */ + +/** + * Gets the data to display for this column based on a row value + * + * @template T, V + * + * @method + * @name ColumnModel#getValue + * @param {T} row the data element being displayed in this row + * @returns {V} the data corresponding to the value of the row in this column + */ diff --git a/lib/public/components/common/newTable/columnModels/passThroughColumnModel.js b/lib/public/components/common/newTable/columnModels/passThroughColumnModel.js new file mode 100644 index 0000000000..dd8289c851 --- /dev/null +++ b/lib/public/components/common/newTable/columnModels/passThroughColumnModel.js @@ -0,0 +1,24 @@ +/** + * A column that does not modify whatever value is in row[key] + * + * @class + * @implements {ColumnModel} + */ +export class PassThroughColumnmodel { + /** + * Constructor + * @param {string} key the key of the value in the row to access + */ + constructor(key) { + this.key = key; + } + + /** + * Gets the value of the row in this column, without modifying it. + * @param {T} row the row of the data to access + * @returns {V} the value of the row in this column + */ + getValue(row) { + return row[this.key]; + } +} diff --git a/lib/public/components/common/newTable/structures/cellRenderer.js b/lib/public/components/common/newTable/structures/cellRenderer.js new file mode 100644 index 0000000000..a77254f31e --- /dev/null +++ b/lib/public/components/common/newTable/structures/cellRenderer.js @@ -0,0 +1,4 @@ +/** + * @template V + * @typedef {(V) => vnode} CellRenderer + */ diff --git a/lib/public/components/common/newTable/structures/cellRenderers.js b/lib/public/components/common/newTable/structures/cellRenderers.js new file mode 100644 index 0000000000..e5389b17ae --- /dev/null +++ b/lib/public/components/common/newTable/structures/cellRenderers.js @@ -0,0 +1,3 @@ +/** + * @typedef {Map} TableModel + */ diff --git a/lib/public/components/common/newTable/table.js b/lib/public/components/common/newTable/table.js new file mode 100644 index 0000000000..98df83f736 --- /dev/null +++ b/lib/public/components/common/newTable/table.js @@ -0,0 +1,88 @@ +import spinner from '../spinner.js'; +import errorAlert from '../errorAlert.js'; +import { noDataRow } from '../activeColumnsTable/noDataRow.js'; +import { h, RemoteData } from '/js/src/index.js'; + +/** + * Renders a row of the table as vnodes + * @param {T} data the data corresponding to this row + * @param {Map} columns A map from a string used as the vnode key for this column, a TableColumn model + * @param {(T) => String} getRowKey A function that takes a row of the data and returns a string used for the vnode key of this row. + * @param {null|(T) => String} getRowClasses Optionally a function that takes a row of the data and returns css classes for this row + * @param {null|(T) => Object} getRowConfig Optionally a function that takes a row of the data and returns a config object passed to h() + * @returns {vnode} a vnode corresponding to a row of this table + */ +const tableRow = (row, columns, getRowKey, getRowClasses, getRowConfig) => { + const rowKey = getRowKey(row); + const rowClasses = getRowClasses ? getRowClasses(row) : ''; + const rowConfig = getRowConfig ? getRowConfig(row) : {}; + + return h(`tr.${rowClasses}`, { key: rowKey, ...rowConfig }, Object.entries(columns).map(([columnKey, column]) => { + const cellData = column.model.getValue(row); + const cellKey = `${rowKey}-${columnKey}`; + return h('td', { key: cellKey }, column.renderer(cellData)); + })); +}; + +/** + * Renders the headers of the table. + * @param {Map} columns A map from a string used as the vnode key for this column, a TableColumn model + * @returns {vnode} a table row containing the headers of the table. + */ +const tableHeaders = (columns) => h('thead', h('tr', Object.values(columns).map(({ header }) => h('th', header)))); + +/** + * Renders a table body using an Array + * @param {T[]} data array of data to display or RemoteData of the same type + * @param {Map} columns A map from a string used as the vnode key for this column, a TableColumn model + * @param {(T) => String} getRowKey A function that takes a row of the data and returns a string used for the vnode key of this row. + * @param {null|(T) => String} getRowClasses Optionally a function that takes a row of the data and returns css classes for this row + * @param {null|(T) => Object} getRowConfig Optionally a function that takes a row of the data and returns a config object passed to h() + * @returns {vnode} the vnode corresponding to the body of the table displaying this data + */ +const tableBodyArray = + (data, columns, getRowKey, getRowClasses, getRowConfig) => data.map((row) => tableRow(row, columns, getRowKey, getRowClasses, getRowConfig)); + +/** + * Renders a table body using RemoteData + * @param {RemoteData} remoteData a remote data object for the array of data + * @param {Map} columns A map from a string used as the vnode key for this column, a TableColumn model + * @param {(T) => String} getRowKey A function that takes a row of the data and returns a string used for the vnode key of this row. + * @param {null|(T) => String} getRowClasses Optionally a function that takes a row of the data and returns css classes for this row + * @param {null|(T) => Object} getRowConfig Optionally a function that takes a row of the data and returns a config object passed to h() + * @returns {vnode} the vnode corresponding to the body of the table displaying this data + */ +const tableBodyRemoteData = (remoteData, columns, getRowKey, getRowClasses, getRowConfig) => { + const columnsCount = Object.keys(columns).length; + + return remoteData.match({ + NotAsked: () => noDataRow(columnsCount), + Loading: () => h( + 'tr', + h( + 'td', + { colSpan: columnsCount }, + spinner({ size: 5, absolute: false }), + ), + ), + Success: (payload) => tableBodyArray(payload, columns, getRowKey, getRowClasses, getRowConfig), + Failure: (errors) => h('tr', h('td', { colSpan: columnsCount }, errors.map(errorAlert))), + }); +}; + +/** + * Renders a table containing data + * @param {T[]|RemoteData} data array of data to display or RemoteData of the same type + * @param {Map} columns A map from a string used as the vnode key for this column, a TableColumn model + * @param {(T) => String} getRowKey A function that takes a row of the data and returns a string used for the vnode key of this row. + * @param {null|(T) => String} getRowClasses Optionally a function that takes a row of the data and returns css classes for this row + * @param {null|(T) => Object} getRowConfig Optionally a function that takes a row of the data and returns a config object passed to h() + * @returns {vnode} the vnode corresponding to the table displaying this data + */ +export const table = (data, columns, getRowKey, getRowClasses = null, getRowConfig = null) => { + const tableBody = data instanceof RemoteData ? tableBodyRemoteData : tableBodyArray; + return h('table.table', [ + tableHeaders(columns), + tableBody(data, columns, getRowKey, getRowClasses, getRowConfig), + ]); +}; diff --git a/lib/public/utilities/applyProfile.js b/lib/public/utilities/applyProfile.js index e9243dcf8d..8b813bd4f9 100644 --- a/lib/public/utilities/applyProfile.js +++ b/lib/public/utilities/applyProfile.js @@ -11,7 +11,7 @@ * or submit itself to any jurisdiction. */ -import { profiles } from '../components/common/table/profiles.js'; +import { profiles } from '../components/common/activeColumnsTable/profiles.js'; /** * Apply the given profile on the given subject, and return the resulting subject or null diff --git a/lib/public/views/Environments/Details/EnvironmentDetailsPage.js b/lib/public/views/Environments/Details/EnvironmentDetailsPage.js index c82c7c985e..d11bafa6ae 100644 --- a/lib/public/views/Environments/Details/EnvironmentDetailsPage.js +++ b/lib/public/views/Environments/Details/EnvironmentDetailsPage.js @@ -15,7 +15,7 @@ import { h } from '/js/src/index.js'; import spinner from '../../../components/common/spinner.js'; import errorAlert from '../../../components/common/errorAlert.js'; import { formatTimestamp } from '../../../utilities/formatting/formatTimestamp.js'; -import { table } from '../../../components/common/table/table.js'; +import { activeColumnsTable } from '../../../components/common/activeColumnsTable/activeColumnsTable.js'; import { runsActiveColumns } from '../../Runs/ActiveColumns/runsActiveColumns.js'; import { coloredEnvironmentStatusComponent } from '../ColoredEnvironmentStatusComponent.js'; import { frontLink } from '../../../components/common/navigation/frontLink.js'; @@ -83,8 +83,8 @@ export const EnvironmentDetailsPage = ({ envs: { detailsModel } }) => detailsMod [ENVIRONMENT_DETAILS_PANELS_KEYS.LOGS]: 'Logs', }, { - [ENVIRONMENT_DETAILS_PANELS_KEYS.RUNS]: () => table(runs, runsActiveColumns, null, { profile: 'environment' }), - [LHC_FILL_DETAILS_PANELS_KEYS.LOGS]: (logs) => table(logs, logsActiveColumns, null, { profile: 'embeded' }), + [ENVIRONMENT_DETAILS_PANELS_KEYS.RUNS]: () => activeColumnsTable(runs, runsActiveColumns, null, { profile: 'environment' }), + [LHC_FILL_DETAILS_PANELS_KEYS.LOGS]: (logs) => activeColumnsTable(logs, logsActiveColumns, null, { profile: 'embeded' }), }, ), ]); diff --git a/lib/public/views/Environments/Overview/EnvironmentOverviewModel.js b/lib/public/views/Environments/Overview/EnvironmentOverviewModel.js index cc76bd5be7..f1dc8757fc 100644 --- a/lib/public/views/Environments/Overview/EnvironmentOverviewModel.js +++ b/lib/public/views/Environments/Overview/EnvironmentOverviewModel.js @@ -14,6 +14,7 @@ import { PaginationModel } from '../../../components/Pagination/PaginationModel.js'; import { Observable, RemoteData } from '/js/src/index.js'; import { getRemoteDataSlice } from '../../../utilities/fetch/getRemoteDataSlice.js'; +import { PassThroughColumnmodel } from '../../../components/common/newTable/columnModels/passThroughColumnModel.js'; /** * Environment overview page model @@ -30,6 +31,8 @@ export class EnvironmentOverviewModel extends Observable { this._pagination.itemsPerPageSelector$.observe(() => this.notify()); this._environments = RemoteData.NotAsked(); + + this._environmentTableModel = new EnvironmentTableModel(); } /** @@ -68,7 +71,7 @@ export class EnvironmentOverviewModel extends Observable { /** * Reste the model state to its default values * - * @return {void} + * @returns {void} */ reset() { this._environments = RemoteData.notAsked(); @@ -77,7 +80,7 @@ export class EnvironmentOverviewModel extends Observable { /** * Returns the pagination model * - * @return {PaginationModel} the pagination model + * @returns {PaginationModel} the pagination model */ get pagination() { return this._pagination; @@ -86,9 +89,123 @@ export class EnvironmentOverviewModel extends Observable { /** * Returns the current environments list as remote data * - * @return {RemoteData} the environments list + * @returns {RemoteData} the environments list */ get environments() { return this._environments; } + + /** + * Returns the environments table model + * + * @returns {EnvironmentTableModel} the environments table model + */ + get environmentTableModel() { + return this._environmentTableModel; + } +} + +/** + * The Environment Table Model controls how environments data is modified + * for use in a data table component. + */ +class EnvironmentTableModel { + /** + * Constructor which defines models for each column to display + */ + constructor() { + this._id = new PassThroughColumnmodel('id'); + this._updatedAt = new PassThroughColumnmodel('updatedAt'); + this._createdAt = new PassThroughColumnmodel('createdAt'); + this._status = new EnvironmentStatusColumnModel('status'); + this._statusMessage = new PassThroughColumnmodel('statusMessage'); + this._runs = new PassThroughColumnmodel('runs'); + } + + /** + * Returns the column model for the environment id + * @returns {ColumnModel} the column model for the environment id + */ + get id() { + return this._id; + } + + /** + * Returns the column model for the environment updatedAt time + * @returns {ColumnModel} the column model for the environment updatedAt time + */ + get updatedAt() { + return this._updatedAt; + } + + /** + * Returns the column model for the environment createdAt time + * @returns {ColumnModel} the column model for the environment createdAt time + */ + get createdAt() { + return this._createdAt; + } + + /** + * Returns the column model for the environment status + * @returns {ColumnModel} the column model for the environment status + */ + get status() { + return this._status; + } + + /** + * Returns the column model for the environment status message + * @returns {ColumnModel} the column model for the environment status message + */ + get statusMessage() { + return this._statusMessage; + } + + /** + * Returns the column model for the environment runs + * @returns {ColumnModel} the column model for the environment runs + */ + get runs() { + return this._runs; + } +} + +/** + * A custom column model for environments which determines the data contained in the env + * in the environment status column. + * + * @class + * @implements {ColumnModel} + */ +class EnvironmentStatusColumnModel { + /** + * Constructor + */ + constructor() {} + + /** + * Returns a message to be displayed in a tooltip based on the environment status + * @param {V} status the status of the environment + * @returns {string} a tooltip message dependent on the status + */ + _getTooltipMessage(status) { + if (status === 'ERROR') { + return 'Environment has been in ERROR state'; + } + if (status === 'DANGER') { + return 'Environment has been in ERROR state'; + } + return null; + } + + /** + * Gets the status and the history items used to display this column + * @param {T} row the environment being displayed in this row + * @returns {Object} an object containing the envrionment status and history items. + */ + getValue(row) { + const { status, historyItems } = row; + return { status, historyItems }; + } } diff --git a/lib/public/views/Environments/Overview/EnvironmentOverviewPage.js b/lib/public/views/Environments/Overview/EnvironmentOverviewPage.js index ba3823baa8..64bbcbd58c 100644 --- a/lib/public/views/Environments/Overview/EnvironmentOverviewPage.js +++ b/lib/public/views/Environments/Overview/EnvironmentOverviewPage.js @@ -25,5 +25,5 @@ export const EnvironmentOverviewPage = ({ envs }) => h( { onremove: () => envs.clearOverview(), }, - environmentOverviewComponent(envs.overviewModel.pagination, envs.overviewModel.environments), + environmentOverviewComponent(envs.overviewModel.pagination, envs.overviewModel.environments, envs.overviewModel.environmentTableModel), ); diff --git a/lib/public/views/Environments/Overview/environmentOverviewComponent.js b/lib/public/views/Environments/Overview/environmentOverviewComponent.js index 3be5abf62d..81063c2d0a 100644 --- a/lib/public/views/Environments/Overview/environmentOverviewComponent.js +++ b/lib/public/views/Environments/Overview/environmentOverviewComponent.js @@ -12,22 +12,37 @@ */ import { h } from '/js/src/index.js'; -import { table } from '../../../components/common/table/table.js'; -import { environmentsActiveColumns } from '../ActiveColumns/environmentsActiveColumns.js'; +import { table } from '../../../components/common/newTable/table.js'; import { estimateDisplayableRowsCount } from '../../../utilities/estimateDisplayableRowsCount.js'; import { paginationComponent } from '../../../components/Pagination/paginationComponent.js'; +import { displayEnvironmentStatus } from '../format/displayEnvironmentStatus.js'; +import { formatRunsList } from '../../Runs/format/formatRunsList.js'; +import { formatTimestamp } from '../../../utilities/formatting/formatTimestamp.js'; const TABLEROW_HEIGHT = 46; // Estimate of the navbar and pagination elements height total; Needs to be updated in case of changes; const PAGE_USED_HEIGHT = 215; +/** + * @type {CellRenderers} + */ +const evironmentTableRenderers = { + id: (id) => id, + updatedAt: (timestamp) => formatTimestamp(timestamp), + createdAt: (timestamp) => formatTimestamp(timestamp), + status: ({ status, historyItems }) => displayEnvironmentStatus({ status, historyItems }), + statusMessage: (message) => message, + runs: formatRunsList, +}; + /** * The shows the environment table * @param {PaginationModel} pagination the environment's pagination model - * @param {RemoteData} envs Environment objects. + * @param {RemoteData} envs Environment objects + * @param {TableModel} tableModel an instance of a table model for environments * @returns {Object} Html page */ -export const environmentOverviewComponent = (pagination, envs) => { +export const environmentOverviewComponent = (pagination, envs, tableModel) => { pagination.provideDefaultItemsPerPage(estimateDisplayableRowsCount( TABLEROW_HEIGHT, PAGE_USED_HEIGHT, @@ -36,7 +51,14 @@ export const environmentOverviewComponent = (pagination, envs) => { return [ h('.w-100.flex-column', [ h('.header-container.pv2'), - table(envs, environmentsActiveColumns, { classes: getRowsClasses }), + table(envs, { + id: { header: 'id', model: tableModel.id, renderer: evironmentTableRenderers.id }, + updatedAt: { header: 'Updated At', model: tableModel.updatedAt, renderer: evironmentTableRenderers.updatedAt }, + createdAt: { header: 'Created At', model: tableModel.createdAt, renderer: evironmentTableRenderers.createdAt }, + status: { header: 'Status', model: tableModel.status, renderer: evironmentTableRenderers.status }, + statusMessage: { header: 'Status Message', model: tableModel.statusMessage, renderer: evironmentTableRenderers.statusMessage }, + runs: { header: 'Runs', model: tableModel.runs, renderer: evironmentTableRenderers.runs }, + }, getEnvironmentTableRowKey, getRowsClasses, getRowsConfig), paginationComponent(pagination), ]), ]; @@ -51,3 +73,17 @@ const getRowsClasses = (environment) => { const hasOrHadError = environment.status === 'ERROR' || environment.historyItems.some((item) => item.status === 'ERROR'); return `.table-sm${hasOrHadError ? '.danger' : ''}`; }; + +/** + * Returns a unique vnode key based on the environment being displayed in this row + * @param {T} row The envrionment being displayed in this row + * @returns {string} a unique string to be used as the vnode key for this row + */ +const getEnvironmentTableRowKey = (row) => row.id; + +/** + * An example where clicking on the row prints the environment id corresponding to this row + * @param {Environment} row the environment corresponding to this row + * @returns {Object} an object to be passed to h() with the row config + */ +const getRowsConfig = (row) => ({ onclick: () => console.log(`hello ${row.id}`) }); diff --git a/lib/public/views/Flps/Overview/index.js b/lib/public/views/Flps/Overview/index.js index eb3f927589..e97cc75964 100644 --- a/lib/public/views/Flps/Overview/index.js +++ b/lib/public/views/Flps/Overview/index.js @@ -12,7 +12,7 @@ */ import { h } from '/js/src/index.js'; -import { table } from '../../../components/common/table/table.js'; +import { activeColumnsTable } from '../../../components/common/activeColumnsTable/activeColumnsTable.js'; import { flpsActiveColumns } from '../ActiveColumns/flpsActiveColumns.js'; import { paginationComponent } from '../../../components/Pagination/paginationComponent.js'; @@ -28,7 +28,7 @@ const flpOverview = (model) => { h('h2.mv2', 'Flp'), h('.flex-row.mv1', [ h('.w-90', h('.w-100.flex-column.mh3', [ - table(data, flpsActiveColumns, { + activeColumnsTable(data, flpsActiveColumns, { callback: (entry) => ({ onclick: () => model.router.go(`?page=flp-detail&id=${entry.id}`, ''), }), diff --git a/lib/public/views/Home/Overview/index.js b/lib/public/views/Home/Overview/index.js index 9b1f8348c9..cdeebd907a 100644 --- a/lib/public/views/Home/Overview/index.js +++ b/lib/public/views/Home/Overview/index.js @@ -14,7 +14,7 @@ import { h } from '/js/src/index.js'; import { logsActiveColumns } from '../../Logs/ActiveColumns/logsActiveColumns.js'; import { runsActiveColumns } from '../../Runs/ActiveColumns/runsActiveColumns.js'; -import { table } from '../../../components/common/table/table.js'; +import { activeColumnsTable } from '../../../components/common/activeColumnsTable/activeColumnsTable.js'; import { estimateDisplayableRowsCount } from '../../../utilities/estimateDisplayableRowsCount.js'; const TABLEROW_HEIGHT = 46; @@ -39,11 +39,11 @@ const HomeOverviewScreen = (model) => { style: 'padding-right: 1rem;', }, [ h('h2', 'Log Entries'), - table(logs, logsActiveColumns, null, { profile: 'home' }), + activeColumnsTable(logs, logsActiveColumns, null, { profile: 'home' }), ]), h('.flex-column.w-50', [ h('h2', 'Runs'), - table(runs, runsActiveColumns, null, { profile: 'home' }), + activeColumnsTable(runs, runsActiveColumns, null, { profile: 'home' }), ]), ]); }; diff --git a/lib/public/views/LhcFills/Detail/lhcFillDetailsComponent.js b/lib/public/views/LhcFills/Detail/lhcFillDetailsComponent.js index 7d6461d854..db9a7b54dd 100644 --- a/lib/public/views/LhcFills/Detail/lhcFillDetailsComponent.js +++ b/lib/public/views/LhcFills/Detail/lhcFillDetailsComponent.js @@ -13,7 +13,7 @@ import { h, iconWarning } from '/js/src/index.js'; import spinner from '../../../components/common/spinner.js'; -import { table } from '../../../components/common/table/table.js'; +import { activeColumnsTable } from '../../../components/common/activeColumnsTable/activeColumnsTable.js'; import errorAlert from '../../../components/common/errorAlert.js'; import { runsActiveColumns } from '../../Runs/ActiveColumns/runsActiveColumns.js'; import { commonLhcFillDisplayConfiguration } from './commonLhcFillDisplayConfiguration.js'; @@ -218,10 +218,10 @@ export const lhcFillDetailsComponent = (detailsModel) => detailsModel.lhcFillDet ]), ]), ]), - h('#runs', table(runs, runsActiveColumns, null, { profile: 'lhcFill' })), + h('#runs', activeColumnsTable(runs, runsActiveColumns, null, { profile: 'lhcFill' })), ]; }, - [LHC_FILL_DETAILS_PANELS_KEYS.LOGS]: (logs) => table(logs, logsActiveColumns, null, { profile: 'embeded' }), + [LHC_FILL_DETAILS_PANELS_KEYS.LOGS]: (logs) => activeColumnsTable(logs, logsActiveColumns, null, { profile: 'embeded' }), }, ), ]); diff --git a/lib/public/views/LhcFills/Overview/index.js b/lib/public/views/LhcFills/Overview/index.js index d33b7d9a61..42a6ac3e84 100644 --- a/lib/public/views/LhcFills/Overview/index.js +++ b/lib/public/views/LhcFills/Overview/index.js @@ -13,7 +13,7 @@ */ import { h } from '/js/src/index.js'; -import { table } from '../../../components/common/table/table.js'; +import { activeColumnsTable } from '../../../components/common/activeColumnsTable/activeColumnsTable.js'; import { lhcFillsActiveColumns } from '../ActiveColumns/lhcFillsActiveColumns.js'; import { estimateDisplayableRowsCount } from '../../../utilities/estimateDisplayableRowsCount.js'; import { paginationComponent } from '../../../components/Pagination/paginationComponent.js'; @@ -51,7 +51,7 @@ const showLhcFillsTable = (lhcFillsOverviewModel) => { [frontLink(h('button.btn.btn-primary', 'Statistics'), 'statistics')], ), h('.w-100.flex-column', [ - table(lhcFillsOverviewModel.lhcFills, lhcFillsActiveColumns, { classes: '.table-sm' }), + activeColumnsTable(lhcFillsOverviewModel.lhcFills, lhcFillsActiveColumns, { classes: '.table-sm' }), paginationComponent(lhcFillsOverviewModel.pagination), ]), ]; diff --git a/lib/public/views/Logs/ActiveColumns/logsActiveColumns.js b/lib/public/views/Logs/ActiveColumns/logsActiveColumns.js index ad92773cdb..1125dc7f26 100644 --- a/lib/public/views/Logs/ActiveColumns/logsActiveColumns.js +++ b/lib/public/views/Logs/ActiveColumns/logsActiveColumns.js @@ -22,7 +22,7 @@ import { frontLink } from '../../../components/common/navigation/frontLink.js'; import { frontLinks } from '../../../components/common/navigation/frontLinks.js'; import { tagFilter } from '../../../components/Filters/common/filters/tagFilter.js'; import { formatRunsList } from '../../Runs/format/formatRunsList.js'; -import { profiles } from '../../../components/common/table/profiles.js'; +import { profiles } from '../../../components/common/activeColumnsTable/profiles.js'; import { textFilter } from '../../../components/Filters/common/filters/textFilter.js'; import { environmentFilter } from '../../../components/Filters/LogsFilter/environments.js'; import { formatLhcFillsList } from '../../LhcFills/format/formatLhcFillsList.js'; diff --git a/lib/public/views/Logs/Logs.js b/lib/public/views/Logs/Logs.js index bf9d094472..52867780f7 100644 --- a/lib/public/views/Logs/Logs.js +++ b/lib/public/views/Logs/Logs.js @@ -13,7 +13,7 @@ import { Observable, RemoteData } from '/js/src/index.js'; import { TagFilterModel } from '../../components/Filters/common/TagFilterModel.js'; -import { SortModel } from '../../components/common/table/SortModel.js'; +import { SortModel } from '../../components/common/activeColumnsTable/SortModel.js'; import { debounce } from '../../utilities/debounce.js'; import { FilterInputModel } from '../../components/Filters/common/filters/FilterInputModel.js'; import { LogCreationModel } from './Create/LogCreationModel.js'; diff --git a/lib/public/views/Logs/Overview/index.js b/lib/public/views/Logs/Overview/index.js index 7e9b282fee..af8ac30104 100644 --- a/lib/public/views/Logs/Overview/index.js +++ b/lib/public/views/Logs/Overview/index.js @@ -12,7 +12,7 @@ */ import { h } from '/js/src/index.js'; -import { table } from '../../../components/common/table/table.js'; +import { activeColumnsTable } from '../../../components/common/activeColumnsTable/activeColumnsTable.js'; import { logsActiveColumns } from '../ActiveColumns/logsActiveColumns.js'; import { estimateDisplayableRowsCount } from '../../../utilities/estimateDisplayableRowsCount.js'; import { paginationComponent } from '../../../components/Pagination/paginationComponent.js'; @@ -48,7 +48,7 @@ const showLogsTable = (model, logs) => { actionButtons(), ]), h('.w-100.flex-column', [ - table(logs, logsActiveColumns, null, null, { sort: model.logs.overviewSortModel }), + activeColumnsTable(logs, logsActiveColumns, null, null, { sort: model.logs.overviewSortModel }), paginationComponent(model.logs.pagination), ]), ]; diff --git a/lib/public/views/Runs/ActiveColumns/runsActiveColumns.js b/lib/public/views/Runs/ActiveColumns/runsActiveColumns.js index 69644309ec..fb7560ae59 100644 --- a/lib/public/views/Runs/ActiveColumns/runsActiveColumns.js +++ b/lib/public/views/Runs/ActiveColumns/runsActiveColumns.js @@ -35,7 +35,7 @@ import triggerValueFilter from '../../../components/Filters/RunsFilter/triggerVa import lhcPeriodsFilter from '../../../components/Filters/RunsFilter/lhcPeriod.js'; import { formatRunType } from '../../../utilities/formatting/formatRunType.js'; import definitionFilter from '../../../components/Filters/RunsFilter/definitionFilter.js'; -import { profiles } from '../../../components/common/table/profiles.js'; +import { profiles } from '../../../components/common/activeColumnsTable/profiles.js'; import { formatDuration } from '../../../utilities/formatting/formatDuration.mjs'; import { formatRunStart } from '../format/formatRunStart.js'; import { formatRunEnd } from '../format/formatRunEnd.js'; diff --git a/lib/public/views/Runs/Details/runDetailsComponent.js b/lib/public/views/Runs/Details/runDetailsComponent.js index 7b329ad3e3..602978b45b 100644 --- a/lib/public/views/Runs/Details/runDetailsComponent.js +++ b/lib/public/views/Runs/Details/runDetailsComponent.js @@ -16,7 +16,7 @@ import { lhcFillPanel } from './lhcFillPanel.js'; import { editTagsPanel } from './editTagsPanel.js'; import { tabbedPanelComponent } from '../../../components/TabbedPanel/tabbedPanelComponent.js'; import { RUN_DETAILS_PANELS_KEYS } from './RunDetailsModel.js'; -import { table } from '../../../components/common/table/table.js'; +import { activeColumnsTable } from '../../../components/common/activeColumnsTable/activeColumnsTable.js'; import { logsActiveColumns } from '../../Logs/ActiveColumns/logsActiveColumns.js'; import { flpsActiveColumns } from '../../Flps/ActiveColumns/flpsActiveColumns.js'; import spinner from '../../../components/common/spinner.js'; @@ -109,8 +109,8 @@ export const runDetailsComponent = (runDetailsModel, router) => runDetailsModel. [RUN_DETAILS_PANELS_KEYS.DPL_PROCESSES]: 'QC/PDP tasks', }, { - [RUN_DETAILS_PANELS_KEYS.LOGS]: (dataLogs) => table(dataLogs, logsActiveColumns, null, { profile: 'embeded' }), - [RUN_DETAILS_PANELS_KEYS.FLPS]: (dataFlps) => table(dataFlps, flpsActiveColumns, { + [RUN_DETAILS_PANELS_KEYS.LOGS]: (dataLogs) => activeColumnsTable(dataLogs, logsActiveColumns, null, { profile: 'embeded' }), + [RUN_DETAILS_PANELS_KEYS.FLPS]: (dataFlps) => activeColumnsTable(dataFlps, flpsActiveColumns, { callback: (entry) => ({ style: { cursor: 'pointer', diff --git a/lib/public/views/Runs/Overview/index.js b/lib/public/views/Runs/Overview/index.js index c9a85d961d..b9fab5267a 100644 --- a/lib/public/views/Runs/Overview/index.js +++ b/lib/public/views/Runs/Overview/index.js @@ -12,7 +12,7 @@ */ import { h } from '/js/src/index.js'; -import { table } from '../../../components/common/table/table.js'; +import { activeColumnsTable } from '../../../components/common/activeColumnsTable/activeColumnsTable.js'; import { runsActiveColumns } from '../ActiveColumns/runsActiveColumns.js'; import { exportRunsModal } from './exportRunsModal.js'; import { estimateDisplayableRowsCount } from '../../../utilities/estimateDisplayableRowsCount.js'; @@ -48,7 +48,7 @@ const showRunsTable = (model, runs) => { exportRunsButton(model), ]), h('.flex-column.w-100', [ - table(runs, runsActiveColumns), + activeColumnsTable(runs, runsActiveColumns), paginationComponent(model.runs.pagination), ]), ]; diff --git a/lib/public/views/Subsystems/Details/index.js b/lib/public/views/Subsystems/Details/index.js index d589b01486..2271c8edc5 100644 --- a/lib/public/views/Subsystems/Details/index.js +++ b/lib/public/views/Subsystems/Details/index.js @@ -13,7 +13,7 @@ import { h } from '/js/src/index.js'; import spinner from '../../../components/common/spinner.js'; -import { table } from '../../../components/common/table/table.js'; +import { activeColumnsTable } from '../../../components/common/activeColumnsTable/activeColumnsTable.js'; import targetURL from '../../../utilities/targetURL.js'; import { logsActiveColumns } from '../../Logs/ActiveColumns/logsActiveColumns.js'; import { tabLink } from '../../../components/common/navigation/tabLink.js'; @@ -48,7 +48,7 @@ const subsystemDetails = (model) => { }, logs: { name: 'Logs with this subsystem', - content: table(dataLogs, logsActiveColumns, { + content: activeColumnsTable(dataLogs, logsActiveColumns, { callback: (entry) => ({ style: { cursor: 'pointer', diff --git a/lib/public/views/Subsystems/Overview/index.js b/lib/public/views/Subsystems/Overview/index.js index 3621a89962..e0df579737 100644 --- a/lib/public/views/Subsystems/Overview/index.js +++ b/lib/public/views/Subsystems/Overview/index.js @@ -12,7 +12,7 @@ */ import { h } from '/js/src/index.js'; -import { table } from '../../../components/common/table/table.js'; +import { activeColumnsTable } from '../../../components/common/activeColumnsTable/activeColumnsTable.js'; const ACTIVE_COLUMNS = { id: { @@ -36,7 +36,7 @@ const ACTIVE_COLUMNS = { */ const subsystemOverview = (model) => [ h('h2', { onremove: () => model.subsystems.clearSubsystems() }, 'Subsystems'), - table(model.subsystems.getSubsystems(), ACTIVE_COLUMNS, { + activeColumnsTable(model.subsystems.getSubsystems(), ACTIVE_COLUMNS, { callback: (entry) => ({ onclick: () => model.router.go(`?page=subsystem-detail&id=${entry.id}`), }), diff --git a/lib/public/views/Tags/Details/tagDetailsComponent.js b/lib/public/views/Tags/Details/tagDetailsComponent.js index 0246a96c79..a1f6ab069b 100644 --- a/lib/public/views/Tags/Details/tagDetailsComponent.js +++ b/lib/public/views/Tags/Details/tagDetailsComponent.js @@ -14,7 +14,7 @@ import spinner from '../../../components/common/spinner.js'; import { TAG_DETAILS_PANELS_KEYS } from './TagDetailsModel.js'; import { h, sessionService } from '/js/src/index.js'; import { tagDetail } from '../../../components/tag/tagDetail.js'; -import { table } from '../../../components/common/table/table.js'; +import { activeColumnsTable } from '../../../components/common/activeColumnsTable/activeColumnsTable.js'; import { logsActiveColumns } from '../../Logs/ActiveColumns/logsActiveColumns.js'; import errorAlert from '../../../components/common/errorAlert.js'; import { BkpRoles } from '../../../domain/enums/BkpRoles.js'; @@ -74,7 +74,7 @@ export const tagDetailsComponent = (tagDetailsModel) => tagDetailsModel.tagDetai tagDetailsModel.tabbedPanelModel, { [TAG_DETAILS_PANELS_KEYS.LOGS]: 'Logs with this tag' }, { - [TAG_DETAILS_PANELS_KEYS.LOGS]: (currentPanelData) => table( + [TAG_DETAILS_PANELS_KEYS.LOGS]: (currentPanelData) => activeColumnsTable( currentPanelData, logsActiveColumns, null, diff --git a/lib/public/views/Tags/Overview/index.js b/lib/public/views/Tags/Overview/index.js index 2427b7d1b1..1c919e85d4 100644 --- a/lib/public/views/Tags/Overview/index.js +++ b/lib/public/views/Tags/Overview/index.js @@ -12,7 +12,7 @@ */ import { h } from '/js/src/index.js'; -import { table } from '../../../components/common/table/table.js'; +import { activeColumnsTable } from '../../../components/common/activeColumnsTable/activeColumnsTable.js'; import { tagsActiveColumns } from '../ActiveColumns/tagsActiveColumns.js'; /** @@ -43,7 +43,7 @@ const showTagsTable = (model, tags) => [ ]), h('.flex-row', [ h('.w-100.flex-column', [ - table(tags, tagsActiveColumns, { + activeColumnsTable(tags, tagsActiveColumns, { callback: (entry) => ({ onclick: () => model.router.go(`?page=tag-detail&id=${entry.id}`), }), diff --git a/lib/public/views/lhcPeriods/Overview/LhcPeriodsOverviewModel.js b/lib/public/views/lhcPeriods/Overview/LhcPeriodsOverviewModel.js index 5c07cf61d6..49e8726d27 100644 --- a/lib/public/views/lhcPeriods/Overview/LhcPeriodsOverviewModel.js +++ b/lib/public/views/lhcPeriods/Overview/LhcPeriodsOverviewModel.js @@ -14,7 +14,7 @@ import { Observable, RemoteData } from '/js/src/index.js'; import { getRemoteDataSlice } from '../../../utilities/fetch/getRemoteDataSlice.js'; import { PaginationModel } from '../../../components/Pagination/PaginationModel.js'; -import { SortModel } from '../../../components/common/table/SortModel.js'; +import { SortModel } from '../../../components/common/activeColumnsTable/SortModel.js'; import { TextTokensFilterModel } from '../../../components/Filters/common/filters/TextTokensFilterModel.js'; import { buildUrl } from '../../../utilities/fetch/buildUrl.js'; diff --git a/lib/public/views/lhcPeriods/Overview/LhcPeriodsOverviewPage.js b/lib/public/views/lhcPeriods/Overview/LhcPeriodsOverviewPage.js index 354cb73d9b..d9a52e793f 100644 --- a/lib/public/views/lhcPeriods/Overview/LhcPeriodsOverviewPage.js +++ b/lib/public/views/lhcPeriods/Overview/LhcPeriodsOverviewPage.js @@ -13,7 +13,7 @@ */ import { h } from '/js/src/index.js'; -import { table } from '../../../components/common/table/table.js'; +import { activeColumnsTable } from '../../../components/common/activeColumnsTable/activeColumnsTable.js'; import { lhcPeriodsActiveColumns } from '../ActiveColumns/lhcPeriodsActiveColumns.js'; import { paginationComponent } from '../../../components/Pagination/paginationComponent.js'; import { filtersPanelPopover } from '../../../components/Filters/common/filtersPanelPopover.js'; @@ -28,7 +28,7 @@ export const LhcPeriodsOverviewPage = ({ lhcPeriods: { overviewModel: lhcPeriods }, [ h('.flex-row.flex-grow.items-start', filtersPanelPopover(lhcPeriodsOverviewModel, lhcPeriodsActiveColumns)), h('.w-100.flex-column', [ - table( + activeColumnsTable( lhcPeriodsOverviewModel.lhcPeriods, lhcPeriodsActiveColumns, { classes: '.table-sm' },