add option for externalIP connect

src/base/datax.add.step1.component.ts

@@ -32,11 +32,22 @@ import {ExecModel} from "./datax.add.step7.confirm.component";
     <tis-steps [type]="dto.processModel" [step]="0"></tis-steps>
     <nz-spin [nzSpinning]="this.formDisabled">
       <tis-steps-tools-bar [title]="'基本信息'" (cancel)="cancel()"
-                           (goOn)="createIndexStep1Next()" [formDisabled]="formDisabled"></tis-steps-tools-bar>
-      <div style="width: 80%;margin: 0 auto;">
+                           (goOn)="createIndexStep1Next()" [formDisabled]="formDisabled">
+      </tis-steps-tools-bar>
+      <nz-alert nzType="info" [nzMessage]="InformationalNotes" ></nz-alert>
+      <ng-template #InformationalNotes>
+        <blibli videoId="BV1eh4y1o7yQ">构建MySQL到Doris批量同步通道</blibli>
+        <blibli videoId="BV1nX4y1h7SW">构建MySQ实时同步Doris示例,实现数据毫秒级同步</blibli>
+      </ng-template>
+
+
+      <div style="clear: both;width: 80%;margin: 0 auto;">
+
         <tis-plugins [formControlSpan]="20" [pluginMeta]="[pluginCategory]"
                      (afterSave)="afterSaveReader($event)" [savePlugin]="savePlugin" [showSaveButton]="false"
                      [shallInitializePluginItems]="false" [_heteroList]="hlist" #pluginComponent></tis-plugins>
+
+
       </div>
     </nz-spin>
     <!-- Content here -->

src/common/common.component.ts

@@ -0,0 +1,27 @@
+import {
+  AfterContentChecked,
+  AfterContentInit,
+  AfterViewInit,
+  Component,
+  ContentChildren,
+  Input,
+  OnInit, QueryList, TemplateRef, ViewChild, ViewContainerRef
+} from "@angular/core";
+import {ItemPropVal} from "./tis.plugin";
+import {NzInputDirective} from "ng-zorro-antd/input";
+import {NzSelectComponent} from "ng-zorro-antd/select";
+import {TisInputProp} from "./form.component";
+
+@Component({
+  selector: 'blibli',
+  template: `
+    <span> <i style="font-size: 20px;display: inline-block;margin-right: 10px;margin-left: 10px" nz-icon nzType="blibli" nzTheme="fill"></i>
+                  <a target="_blank" href="https://www.bilibili.com/video/{{videoId}}"><ng-content></ng-content></a></span>
+  `
+})
+export class BliBliComponent {
+
+  @Input()
+  videoId:string;
+
+}

src/common/common.module.ts

@@ -133,6 +133,7 @@ import {ControlPanelComponent} from "./control.panel.component";
 import {SchemaEditComponent} from "./schema.edit.component";
 import {FullBuildHistoryComponent} from './full.build.history.component';
 import {LaunchK8SClusterWaittingProcessComponent} from './launch.waitting.process.component';
+import {BliBliComponent} from "./common.component";
 // import {NgxTisCommonLibModule} from "ngx-tis-common-lib";
 
 // angular libraries: https://angular.io/guide/creating-libraries
@@ -160,7 +161,7 @@ import {LaunchK8SClusterWaittingProcessComponent} from './launch.waitting.proces
     NzLayoutModule, NzStatisticModule, NzEmptyModule, NzRadioModule,
     NzSpinModule, NzCollapseModule, NzDropDownModule, NzFormModule, NzInputModule, NzButtonModule, NzBreadCrumbModule, NzStepsModule, NzAffixModule, NzInputNumberModule,
     FormsModule, CommonModule, HttpClientModule, HttpClientJsonpModule, RouterModule, NzSelectModule, NzNotificationModule, NzTableModule, NzCheckboxModule, NzAlertModule, ReactiveFormsModule, NzListModule],
