@next-bricks/data-view 0.13.6 → 0.13.7

package/dist/chunks/cabinet-thumbnail.1027b046.js

@@ -1,3 +0,0 @@
-/*! For license information please see cabinet-thumbnail.1027b046.js.LICENSE.txt */
-(self.webpackChunk_next_bricks_data_view=self.webpackChunk_next_bricks_data_view||[]).push([[9410],{7790:(e,t,a)=>{"use strict";a.r(t),a.d(t,{CabinetThumbnail:()=>b,CabinetThumbnailComponent:()=>M});var r,l,i,n,o,s,c,p,g,b,u=a(3028),h=a(3395),d=a(381),f=a(687),v=a(2604),x=a(8657),m=a.n(x),w=a(8978),y=a(2061),k=a(2779),z=a.n(k),C=a(1043),E=a(6708),N=a(8143),Z=(0,w.wrapBrick)("data-view.cabinet-app-layer"),{defineElement:T,property:R}=(0,y.createDecorators)(),S=(0,w.wrapBrick)("data-view.cabinet-node");l=T("data-view.cabinet-thumbnail",{styleTexts:[C.Z,E.Z]}),i=R({attribute:!1}),o=R({type:Number}),c=R();var W=new WeakMap,L=new WeakMap,_=new WeakMap;class H extends w.ReactNextElement{constructor(){super(...arguments),(0,h.Z)(this,W,{writable:!0,value:(g(this),n(this,[]))}),(0,h.Z)(this,L,{writable:!0,value:s(this,4)}),(0,h.Z)(this,_,{writable:!0,value:p(this)})}get clusters(){return(0,f.Z)(this,W)}set clusters(e){(0,d.Z)(this,W,e)}get columns(){return(0,f.Z)(this,L)}set columns(e){(0,d.Z)(this,L,e)}get appName(){return(0,f.Z)(this,_)}set appName(e){(0,d.Z)(this,_,e)}render(){return m().createElement(M,{clusters:this.clusters,columns:this.columns,appName:this.appName})}}function M(e){var{clusters:t,columns:a,appName:r}=e,l=(0,x.useRef)(),i=(0,x.useRef)(),[n,o]=(0,x.useState)(),s=(0,N.D)(n);return(0,x.useLayoutEffect)((()=>{var{width:e,height:r}=l.current.getBoundingClientRect();if(t.length&&a>0){var{width:n,height:c}=i.current.getBoundingClientRect(),p=e/(n/(null!=s?s:1)),g=r/(c*(null!=s?s:1));o(Math.min(Math.floor(100*Math.min(p,g))/100,1))}}),[t,s,a]),m().createElement("div",{ref:l,className:"wrapper"},m().createElement("div",{className:"thumbnailLayout",ref:i,style:(0,u.Z)({},n?{transform:"scale(".concat(n,")")}:{})},m().createElement(Z,{className:"appLayer",appTitle:r}),m().createElement("div",{className:"layout"},t.map(((e,t)=>m().createElement("div",{className:"clusterWrapper",key:t},m().createElement("div",{className:z()("clusterContainer",{clusterHostContainer:"host"===e.type||"k8s-blue"===e.type,clusterK8sContainer:"k8s"===e.type})},m().createElement("div",{className:"clusterContent"},m().createElement("div",{className:"clusterContentLayout",style:{gridTemplateColumns:"repeat(".concat(a,",1fr)")}},e.data.map(((e,t)=>m().createElement("div",{key:t,className:"itemContent"},m().createElement(S,{type:e.type,nodeTitle:e.nodeTitle})))))),m().createElement("div",{className:"clusterTitle"},m().createElement("div",{className:"title"},e.title)))))))))}({e:[n,s,p,g],c:[b,r]}=(0,v.Z)(H,[[i,1,"clusters"],[o,1,"columns"],[c,1,"appName"]],[l])),r()},8143:(e,t,a)=>{"use strict";a.d(t,{D:()=>g,y:()=>p});var r=a(3028),l=a(8657),i=a(7209),n=new Map,o=new i.Z((e=>{e.forEach((e=>{var t,{target:a}=e;null===(t=n.get(a))||void 0===t||t.forEach((t=>t(e)))}))})),s=(e,t)=>{n.has(e)||(n.set(e,new Set),o.observe(e)),n.get(e).add(t)},c=(e,t)=>{n.has(e)&&(n.get(e).delete(t),0===n.get(e).size&&(o.unobserve(e),n.delete(e)))};function p(e){var{targetRef:t,onResize:a}=e||{},i=(0,l.useRef)(),n=null!=t?t:i,[o,p]=(0,l.useState)({clientWidth:0,clientHeight:0}),g=(0,l.useCallback)((e=>{var{target:t}=e,{clientWidth:r=0,clientHeight:l=0}=t;p((t=>t.clientWidth===r&&t.clientHeight===l?t:(null==a||a(e),{clientWidth:r,clientHeight:l})))}),[a]);return(0,l.useEffect)((()=>{if("object"!=typeof n||null===n||!(n.current instanceof Element))throw new Error("ResizeObserver must observe an Element");var e=n.current;return s(e,g),()=>{c(e,g)}}),[g,n]),[n,(0,r.Z)({},o)]}function g(e){var t=(0,l.useRef)();return(0,l.useEffect)((()=>{t.current=e})),t.current}},2779:(e,t)=>{var a;!function(){"use strict";var r={}.hasOwnProperty;function l(){for(var e=[],t=0;t<arguments.length;t++){var a=arguments[t];if(a){var i=typeof a;if("string"===i||"number"===i)e.push(a);else if(Array.isArray(a)){if(a.length){var n=l.apply(null,a);n&&e.push(n)}}else if("object"===i){if(a.toString!==Object.prototype.toString&&!a.toString.toString().includes("[native code]")){e.push(a.toString());continue}for(var o in a)r.call(a,o)&&a[o]&&e.push(o)}}}return e.join(" ")}e.exports?(l.default=l,e.exports=l):void 0===(a=function(){return l}.apply(t,[]))||(e.exports=a)}()},6708:(e,t,a)=>{"use strict";a.d(t,{Z:()=>o});var r=a(9601),l=a.n(r),i=a(2609),n=a.n(i)()(l());n.push([e.id,'*,\n*:after,\n*:before{box-sizing:border-box}.wrapper{width:100%;height:100%}.wrapper,\n.thumbnailLayout{display:flex;justify-content:center;align-items:center}.appLayer{width:90%;margin-bottom:16px;align-self:center;pointer-events:none}.thumbnailLayout{flex-direction:column}.layout{display:flex;gap:17px;margin-top:27px;align-items:stretch}.clusterWrapper{width:100%;height:auto}.clusterContainer{width:100%;height:100%;border:3px solid;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);display:flex;flex-direction:column}.clusterHostContainer{background:rgba(7,4,21,0.85);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);border-image:radial-gradient(circle,rgba(55,229,252,1),#007aca) 3 3}.clusterK8sContainer{background:rgba(7,4,21,0.8);border-image:radial-gradient(circle,rgba(255,102,51,1),#ff663399) 3 3}.clusterContent{flex:1;padding:20px 10px;width:100%}.clusterContentLayout{display:grid;width:100%}.itemContent{width:118px;pointer-events:none;height:105px}.clusterTitle{width:100%;text-align:center;line-height:57px;font-size:var(--auxiliary-font-size);font-weight:var(--font-weight-400);color:var(--color-normal-text);position:relative;display:flex}.title{flex:1;width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.clusterTitle:after{content:"";width:100%;height:100%;position:absolute;left:0;top:0;z-index:-1}.clusterHostContainer > .clusterTitle:after{background:linear-gradient(180deg,rgba(26,103,157,0.2) 0%,#1b69a0 100%)}.clusterK8sContainer > .clusterTitle:after{background:linear-gradient(180deg,rgba(255,102,51,0.1) 0%,rgba(255,102,51,0.55) 100%)}',""]);const o=n.toString()},1043:(e,t,a)=>{"use strict";a.d(t,{Z:()=>o});var r=a(9601),l=a.n(r),i=a(2609),n=a.n(i)()(l());n.push([e.id,":host{--palette-rgba-white-1:rgba(255,255,255,10%);--palette-rgba-white-2:rgba(255,255,255,20%);--palette-rgba-white-3:rgba(255,255,255,30%);--palette-rgba-white-4:rgba(255,255,255,40%);--palette-rgba-white-5:rgba(255,255,255,50%);--palette-rgba-white-6:rgba(255,255,255,60%);--palette-rgba-white-7:rgba(255,255,255,70%);--palette-rgba-white-8:rgba(255,255,255,80%);--palette-rgba-white-9:rgba(255,255,255,90%);--palette-rgba-white-10:rgba(255,255,255,100%);--palette-rgba-gray-1:rgba(0,0,0,10%);--palette-rgba-gray-2:rgba(0,0,0,20%);--palette-rgba-gray-3:rgba(0,0,0,30%);--palette-rgba-gray-4:rgba(0,0,0,40%);--palette-rgba-gray-5:rgba(0,0,0,50%);--palette-rgba-gray-6:rgba(0,0,0,60%);--palette-rgba-gray-7:rgba(0,0,0,70%);--palette-rgba-gray-8:rgba(0,0,0,80%);--palette-rgba-gray-9:rgba(0,0,0,90%);--palette-rgba-gray-10:rgba(0,0,0,100%);--palette-rgba-blue-gray-2:rgba(101,106,134,20%);--palette-rgba-blue-gray-3:rgba(101,106,134,30%);--palette-rgba-blue-gray-8:rgba(101,106,134,80%);--palette-tech-blue-4-channel:67,127,255;--palette-tech-blue-4:rgb(var(--palette-tech-blue-4-channel));--palette-tech-blue-6-channel:51,102,255;--palette-tech-blue-6:rgb(var(--palette-tech-blue-6-channel));--palette-tech-blue-8-channel:40,69,159;--palette-tech-blue-8:rgb(var(--palette-tech-blue-8-channel));--palette-sea-green-4-channel:131,245,225;--palette-sea-green-4:rgb(var(--palette-sea-green-4-channel));--palette-green-6-channel:81,235,73;--palette-green-6:rgb(var(--palette-green-6-channel));--palette-green-2:rgba(var(--palette-green-6-channel),20%);--palette-lotus-pink-7-channel:204,0,102;--palette-lotus-pink-7:rgb(var(--palette-lotus-pink-7-channel));--palette-red-6-channel:242,39,39;--palette-red-6:rgb(var(--palette-red-6-channel));--palette-red-2:rgba(var(--palette-red-6-channel),20%);--color-fill-global-bg:#0f1014;--color-fill-bg-container-1:var(--palette-rgba-white-1);--color-fill-bg-container-2:var(--palette-rgba-blue-gray-2);--color-fill-bg-container-3:var(--palette-rgba-blue-gray-8);--color-fill-bg-base-1:var(--palette-rgba-blue-gray-2);--color-fill-bg-base-2:rgba(15,16,20,0%);--color-fill-bg-base-3:rgba(0,0,0,20%);--color-fill-bg-base-4:rgba(40,46,58,100%);--color-fill-bg-base-5:rgba(19,25,47,80%);--color-fill-bg-base-6:var(--palette-rgba-blue-gray-3);--color-brand:var(--palette-tech-blue-6);--color-brand-hover:var(--palette-tech-blue-4);--color-brand-active:var(--palette-tech-blue-8);--color-contrast-1:var(--palette-sea-green-4);--color-error:var(--palette-red-6);--color-error-bg:var(--palette-red-2);--color-success:var(--palette-green-6);--color-success-bg:var(--palette-green-2);--color-header-text-big:var(--palette-rgba-white-10);--color-header-text:var(--palette-rgba-white-10);--color-normal-text:var(--palette-rgba-white-10);--color-strong-text:var(--palette-rgba-white-9);--color-auxiliary-text:var(--palette-rgba-white-8);--color-secondary-text:var(--palette-rgba-white-6);--color-disabled-text:var(--palette-rgba-white-4);--color-border-divider-line:var(--palette-rgba-white-1);--color-text-divider-line-1:var(--palette-rgba-white-2);--color-text-divider-line-2:var(--palette-rgba-white-2);--small-border-radius:2px;--medius-border-radius:5px;--larger-border-radius:12px;--container-border-radius:9999px;--no-border-radius:0px;--mask-bg:var(--palette-rgba-gray-7);--title-font-size-larger:30px;--title-font-size-strong:22px;--title-font-size:18px;--normal-font-size:14px;--auxiliary-font-size:16px;--auxiliary-font-size-small:12px;--overview-data-font-size:34px;--statistics-data-font-size:28px;--normal-data-font-size-larger:20px;--normal-data-font-size:16px;--chart-legend-font-size:12px;--chart-tooltips-font-size-1:12px;--chart-tooltips-font-size-2:12px;--chart-axis-x-font-size:12px;--chart-axis-x-font-size-larger:14px;--chart-axis-y-font-size:12px;--chart-axis-y-font-size-larger:14px;--font-weight-600:600;--font-weight-500:500;--font-weight-400:400;--text-shadow:0px 1px 4px #2863ee;--border-width-base:1px;--border-width-double-base:2px;--border-width-tribble-base:3px;--punctate-width-base:1px;--paragraph-width-base:1px;--button-text-color:#40d0db}",""]);const o=n.toString()}}]);
-//# sourceMappingURL=cabinet-thumbnail.1027b046.js.map

