Adicionar um desdobrável personalizado à interface de usuário da web do acelerador de solução de monitoramento remoto
Este artigo mostra como adicionar um novo desdobrável em 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 um novo flyout a uma página na interface do usuário da web.
O flyout de exemplo deste artigo é exibido na página com a grade que a seção Adicionar uma grade personalizada ao artigo explicativo de UI da Web do acelerador 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:
- Adicione uma página personalizada à interface do usuário da Web do acelerador de solução de Monitoramento Remoto.
- Adicione um serviço personalizado à interface do usuário da Web do acelerador de solução de Monitoramento Remoto
- Adicionar uma grade personalizada à interface da Web da web do acelerador de solução de monitoramento remoto
Adicionar um submenu
Para adicionar um submenu à interface do usuário da web, você precisa adicionar os arquivos de origem que definem o submenu e modificar alguns arquivos existentes para tornar a interface do usuário da web ciente do novo componente.
Adicione os novos arquivos que definem o submenu
Para começar, o src/passo a passo/componentes/páginas/pageWithFlyout/flyouts/exampleFlyout pasta contém os arquivos que definem um submenu:
exampleFlyout.container.js
import { withNamespaces } from 'react-i18next';
import { ExampleFlyout } from './exampleFlyout';
export const ExampleFlyoutContainer = withNamespaces()(ExampleFlyout);
exampleFlyout.js
import React, { Component } from 'react';
import { ExampleService } from 'walkthrough/services';
import { svgs } from 'utilities';
import {
AjaxError,
Btn,
BtnToolbar,
Flyout,
Indicator,
SectionDesc,
SectionHeader,
SummaryBody,
SummaryCount,
SummarySection,
Svg
} from 'components/shared';
import './exampleFlyout.scss';
export class ExampleFlyout extends Component {
constructor(props) {
super(props);
this.state = {
itemCount: 3, //just a fake count; this would often be a list of items that are being acted on
isPending: false,
error: undefined,
successCount: 0,
changesApplied: false
};
}
componentWillUnmount() {
if (this.subscription) this.subscription.unsubscribe();
}
apply = (event) => {
event.preventDefault();
this.setState({ isPending: true, successCount: 0, error: null });
this.subscription = ExampleService.updateExampleItems()
.subscribe(
_ => {
this.setState({ successCount: this.state.successCount + this.state.itemCount });
// Update any global state in the redux store by calling any
// dispatch methods that were mapped in this flyout's container.
},
error => this.setState({ error, isPending: false, changesApplied: true }),
() => this.setState({ isPending: false, changesApplied: true, confirmStatus: false })
);
}
getSummaryMessage() {
const { t } = this.props;
const { isPending, changesApplied } = this.state;
if (isPending) {
return t('walkthrough.pageWithFlyout.flyouts.example.pending');
} else if (changesApplied) {
return t('walkthrough.pageWithFlyout.flyouts.example.applySuccess');
} else {
return t('walkthrough.pageWithFlyout.flyouts.example.affected');
}
}
render() {
const { t, onClose } = this.props;
const {
itemCount,
isPending,
error,
successCount,
changesApplied
} = this.state;
const summaryCount = changesApplied ? successCount : itemCount;
const completedSuccessfully = changesApplied && !error;
const summaryMessage = this.getSummaryMessage();
return (
<Flyout header={t('walkthrough.pageWithFlyout.flyouts.example.header')} t={t} onClose={onClose}>
{
/**
* Really, anything you need could go inside a flyout.
* The following is a simple empty form with buttons to do an action or close the flyout.
* */
}
<form className="example-flyout-container" onSubmit={this.apply}>
<div className="example-flyout-header">{t('walkthrough.pageWithFlyout.flyouts.example.header')}</div>
<div className="example-flyout-descr">{t('walkthrough.pageWithFlyout.flyouts.example.description')}</div>
<div className="form-placeholder">{t('walkthrough.pageWithFlyout.flyouts.example.insertFormHere')}</div>
{/** Sumarizes the action being taken; including count of items affected & status/pending indicator */}
<SummarySection>
<SectionHeader>{t('walkthrough.pageWithFlyout.flyouts.example.summaryHeader')}</SectionHeader>
<SummaryBody>
<SummaryCount>{summaryCount}</SummaryCount>
<SectionDesc>{summaryMessage}</SectionDesc>
{this.state.isPending && <Indicator />}
{completedSuccessfully && <Svg className="summary-icon" path={svgs.apply} />}
</SummaryBody>
</SummarySection>
{/** Displays an error message if one occurs while applying changes. */}
{error && <AjaxError className="example-flyout-error" t={t} error={error} />}
{
/** If changes are not yet applied, show the buttons for applying changes and closing the flyout. */
!changesApplied &&
<BtnToolbar>
<Btn svg={svgs.reconfigure} primary={true} disabled={isPending || itemCount === 0 } type="submit">{t('walkthrough.pageWithFlyout.flyouts.example.apply')}</Btn>
<Btn svg={svgs.cancelX} onClick={onClose}>{t('walkthrough.pageWithFlyout.flyouts.example.cancel')}</Btn>
</BtnToolbar>
}
{
/**
* If changes are applied, show only the close button.
* Other text or component might be included here as well.
* For example, you might provide a link to the detail page for a newly submitted job.
* */
!!changesApplied &&
<BtnToolbar>
<Btn svg={svgs.cancelX} onClick={onClose}>{t('walkthrough.pageWithFlyout.flyouts.example.close')}</Btn>
</BtnToolbar>
}
</form>
</Flyout>
);
}
}
Cópia de src/passo a passo/componentes/páginas/pageWithFlyout/flyouts pasta para o src/componentes/páginas/exemplo pasta.
Adicionar submenu à página
Modificar a src/components/pages/example/basicPage.js para adicionar o submenu.
Adicione Btn para as importações do componentes/shared e adicione as importações para svgs e ExampleFlyoutContainer:
import {
AjaxError,
ContextMenu,
PageContent,
RefreshBar,
Btn
} from 'components/shared';
import { ExampleGrid } from './exampleGrid';
import { svgs } from 'utilities';
import { ExampleFlyoutContainer } from './flyouts/exampleFlyout';
Adicionar um const definição closedFlyoutState e adicioná-lo para o estado no construtor:
const closedFlyoutState = { openFlyoutName: undefined };
export class BasicPage extends Component {
constructor(props) {
super(props);
this.state = { contextBtns: null, closedFlyoutState };
}
Adicione as seguintes funções para o página básica classe:
closeFlyout = () => this.setState(closedFlyoutState);
openFlyout = (name) => () => this.setState({ openFlyoutName: name });
Adicione o seguinte const definições para o renderizar função:
const { openFlyoutName } = this.state;
const isExampleFlyoutOpen = openFlyoutName === 'example';
Adicione um botão para abrir o flyout no menu de contexto:
<ContextMenu key="context-menu">
{this.state.contextBtns}
<Btn svg={svgs.reconfigure} onClick={this.openFlyout('example')}>{t('walkthrough.pageWithFlyout.open')}</Btn>
</ContextMenu>,
Adicione algum texto e o contêiner flyout ao conteúdo da página:
<PageContent className="basic-page-container" key="page-content">
{t('walkthrough.pageWithFlyout.pageBody')}
{ isExampleFlyoutOpen && <ExampleFlyoutContainer onClose={this.closeFlyout} /> }
<RefreshBar refresh={fetchData} time={lastUpdated} isPending={isPending} t={t} />
{!!error && <AjaxError t={t} error={error} />}
{!error && <ExampleGrid {...gridProps} />}
</PageContent>
Testar o submenu
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 exemplo da página e clique em flutuante aberto.
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 um submenu em uma página, a próxima etapa é Adicionar um painel ao painel na IU da Web do acelerador de solução de Monitoramento Remoto.
Para obter mais informações conceituais sobre o acelerador de solução de Monitoramento Remoto, consulte a arquitetura de Monitoramento Remoto.