-  declarations: [LaunchK8SClusterWaittingProcessComponent,
+  declarations: [BliBliComponent,LaunchK8SClusterWaittingProcessComponent,
     NotebookwrapperComponent, ControlPanelComponent, SchemaEditComponent,
     TerminalComponent, ErrorDetailComponent, PluginManageComponent, SchemaExpertAppCreateEditComponent, AddAppDefSchemaComponent, TableSelectComponent, SideBarToolBar, K8SReplicsSpecComponent,
     PageHeaderLeftComponent, ProgressTitleComponent, ProgressComponent, ConsumeTimePipe, SnapshotsetComponent, SnapshotLinkComponent, SnapshotChangeLogComponent
@@ -173,7 +174,7 @@ import {LaunchK8SClusterWaittingProcessComponent} from './launch.waitting.proces
     , DataxAddStep4Component, SelectedTabsComponent, DataxAddComponent, DataxAddStep1Component, DataxAddStep2Component, ViewGenerateCfgComponent, DataxAddStep5Component, DataxAddStep3Component, DataxAddStep6Component
     , PageHeaderComponent, TisMsgComponent, TisHeaderTool, TisHeaderToolContent, FormComponent, TisInputTool, InputContentDirective, TisInputProp, TisStepsToolbarComponent, IncrPodLogsStatusComponent
   ],
-  exports: [LaunchK8SClusterWaittingProcessComponent,SchemaEditComponent, ControlPanelComponent, PluginUpdateCenterComponent, SelectedTabsComponent, ErrorDetailComponent, SchemaExpertAppCreateEditComponent, AddAppDefSchemaComponent, K8SReplicsSpecComponent, SideBarToolBar, TableSelectComponent
+  exports: [BliBliComponent,LaunchK8SClusterWaittingProcessComponent,SchemaEditComponent, ControlPanelComponent, PluginUpdateCenterComponent, SelectedTabsComponent, ErrorDetailComponent, SchemaExpertAppCreateEditComponent, AddAppDefSchemaComponent, K8SReplicsSpecComponent, SideBarToolBar, TableSelectComponent
     , NzSpaceModule, NzDropDownModule, PageHeaderLeftComponent, NzProgressModule, NzResultModule, NzPageHeaderModule
     , NzAlertModule, NzDrawerModule, NzDividerModule, NzStatisticModule, ConsumeTimePipe, SnapshotsetComponent, SnapshotLinkComponent
     , SnapshotChangeLogComponent, SchemaXmlEditComponent, SchemaEditVisualizingModelComponent,

src/runtime/app.module-jit.ts

@@ -35,7 +35,10 @@ import {NZ_CODE_EDITOR_CONFIG} from "@zeppelin/share/code-editor";
 import {loadMonaco} from "@zeppelin/app.module";
 import {NzIconService} from "ng-zorro-antd/icon";
 import {IconDefinition} from "@ant-design/icons-angular";
+import {LocalStorageService} from "angular-2-local-storage";
 
+
+const local_endtype_icons = 'local_endtype_icons';
 registerLocaleData(zh);
 
 export function markedOptionsFactory(): MarkedOptions {
@@ -125,38 +128,52 @@ export function markedOptionsFactory(): MarkedOptions {
 
 })
 export class AppModule {
-  constructor(iconService: NzIconService, tisService: TISService) {
-    // console.log('iconService');
-    // console.log( iconService.getCachedIcons() );
-    //(async function () {
 
+  private appendIconService(iconService: NzIconService, iconDefs: Array<TISIconDefinition>): void {
 
-    tisService.httpPost('/coredefine/corenodemanage.ajax'
-      , `action=plugin_action&emethod=get_endtype_icons`)
-      .then((result) => {
-        let iconDefs: Array<TISIconDefinition> = result.bizresult;
-        let id: TISIconDefinition = null;
-        let ref: IconDefinition = null;
-        let iconMap: Map<string, TISIconDefinition> = new Map<string, TISIconDefinition>();
-
-        for (let i = 0; i < iconDefs.length; i++) {
-          id = iconDefs[i];
-          iconMap.set(id.name + "_" + id.theme, id);
+    let id: TISIconDefinition = null;
+    let ref: IconDefinition = null;
+    let iconMap: Map<string, TISIconDefinition> = new Map<string, TISIconDefinition>();
+
+    for (let i = 0; i < iconDefs.length; i++) {
+      id = iconDefs[i];
+      iconMap.set(id.name + "_" + id.theme, id);
+    }
+
+    for (let i = 0; i < iconDefs.length; i++) {
+      id = iconDefs[i];
+      if (id.ref) {
+        ref = iconMap.get(id.ref + "_" + id.theme);
+        if (!ref) {
+          throw new Error("resource reference:'" + id.ref + "_" + id.theme + "' can not be null");
         }
+        iconService.addIcon({name: id.name, theme: id.theme, icon: ref.icon});
+      } else {
+        iconService.addIcon(iconDefs[i]);
+      }
+    }
+  }
 
-        for (let i = 0; i < iconDefs.length; i++) {
-          id = iconDefs[i];
-          if (id.ref) {
-            ref = iconMap.get(id.ref + "_" + id.theme);
-            if (!ref) {
-              throw new Error("resource reference:'" + id.ref + "_" + id.theme + "' can not be null");
-            }
-            iconService.addIcon({name: id.name, theme: id.theme, icon: ref.icon});
-          } else {
-            iconService.addIcon(iconDefs[i]);
-          }
+  constructor(iconService: NzIconService, tisService: TISService, _localStorageService: LocalStorageService) {
+    let localEndTypesIcons: LocalEndtypeIcons = _localStorageService.get(local_endtype_icons)
+   // console.log(localEndTypesIcons);
+    let requestBody = `action=plugin_action&emethod=get_endtype_icons`;
+    if (localEndTypesIcons) {
+      requestBody += ("&vertoken=" + localEndTypesIcons.verToken);
+      this.appendIconService(iconService, localEndTypesIcons.iconsDefs);
+    }
+
+    tisService.httpPost('/coredefine/corenodemanage.ajax', requestBody)
+      .then((result) => {
+        let r: LocalEndtypeIcons = result.bizresult;
+
+        if (r.iconsDefs.length > 0) {
+          this.appendIconService(iconService, r.iconsDefs);
+          _localStorageService.set(local_endtype_icons, r);
         }
-       // console.log("xxxxxxxxxxxxxxxxxxxxx");
+
+
+        // console.log("xxxxxxxxxxxxxxxxxxxxx");
       });
     // })();
     //
@@ -166,6 +183,12 @@ export class AppModule {
 
 }
 
+interface LocalEndtypeIcons {
+  // 引用其他类型的Icon
+  iconsDefs: Array<TISIconDefinition>;
+  verToken: string;
+}
+
 interface TISIconDefinition extends IconDefinition {
   // 引用其他类型的Icon
   ref: string;

src/runtime/incr.build.step0.component.ts

@@ -40,8 +40,7 @@ import {NzNotificationService} from "ng-zorro-antd/notification";
               </p>
             </ng-template>
               <ng-template #contentTpl>
-                <span  > <i style="font-size: 20px" nz-icon nzType="blibli" nzTheme="fill"></i>
-                  <a target="_blank" href="https://www.bilibili.com/video/BV1nX4y1h7SW">MySQL同步Doris作为示例，让初次使用者能够更快熟悉操作</a>         </span>
+                <blibli videoId="BV1nX4y1h7SW">MySQ实时同步Doris作为示例，让初次使用者能够更快熟悉操作</blibli>
               </ng-template>
               <ng-template #footerTpl>
                   <button nz-button nzType="primary" (click)="createIncrSyncChannal()">创建增量通道</button>