Adicionar uma grade personalizada à interface da Web da web do acelerador de solução de monitoramento remoto

  • Artigo

Este artigo mostra como adicionar uma nova grade a uma página na interface da Web da web do acelerador de solução de monitoramento remoto. O artigo descreve:

  • Como preparar um ambiente de desenvolvimento local.
  • Como adicionar uma nova grade a uma página na interface do usuário da web.

A grade de exemplo deste artigo exibe os dados do serviço que o artigo explicativo Adicionar um serviço personalizado ao objeto de instruções da Web da aceleração de solução de Monitoramento Remoto mostra como adicionar.

Pré-requisitos

Para concluir as etapas neste guia de instruções, você precisa ter o seguinte software instalado em seu computador de desenvolvimento local:

Antes de começar

Você deve concluir as etapas nos seguintes artigos antes de continuar:

Adicionar uma grade

Para adicionar uma grade à interface do usuário da web, você precisa adicionar os arquivos de origem que definem a grade e modificar alguns arquivos existentes para tornar a IU da web ciente do novo componente.

Adicione os novos arquivos que definem a grade

Para começar, a pasta src / walkthrough / components / pages / pageWithGrid / exampleGrid contém os arquivos que definem uma grade:

exampleGrid.js


import React, { Component } from 'react';
import { Btn, ComponentArray, PcsGrid } from 'components/shared';
import { exampleColumnDefs, defaultExampleGridProps } from './exampleGridConfig';
import { isFunc, svgs, translateColumnDefs } from 'utilities';
import { checkboxColumn } from 'components/shared/pcsGrid/pcsGridConfig';

const initialState = {
  softSelectedId: undefined
};

/**
 * A grid for displaying example data
 *
 * Encapsulates the PcsGrid props
 */
export class ExampleGrid extends Component {
  constructor(props) {
    super(props);

    // Set the initial state
    this.state = initialState;

    // Default device grid columns
    this.columnDefs = [
      checkboxColumn,
      exampleColumnDefs.id,
      exampleColumnDefs.description
    ];

    // Set up the available context buttons.
    // If these are subject to user permissions, use the Protected component (src/components/shared/protected).
    this.contextBtns =
      <ComponentArray>
        <Btn svg={svgs.reconfigure} onClick={this.clickContextBtn('btn1')}>{props.t('walkthrough.pageWithGrid.grid.btn1')}</Btn>
        <Btn svg={svgs.trash} onClick={this.clickContextBtn('btn2')}>{props.t('walkthrough.pageWithGrid.grid.btn2')}</Btn>
      </ComponentArray>;
  }

  /**
   * Get the grid api options
   *
   * @param {Object} gridReadyEvent An object containing access to the grid APIs
  */
  onGridReady = gridReadyEvent => {
    this.gridApi = gridReadyEvent.api;
    // Call the onReady props if it exists
    if (isFunc(this.props.onGridReady)) {
      this.props.onGridReady(gridReadyEvent);
    }
  };

  clickContextBtn = (input) => () => {
    //Just for demo purposes. Don't console log in a real grid.
    console.log('Context button clicked', input);
    console.log('Hard selected rows', this.gridApi.getSelectedRows());
  };

  /**
   * Handles soft select props method.
   * Soft selection happens when the user clicks on the row.
   *
   * @param rowId The id of the currently soft selected item
   * @param rowData The rowData from the underlying grid. MAY BE OUT OF DATE.
   */
  onSoftSelectChange = (rowId, rowData) => {
    //Note: only the Id is reliable, rowData may be out of date
    const { onSoftSelectChange } = this.props;
    if (rowId) {
      console.log('Soft selected', rowId); //Just for demo purposes. Don't console log a real grid.
      this.setState({ softSelectedId: rowId });
    }
    if (isFunc(onSoftSelectChange)) {
      onSoftSelectChange(rowId, rowData);
    }
  }

  /**
   * Handles context filter changes and calls any hard select props method.
   * Hard selection happens when the user checks the box for the row.
   *
   * @param {Array} selectedObjs A list of currently selected objects in the grid
   */
  onHardSelectChange = (selectedObjs) => {
    const { onContextMenuChange, onHardSelectChange } = this.props;
    // Show the context buttons when there are rows checked.
    if (isFunc(onContextMenuChange)) {
      onContextMenuChange(selectedObjs.length > 0 ? this.contextBtns : null);
    }
    if (isFunc(onHardSelectChange)) {
      onHardSelectChange(selectedObjs);
    }
  }

