feat(msc-tail-logs): add tail logs component

ref:MANAGER-11671

Signed-off-by: stif59100 <[email protected]>

.prettierignore

@@ -1,2 +1,2 @@
 packages/manager/apps/container
-
+packages/super-components

packages/super-components/.gitignore

@@ -5,3 +5,4 @@ hydrate/
 loader/
 components.d.ts
 www/
+.prettierignore

packages/super-components/components/msc-tail-logs/.gitignore

@@ -0,0 +1,31 @@
+dist/
+custom-elements/
+custom-elements-bundle/
+www/
+loader/
+docs-api/
+
+*~
+*.sw[mnpcod]
+*.log
+*.lock
+*.tmp
+*.tmp.*
+log.txt
+*.sublime-project
+*.sublime-workspace
+
+.stencil/
+.idea/
+.vscode/
+.sass-cache/
+.versions/
+node_modules/
+$RECYCLE.BIN/
+
+.DS_Store
+Thumbs.db
+UserInterfaceState.xcuserstate
+.env
+
+src/**/readme.md

packages/super-components/components/msc-tail-logs/.npmignore

@@ -0,0 +1,3 @@
+!dist/
+!loader/
+!docs-api/

packages/super-components/components/msc-tail-logs/docs/msc-tail-logs.stories.ts

@@ -0,0 +1,18 @@
+export default {
+  title: 'Components/Manager tail logs',
+  tags: ['autodocs'],
+  render: ({ content }: { content: string }) => `
+    <section>
+      <msc-tail-logs content="${content}" />
+    </section>
+  `,
+  argTypes: {
+    content: { control: 'text', default: 'World' },
+  },
+};
+
+export const StoryExample = {
+  args: {
+    content: 'Another Example',
+  },
+};

packages/super-components/components/msc-tail-logs/mock/tail-log.mock.ts

