@opensumi/ide-addons 2.21.13 → 2.22.0

package/src/browser/file-content-update-time.contribution.ts

@@ -0,0 +1,256 @@
+import { Injectable, Autowired } from '@opensumi/di';
+import { ClientAppContribution, Domain } from '@opensumi/ide-core-browser';
+import { PreferenceSchema, PreferenceSchemaProvider, PreferenceService } from '@opensumi/ide-core-browser';
+import {
+  debounce,
+  IReporterService,
+  StaleLRUMap,
+  OnEvent,
+  URI,
+  WithEventBus,
+  Schemes,
+} from '@opensumi/ide-core-common';
+import { EditorDocumentModelSavedEvent, EditorDocumentModelWillSaveEvent } from '@opensumi/ide-editor/lib/browser';
+import { IWorkspaceService } from '@opensumi/ide-workspace';
+import {
+  FileOperation,
+  WorkspaceFileEvent,
+  IWorkspaceFileOperationParticipant,
+  IWorkspaceFileService,
+} from '@opensumi/ide-workspace-edit';
+
+enum ContentUpdateOperation {
+  /**
+   * 文本内容更新
+   */
+  Update = -100,
+}
+
+type FileAndContentOperation = FileOperation | ContentUpdateOperation;
+
+interface FileChangeMarker {
+  /**
+   * 开始的时间戳
+   */
+  start: number;
+  /**
+   * 标记操作种类
+   */
+  operation: FileAndContentOperation;
+}
+
+enum FileOperationResultEnum {
+  SUCCESS = 'success',
+  FAIL = 'fail',
+}
+
+const FileOperationMsgMapStr = {
+  [ContentUpdateOperation.Update]: 'update',
+  [FileOperation.COPY]: 'copy',
+  [FileOperation.CREATE]: 'create',
+  [FileOperation.DELETE]: 'delete',
+  [FileOperation.MOVE]: 'move',
+};
+
+const TRACE_LOG_FLAG = 'trace.file-content.update.time';
+
+const configurationSchema: PreferenceSchema = {
+  title: 'Addons',
+  properties: {
+    [TRACE_LOG_FLAG]: {
+      type: 'boolean',
+      default: false,
+      description: 'flag for tracing file/content update time consuming',
+    },
+  },
+};
+
+/**
+ * 本模块默认不加载，集成侧需要自定引入
+ * 监听文件及内容变更的耗时
+ *  命中条件：
+ *    * file 类型文件
+ *    * 在当前项目的 workspace root 下的文件
+ *    * 打开了 trace log 配置 (具体字段见 `TRACE_LOG_FLAG`)
+ *  记录的文件操作类型:
+ *    * 文件的创建/删除/复制/移动
+ *    * 文件内容变更 (增加 debounce 500ms 避免自动保存/批量替换/LSP重命名 触发的大量变更导致上报数量过多)
+ *  记录的字段:
+ *    * name: `FileAndContentOperation`
+ *    * msg: 文件操作的类型
+ *    * extra.uri: 文件 uri string
+ *    * extra.time: 耗时
+ *    * extra.result: 0 为成功 1 为失败
+ *  其他备注:
+ *    * time 的实际意义:
+ *        - 记录了文件操作的从 js 代码开始执行到创建成功后前端可以收到通知的过程时长
+ *        - 但是不涵盖异步事件通知文件树进行节点变幻到前端渲染完成的耗时部分
+ *        - 当然对于文件内容更新的操作，这个时间就是完整的时间
+ */
+@Injectable()
+@Domain(ClientAppContribution)
+export class FileAndContentUpdateTimeContribution extends WithEventBus {
+  @Autowired(IWorkspaceFileService)
+  private readonly workspaceFileService: IWorkspaceFileService;
+
+  @Autowired(PreferenceService)
+  private readonly preferenceService: PreferenceService;
+
+  @Autowired(IWorkspaceService)
+  private readonly workspaceService: IWorkspaceService;
+
+  @Autowired(IReporterService)
+  private readonly reporterService: IReporterService;
+
+  @Autowired(PreferenceSchemaProvider)
+  private readonly preferenceSchemaProvider: PreferenceSchemaProvider;
+
+  private _traceConfig = false;
+
+  private _markedFileUris = new StaleLRUMap<string, FileChangeMarker>(100, 50, 10 * 60 * 1000 /* 十分钟超时清理 */);
+
+  constructor() {
+    super();
+  }
+
+  onDidStart() {
+    // Set configuration schema
+    this.preferenceSchemaProvider.setSchema(configurationSchema);
+    // Do somethings when file operation is happening
+    this._participateFileOperation();
+    // Init listener for showPreview
+    this._initTraceConfig();
+  }
+
+  // 增加一个 debounce 避免 editor.autoSave 导致频繁变更触发
+  // 只监听 file 协议
+  @debounce(500)
+  @OnEvent(EditorDocumentModelWillSaveEvent)
+  public handleEditorDocModelWillSave(e: EditorDocumentModelWillSaveEvent) {
+    const { uri } = e.payload;
+    // 手动保存的立刻上报
+    // 标记文件链接
+    this._markFileUri(uri, ContentUpdateOperation.Update);
+  }
+
+  @debounce(500)
+  @OnEvent(EditorDocumentModelSavedEvent)
+  public handleEditorDocModelDidSave(e: EditorDocumentModelSavedEvent) {
+    const uri = e.payload;
+    this._reportFileOperation(uri, ContentUpdateOperation.Update, FileOperationResultEnum.SUCCESS);
+  }
+
+  private _participateFileOperation() {
+    // BEFORE file operation
+    this.addDispose(
+      this.workspaceFileService.registerFileOperationParticipant({
+        participate: this.fileOperationParticipant.bind(this),
+      }),
+    );
+
+    // AFTER file operation SUCCEED
+    this.addDispose(
+      this.workspaceFileService.onDidRunWorkspaceFileOperation(this._handleFileOperationDidRun.bind(this)),
+    );
+
+    // AFTER file operation FAILED
+    this.addDispose(
+      this.workspaceFileService.onDidFailWorkspaceFileOperation(this._handleFileOperationDidFail.bind(this)),
+    );
+  }
+
+  private async fileOperationParticipant(...args: Parameters<IWorkspaceFileOperationParticipant['participate']>) {
+    const [files, operation] = args;
+    for (const file of files) {
+      this._markFileUri(new URI(file.target), operation);
+    }
+  }
+
+  /**
+   * refactoring changes 带来的文件增删也会带进来，但是一般来说比较少见
+   * 出于性能考虑，删除文件的设计是异步操作的，因此删除文件可能耗时比肉眼可见的要长一些
+   */
+  private _handleFileOperationDidRun(e: WorkspaceFileEvent) {
+    const { files, operation } = e;
+    for (const file of files) {
+      this._reportFileOperation(new URI(file.target), operation, FileOperationResultEnum.SUCCESS);
+    }
+  }
+
+  private _handleFileOperationDidFail(e: WorkspaceFileEvent) {
+    const { files, operation } = e;
+    for (const file of files) {
+      this._reportFileOperation(new URI(file.target), operation, FileOperationResultEnum.FAIL);
+    }
+  }
+
+  private async _markFileUri(uri: URI, operation: FileAndContentOperation) {
+    const shouldReport = await this._shouldReport(uri);
+    if (!shouldReport) {
+      return;
+    }
+
+    const uriStr = uri.toString(true);
+    this._markedFileUris.set(uriStr, {
+      start: Date.now(),
+      operation,
+    });
+  }
+
+  private async _reportFileOperation(uri: URI, operation: FileAndContentOperation, result: FileOperationResultEnum) {
+    const shouldReport = await this._shouldReport(uri);
+    if (!shouldReport) {
+      return;
+    }
+
+    const uriStr = uri.toString(true);
+    const existedMarker = this._markedFileUris.get(uriStr);
+    // 不存在标记 | 标记的行为不匹配的 均过滤掉
+    if (!existedMarker || existedMarker.operation !== operation) {
+      return;
+    }
+    // report here
+    this.reporterService.point(
+      'FileAndContentOperation',
+      FileOperationMsgMapStr[existedMarker.operation] || 'unknown',
+      {
+        uri: uriStr,
+        time: Date.now() - existedMarker.start,
+        result: result === FileOperationResultEnum.SUCCESS ? 0 : 1,
+      },
+    );
+    // delete cached
+    this._markedFileUris.delete(uriStr);
+  }
+
+  private _initTraceConfig() {
+    // additional edits for file-participants
+    this._traceConfig = !!this.preferenceService.get<boolean>(TRACE_LOG_FLAG);
+    this.addDispose(
+      this.preferenceService.onPreferenceChanged((e) => {
+        if (e.preferenceName === TRACE_LOG_FLAG) {
+          this._traceConfig = !!e.newValue;
+        }
+      }),
+    );
+  }
+
+  /**
+   * 不符合要求的文件直接跳过
+   */
+  private async _shouldReport(uri: URI): Promise<boolean> {
+    // 配置项关闭则直接跳过记录
+    if (!this._traceConfig) {
+      return false;
+    }
+
+    // 非当前 workspace 的文件不统计 | 非 file 协议不统计
+    if (uri.scheme !== Schemes.file) {
+      return false;
+    }
+
+    // 文件是当前 workspace 下的
+    const roots = await this.workspaceService.roots;
+    return roots.some((fileStat) => !!new URI(fileStat.uri).relative(uri));
+  }
+}

