Uzaktan İzleme çözümü hızlandırıcısı web kullanıcı arabirimine özel sayfa ekleme

Makale
10/02/2018

Bu makalede, Uzaktan İzleme çözümü hızlandırıcısı web kullanıcı arabirimine nasıl yeni bir sayfa ekleneceği gösterilmektedir. Makalede şunlar açıklanmaktadır:

Yerel geliştirme ortamını hazırlama.
Web kullanıcı arabirimine yeni sayfa ekleme.

Diğer nasıl yapılır kılavuzları, eklediğiniz sayfaya daha fazla özellik eklemek için bu senaryoyu genişletir.

Ö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

Kullanıcı arabirimi için yerel bir geliştirme ortamı hazırlama

Uzaktan İzleme çözümü hızlandırıcısı kullanıcı arabirimi kodu, React JavaScript çerçevesi kullanılarak uygulanır. Kaynak kodu Uzaktan İzleme WebUI GitHub deposunda bulabilirsiniz.

Kullanıcı arabiriminde değişiklik yapmak ve test etmek için bunu yerel geliştirme makinenizde çalıştırabilirsiniz. İsteğe bağlı olarak, yerel kopya çözüm hızlandırıcısının dağıtılan bir örneğine bağlanarak gerçek veya simülasyon cihazlarınızla etkileşim kurmasını sağlayabilir.

Yerel geliştirme ortamınızı hazırlamak için Git'i kullanarak Uzaktan İzleme WebUI deposunu yerel makinenize kopyalayın:

git clone https://github.com/Azure/pcs-remote-monitoring-webui.git

Sayfa ekleme

Web kullanıcı arabirimine sayfa eklemek için, sayfayı tanımlayan kaynak dosyaları eklemeniz ve web kullanıcı arabiriminin yeni sayfayı tanımasını sağlamak için var olan bazı dosyaları değiştirmeniz gerekir.

Sayfayı tanımlayan yeni dosyaları ekleme

Başlamak için src/walkthrough/components/pages/basicPage klasörü basit bir sayfa tanımlayan dört dosya içerir:

basicPage.container.js


import { withNamespaces } from 'react-i18next';

import { BasicPage } from './basicPage';

export const BasicPageContainer = withNamespaces()(BasicPage);

basicPage.js

import React, { Component } from 'react';

import { PageContent } from 'components/shared';

import './basicPage.scss';

export class BasicPage extends Component {
  render() {
    const { t } = this.props;
    return (
      <PageContent className="basic-page-container">
        { t('walkthrough.basicPage.pagePlaceholder') }
      </PageContent>
    );
  }
}

basicPage.scss

@import 'src/styles/variables';
@import 'src/styles/mixins';
@import 'src/styles/themes';

.basic-page-container { padding: $baseContentPadding; }

basicPage.test.js

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

import { BasicPage } from './basicPage';

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

    const fakeProps = {
      t: () => {},
    };

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

Yeni bir src/components/pages/example klasörü oluşturun ve bu dört dosyayı bu klasöre kopyalayın.

Yeni sayfayı web kullanıcı arabirimine ekleme

Yeni sayfayı web kullanıcı arabirimine eklemek için mevcut dosyalarda aşağıdaki değişiklikleri yapın:

Yeni sayfa kapsayıcısını src/components/pages/index.js dosyasına ekleyin:
```
export * from './example/basicPage.container';
```
(İsteğe bağlı) Yeni sayfa için bir SVG simgesi ekleyin. Daha fazla bilgi için bkz. webui/src/utilities/README.md. Mevcut bir SVG dosyasını kullanabilirsiniz.
Sayfa adını public/locales/en/translations.json çeviri dosyasına ekleyin. Web kullanıcı arabirimi, uluslararasılaştırma için i18next kullanır.
```
"tabs": {
  "basicPage": "Example",
},
```
En üst düzey uygulama sayfasını tanımlayan src/components/app.js dosyasını açın. Yeni sayfayı içeri aktarmalar listesine ekleyin:
```
// Page Components
import  {
  //...
  BasicPageContainer
} from './pages';
```
Aynı dosyada yeni sayfayı diziye pagesConfig ekleyin. to Yolun adresini ayarlayın, daha önce eklenen SVG simgesine ve çevirilere başvurun ve öğesini sayfanın kapsayıcısına ayarlayıncomponent:
```
const pagesConfig = [
  //...
  {
    to: '/basicpage',
    exact: true,
    svg: svgs.tabs.example,
    labelId: 'tabs.basicPage',
    component: BasicPageContainer
  },
  //...
];
```
Diziye yeni içerik haritaları crumbsConfig ekleyin:
```
const crumbsConfig = [
  //...
  {
    path: '/basicpage', crumbs: [
      { to: '/basicpage', labelId: 'tabs.basicPage' }
    ]
  },
  //...
];
```
Bu örnek sayfada yalnızca bir içerik haritası vardır, ancak bazı sayfalarda daha fazlası olabilir.