package/dist/chunks/cabinet-thumbnail.1027b046.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"chunks/cabinet-thumbnail.1027b046.js","mappings":"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","sources":["webpack:///./src/cabinet/cabinet-thumbnail/index.tsx","webpack:///./src/hooks/useResizeObserver/resizeObserverUtil.ts","webpack:///./src/hooks/useResizeObserver/index.ts","webpack:///./src/hooks/usePrevious/index.ts","webpack:///../../node_modules/classnames/index.js","webpack:///./src/cabinet/cabinet-thumbnail/cabinet-thumbnail.shadow.css","webpack:///./src/data-view-variables.shadow.css"],"sourcesContent":["import React, { useLayoutEffect, useRef, useState } from \"react\";\nimport { ReactNextElement, wrapBrick } from \"@next-core/react-element\";\nimport { createDecorators } from \"@next-core/element\";\nimport classNames from \"classnames\";\nimport { CabinetNode, CabinetNodeProps } from \"../cabinet-node/index.js\";\nimport { ContainerType } from \"../cabinet-container/index.js\";\nimport variablesText from \"../../data-view-variables.shadow.css\";\nimport styleText from \"./cabinet-thumbnail.shadow.css\";\nimport { usePrevious } from \"../../hooks/index.js\";\nimport {\n  CabinetAppLayer,\n  CabinetAppLayerProps,\n} from \"../cabinet-app-layer/index.js\";\nconst WrappedCabinetAppLayer = wrapBrick<CabinetAppLayer, CabinetAppLayerProps>(\n  \"data-view.cabinet-app-layer\"\n);\nconst { defineElement, property } = createDecorators();\n\nconst WrappedNode = wrapBrick<CabinetNode, CabinetNodeProps>(\n  \"data-view.cabinet-node\"\n);\nexport interface Clusters {\n  data: CabinetNodeProps[];\n  type?: ContainerType;\n  title?: string | undefined;\n}\n\nexport interface CabinetThumbnailProps {\n  clusters: Clusters[];\n  appName: string;\n  columns?: number;\n}\n\n/**\n * @id data-view.cabinet-thumbnail\n * @name data-view.cabinet-thumbnail\n * @docKind brick\n * @description 应用墙缩略图\n * @author astrid\n * @noInheritDoc\n */\n@defineElement(\"data-view.cabinet-thumbnail\", {\n  styleTexts: [variablesText, styleText],\n})\nclass CabinetThumbnail\n  extends ReactNextElement\n  implements CabinetThumbnailProps\n{\n  /**\n   * @kind CabinetContainerProps[]\n   * @required true\n   * @default\n   * @description 集群数据\n   */\n  @property({ attribute: false })\n  accessor clusters: Clusters[] = [];\n\n  /**\n   * @kind number\n   * @required\n   * @default 4\n   * @description 单个容器列数\n   */\n  @property({ type: Number })\n  accessor columns: number = 4;\n\n  /**\n   * @kind string\n   * @required true\n   * @default\n   * @description 应用名称\n   */\n  @property()\n  accessor appName: string;\n\n  render(): React.ReactNode {\n    return (\n      <CabinetThumbnailComponent\n        clusters={this.clusters}\n        columns={this.columns}\n        appName={this.appName}\n      />\n    );\n  }\n}\n\nexport function CabinetThumbnailComponent(\n  props: CabinetThumbnailProps\n): React.ReactElement {\n  const { clusters, columns, appName } = props;\n  const containerRef = useRef<HTMLDivElement>();\n  const layoutRef = useRef<HTMLDivElement>();\n  const [scale, setScale] = useState<number>();\n  const preScale = usePrevious(scale);\n\n  useLayoutEffect(() => {\n    const { width, height } = containerRef.current.getBoundingClientRect();\n    if (!!clusters.length && columns > 0) {\n      const { width: realWidth, height: realHeight } =\n        layoutRef.current.getBoundingClientRect();\n      // 计算缩放比例\n      const wScale = width / (realWidth / (preScale ?? 1));\n      const hScale = height / (realHeight * (preScale ?? 1));\n      setScale(Math.min(Math.floor(Math.min(wScale, hScale) * 100) / 100, 1));\n    }\n  }, [clusters, preScale, columns]);\n\n  return (\n    <div ref={containerRef} className=\"wrapper\">\n      <div\n        className=\"thumbnailLayout\"\n        ref={layoutRef}\n        style={{\n          ...(scale ? { transform: `scale(${scale})` } : {}),\n        }}\n      >\n        <WrappedCabinetAppLayer className=\"appLayer\" appTitle={appName} />\n        <div className=\"layout\">\n          {clusters.map((item, index) => (\n            <div className=\"clusterWrapper\" key={index}>\n              <div\n                className={classNames(\"clusterContainer\", {\n                  clusterHostContainer:\n                    item.type === \"host\" || item.type === \"k8s-blue\",\n                  clusterK8sContainer: item.type === \"k8s\",\n                })}\n              >\n                <div className=\"clusterContent\">\n                  <div\n                    className=\"clusterContentLayout\"\n                    style={{ gridTemplateColumns: `repeat(${columns},1fr)` }}\n                  >\n                    {item.data.map((node, index) => (\n                      <div key={index} className=\"itemContent\">\n                        <WrappedNode\n                          type={node.type}\n                          nodeTitle={node.nodeTitle}\n                        />\n                      </div>\n                    ))}\n                  </div>\n                </div>\n                <div className=\"clusterTitle\">\n                  <div className=\"title\">{item.title}</div>\n                </div>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\nexport { CabinetThumbnail };\n","import ResizeObserver from \"resize-observer-polyfill\";\n\nexport type ResizeCallback = (entry: ResizeObserverEntry) => void;\n\nconst elementListeners = new Map<Element, Set<ResizeCallback>>();\n\nexport const elementListeners_only_for_test =\n  process.env.NODE_ENV === \"test\"\n    ? elementListeners\n    : /* istanbul ignore next */ null;\n\nconst resizeObserverCallback = (entries: ResizeObserverEntry[]): void => {\n  entries.forEach((entry) => {\n    const { target } = entry;\n    elementListeners.get(target)?.forEach((callback) => callback(entry));\n  });\n};\n\nconst resizeObserver: ResizeObserver = new (ResizeObserver as any)(resizeObserverCallback);\n\nexport const observe = (element: Element, callback: ResizeCallback): void => {\n  if (!elementListeners.has(element)) {\n    elementListeners.set(element, new Set());\n    resizeObserver.observe(element);\n  }\n\n  elementListeners.get(element).add(callback);\n};\n\nexport const unobserve = (element: Element, callback: ResizeCallback): void => {\n  if (elementListeners.has(element)) {\n    elementListeners.get(element).delete(callback);\n\n    if (elementListeners.get(element).size === 0) {\n      resizeObserver.unobserve(element);\n      elementListeners.delete(element);\n    }\n  }\n};\n","import {\n  useState,\n  useCallback,\n  useRef,\n  type RefObject,\n  useEffect,\n} from \"react\";\nimport { observe, unobserve } from \"./resizeObserverUtil.js\";\n\ninterface ElementSize {\n  clientWidth: number;\n  clientHeight: number;\n}\n\nexport interface ResizeObserveProps<T extends Element = Element> {\n  targetRef?: RefObject<T>;\n  onResize?: (size: ResizeObserverEntry) => void;\n}\n\nexport function useResizeObserver<T extends Element = Element>(\n  props?: ResizeObserveProps<T>\n): [RefObject<T>, ElementSize] {\n  const {\n    targetRef,\n    onResize,\n  } = props || {};\n\n  const localRef = useRef<T>();\n  const ref = targetRef ?? localRef;\n  const [size, setSize] = useState<ElementSize>({ clientWidth: 0, clientHeight: 0 });\n\n  const handleResize = useCallback(\n    (entry: ResizeObserverEntry) => {\n      const { target } = entry;\n      const { clientWidth = 0, clientHeight = 0 } = target;\n\n      setSize((prev) => {\n        // skip if same size\n        if (prev.clientWidth === clientWidth && prev.clientHeight === clientHeight) {\n          return prev;\n        }\n\n        onResize?.(entry);\n\n        return { clientWidth, clientHeight };\n      });\n    },\n    [onResize]\n  );\n\n  useEffect(() => {\n    if (\n      typeof ref !== \"object\" ||\n      ref === null ||\n      !(ref.current instanceof Element)\n    ) {\n      throw new Error(\"ResizeObserver must observe an Element\");\n    }\n\n    const element = ref.current;\n    observe(element, handleResize);\n\n    return () => {\n      unobserve(element, handleResize);\n    };\n  }, [handleResize, ref]);\n\n  return [ref, { ...size }];\n}\n","import {useRef, useEffect} from 'react';\nexport  function usePrevious<T>(data?: T):T|undefined{\n    const ref = useRef<T>();\n    useEffect(()=>{\n        ref.current = data\n    })\n    return ref.current;\n}\n","/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\tvar nativeCodeString = '[native code]';\n\n\tfunction classNames() {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tif (arg.length) {\n\t\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\t\tif (inner) {\n\t\t\t\t\t\tclasses.push(inner);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\t\t\tclasses.push(arg.toString());\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../../../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../../../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `*,\n*:after,\n*:before{box-sizing:border-box}.wrapper{width:100%;height:100%}.wrapper,\n.thumbnailLayout{display:flex;justify-content:center;align-items:center}.appLayer{width:90%;margin-bottom:16px;align-self:center;pointer-events:none}.thumbnailLayout{flex-direction:column}.layout{display:flex;gap:17px;margin-top:27px;align-items:stretch}.clusterWrapper{width:100%;height:auto}.clusterContainer{width:100%;height:100%;border:3px solid;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);display:flex;flex-direction:column}.clusterHostContainer{background:rgba(7,4,21,0.85);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);border-image:radial-gradient(circle,rgba(55,229,252,1),#007aca) 3 3}.clusterK8sContainer{background:rgba(7,4,21,0.8);border-image:radial-gradient(circle,rgba(255,102,51,1),#ff663399) 3 3}.clusterContent{flex:1;padding:20px 10px;width:100%}.clusterContentLayout{display:grid;width:100%}.itemContent{width:118px;pointer-events:none;height:105px}.clusterTitle{width:100%;text-align:center;line-height:57px;font-size:var(--auxiliary-font-size);font-weight:var(--font-weight-400);color:var(--color-normal-text);position:relative;display:flex}.title{flex:1;width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.clusterTitle:after{content:\"\";width:100%;height:100%;position:absolute;left:0;top:0;z-index:-1}.clusterHostContainer > .clusterTitle:after{background:linear-gradient(180deg,rgba(26,103,157,0.2) 0%,#1b69a0 100%)}.clusterK8sContainer > .clusterTitle:after{background:linear-gradient(180deg,rgba(255,102,51,0.1) 0%,rgba(255,102,51,0.55) 100%)}`, \"\"]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___.toString();\n","// Imports\nimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \"../../../node_modules/css-loader/dist/runtime/noSourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `:host{--palette-rgba-white-1:rgba(255,255,255,10%);--palette-rgba-white-2:rgba(255,255,255,20%);--palette-rgba-white-3:rgba(255,255,255,30%);--palette-rgba-white-4:rgba(255,255,255,40%);--palette-rgba-white-5:rgba(255,255,255,50%);--palette-rgba-white-6:rgba(255,255,255,60%);--palette-rgba-white-7:rgba(255,255,255,70%);--palette-rgba-white-8:rgba(255,255,255,80%);--palette-rgba-white-9:rgba(255,255,255,90%);--palette-rgba-white-10:rgba(255,255,255,100%);--palette-rgba-gray-1:rgba(0,0,0,10%);--palette-rgba-gray-2:rgba(0,0,0,20%);--palette-rgba-gray-3:rgba(0,0,0,30%);--palette-rgba-gray-4:rgba(0,0,0,40%);--palette-rgba-gray-5:rgba(0,0,0,50%);--palette-rgba-gray-6:rgba(0,0,0,60%);--palette-rgba-gray-7:rgba(0,0,0,70%);--palette-rgba-gray-8:rgba(0,0,0,80%);--palette-rgba-gray-9:rgba(0,0,0,90%);--palette-rgba-gray-10:rgba(0,0,0,100%);--palette-rgba-blue-gray-2:rgba(101,106,134,20%);--palette-rgba-blue-gray-3:rgba(101,106,134,30%);--palette-rgba-blue-gray-8:rgba(101,106,134,80%);--palette-tech-blue-4-channel:67,127,255;--palette-tech-blue-4:rgb(var(--palette-tech-blue-4-channel));--palette-tech-blue-6-channel:51,102,255;--palette-tech-blue-6:rgb(var(--palette-tech-blue-6-channel));--palette-tech-blue-8-channel:40,69,159;--palette-tech-blue-8:rgb(var(--palette-tech-blue-8-channel));--palette-sea-green-4-channel:131,245,225;--palette-sea-green-4:rgb(var(--palette-sea-green-4-channel));--palette-green-6-channel:81,235,73;--palette-green-6:rgb(var(--palette-green-6-channel));--palette-green-2:rgba(var(--palette-green-6-channel),20%);--palette-lotus-pink-7-channel:204,0,102;--palette-lotus-pink-7:rgb(var(--palette-lotus-pink-7-channel));--palette-red-6-channel:242,39,39;--palette-red-6:rgb(var(--palette-red-6-channel));--palette-red-2:rgba(var(--palette-red-6-channel),20%);--color-fill-global-bg:#0f1014;--color-fill-bg-container-1:var(--palette-rgba-white-1);--color-fill-bg-container-2:var(--palette-rgba-blue-gray-2);--color-fill-bg-container-3:var(--palette-rgba-blue-gray-8);--color-fill-bg-base-1:var(--palette-rgba-blue-gray-2);--color-fill-bg-base-2:rgba(15,16,20,0%);--color-fill-bg-base-3:rgba(0,0,0,20%);--color-fill-bg-base-4:rgba(40,46,58,100%);--color-fill-bg-base-5:rgba(19,25,47,80%);--color-fill-bg-base-6:var(--palette-rgba-blue-gray-3);--color-brand:var(--palette-tech-blue-6);--color-brand-hover:var(--palette-tech-blue-4);--color-brand-active:var(--palette-tech-blue-8);--color-contrast-1:var(--palette-sea-green-4);--color-error:var(--palette-red-6);--color-error-bg:var(--palette-red-2);--color-success:var(--palette-green-6);--color-success-bg:var(--palette-green-2);--color-header-text-big:var(--palette-rgba-white-10);--color-header-text:var(--palette-rgba-white-10);--color-normal-text:var(--palette-rgba-white-10);--color-strong-text:var(--palette-rgba-white-9);--color-auxiliary-text:var(--palette-rgba-white-8);--color-secondary-text:var(--palette-rgba-white-6);--color-disabled-text:var(--palette-rgba-white-4);--color-border-divider-line:var(--palette-rgba-white-1);--color-text-divider-line-1:var(--palette-rgba-white-2);--color-text-divider-line-2:var(--palette-rgba-white-2);--small-border-radius:2px;--medius-border-radius:5px;--larger-border-radius:12px;--container-border-radius:9999px;--no-border-radius:0px;--mask-bg:var(--palette-rgba-gray-7);--title-font-size-larger:30px;--title-font-size-strong:22px;--title-font-size:18px;--normal-font-size:14px;--auxiliary-font-size:16px;--auxiliary-font-size-small:12px;--overview-data-font-size:34px;--statistics-data-font-size:28px;--normal-data-font-size-larger:20px;--normal-data-font-size:16px;--chart-legend-font-size:12px;--chart-tooltips-font-size-1:12px;--chart-tooltips-font-size-2:12px;--chart-axis-x-font-size:12px;--chart-axis-x-font-size-larger:14px;--chart-axis-y-font-size:12px;--chart-axis-y-font-size-larger:14px;--font-weight-600:600;--font-weight-500:500;--font-weight-400:400;--text-shadow:0px 1px 4px #2863ee;--border-width-base:1px;--border-width-double-base:2px;--border-width-tribble-base:3px;--punctate-width-base:1px;--paragraph-width-base:1px;--button-text-color:#40d0db}`, \"\"]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___.toString();\n"],"names":["_CabinetThumbnail","WrappedCabinetAppLayer","wrapBrick","defineElement","property","createDecorators","WrappedNode","_dec","styleTexts","variablesText","styleText","_dec2","attribute","_dec3","type","Number","_dec4","_A","WeakMap","_B","_C","CabinetThumbnail","ReactNextElement","constructor","arguments","_classPrivateFieldInitSpec","writable","value","_initProto","_init_clusters","_init_columns","_init_appName","clusters","_classPrivateFieldGet","v","_classPrivateFieldSet","columns","appName","render","React","CabinetThumbnailComponent","this","props","containerRef","useRef","layoutRef","scale","setScale","useState","preScale","usePrevious","useLayoutEffect","width","height","current","getBoundingClientRect","length","realWidth","realHeight","wScale","hScale","Math","min","floor","ref","className","style","_objectSpread","transform","concat","appTitle","map","item","index","key","classNames","clusterHostContainer","clusterK8sContainer","gridTemplateColumns","data","node","nodeTitle","title","e","c","_initClass","_applyDecs","elementListeners","Map","resizeObserver","ResizeObserver","entries","forEach","entry","_elementListeners$get","target","get","callback","observe","element","has","set","Set","add","unobserve","delete","size","useResizeObserver","targetRef","onResize","localRef","setSize","clientWidth","clientHeight","handleResize","useCallback","prev","useEffect","Element","Error","hasOwn","hasOwnProperty","classes","i","arg","argType","push","Array","isArray","inner","apply","toString","Object","prototype","includes","call","join","module","exports","default","___CSS_LOADER_EXPORT___","id"],"sourceRoot":""}