{"id":2378,"date":"2019-11-15T10:11:00","date_gmt":"2019-11-15T06:11:00","guid":{"rendered":"https:\/\/www.volgablob.ru\/blog\/?p=2378"},"modified":"2019-12-05T14:37:57","modified_gmt":"2019-12-05T10:37:57","slug":"%d1%81%d0%be%d0%b7%d0%b4%d0%b0%d0%b5%d0%bc-%d0%bf%d0%be%d0%bb%d1%8c%d0%b7%d0%be%d0%b2%d0%b0%d1%82%d0%b5%d0%bb%d1%8c%d1%81%d0%ba%d1%83%d1%8e-%d0%b2%d0%b8%d0%b7%d1%83%d0%b0%d0%bb%d0%b8%d0%b7%d0%b0%d1%86","status":"publish","type":"post","link":"https:\/\/blog.volgablob.ru\/?p=2378","title":{"rendered":"\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0443\u044e \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0432 Kibana 7.1.1"},"content":{"rendered":"
<\/div>\n
\"Kibana\"<\/figure><\/div>\n\n\n\n

\u041f\u0440\u0435\u0434\u0438\u0441\u043b\u043e\u0432\u0438\u0435<\/h3>\n\n\n\n

\u0412 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430\u0448\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0430\u0441\u044c \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u043d\u0435 \u0442\u0430\u043a \u0443\u0436 \u0438 \u043c\u043d\u043e\u0433\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0439 \u0438\u043b\u0438 “\u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u043e\u0432” \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438.
\u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f<\/a> \u043f\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u043d\u043e, \u043a\u0430\u043a \u043c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u043e\u043d\u0430 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0443\u0434\u043e\u0431\u043d\u0430 \u0438 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0430.
\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043e\u043f\u0438\u0448\u0443 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u0430\u043a \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u043d\u0430 kibana 7.1.*<\/em>.<\/p>\n\n\n\n

\n\n\n\n

\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u043b\u0430\u0433\u0438\u043d<\/h3>\n\n\n\n

\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 \u043f\u0430\u043f\u043a\u0443 kibana\/plugins<\/code>
\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0430\u043f\u043a\u0443 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u043b\u0430\u0433\u0438\u043d\u0430.<\/p>\n\n\n\n

\u0412 \u043d\u0430\u0448\u0435\u0439 \u043f\u0430\u043f\u043a\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u043c: <\/p>\n\n\n\n

  • package.json<\/code><\/li>
  • index.js<\/code><\/li>
  • public (\u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f)<\/code><\/li><\/ul>\n\n\n\n
    <\/div>\n\n\n\n

    \u0412 package.json:<\/strong><\/p>\n\n\n\n

    • name<\/code> – \u0438\u043c\u044f \u043f\u043b\u0430\u0433\u0438\u043d\u0430.<\/li>
    • version<\/code> – \u0432\u0435\u0440\u0441\u0438\u044f Kibana<\/em>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d.<\/li>
    • description<\/code> – \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435.<\/li>
    • main<\/code> – \u0438\u043c\u044f \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u043f\u043b\u0430\u0433\u0438\u043d\u0430.
      <\/li><\/ul>\n\n\n\n
      <\/div>\n\n\n\n
      {\n    "name": "SM_tutorial_vis",\n    "version": "7.1.1",\n    "description": "SM_tutorial_vis",\n    "main": "index.js"\n}<\/pre><\/div>\n\n\n\n
      <\/div>\n\n\n\n
      \u0412 index.js:<\/strong><\/p>\n\n\n\n
      \u041c\u044b \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u043f\u043b\u0430\u0433\u0438\u043d Kibana<\/em>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439. \u041d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0435 \u0438\u043c\u044f!<\/p>\n\n\n\n
      export default function (kibana) {\n    return new kibana.Plugin({\n        uiExports: {\n            visTypes: [\n            'plugins\/SM_tutorial_vis\/SM_tutorial_vis'\n            ]\n        },\n    });\n}<\/pre><\/div>\n\n\n\n
      <\/div>\n\n\n\n
      \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e<\/h3>\n\n\n\n
      \u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 \u043f\u0430\u043f\u043a\u0443 \/public<\/code>.<\/p>\n\n\n\n
      C\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0444\u0430\u0439\u043b\u044b<\/strong>:<\/p>\n\n\n\n
      • SM_tutorial_vis.js<\/code><\/li>
      • SM_tutorial_vis_controller.js<\/code><\/li>
      • SM_tutorial_vis_editor.html<\/code><\/li>
      • SM_tutorial_vis.less<\/code><\/li><\/ul>\n\n\n\n
        <\/div>\n\n\n\n
        SM_tutorial_vis.js<\/h4>\n\n\n\n
        \u0412 \u044d\u0442\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0441\u0430\u043c\u0430 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b.<\/p>\n\n\n\n
        \u0414\u0435\u043b\u0430\u0435\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u044b:<\/p>\n\n\n\n
        import { VisFactoryProvider } from 'ui\/vis\/vis_factory';\nimport { VisTypesRegistryProvider } from 'ui\/registry\/vis_types';\nimport { Schemas } from 'ui\/vis\/editors\/default\/schemas';\nimport '.\/SM_tutorial_vis.less';\nimport optionsTemplate from '.\/SM_tutorial_vis_editor.html';\nimport { SmTutorialController } from '.\/SM_tutorial_vis_controller';<\/pre><\/div>\n\n\n\n
        \u041e\u043f\u0438\u0448\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e SmTutorialVis<\/em>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043a\u043b\u0430\u0441\u0441\u0430 VisFactoryProvider<\/code>:<\/p>\n\n\n\n
        function SmTutorialVis(Private) {\n  const VisFactory = Private(VisFactoryProvider);\n  return VisFactory.createBaseVisualization({ \/\/\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e\n         ...\n  });\n}<\/pre><\/div>\n\n\n\n
        \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e VisFactoryProvider<\/code> \u043f\u043e\u043c\u0438\u043c\u043e BaseVisualisation<\/code>:<\/p>\n\n\n\n
        • AngularVisType<\/code><\/li>
        • ReactVisType<\/code><\/li>
        • VislibVisType<\/code><\/li><\/ul>\n\n\n\n
          <\/div>\n\n\n\n
          \u0414\u0430\u043b\u0435\u0435 \u043e\u043f\u0438\u0448\u0435\u043c \u043d\u0430\u0448\u0443 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e:<\/p>\n\n\n\n
            return VisFactory.createBaseVisualization({\n    name: 'SM_tutorial_vis', \/\/ \u0418\u043c\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438\n    type: 'metric', \/\/ \u0422\u0438\u043f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438\n    title: 'SM tutorial', \/\/ \u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u0432 kibana\n    icon: 'smVis', \/\/ \u0418\u043a\u043e\u043d\u043a\u0430 EUI\n    description: 'This is visualisation from volgablob tutorial', \/\/ \u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\n    visualization: SmTutorialController, \/\/\u041a\u043b\u0430\u0441\u0441 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u043f\u0438\u0448\u0435\u043c \u043b\u043e\u0433\u0438\u043a\u0443<\/pre><\/div>\n\n\n\n
          \u0414\u0430\u043b\u0435\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u043b\u043e\u0432\u0430\u0440\u044c visConfig, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u0434\u0430\u0442\u044c \u043b\u044e\u0431\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u043c \u043f\u0440\u0438\u0433\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0435. \u042d\u0442\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u043e\u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u043d\u0430\u0448\u0438\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438.
          \u041e\u043d\u0438 \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u0432\u043e \u0432\u043a\u043b\u0430\u0434\u043a\u0435 Options<\/code> \u0432 \u0441\u0430\u043c\u043e\u0439 Kibana<\/em> \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n\n\n\n
          visConfig: {\n      defaults: {\n        metricTitle: null,\n        fontSize: 40,\n        titleIndicator: 'SM title',\n        volgablob: 'VolgaBlob'\n      },\n    },<\/pre><\/div>\n\n\n\n
          \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0441\u043b\u043e\u0432\u0430\u0440\u044c editorConfig<\/em>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d \u0432\u043a\u043b\u0430\u0434\u043a\u0438 Options<\/code> \u0438 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u0445\u0435\u043c\u0443:<\/p>\n\n\n\n
          editorConfig: {\n      optionsTemplate: optionsTemplate, \/\/html \u0448\u0430\u0431\u043b\u043e\u043d \u0432\u043a\u043b\u0430\u0434\u043a\u0438 Options\n      \/\/\u0421\u0445\u0435\u043c\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0430 \u0434\u043b\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438\n      \/\/\u041c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c metrics, buckets \u0438 \u0442\u0434\n      schemas: new Schemas([\n        {\n          group: 'metrics',\n          name: 'metric',\n          title: 'Metric',\n          aggFilter: ['max'], \/\/\u0424\u0438\u043b\u044c\u0442\u0440 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0445 \u0430\u0433\u0440\u0435\u0433\u0430\u0446\u0438\u0439. \u041c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0432\u0430\u0442\u044c '!avg', \u0442\u043e\u0433\u0434\u0430 \u0431\u0443\u0434\u0443\u0442 \u0432\u0441\u0435, \u043a\u0440\u043e\u043c\u0435 avg\n          min: 1, \/\/\u041c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043c\u0435\u0442\u0440\u0438\u043a\n          max: 1, \/\/\u041c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043c\u0435\u0442\u0440\u0438\u043a\n          defaults: [\n            { type: 'max', schema: 'metric' } \/\/\u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043c\u0435\u0442\u0440\u0438\u043a\u0438\n          ]\n        }\n      ])\n    },\n  });\n}<\/pre><\/div>\n\n\n\n
          <\/div>\n\n\n\n
          \u0418 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0447\u0430\u0441\u0442\u044c \u0432 \u044d\u0442\u043e\u043c \u0444\u0430\u0439\u043b\u0435, \u043d\u043e \u043d\u0435 \u043f\u043e \u0437\u043d\u0430\u0447\u0438\u043c\u043e\u0441\u0442\u0438!<\/strong><\/p>\n\n\n\n
          \u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u043d\u0430\u0448\u0443 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e c \u043f\u043e\u043c\u043e\u0449\u044c\u044e VisTypesRegistryProvider<\/code>. <\/p>\n\n\n\n
          \u041a\u0430\u043a \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440, \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u0443\u044e \u043d\u0430\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044e SmTutorialVis<\/code>:<\/p>\n\n\n\n
          VisTypesRegistryProvider.register(SmTutorialVis);<\/pre><\/div>\n\n\n\n
          <\/div>\n\n\n\n
          \u041b\u043e\u0433\u0438\u043a\u0430 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438<\/h3>\n\n\n\n
          SM_tutorial_vis_controller.js<\/h4>\n\n\n\n
          1. \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043a\u043b\u0430\u0441\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u043b\u0438 \u043a\u0430\u043a \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u0432 SM_tutorial_vis.js<\/code><\/li><\/ol>\n\n\n\n
            \u041d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0441 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430:<\/p>\n\n\n\n
            class SmTutorialController {\n    constructor(el, vis) {\n      this.el = el;\n      this.vis = vis;\n      this.container = document.createElement('div');\n      this.container.className = 'smTutorial';\n      this.el.appendChild(this.container);\n      this.metricValue = null;\n    }<\/pre><\/div>\n\n\n\n
            \u041e\u043f\u0438\u0448\u0435\u043c \u043c\u0435\u0442\u043e\u0434 render<\/code>.
            \u042d\u0442\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043c\u0435\u0442\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0440\u0438\u0441\u0443\u0435\u0442 \u043d\u0430\u0448\u0443 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e. \u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043e\u0431\u044b\u0447\u043d\u044b\u0439 div, \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f.<\/p>\n\n\n\n
            render(visData, status) {\n\n      this.container.innerHTML = '';\n      const table = visData;\n      const metrics = [];\n      let bucketAgg;\n\n      table.columns.forEach((column, i) => {\n        table.rows.forEach(row => {\n          const value = row[i];\n          metrics.push({\n            title: bucketAgg ? `${row[0]} ${column.title}` : column.title,\n            value: row[column['id']],\n            formattedValue: column.aggConfig ? column.aggConfig.fieldFormatter('text')(value) : value,\n            bucketValue: bucketAgg ? row[0] : null,\n            aggConfig: column.aggConfig\n          });\n        });\n      });<\/pre><\/div>\n\n\n\n
            \u0417\u0434\u0435\u0441\u044c \u0441\u0442\u043e\u0438\u0442 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435<\/strong> \u043d\u0430 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 visData<\/code>. \u0422\u0430\u043c \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0432\u0441\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u043c\u0435\u0442\u0440\u0438\u043a\u0435, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e: \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0442\u0438\u043f \u0430\u0433\u0440\u0435\u0433\u0430\u0446\u0438\u0438, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043b\u0435\u0439\u0431\u043b \u0438 \u0442\u0434. \u0412 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u044d\u0442\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u044b \u0438 \u0431\u0443\u0434\u0435\u043c \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u0430\u0448\u0443 html \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443.<\/p>\n\n\n\n
            \u0422\u0430\u043a\u0436\u0435 \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 metrics<\/code> \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0434\u0430\u043b\u0435\u0435.<\/p>\n\n\n\n
            \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0439\u0434\u0435\u043c\u0441\u044f \u043f\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0443 metrics<\/code> \u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0431\u043b\u043e\u043a\u0438 div<\/code> \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430\u0448\u0435\u0439 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438:<\/p>\n\n\n\n
            metrics.forEach(metric => {\n        this.metricValue = metric.value;\n        var title = metric.aggConfig.params.customLabel;\n        \/\/\u0415\u0441\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0438 \u043e\u043d\u043e \u043d\u0435 \u043f\u0443\u0441\u0442\u043e\u0435\n        if(!title) {\n          title = "SM tutorial";\n        }\n\n        const metricDiv = document.createElement(`div`);\n        ...\n        metricDiv.innerHTML = `<div class="icon">${icon}<\/div> <div class="desc">${title}<\/div>`;\n});<\/pre><\/div>\n\n\n\n
            \u0418 \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c \u0432\u0435\u0440\u043d\u0443\u0442\u044c Promise<\/code>:<\/p>\n\n\n\n
            return new Promise(resolve => {\n        resolve('Done rendering');\n      });\n}<\/pre><\/div>\n\n\n\n
            \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043c\u0435\u0442\u043e\u0434 destroy<\/code>:<\/p>\n\n\n\n
            destroy() {\n      this.el.innerHTML = '';\n      console.log('Destroying');\n    }\n};<\/pre><\/div>\n\n\n\n
            \u042d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043d\u0430\u0448 \u043a\u043b\u0430\u0441\u0441:<\/p>\n\n\n\n
            export { SmTutorialController };<\/pre><\/div>\n\n\n\n
            <\/div>\n\n\n\n
            \u0420\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u0432\u043a\u043b\u0430\u0434\u043a\u0438 options<\/h3>\n\n\n\n
            SM_tutorial_vis_editor_editor.html<\/h4>\n\n\n\n
            \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u043a\u043b\u0430\u0434\u043a\u0443 Options<\/code>, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u043b\u044f \u0434\u043b\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n\n\n\n
            <div class="form-group">\n  <label> \u0420\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430<\/label>\n  <input type="number" ng-model="vis.params.fontSize" class="form-control"\/>\n<\/div>\n<div class="form-group">\n  <label>\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u0430<\/label>\n  <input type="text" ng-model="vis.params.titleIndicator" class="form-control"\/>\n<\/div><\/pre><\/div>\n\n\n\n
            vis.params.*<\/code> – \u043f\u043e\u043b\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0437\u0430\u0434\u0430\u0432\u0430\u043b\u0438 \u0432 SM_tutorial_vis.js<\/code> \u0432 \u0441\u043b\u043e\u0432\u0430\u0440\u0435 visConfig<\/code>.<\/p>\n\n\n\n
            <\/div>\n\n\n\n
            C\u0442\u0438\u043b\u0438<\/h3>\n\n\n\n
            SM_tutorial_vis.less<\/h4>\n\n\n\n
            \u041f\u0440\u043e\u0441\u0442\u043e\u0439  less \u0444\u0430\u0439\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0430\u0448\u0435\u0439 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043a\u0440\u0430\u0441\u043e\u0442\u044b \u0438 \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0445 \u0442\u0430\u0431\u043b\u0438\u0446 :).<\/p>\n\n\n\n
            <\/div>\n\n\n\n
            \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c kibana \u0438 \u043d\u0430\u0441\u043b\u0430\u0436\u0434\u0430\u0442\u044c\u0441\u044f<\/strong> \u043d\u043e\u0432\u043e\u0439 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439!<\/em><\/p>\n\n\n\n
            <\/p>\n","protected":false},"excerpt":{"rendered":"
            \u041f\u0440\u0435\u0434\u0438\u0441\u043b\u043e\u0432\u0438\u0435 \u0412 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430\u0448\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0430\u0441\u044c \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u043d\u0435 \u0442\u0430\u043a \u0443\u0436 \u0438 \u043c\u043d\u043e\u0433\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0439 \u0438\u043b\u0438 “\u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u043e\u0432” \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438.\u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043f\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u043d\u043e, \u043a\u0430\u043a \u043c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u043e\u043d\u0430 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0443\u0434\u043e\u0431\u043d\u0430 \u0438 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0430.\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043e\u043f\u0438\u0448\u0443 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u0430\u043a \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u043d\u0430 kibana 7.1.*. \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u043b\u0430\u0433\u0438\u043d \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c […]<\/p>\n","protected":false},"author":20,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26],"tags":[114,113,57],"class_list":["post-2378","post","type-post","status-publish","format-standard","hentry","category-reports","tag-elastic-stack","tag-kibana","tag-smart-monitor"],"_links":{"self":[{"href":"https:\/\/blog.volgablob.ru\/index.php?rest_route=\/wp\/v2\/posts\/2378","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.volgablob.ru\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.volgablob.ru\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.volgablob.ru\/index.php?rest_route=\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.volgablob.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2378"}],"version-history":[{"count":52,"href":"https:\/\/blog.volgablob.ru\/index.php?rest_route=\/wp\/v2\/posts\/2378\/revisions"}],"predecessor-version":[{"id":3665,"href":"https:\/\/blog.volgablob.ru\/index.php?rest_route=\/wp\/v2\/posts\/2378\/revisions\/3665"}],"wp:attachment":[{"href":"https:\/\/blog.volgablob.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2378"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.volgablob.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2378"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.volgablob.ru\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2378"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}