package/src/browser/file-drop.contribution.ts

@@ -0,0 +1,17 @@
+import { Injectable, Autowired } from '@opensumi/di';
+import { ClientAppContribution, Domain } from '@opensumi/ide-core-browser';
+import { OnEvent, FileTreeDropEvent, WithEventBus } from '@opensumi/ide-core-common';
+
+import { IFileDropFrontendService, IFileDropFrontendServiceToken } from '../common';
+
+@Injectable()
+@Domain(ClientAppContribution)
+export class FileDropContribution extends WithEventBus {
+  @Autowired(IFileDropFrontendServiceToken)
+  protected readonly dropService: IFileDropFrontendService;
+
+  @OnEvent(FileTreeDropEvent)
+  onDidDropFile(e: FileTreeDropEvent) {
+    this.dropService.onDidDropFile(e);
+  }
+}

package/src/browser/file-drop.service.ts

@@ -0,0 +1,165 @@
+import { Injectable, Autowired } from '@opensumi/di';
+import { formatLocalize } from '@opensumi/ide-core-browser';
+import { IStatusBarService, StatusBarAlignment, StatusBarEntryAccessor } from '@opensumi/ide-core-browser/lib/services';
+import { WithEventBus, Uri, path } from '@opensumi/ide-core-common';
+import { FileTreeDropEvent } from '@opensumi/ide-core-common/lib/types/dnd';
+import { IFileServiceClient } from '@opensumi/ide-file-service/lib/common';
+
+const { Path } = path;
+
+import {
+  IFileDropFrontendService,
+  IFileDropBackendService,
+  FileDropServicePath,
+  IWebkitDataTransfer,
+  IWebkitDataTransferItemEntry,
+} from '../common';
+
+@Injectable()
+export class FileDropService extends WithEventBus implements IFileDropFrontendService {
+  private pending: Set<string> = new Set();
+
+  @Autowired(IFileServiceClient)
+  protected readonly fs: IFileServiceClient;
+
+  @Autowired(FileDropServicePath)
+  protected readonly dropService: IFileDropBackendService;
+
+  @Autowired(IStatusBarService)
+  protected readonly statusBarService: IStatusBarService;
+
+  private uploadStatus?: StatusBarEntryAccessor;
+
+  private onDidUploadFileStart(fullPath: string) {
+    this.pending.add(fullPath);
+    this.createOrUpdateStatusBar();
+  }
+
+  private onDidUploadFileEnd(fullPath: string) {
+    this.pending.delete(fullPath);
+    this.createOrUpdateStatusBar();
+  }
+
+  private createOrUpdateStatusBar(speed?: string) {
+    if (this.pending.size === 0) {
+      if (this.uploadStatus) {
+        this.uploadStatus.dispose();
+        this.uploadStatus = undefined;
+      }
+      return;
+    }
+
+    const entryId = 'sumi-upload-file-status';
+    const message = formatLocalize('workbench.uploadingFiles', this.pending.size, speed || '0 MB');
+    const entry = {
+      text: message,
+      alignment: StatusBarAlignment.RIGHT,
+      tooltip: message,
+      iconClass: 'kaitian-icon kticon-cloud-server',
+    };
+
+    if (!this.uploadStatus) {
+      this.uploadStatus = this.statusBarService.addElement(entryId, entry);
+    } else {
+      this.uploadStatus.update({ id: entryId, ...entry });
+    }
+  }
+
+  onDidDropFile(e: FileTreeDropEvent) {
+    const {
+      payload: { event, targetDir },
+    } = e;
+    if (!targetDir || !event.dataTransfer?.files || event.dataTransfer.files.length === 0) {
+      return;
+    }
+
+    const items = (event.dataTransfer as unknown as IWebkitDataTransfer).items;
+
+    let uploadedBytes = 0;
+    const startTime = Date.now();
+    const reporter = (uploaded: number) => {
+      uploadedBytes += uploaded;
+      const now = Date.now();
+      const bytesUploadedPerSecond = uploadedBytes / ((now - startTime) / 1000);
+      const speed = `${(bytesUploadedPerSecond / 1024 / 1024).toFixed(2)} MB`;
+      this.createOrUpdateStatusBar(speed);
+    };
+
+    for (const item of items) {
+      const entry = item.webkitGetAsEntry();
+      this.processFilesEntry(targetDir, entry, reporter);
+    }
+  }
+
+  private async processFilesEntry(
+    targetDir: string,
+    entry: IWebkitDataTransferItemEntry,
+    reporter: (uploadedByteLength: number) => void,
+  ) {
+    if (entry.isFile) {
+      this.processFileEntry(entry, targetDir, reporter);
+    } else {
+      const folder = Uri.file(new Path(targetDir).join(entry.fullPath).toString()).toString();
+      await this.fs.createFolder(folder);
+      this.processDirEntry(entry, targetDir, reporter);
+    }
+  }
+
+  private toBinaryString(uint8Arr: Uint8Array): string {
+    let i;
+    const length = uint8Arr.length;
+    let resultString = '';
+    for (i = 0; i < length; i += 1) {
+      resultString += String.fromCharCode(uint8Arr[i]);
+    }
+    return resultString;
+  }
+
+  private async doUploadFile(file: File, targetDir: string, reporter: (uploadedByteLength: number) => void) {
+    const filePath = new Path(targetDir).join(file.name).toString();
+    this.onDidUploadFileStart(filePath.toString());
+    await this.fs.createFile(Uri.file(filePath.toString()).toString());
+    await this.dropService.$ensureFileExist(file.name, targetDir);
+    const reader = file.stream().getReader();
+    let res: ReadableStreamReadResult<Uint8Array> = await reader.read();
+    while (!res.done) {
+      await this.dropService.$writeStream(this.toBinaryString(res.value), file.name, targetDir, res.done);
+      reporter(res.value?.byteLength);
+      res = await reader.read();
+    }
+
+    if (res.done) {
+      this.onDidUploadFileEnd(filePath.toString());
+    }
+  }
+
+  private processFileEntry(
+    fileEntry: IWebkitDataTransferItemEntry,
+    targetDir: string,
+    reporter: (uploadedByteLength: number) => void,
+  ): void {
+    fileEntry.file(
+      (fileChunk) => {
+        const file = new File([fileChunk], fileEntry.fullPath!, { type: fileEntry.type! });
+        this.doUploadFile(file, targetDir, reporter);
+      },
+      () => {},
+    );
+  }
+
+  private processDirEntry(
+    entry: IWebkitDataTransferItemEntry,
+    targetDir: string,
+    reporter: (uploadedByteLength: number) => void,
+  ) {
+    const dirReader = entry.createReader();
+    dirReader.readEntries(
+      (entries) => {
+        entries.forEach(async (fileOrDirEntry) => {
+          this.processFilesEntry(targetDir, fileOrDirEntry, reporter);
+        });
+      },
+      () => {},
+    );
+  }
+}