@@ -0,0 +1,78 @@
+import apiClient from '@ovh-ux/manager-core-api';
+import MockAdapter from 'axios-mock-adapter';
+
+
+const mock = new MockAdapter(apiClient.v6);
+
+mock.onGet(`cloud/project/5a6980507c0a40dca362eb9b22d79044/database/mongodb/5ed952db-0824-4173-b1ab-e524f4d4d480/logs&sort=asc&limit=500`).reply(200, [{
+  "hostname": "node1-5a6980505ed952db-admin.database.cloud.ovh.net",
+  "message": "INFO - NETWORK - Connection ended {\"connectionCount\":20,\"connectionId\":167597,\"remote\":\"[fd00::1:11:0:0:348]:43210\",\"uuid\":\"efc20141-fd5c-4c37-b8fc-868a1ed1338f\"}",
+  "timestamp": 1691415883
+},
+{
+  "hostname": "node1-5a6980505ed952db-admin.database.cloud.ovh.net",
+  "message": "INFO - STORAGE - WiredTiger message {\"message\":\"[1691415884:618182][19372:0x7f43a1205700], WT_SESSION.checkpoint: [WT_VERB_CHECKPOINT_PROGRESS] saving checkpoint snapshot min: 149648, snapshot max: 149648 snapshot count: 0, oldest timestamp: (1691415582, 1) , meta checkpoint timestamp: (1691415882, 1) base write gen: 4727037\"}",
+  "timestamp": 1691415884
+},
+{
+  "hostname": "node1-5a6980505ed952db-admin.database.cloud.ovh.net",
+  "message": "INFO - SHARDING - Refreshed RWC defaults {\"newDefaults\":{}}",
+  "timestamp": 1691415885
+},
+{
+  "hostname": "node1-5a6980505ed952db-admin.database.cloud.ovh.net",
+  "message": "INFO - NETWORK - Connection accepted {\"connectionCount\":21,\"connectionId\":167599,\"remote\":\"[fd00::1:11:0:0:348]:53482\",\"uuid\":\"5a8fdee3-72dd-466c-892d-d37ddee7b3c8\"}",
+  "timestamp": 1691415886
+},
+{
+  "hostname": "node1-5a6980505ed952db-admin.database.cloud.ovh.net",
+  "message": "INFO - NETWORK - Connection accepted {\"connectionCount\":22,\"connectionId\":167600,\"remote\":\"[fd00::1:11:0:0:348]:53484\",\"uuid\":\"e7b2054a-0779-4a9f-8f31-46d31149d40c\"}",
+  "timestamp": 1691415887
+},
+{
+  "hostname": "node1-5a6980505ed952db-admin.database.cloud.ovh.net",
+  "message": "INFO - NETWORK - client metadata {\"client\":\"conn167599\",\"doc\":{\"application\":{\"name\":\"MongoDB Automation Agent v12.0.11.7606 (git: 60e470b798d3db465b9441cd6ceaf2b56fb6b592)\"},\"driver\":{\"name\":\"mongo-go-driver\",\"version\":\"v1.7.2+prerelease\"},\"os\":{\"architecture\":\"amd64\",\"type\":\"linux\"},\"platform\":\"go1.18.2\"},\"remote\":\"[fd00::1:11:0:0:348]:53482\"}",
+  "timestamp": 1691415888
+}]);
+
+mock.onGet(`cloud/project/5a6980507c0a40dca362eb9b22d79044/database/mongodb/5ed952db-0824-4173-b1ab-e524f4d4d480/logs&sort=asc&limit=2`).reply(200, [{
+  "hostname": "node1-5a6980505ed952db-admin.database.cloud.ovh.net",
+  "message": "INFO - NETWORK - Connection ended {\"connectionCount\":20,\"connectionId\":167597,\"remote\":\"[fd00::1:11:0:0:348]:43210\",\"uuid\":\"efc20141-fd5c-4c37-b8fc-868a1ed1338f\"}",
+  "timestamp": 1691415883
+},
+{
+  "hostname": "node1-5a6980505ed952db-admin.database.cloud.ovh.net",
+  "message": "INFO - STORAGE - WiredTiger message {\"message\":\"[1691415884:618182][19372:0x7f43a1205700], WT_SESSION.checkpoint: [WT_VERB_CHECKPOINT_PROGRESS] saving checkpoint snapshot min: 149648, snapshot max: 149648 snapshot count: 0, oldest timestamp: (1691415582, 1) , meta checkpoint timestamp: (1691415882, 1) base write gen: 4727037\"}",
+  "timestamp": 1691415884
+}]);
+
+mock.onGet(`cloud/project/5a6980507c0a40dca362eb9b22d79044/database/mongodb/5ed952db-0824-4173-b1ab-e524f4d4d480/logs&sort=desc&limit=500`).reply(200, [{
+  "hostname": "node1-5a6980505ed952db-admin.database.cloud.ovh.net",
+  "message": "INFO - NETWORK - Connection ended {\"connectionCount\":20,\"connectionId\":167597,\"remote\":\"[fd00::1:11:0:0:348]:43210\",\"uuid\":\"efc20141-fd5c-4c37-b8fc-868a1ed1338f\"}",
+  "timestamp": 1691415889
+},
+{
+  "hostname": "node1-5a6980505ed952db-admin.database.cloud.ovh.net",
+  "message": "INFO - STORAGE - WiredTiger message {\"message\":\"[1691415884:618182][19372:0x7f43a1205700], WT_SESSION.checkpoint: [WT_VERB_CHECKPOINT_PROGRESS] saving checkpoint snapshot min: 149648, snapshot max: 149648 snapshot count: 0, oldest timestamp: (1691415582, 1) , meta checkpoint timestamp: (1691415882, 1) base write gen: 4727037\"}",
+  "timestamp": 1691415888
+},
+{
+  "hostname": "node1-5a6980505ed952db-admin.database.cloud.ovh.net",
+  "message": "INFO - SHARDING - Refreshed RWC defaults {\"newDefaults\":{}}",
+  "timestamp": 1691415887
+},
+{
+  "hostname": "node1-5a6980505ed952db-admin.database.cloud.ovh.net",
+  "message": "INFO - NETWORK - Connection accepted {\"connectionCount\":21,\"connectionId\":167599,\"remote\":\"[fd00::1:11:0:0:348]:53482\",\"uuid\":\"5a8fdee3-72dd-466c-892d-d37ddee7b3c8\"}",
+  "timestamp": 1691415886
+},
+{
+  "hostname": "node1-5a6980505ed952db-admin.database.cloud.ovh.net",
+  "message": "INFO - NETWORK - Connection accepted {\"connectionCount\":22,\"connectionId\":167600,\"remote\":\"[fd00::1:11:0:0:348]:53484\",\"uuid\":\"e7b2054a-0779-4a9f-8f31-46d31149d40c\"}",
+  "timestamp": 1691415885
+},
+{
+  "hostname": "node1-5a6980505ed952db-admin.database.cloud.ovh.net",
+  "message": "INFO - NETWORK - client metadata {\"client\":\"conn167599\",\"doc\":{\"application\":{\"name\":\"MongoDB Automation Agent v12.0.11.7606 (git: 60e470b798d3db465b9441cd6ceaf2b56fb6b592)\"},\"driver\":{\"name\":\"mongo-go-driver\",\"version\":\"v1.7.2+prerelease\"},\"os\":{\"architecture\":\"amd64\",\"type\":\"linux\"},\"platform\":\"go1.18.2\"},\"remote\":\"[fd00::1:11:0:0:348]:53482\"}",
+  "timestamp": 1691415884
+}]);