Yaptığınız tüm değişiklikleri kaydedin. Yeni sayfanız eklenmiş olarak web kullanıcı arabirimini çalıştırmaya hazırsınız.

Yeni sayfayı test etme

Komut isteminde deponuzun yerel kopyasının köküne gidin ve gerekli kitaplıkları yüklemek ve web kullanıcı arabirimini yerel olarak çalıştırmak için aşağıdaki komutları çalıştırın:

npm install
npm start

Önceki komut kullanıcı arabirimini konumunda https://localhost:3000/dashboardyerel olarak çalıştırır.

Web kullanıcı arabiriminin yerel örneğini çözüm hızlandırıcısının dağıtılmış bir örneğine bağlamadan panoda hatalar görürsünüz. Bu hatalar yeni sayfanızı test etme becerinizi etkilemez.

Artık site yerel olarak çalışırken kodu düzenleyebilir ve web kullanıcı arabiriminin dinamik olarak güncelleştirildiğini görebilirsiniz.

[İsteğe bağlı] Dağıtılan örneğe Bağlan

İsteğe bağlı olarak, web kullanıcı arabiriminin yerel çalışan kopyasını buluttaki Uzaktan İzleme çözümü hızlandırıcısına bağlayabilirsiniz:

Pcs CLI kullanarak çözüm hızlandırıcısının temel bir örneğini dağıtın. Dağıtımınızın adını ve sanal makine için sağladığınız kimlik bilgilerini not edin. Daha fazla bilgi için bkz. CLI kullanarak dağıtma.
Çözümünüzde mikro hizmetleri barındıran sanal makineye SSH erişimini etkinleştirmek için Azure portal veya az CLI kullanın. Örneğin:
```
az network nsg rule update --name SSH --nsg-name {your solution name}-nsg --resource-group {your solution name} --access Allow
```
SSH erişimini yalnızca test ve geliştirme sırasında etkinleştirmeniz gerekir. SSH'yi etkinleştirirseniz, mümkün olan en kısa sürede yeniden devre dışı bırakmanız gerekir.

Sanal makinenizin adını ve genel IP adresini bulmak için Azure portal veya az CLI kullanın. Örneğin:

az resource list --resource-group {your solution name} -o table
az vm list-ip-addresses --name {your vm name from previous command} --resource-group {your solution name} -o table

Önceki adımdaki IP adresini ve çözümü dağıtmak üzere bilgisayar çalıştırdığınızda sağladığınız kimlik bilgilerini kullanarak sanal makinenize bağlanmak için SSH kullanın.
Yerel UX'nin bağlanmasına izin vermek için sanal makinedeki bash kabuğunda aşağıdaki komutları çalıştırın:
```
cd /app
sudo ./start.sh --unsafe
```
Komutun tamamlanıp web sitesi başlatıldıktan sonra sanal makineyle bağlantınızı kesebilirsiniz.
Uzaktan İzleme WebUI deposunun yerel kopyasında dağıtılan çözümünüzün URL'sini eklemek için .env dosyasını düzenleyin:
```
NODE_PATH = src/
REACT_APP_BASE_SERVICE_URL=https://{your solution name}.azurewebsites.net/
```

Sonraki adımlar

Bu makalede, Uzaktan İzleme çözüm hızlandırıcısında web kullanıcı arabirimini özelleştirmenize yardımcı olacak kaynaklar hakkında bilgi edindiyseniz.

Şimdi bir sayfa tanımladığınıza göre, sonraki adım Kullanıcı arabiriminde görüntülenecek verileri alan Uzaktan İzleme çözümü hızlandırıcısı web kullanıcı arabirimine özel bir hizmet eklemektir .

Uzaktan İzleme çözüm hızlandırıcısı hakkında daha fazla kavramsal bilgi için bkz. Uzaktan İzleme mimarisi.

Share via