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

ref:MANAGER-11671 Signed-off-by: stif59100 <[email protected]>
ovh · Aug 10, 2023 · 1bb082d · 1bb082d
1 parent 6d4c44a
commit 1bb082d
Show file tree

Hide file tree

Showing 65 changed files with 34,810 additions and 67 deletions.
diff --git a/packages/super-components/.gitignore b/packages/super-components/.gitignore
@@ -5,3 +5,4 @@ hydrate/
 loader/
 components.d.ts
 www/
+.prettierignore
diff --git a/packages/super-components/components/msc-tail-logs/.gitignore b/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
diff --git a/packages/super-components/components/msc-tail-logs/.npmignore b/packages/super-components/components/msc-tail-logs/.npmignore
@@ -0,0 +1,3 @@
+!dist/
+!loader/
+!docs-api/
diff --git a/packages/super-components/components/msc-tail-logs/docs/msc-tail-logs.stories.ts b/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',
+  },
+};
diff --git a/packages/super-components/components/msc-tail-logs/mock/tail-log.mock.ts b/packages/super-components/components/msc-tail-logs/mock/tail-log.mock.ts
@@ -0,0 +1,107 @@
+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,
+    },
+  ]);
diff --git a/packages/super-components/components/msc-tail-logs/package.json b/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"
+}
diff --git a/packages/super-components/components/msc-tail-logs/react/.gitignore b/packages/super-components/components/msc-tail-logs/react/.gitignore
@@ -0,0 +1 @@
+dist/
diff --git a/packages/super-components/components/msc-tail-logs/react/.npmignore b/packages/super-components/components/msc-tail-logs/react/.npmignore
@@ -0,0 +1,2 @@
+!dist/
+src/
diff --git a/packages/super-components/components/msc-tail-logs/react/package.json b/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"
+  }
+}
diff --git a/...-tail-logs/react/src/components/stencil-generated/react-component-lib/createComponent.tsx b/...-tail-logs/react/src/components/stencil-generated/react-component-lib/createComponent.tsx
@@ -0,0 +1,126 @@
+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);
+};