Uzaktan İzleme çözümü hızlandırıcısı web kullanıcı arabirimine özel bir açılır öğe ekleme
Bu makalede, Uzaktan İzleme çözümü hızlandırıcısı web kullanıcı arabirimindeki bir sayfaya nasıl yeni bir açılır öğe ekleneceği gösterilmektedir. Makalede şunlar açıklanmaktadır:
- Yerel geliştirme ortamını hazırlama.
- Web kullanıcı arabirimindeki bir sayfaya yeni bir açılır öğe ekleme.
Bu makaledeki örnek açılır öğe, Sayfada Uzaktan İzleme çözümü hızlandırıcısına özel kılavuz ekleme web kullanıcı arabirimi nasıl yapılır makalesinin nasıl ekleneceğini gösterdiği kılavuzla birlikte görüntülenir.
Önkoşullar
Bu nasıl yapılır kılavuzundaki adımları tamamlamak için yerel geliştirme makinenizde aşağıdaki yazılımların yüklü olması gerekir:
Başlamadan önce
Devam etmeden önce aşağıdaki makalelerde yer alan adımları tamamlamanız gerekir:
- Uzaktan İzleme çözümü hızlandırıcısı web kullanıcı arabirimine özel bir sayfa ekleyin.
- Uzaktan İzleme çözümü hızlandırıcısı web kullanıcı arabirimine özel hizmet ekleme
- Uzaktan İzleme çözümü hızlandırıcısı web kullanıcı arabirimine özel kılavuz ekleme
Açılır öğe ekleme
Web kullanıcı arabirimine bir açılır öğe eklemek için, açılır öğeyi tanımlayan kaynak dosyaları eklemeniz ve mevcut bazı dosyaları değiştirerek web kullanıcı arabiriminin yeni bileşeni tanımasını sağlamanız gerekir.
Açılır öğeyi tanımlayan yeni dosyaları ekleme
Başlamak için src/walkthrough/components/pages/pageWithFlyout/flyouts/exampleFlyout klasörü açılır öğeyi tanımlayan dosyaları içerir:
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>
);
}
}
src/walkthrough/components/pages/pageWithFlyout/flyouts klasörünü src/components/pages/example klasörüne kopyalayın.
Açılır öğeyi sayfaya ekleme
Açılır öğeyi eklemek için src/components/pages/example/basicPage.js değiştirin.
Bileşenlerden/paylaşılanlardan içeri aktarmalara Btn ekleyin ve svgs ve ExampleFlyoutContainer için içeri aktarmalar ekleyin:
import {
AjaxError,
ContextMenu,
PageContent,
RefreshBar,
Btn
} from 'components/shared';
import { ExampleGrid } from './exampleGrid';
import { svgs } from 'utilities';
import { ExampleFlyoutContainer } from './flyouts/exampleFlyout';
closedFlyoutState için bir const tanımı ekleyin ve oluşturucudaki duruma ekleyin:
const closedFlyoutState = { openFlyoutName: undefined };
export class BasicPage extends Component {
constructor(props) {
super(props);
this.state = { contextBtns: null, closedFlyoutState };
}
BasicPage sınıfına aşağıdaki işlevleri ekleyin:
closeFlyout = () => this.setState(closedFlyoutState);
openFlyout = (name) => () => this.setState({ openFlyoutName: name });
İşleme işlevine aşağıdaki const tanımlarını ekleyin:
const { openFlyoutName } = this.state;
const isExampleFlyoutOpen = openFlyoutName === 'example';
Açılır öğeyi bağlam menüsüne açmak için bir düğme ekleyin:
<ContextMenu key="context-menu">
{this.state.contextBtns}
<Btn svg={svgs.reconfigure} onClick={this.openFlyout('example')}>{t('walkthrough.pageWithFlyout.open')}</Btn>
</ContextMenu>,
Sayfa içeriğine metin ve açılır öğe kapsayıcısı ekleyin:
<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>
Açılır öğeyi test etme
Web kullanıcı arabirimi yerel olarak çalışmıyorsa, deponuzun yerel kopyasının kökünde aşağıdaki komutu çalıştırın:
npm start
Önceki komut kullanıcı arabirimini konumunda https://localhost:3000/dashboard
yerel olarak çalıştırır. Örnek sayfasına gidin ve Açılır Öğeyi Aç'a tıklayın.
Sonraki adımlar
Bu makalede, Uzaktan İzleme çözümü hızlandırıcısında web kullanıcı arabirimine sayfa eklemenize veya özelleştirmenize yardımcı olacak kaynaklar hakkında bilgi edindi.
Artık sayfada bir açılır öğe tanımladığınıza göre, sonraki adım Uzaktan İzleme çözümü hızlandırıcısı web kullanıcı arabiriminde panoya panel eklemektir.
Uzaktan İzleme çözüm hızlandırıcısı hakkında daha fazla kavramsal bilgi için bkz. Uzaktan İzleme mimarisi.