Founded in 2009, Cloud Intelligence Group is a leading service provider of full-stack intelligent business operation and maintenance solutions in China. After years of independent research and development, the company has formed an industrial layout from IT operation and maintenance, power operation and maintenance to IoT operation and maintenance, covering ITOM, ITOA, ITSM, DevOps and IoT fields, serving customers in finance, government, operators, energy, transportation, manufacturing and other hundreds of industries. It provides digital operation and maintenance system construction and life-cycle operation and maintenance management solutions. Adhering to the mission of Make Digital Online, Cloud Wisdom is committed to continuously empowering enterprises with Digital transformation and improving IT operation efficiency through advanced product technology.

Author’s brief introduction

Yang Yinghui, Cloud intelligence/development engineer, cloud intelligence front-end development engineer, proficient in React, Vue, Angular, responsible for APM browser performance monitoring.

History of Angular

Angular is an open-source Web front-end framework from Google. It was created by Misko Hevery and others in 2009 and later acquired by Google. Is an excellent front-end JS framework, has been used in a number of Google products.

The Angular team plans to release major releases every six months, and future Angular releases won’t change as much as 1.x and Angular2.x, so angular5. x, Angular6.x, Angular7.x, and our current development will be the same.

Advantages and disadvantages AngularJs

Advantages:

  1. Templates are powerful and rich
  2. A relatively complete front-end MVC framework
  3. Introduced some Java concepts

Disadvantages:

  1. Performance (due to two-way binding of data)
  2. routing
  3. Form validation
  4. The JavaScript language
  5. scope
  6. High learning cost

Presents new features

  1. New command-line tool Angular/CLI
  2. Server side rendering
  3. Mobile and desktop compatible — Ionic and ELECTRON

Presents the architecture diagram

TypeScript

features

  1. Class Clases

  1. The generic

  1. Interface Interfaces

  1. Module Modules

  1. Annotations

  1. Compile time type checking

How to Use Angular

  1. NPM install@angular/cli -g Install angular scaffolding tools globally
  2. Ng new Project Creates an Angular project
  3. CD project goes into the project
  4. Ng serve starts Angular

With AngularJS Garfana

  1. Develop data source plug-in (connect to data platform)
  2. Adding a Data source
  3. Create dashboard → Edit → Metrics
  4. Adding template variables

Data source development

To interact with the rest of Grafana, the plug-in template file can export five different components

The DataSource (Required)

QueryCtrl (Required)

ConfigCtrl (Required)

AnnotationsQueryCtrl

Plugin. json has two data-source-specific Settings

“metrics”:true

“annotations”:false,

These Settings indicate what kind of data the plug-in can provide. At least one of them has to be true.

The data source should contain the following capabilities

Query (options) // Use panel data

TestDatasource ()// The data source configuration page used to ensure that the connection works

AnnotationQuery (options) // Dashboards use annotations

MetricFindQuery (options) // The query editor used to get recommendations for metrics

Adding a data source:

Datesource. Query time series response

Datesource. Query table response

The specific practices

$q.ll () performs multiple asynchronous callbacks

Presents summary

  1. Angular has a steep learning curve compared to other frameworks like React and Vue.
  2. Angular has a healthy ecosystem, and developers are using NG more and more.
  3. Angula+Typescript, with strong modularization ideas, code structure is relatively clear.
  4. Presents is a lot of framework, focus more on the construction of a large front end engineering, shielding project for developers to build the underlying details of the proposed own solution, use their difficulty is to pay upfront steep learning curve, advantage is due to the use of a standardized way of development, late can greatly increase the development of productive forces, improve the development efficiency.
    1. Angular is a Google product with a promising future.

Write in the last

In recent years, against the background of the rapid development of AIOps, the urgent need for IT tools, platform capabilities, solutions, AI scenarios and available data sets has exploded in various industries. Based on this, AIOps community was launched by Cloud Intelligence in August 2021, aiming to set up an open source banner and build an active user and developer community for customers, users, researchers and developers in various industries to contribute and solve industry problems and promote the development of technology in this field.

The community has opened source products such as FlyFish, OMP, Moore platform, Hours algorithm and so on.

Excellent Open source project — FlyFish:

Project introduction: www.cloudwise.ai/flyFish.htm…

Github address: github.com/CloudWise-O…

Gitee address: gitee.com/CloudWise/f…

Please follow the link below to learn more about us, add a small assistant wechat (Xiaoyuerwie), note: flying fish. Apply to join the developer exchange group, and have a 1V1 communication with the industry’s biggest names!