  getSoftSelectId = ({ id } = '') => id;

  render() {
    const gridProps = {
      /* Grid Properties */
      ...defaultExampleGridProps,
      columnDefs: translateColumnDefs(this.props.t, this.columnDefs),
      sizeColumnsToFit: true,
      getSoftSelectId: this.getSoftSelectId,
      softSelectId: (this.state.softSelectedDevice || {}).id,
      ...this.props, // Allow default property overrides
      deltaRowDataMode: true,
      enableSorting: true,
      unSortIcon: true,
      getRowNodeId: ({ id }) => id,
      context: {
        t: this.props.t
      },
      /* Grid Events */
      onRowClicked: ({ node }) => node.setSelected(!node.isSelected()),
      onGridReady: this.onGridReady,
      onSoftSelectChange: this.onSoftSelectChange,
      onHardSelectChange: this.onHardSelectChange
    };

    return (
      <PcsGrid key="example-grid-key" {...gridProps} />
    );
  }
}

exampleGridConfig.js


import Config from 'app.config';
import { SoftSelectLinkRenderer } from 'components/shared/cellRenderers';

/** A collection of column definitions for the example grid */
export const exampleColumnDefs = {
  id: {
    headerName: 'walkthrough.pageWithGrid.grid.name',
    field: 'id',
    sort: 'asc',
    cellRendererFramework: SoftSelectLinkRenderer
  },
  description: {
    headerName: 'walkthrough.pageWithGrid.grid.description',
    field: 'descr'
  }
};

/** Given an example object, extract and return the device Id */
export const getSoftSelectId = ({ id }) => id;

/** Shared example grid AgGrid properties */
export const defaultExampleGridProps = {
  enableColResize: true,
  multiSelect: true,
  pagination: false,
  paginationPageSize: Config.paginationPageSize,
  rowSelection: 'multiple'
};

Cópia de src/passo a passo/componentes/páginas/pageWithGrid/exampleGrid pasta para o src/componentes/páginas/exemplo pasta.

Adicionar a grade para a página

Modificar a src/components/pages/example/basicPage.container.js da seguinte forma para importar as definições de serviço:

import { connect } from 'react-redux';
import { translate } from 'react-i18next';

import {
  epics as exampleEpics,
  getExamples,
  getExamplesError,
  getExamplesLastUpdated,
  getExamplesPendingStatus
} from 'store/reducers/exampleReducer';
import { BasicPage } from './basicPage';

// Pass the data
const mapStateToProps = state => ({
  data: getExamples(state),
  error: getExamplesError(state),
  isPending: getExamplesPendingStatus(state),
  lastUpdated: getExamplesLastUpdated(state)
});

// Wrap the dispatch method
const mapDispatchToProps = dispatch => ({
  fetchData: () => dispatch(exampleEpics.actions.fetchExamples())
});

export const BasicPageContainer = translate()(connect(mapStateToProps, mapDispatchToProps)(BasicPage));

Modificar a src/components/pages/example/basicPage.js da seguinte maneira para adicionar a grade:

// Copyright (c) Microsoft. All rights reserved.

import React, { Component } from 'react';

import {
  AjaxError,
  ContextMenu,
  PageContent,
  RefreshBar
} from 'components/shared';
import { ExampleGrid } from './exampleGrid';

import './basicPage.css';

export class BasicPage extends Component {
  constructor(props) {
    super(props);
    this.state = { contextBtns: null };
  }

  componentDidMount() {
    const { isPending, lastUpdated, fetchData } = this.props;
    if (!lastUpdated && !isPending) fetchData();
  }

  onGridReady = gridReadyEvent => this.gridApi = gridReadyEvent.api;

  onContextMenuChange = contextBtns => this.setState({ contextBtns });

  render() {
    const { t, data, error, isPending, lastUpdated, fetchData } = this.props;
    const gridProps = {
      onGridReady: this.onGridReady,
      rowData: isPending ? undefined : data || [],
      onContextMenuChange: this.onContextMenuChange,
      t: this.props.t
    };

    return [
      <ContextMenu key="context-menu">
        {this.state.contextBtns}
      </ContextMenu>,
      <PageContent className="basic-page-container" key="page-content">
        <RefreshBar refresh={fetchData} time={lastUpdated} isPending={isPending} t={t} />
        {!!error && <AjaxError t={t} error={error} />}
        {!error && <ExampleGrid {...gridProps} />}
      </PageContent>
    ];
  }
}

