[ZEPPELIN-4548] Support search notebook

zeppelin-web-angular/src/app/interfaces/notebook-search.ts

@@ -0,0 +1,19 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export interface NotebookSearchResultItem {
+  id: string;
+  name: string;
+  snippet: string;
+  text: string;
+  header: string;
+}

zeppelin-web-angular/src/app/interfaces/public-api.ts

@@ -17,3 +17,4 @@ export * from './message-interceptor';
 export * from './security';
 export * from './credential';
 export * from './notebook-repo';
+export * from './notebook-search';

zeppelin-web-angular/src/app/pages/workspace/notebook-search/notebook-search-routing.module.ts

@@ -0,0 +1,29 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { NotebookSearchComponent } from './notebook-search.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: NotebookSearchComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class NotebookSearchRoutingModule {}

zeppelin-web-angular/src/app/pages/workspace/notebook-search/notebook-search.component.html

@@ -0,0 +1,17 @@
+<!--
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+<div class="main">
+  <zeppelin-notebook-search-result-item *ngFor="let item of results"
+                                        [result]="item">
+  </zeppelin-notebook-search-result-item>
+</div>
+

zeppelin-web-angular/src/app/pages/workspace/notebook-search/notebook-search.component.less

@@ -0,0 +1,24 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import 'theme-mixin';
+
+.themeMixin({
+  .main {
+    padding: @card-padding-base / 2;
+  }
+
+  zeppelin-notebook-search-result-item {
+    margin-bottom: 16px;
+    display: block;
+  }
+});

zeppelin-web-angular/src/app/pages/workspace/notebook-search/notebook-search.component.ts