packages/super-components/components/msc-tail-logs/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@ovhcloud/msc-stencil-tail-logs",
+  "version": "1.0.0",
+  "description": "ODS Tail logs with custom component",
+  "license": "BSD-3-Clause",
+  "main": "dist/index.cjs.js",
+  "unpkg": "dist/msc-tail-logs/msc-tail-logs.esm.js",
+  "module": "dist/index.js",
+  "types": "dist/types/components.d.ts",
+  "scripts": {
+    "msc:build": "yarn run msc:build:stencil --if-present && yarn run msc:build:react --if-present && yarn run msc:build:vue --if-present",
+    "msc:build:react": "npm --prefix react run build",
+    "msc:build:stencil": "stencil build --docs --prod --config stencil.config.ts",
+    "msc:build:vue": "npm --prefix vue run build",
+    "msc:doc:api": "typedoc --plugin none src/*",
+    "msc:ignore:rm": "git clean -Xdf",
+    "msc:start": "stencil build --docs --dev --watch --serve",
+    "msc:test": "stencil test --spec --e2e --passWithNoTests",
+    "msc:test:e2e": "stencil test --e2e --passWithNoTests",
+    "msc:test:e2e:screenshot": "stencil test --e2e --screenshot --config stencil.config.ts --passWithNoTests",
+    "msc:test:e2e:screenshot:update": "stencil test --e2e --screenshot --config stencil.config.ts --update-screenshot --passWithNoTests",
+    "msc:test:spec": "stencil test --spec --passWithNoTests",
+    "msc:test:watch": "stencil test --spec --e2e --watchAll",
+    "msc:watch": "stencil build --docs --watch"
+  },
+  "dependencies": {
+    "@ovh-ux/manager-core-api": "^0.1.0",
+    "axios-mock-adapter": "^1.21.5",
+    "i18next": "^23.2.10",
+    "i18next-http-backend": "^2.2.1"
+  },
+  "devDependencies": {
+    "@ovhcloud/ods-testing": "^13.0.1",
+    "@stencil/postcss": "^2.1.0",
+    "@types/jest": "^27.0.3",
+    "autoprefixer": "^10.4.13",
+    "jest": "^27.0.3",
+    "jest-cli": "^27.4.5",
+    "postcss": "^8.4.19",
+    "postcss-nested": "^6.0.0",
+    "puppeteer": "^10.0.0",
+    "typedoc": "0.22.10",
+    "typescript": "~4.3.5"
+  },
+  "peerDependencies": {
+    "@ovhcloud/ods-core": "^14.1.0",
+    "@ovhcloud/ods-stencil": "^14.1.10",
+    "@ovhcloud/ods-theme-blue-jeans": "^14.1.0",
+    "@ovhcloud/ods-theming": "^14.1.0",
+    "@stencil/core": "^2.20.0"
+  },
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "es2015": "dist/esm/index.js",
+  "es2017": "dist/esm/index.js"
+}

packages/super-components/components/msc-tail-logs/react/.gitignore

@@ -0,0 +1 @@
+dist/

packages/super-components/components/msc-tail-logs/react/.npmignore

@@ -0,0 +1,2 @@
+!dist/
+src/

packages/super-components/components/msc-tail-logs/react/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@ovhcloud/msc-react-tail-logs",
+  "version": "1.0.0",
+  "private": true,
+  "description": "React specific wrapper for Manager super components",
+  "keywords": [],
+  "license": "Apache-2.0",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "files": [
+    "dist/"
+  ],
+  "scripts": {
+    "build": "npm run clean && npm run compile",
+    "clean": "rimraf dist",
+    "compile": "npm run compile:esm && npm run compile:cjs",
+    "compile:cjs": "tsc -p tsconfig.cjs.json",
+    "compile:esm": "tsc -p tsconfig.json"
+  },
+  "dependencies": {
+    "@ovhcloud/msc-stencil-tail-logs": "^1.0.0",
+    "tslib": "*"
+  },
+  "devDependencies": {
+    "@types/react": "18.2.8",
+    "@types/react-dom": "18.2.4",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "rimraf": "^3.0.2",
+    "typescript": "5.1.3"
+  },
+  "peerDependencies": {
+    "@ovhcloud/ods-stencil": "^14.1.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  }
+}

packages/super-components/components/msc-tail-logs/react/src/components/stencil-generated/index.ts