Modificar a src/components/pages/example/basicPage.test.js da seguinte forma para atualizar os testes:

// Copyright (c) Microsoft. All rights reserved.

import React from 'react';
import { shallow } from 'enzyme';
import 'polyfills';

import { BasicPage } from './basicPage';

describe('BasicPage Component', () => {
  it('Renders without crashing', () => {

    const fakeProps = {
      data: undefined,
      error: undefined,
      isPending: false,
      lastUpdated: undefined,
      fetchData: () => { },
      t: () => { },
    };

    const wrapper = shallow(
      <BasicPage {...fakeProps} />
    );
  });
});

A grade de teste

Se a interface do usuário da web ainda não estiver em execução localmente, execute o seguinte comando na raiz da sua cópia local do repositório:

npm start

O comando anterior é executado localmente na interface do usuário em https://localhost:3000/dashboard. Navegue até a página Exemplo para ver os dados de exibição da grade do serviço.

Selecionar linhas

Existem duas opções para permitir que um usuário selecione linhas na grade:

Linhas de seleção de disco rígido

Se um usuário precisar atuar em várias linhas ao mesmo tempo, use as caixas de seleção nas linhas:

  1. Ative a seleção de linhas rígidas adicionando checkboxColumn ao columnDefs fornecido à grade. checkboxColumn é definido em /src/components/shared/pcsGrid/pcsGrid.js:

    this.columnDefs = [
  checkboxColumn,
  exampleColumnDefs.id,
  exampleColumnDefs.description
];

  2. Para acessar os itens selecionados, você recebe uma referência à API da grade interna:

    onGridReady = gridReadyEvent => {
  this.gridApi = gridReadyEvent.api;
  // Call the onReady props if it exists
  if (isFunc(this.props.onGridReady)) {
    this.props.onGridReady(gridReadyEvent);
  }
};

  3. Forneça botões de contexto à página quando uma linha na grade for selecionada de forma rígida:

    this.contextBtns = [
  <Btn key="context-btn-1" svg={svgs.reconfigure} onClick={this.doSomething()}>Button 1</Btn>,
  <Btn key="context-btn-2" svg={svgs.trash} onClick={this.doSomethingElse()}>Button 2</Btn>
];

    onHardSelectChange = (selectedObjs) => {
  const { onContextMenuChange, onHardSelectChange } = this.props;
  // Show the context buttons when there are rows checked.
  if (isFunc(onContextMenuChange)) {
    onContextMenuChange(selectedObjs.length > 0 ? this.contextBtns : null);
  }
  //...
}

  4. Quando um botão de contexto é clicado, pegue os itens selecionados para fazer seu trabalho:

    doSomething = () => {
  //Just for demo purposes. Don't console log in a real grid.
  console.log('Hard selected rows', this.gridApi.getSelectedRows());
};

Linhas de Soft-select

Se o usuário só precisa agir em uma única linha, configurar um link de soft-select para uma ou mais colunas de columnDefs.

  1. Em exampleGridConfig.js, adicione SoftSelectLinkRenderer como o cellRendererFramework para um columnDef.

    export const exampleColumnDefs = {
  id: {
    headerName: 'examples.grid.name',
    field: 'id',
    sort: 'asc',
    cellRendererFramework: SoftSelectLinkRenderer
  }
};

  2. Quando um link de seleção suave é clicado, ele aciona o evento onSoftSelectChange. Execute qualquer ação for desejada para aquela linha, como abrir um submenu de detalhes. Este exemplo simplesmente grava no console:

    onSoftSelectChange = (rowId, rowData) => {
  //Note: only the Id is reliable, rowData may be out of date
  const { onSoftSelectChange } = this.props;
  if (rowId) {
    //Just for demo purposes. Don't console log a real grid.
    console.log('Soft selected', rowId);
    this.setState({ softSelectedId: rowId });
  }
  if (isFunc(onSoftSelectChange)) {
    onSoftSelectChange(rowId, rowData);
  }
}

Próximas etapas

Neste artigo, você aprendeu sobre os recursos disponíveis para ajudá-lo a adicionar ou personalizar páginas na interface do usuário da Web no acelerador de solução de monitoramento remoto.

Agora você definiu uma grade, a próxima etapa é Adicionar um flyout personalizado à interface da Web da Web do acelerador de solução de Monitoramento Remoto exibida na página de exemplo.

Para obter mais informações conceituais sobre o acelerador de solução de Monitoramento Remoto, consulte a arquitetura de Monitoramento Remoto.