@@ -0,0 +1,58 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { NotebookSearchResultItem } from '@zeppelin/interfaces';
+import { NotebookSearchService } from '@zeppelin/services/notebook-search.service';
+import { Subject } from 'rxjs';
+import { filter, map, switchMap, takeUntil, tap } from 'rxjs/operators';
+
+@Component({
+  selector: 'zeppelin-notebook-search',
+  templateUrl: './notebook-search.component.html',
+  styleUrls: ['./notebook-search.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class NotebookSearchComponent implements OnInit, OnDestroy {
+  private destroy$ = new Subject();
+  private searchAction$ = this.router.params.pipe(
+    takeUntil(this.destroy$),
+    map(params => params.queryStr),
+    filter(queryStr => typeof queryStr === 'string' && !!queryStr.trim()),
+    tap(() => (this.searching = true)),
+    switchMap(queryStr => this.notebookSearchService.search(queryStr))
+  );
+
+  results: NotebookSearchResultItem[] = [];
+  searching = false;
+
+  constructor(
+    private cdr: ChangeDetectorRef,
+    private router: ActivatedRoute,
+    private notebookSearchService: NotebookSearchService
+  ) {}
+
+  ngOnInit() {
+    this.searchAction$.subscribe(results => {
+      this.results = results;
+      this.searching = false;
+      this.cdr.markForCheck();
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.notebookSearchService.clear();
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}

zeppelin-web-angular/src/app/pages/workspace/notebook-search/notebook-search.module.ts

@@ -0,0 +1,29 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzCardModule } from 'ng-zorro-antd/card';
+
+import { ShareModule } from '@zeppelin/share';
+
+import { NotebookSearchRoutingModule } from './notebook-search-routing.module';
+import { NotebookSearchComponent } from './notebook-search.component';
+import { NotebookSearchResultItemComponent } from './result-item/result-item.component';
+
+@NgModule({
+  declarations: [NotebookSearchComponent, NotebookSearchResultItemComponent],
+  imports: [CommonModule, NotebookSearchRoutingModule, ShareModule, NzCardModule, FormsModule]
+})
+export class NotebookSearchModule {}

zeppelin-web-angular/src/app/pages/workspace/notebook-search/result-item/result-item.component.html

@@ -0,0 +1,22 @@
+<!--
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<nz-card [nzTitle]="titleTemplateRef">
+  <ng-template #titleTemplateRef>
+    <a [routerLink]="routerLink">{{displayName}}</a>
+  </ng-template>
+  <zeppelin-code-editor
+    [style.height.px]="height"
+    [nzEditorOption]="editorOption"
+    (nzEditorInitialized)="initializedEditor($event)">
+  </zeppelin-code-editor>
+</nz-card>

zeppelin-web-angular/src/app/pages/workspace/notebook-search/result-item/result-item.component.less

@@ -0,0 +1,19 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+::ng-deep {
+  .monaco-editor {
+    .mark {
+      background: #fdf733;
+    }
+  }
+}

zeppelin-web-angular/src/app/pages/workspace/notebook-search/result-item/result-item.component.ts

@@ -0,0 +1,162 @@
+/*
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  NgZone,
+  OnChanges,
+  OnDestroy,
+  SimpleChanges
+} from '@angular/core';
+import { NotebookSearchResultItem } from '@zeppelin/interfaces';
+import { getKeywordPositions, KeywordPosition } from '@zeppelin/utility/get-keyword-positions';
+import { editor, Range } from 'monaco-editor';
+import IEditor = editor.IEditor;
+import IStandaloneCodeEditor = editor.IStandaloneCodeEditor;
+
+@Component({
+  selector: 'zeppelin-notebook-search-result-item',
+  templateUrl: './result-item.component.html',
+  styleUrls: ['./result-item.component.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class NotebookSearchResultItemComponent implements OnChanges, OnDestroy {
+  @Input() result: NotebookSearchResultItem;
+
+  displayName = '';
+  routerLink = '';
+  mergedStr: string;
+  keywords: string[] = [];
+  highlightPositions: KeywordPosition[] = [];
+  editor: IStandaloneCodeEditor;
+  height = 0;
+  decorations: string[] = [];
+  editorOption = {
+    readOnly: true,
+    fontSize: 12,
+    renderLineHighlight: 'none',
+    minimap: { enabled: false },
+    lineNumbers: 'off',
+    glyphMargin: false,
+    scrollBeyondLastLine: false,
+    contextmenu: false
+  };
+
+  constructor(private ngZone: NgZone, private cdr: ChangeDetectorRef) {}
+
+  setDisplayNameAndRouterLink(): void {
+    const noteId = this.result.id.split('/', 2)[0];
+    this.displayName = this.result.name ? this.result.name : `Note ${noteId}`;
+
+    this.routerLink = `/notebook/${noteId}`;
+  }
+
+  setHighlightKeyword(): void {
+    let mergedStr = this.result.header ? `${this.result.header}\n\n${this.result.snippet}` : this.result.snippet;
+
+    const regexp = /<B>(.+?)<\/B>/g;
+    const matches = [];
+    let match = regexp.exec(mergedStr);
+
+    while (match !== null) {
+      if (match[1]) {
+        matches.push(match[1].toLocaleLowerCase());
+      }
+      match = regexp.exec(mergedStr);
+    }
+
+    mergedStr = mergedStr.replace(regexp, '$1');
+    this.mergedStr = mergedStr;
+    const keywords = [...new Set(matches)];
+    this.highlightPositions = getKeywordPositions(keywords, mergedStr);
+  }
+
+  applyHighlight() {
+    if (this.editor) {
+      this.decorations = this.editor.deltaDecorations(
+        this.decorations,
+        this.highlightPositions.map(highlight => {
+          const line = highlight.line + 1;
+          const character = highlight.character + 1;
+          return {
+            range: new Range(line, character, line, character + highlight.length),
+            options: {
+              className: 'mark',
+              stickiness: 1
+            }
+          };
+        })
+      );
+      this.cdr.markForCheck();
+    }
+  }
+
+  setLanguage() {
+    const editorModes = {
+      scala: /^%(\w*\.)?(spark|flink)/,
+      python: /^%(\w*\.)?(pyspark|python)/,
+      html: /^%(\w*\.)?(angular|ng)/,
+      r: /^%(\w*\.)?(r|sparkr|knitr)/,
+      sql: /^%(\w*\.)?\wql/,
+      yaml: /^%(\w*\.)?\wconf/,
+      markdown: /^%md/,
+      shell: /^%sh/
+    };
+    let mode = 'text';
+    const model = this.editor.getModel();
+    const keys = Object.keys(editorModes);
+    for (let i = 0; i < keys.length; i++) {
+      if (editorModes[keys[i]].test(this.result.snippet)) {
+        mode = keys[i];
+        break;
+      }
+    }
+    editor.setModelLanguage(model, mode);
+  }
+
+  autoAdjustEditorHeight() {
+    this.ngZone.run(() => {
+      setTimeout(() => {
+        if (this.editor) {
+          this.height =
+            this.editor.getTopForLineNumber(Number.MAX_SAFE_INTEGER) + this.editor.getConfiguration().lineHeight * 2;
+          this.editor.layout();
+          this.cdr.markForCheck();
+        }
+      });
+    });
+  }
+
+  initializedEditor(editorInstance: IEditor) {
+    this.editor = editorInstance as IStandaloneCodeEditor;
+    this.editor.setValue(this.mergedStr);
+    this.setLanguage();
+    this.autoAdjustEditorHeight();
+    this.applyHighlight();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.result) {
+      this.setDisplayNameAndRouterLink();
+      this.setHighlightKeyword();
+      this.autoAdjustEditorHeight();
+      this.applyHighlight();
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.editor.dispose();
+  }
+}