@@ -0,0 +1,12 @@
+/* eslint-disable */
+/* tslint:disable */
+/* auto-generated react proxies */
+import { createReactComponent } from './react-component-lib';
+
+import type { JSX } from '@ovhcloud/msc-stencil-tail-logs/custom-elements';
+
+import { defineCustomElement as defineMscTailLogs } from '@ovhcloud/msc-stencil-tail-logs/custom-elements/msc-tail-logs.js';
+import { defineCustomElement as defineMscTailLogsCode } from '@ovhcloud/msc-stencil-tail-logs/custom-elements/msc-tail-logs-code.js';
+
+export const MscTailLogs = /*@__PURE__*/createReactComponent<JSX.MscTailLogs, HTMLMscTailLogsElement>('msc-tail-logs', undefined, undefined, defineMscTailLogs);
+export const MscTailLogsCode = /*@__PURE__*/createReactComponent<JSX.MscTailLogsCode, HTMLMscTailLogsCodeElement>('msc-tail-logs-code', undefined, undefined, defineMscTailLogsCode);

packages/super-components/components/msc-tail-logs/react/src/components/stencil-generated/react-component-lib/createComponent.tsx

@@ -0,0 +1,106 @@
+import React, { createElement } from 'react';
+
+import { attachProps, camelToDashCase, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs } from './utils';
+
+export interface HTMLStencilElement extends HTMLElement {
+  componentOnReady(): Promise<this>;
+}
+
+interface StencilReactInternalProps<ElementType> extends React.HTMLAttributes<ElementType> {
+  forwardedRef: React.RefObject<ElementType>;
+  ref?: React.Ref<any>;
+}
+
+export const createReactComponent = <
+  PropType,
+  ElementType extends HTMLStencilElement,
+  ContextStateType = {},
+  ExpandedPropsTypes = {}
+>(
+  tagName: string,
+  ReactComponentContext?: React.Context<ContextStateType>,
+  manipulatePropsFunction?: (
+    originalProps: StencilReactInternalProps<ElementType>,
+    propsToPass: any
+  ) => ExpandedPropsTypes,
+  defineCustomElement?: () => void
+) => {
+  if (defineCustomElement !== undefined) {
+    defineCustomElement();
+  }
+
+  const displayName = dashToPascalCase(tagName);
+  const ReactComponent = class extends React.Component<StencilReactInternalProps<ElementType>> {
+    componentEl!: ElementType;
+
+    setComponentElRef = (element: ElementType) => {
+      this.componentEl = element;
+    };
+
+    constructor(props: StencilReactInternalProps<ElementType>) {
+      super(props);
+    }
+
+    componentDidMount() {
+      this.componentDidUpdate(this.props);
+    }
+
+    componentDidUpdate(prevProps: StencilReactInternalProps<ElementType>) {
+      attachProps(this.componentEl, this.props, prevProps);
+    }
+
+    render() {
+      const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
+
+      let propsToPass = Object.keys(cProps).reduce((acc: any, name) => {
+        const value = (cProps as any)[name];
+
+        if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
+          const eventName = name.substring(2).toLowerCase();
+          if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
+            acc[name] = value;
+          }
+        } else {
+          // we should only render strings, booleans, and numbers as attrs in html.
+          // objects, functions, arrays etc get synced via properties on mount.
+          const type = typeof value;
+
+          if (type === 'string' || type === 'boolean' || type === 'number') {
+            acc[camelToDashCase(name)] = value;
+          }
+        }
+        return acc;
+      }, {} as ExpandedPropsTypes);
+
+      if (manipulatePropsFunction) {
+        propsToPass = manipulatePropsFunction(this.props, propsToPass);
+      }
+
+      const newProps: Omit<StencilReactInternalProps<ElementType>, 'forwardedRef'> = {
+        ...propsToPass,
+        ref: mergeRefs(forwardedRef, this.setComponentElRef),
+        style,
+      };
+
+      /**
+       * We use createElement here instead of
+       * React.createElement to work around a
+       * bug in Vite (https://github.com/vitejs/vite/issues/6104).
+       * React.createElement causes all elements to be rendered
+       * as <tagname> instead of the actual Web Component.
+       */
+      return createElement(tagName, newProps, children);
+    }
+
+    static get displayName() {
+      return displayName;
+    }
+  };
+
+  // If context was passed to createReactComponent then conditionally add it to the Component Class
+  if (ReactComponentContext) {
+    ReactComponent.contextType = ReactComponentContext;
+  }
+
+  return createForwardRef<PropType, ElementType>(ReactComponent, displayName);
+};