Uzaktan İzleme çözümü kullanıcı arabirimine açılır öğe ekleme - Azure

Makale
10/05/2018

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:

Git
Node.js

Başlamadan önce

Devam etmeden önce aşağıdaki makalelerde yer alan adımları tamamlamanız gerekir:

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.

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 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>

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/dashboardyerel 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.

Share via

Uzaktan İzleme çözümü hızlandırıcısı web kullanıcı arabirimine özel bir açılır öğe ekleme

Önkoşullar

Başlamadan önce

Açılır öğe ekleme

Açılır öğeyi tanımlayan yeni dosyaları ekleme

Açılır öğeyi sayfaya ekleme

Açılır öğeyi test etme

Sonraki adımlar

Ek kaynaklar