view.js

/**
 * @license
 * Copyright 2019-2020 CERN and copyright holders of ALICE O2.
 * See http://alice-o2.web.cern.ch/copyright for details of the copyright holders.
 * All rights not expressly granted are reserved.
 *
 * This software is distributed under the terms of the GNU General Public
 * License v3 (GPL Version 3), copied verbatim in the file "COPYING".
 *
 * In applying this license CERN does not waive the privileges and immunities
 * granted to it by virtue of its status as an Intergovernmental Organization
 * or submit itself to any jurisdiction.
 */

import { h, notification } from '/js/src/index.js';

import tableFilters from './logFilter/tableFilters.js';
import commandFilters from './logFilter/commandFilters.js';
import { commandLogs } from './log/commandLogs.js';
import statusBar from './log/statusBar.js';
import inspector from './log/inspector.js';
import tableLogsHeader from './log/tableLogsHeader.js';
import tableLogsContent from './log/tableLogsContent.js';
import tableLogsScrollMap from './log/tableLogsScrollMap.js';
import aboutComponent from './about/about.component.js';
import errorComponent from './common/errorComponent.js';
import { cellContextMenu } from './log/cellContextMenu.js';

/**
 * Main view of the application
 * @param {Model} model - root model of the application
 * @returns {vnode} - the view of the application
 */
export default (model) => [
  notification(model.notification),
  cellContextMenu(model),
  h('.flex-column absolute-fill', [
    h('.shadow-level2', [
      h('header.p1.flex-row.f7.g1.justify-between', [
        h('.flex-row.g3', commandLogs(model)),
        h('.flex-row.g3', commandFilters(model)),
      ]),
      h('header.f7', tableFilters(model)),
    ]),
    h('.flex-grow.flex-row.shadow-level0.logs-container', [
      aboutComponent(model),
      logsTable(model),
      inspectorSide(model),
    ]),
    h('footer.f7.ph1', [statusBar(model)]),
  ]),
];

/**
 * Component which will display a virtual table containing the logs filtered by the user
 * @param {Model} model - root model of the application
 * @returns {vnode} - the virtual table containing the logs
 */
const logsTable = (model) =>
  h('main.flex-grow.flex-column.transition-background-color', {
    className: model.log.queryResult.isLoading() ? 'bg-gray' : '',
  }, [
    // table fixed header
    tableLogsHeader(model),
    // table scrollable content
    model.log.queryResult.isFailure()
      ? errorComponent(model.log.queryResult.payload)
      : h('.flex-row.flex-grow.logs-content', [
        tableLogsContent(model),
        tableLogsScrollMap(model),
      ]),
  ]);

/**
 * Component which will display information about the log selected by the user
 * @param {Model} model - root model of the application
 * @returns {vnode} - the inspector component
 */
const inspectorSide = (model) => h('aside.sidebar', {
  style: { width: model.inspectorEnabled ? '' : '0rem' },
}, [h('.sidebar-content.scroll-y#inspector-sidebar', [inspector(model)])]);