import { TiB, GiB, KiB } from '@tower/utils';
import { createHashHistory } from 'history';
import _ from 'lodash';
import React$1, { useEffect, useRef, useState, useCallback, useLayoutEffect, forwardRef, useContext, useMemo } from 'react';
import cs from 'classnames';
import { useTranslation } from 'react-i18next';
import { styled } from '@linaria/react';

const pluralizeMap = { vm: "vms", elfImage: "elfImages", contentLibraryImage: "contentLibraryImages", vmTemplate: "vmTemplates", contentLibraryVmTemplate: "contentLibraryVmTemplates", iscsiTarget: "iscsiTargets", iscsiLun: "iscsiLuns", nfsExport: "nfsExports", nfsInode: "nfsInodes", vds: "vdses", vlan: "vlans", host: "hosts", disk: "disks", nic: "nics", alert: "alerts", globalAlertRule: "globalAlertRules", task: "tasks", cluster: "clusters", datacenter: "datacenters", vmVolume: "vmVolumes", user: "users", reportTemplate: "reportTemplates", reportTask: "reportTasks", vmEntityFilterResult: "vmEntityFilterResults", consistencyGroup: "consistencyGroups", nvmfSubsystem: "nvmfSubsystems", nvmfNamespace: "nvmfNamespaces", namespaceGroup: "namespaceGroups", securityPolicy: "securityPolicies", backupPlan: "backupPlans", backupStoreRepository: "backupStoreRepositories" };

const tableCanClearQuery = (base) => {
  return Boolean(pluralizeMap[base]);
};

const EMPTY_FUNCTION = () => {
};
const EMPTY_ARRAY = [];
const EMPTY_OBJECT = {};
const EMPTY_COMPONENT = () => null;
const END_POINT = "/api";
const WS_URI = `${window.location.protocol === "https:" ? "wss:" : "ws:"}//${window.location.host}/api`;
const CUSTOMIZE = "__customize__";
const MAX_VOL_SIZE = 64 * TiB;
const AUTO_SCHEDULE = "AUTO_SCHEDULE";
const DAYJS_I18N_MAP = {
  "zh-CN": "zh-cn",
  "en-US": "en"
};
const NO_FOLDER = "NO_FOLDER";
const NO_DATACENTER = "NO_DATACENTER";
const DEFAULT_STORAGE_POLICY_UUID = "dce52578-3824-4b34-97a2-af09950bb0ac";
const WINDOWS = "WINDOWS";
const LINUX = "LINUX";

const getFormatValue = (formatUnit) => {
  if (formatUnit === "GiB") {
    return GiB;
  }
  if (formatUnit === "KiB") {
    return KiB;
  }
  return 1;
};

const hashHistory = createHashHistory();

const transformToArray = (stringOrArray) => {
  return stringOrArray instanceof Array ? stringOrArray : [stringOrArray];
};
const onResizeElem = (element, callback) => {
  const els = transformToArray(element);
  const data = {
    els,
    offsetWidth: els.map((el) => el.offsetWidth),
    offsetHeight: els.map((el) => el.offsetHeight),
    callback
  };
  const checkForChanges = () => {
    const nextOffsetWidth = data.els.map((el) => el.offsetWidth);
    const nextOffsetHeight = data.els.map((el) => el.offsetWidth);
    if (!_.isEqual(nextOffsetWidth, data.offsetWidth) || _.isEqual(nextOffsetHeight, data.offsetHeight)) {
      data.offsetWidth = nextOffsetWidth;
      data.offsetHeight = nextOffsetHeight;
      data.callback();
    }
  };
  const mutationObserver = new MutationObserver(checkForChanges);
  mutationObserver.observe(document.body, {
    attributes: true,
    subtree: true
  });
  window.addEventListener("resize", checkForChanges);
  const disconnect = () => {
    window.removeEventListener("resize", checkForChanges);
    mutationObserver.disconnect();
  };
  return disconnect;
};
const useElementResize = (klass, cb, depend) => {
  const klasses = transformToArray(klass);
  useEffect(() => {
    let els = [];
    if (typeof klass === "object" && "current" in klass) {
      els = klass.current ? [klass.current] : [];
    } else {
      klasses.forEach((klass2) => {
        const arr = Array.from(
          document.querySelectorAll(klass2)
        );
        if (arr.length > 0) {
          els = [...els, ...arr];
        }
      });
    }
    if (!els.length)
      return;
    if (typeof ResizeObserver === "function") {
      const resizeObserver = new ResizeObserver(cb);
      els.forEach((el) => {
        resizeObserver.observe(el);
      });
      return () => resizeObserver.disconnect();
    } else {
      return onResizeElem(Array.from(els), cb);
    }
  }, [cb, ...depend || []]);
};

function getSize(el) {
  if (!el) {
    return {
      width: 0,
      height: 0
    };
  }
  return {
    width: el.offsetWidth,
    height: el.offsetHeight
  };
}

function getAllSize(classMap) {
  return Object.keys(classMap).reduce((prev, cur) => {
    prev[cur] = getSize(
      document.querySelector(classMap[cur])
    );
    return prev;
  }, {});
}
const elementsSizes = {};
function useElementsSize(classMap, config) {
  const { prevent, key, dependencyList } = config;
  const preSizes = useRef();
  const [sizes, setSizes] = useState(() => {
    if (key && elementsSizes[key]) {
      return elementsSizes[key];
    }
    const initSizes = Object.keys(classMap).reduce((prev, cur) => {
      prev[cur] = { width: 0, height: 0 };
      return prev;
    }, {});
    preSizes.current = initSizes;
    return initSizes;
  });
  const classMapRef = useRef(classMap);
  classMapRef.current = classMap;
  const handleResize = useCallback(() => {
    if (prevent)
      return;
    const nextSizes = getAllSize(classMapRef.current);
    if (key) {
      if (!elementsSizes[key] || !_.isEqual(
        _.omit(elementsSizes[key], "thead"),
        _.omit(nextSizes, "thead")
      )) {
        elementsSizes[key] = nextSizes;
        setSizes(nextSizes);
      }
    } else if (!_.isEqual(preSizes.current, nextSizes)) {
      preSizes.current = nextSizes;
      setSizes(nextSizes);
    }
  }, [prevent, key, ...dependencyList || []]);
  useLayoutEffect(() => {
    handleResize();
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, [handleResize]);
  return sizes;
}

const getSearch = (searchString, defaultValue) => {
  let search;
  try {
    search = JSON.parse(searchString);
  } catch (e) {
    search = defaultValue;
  }
  return search;
};
function getValue(val, params) {
  return typeof val === "function" ? val(params) : val;
}

const dispatchStorageEvent = (key, value) => {
  const storageEvent = new Event(
    "storageChange"
  );
  storageEvent.key = key;
  storageEvent.value = value;
  document.dispatchEvent(storageEvent);
};
const localStorageVersions = {
  topo: 1,
  newTopo: 1,
  topoExpand: 1,
  token: 1,
  "table-customize-column": 11,
  "search-history": 4,
  "global-search-history": 3,
  language: 1,
  user: 1,
  "nav-menu": 1,
  reporter: 1,
  "favorite-tabs": 1,
  everoute: 1,
  "test-local-storage": 2,
  "topo-scalable-width": 1,
  backup: 1,
  alpha: 1,
  "date-range-picker": 1
};
function useLocalStorage(key, defaultValue) {
  const versions = localStorageVersions[key];
  const [value, setValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      if (!item)
        return getValue(defaultValue);
      let localItem;
      try {
        localItem = JSON.parse(item);
      } catch (e) {
      }
      if (!(localItem == null ? void 0 : localItem.versions) || versions > (localItem == null ? void 0 : localItem.versions)) {
        const nextValue = getValue(defaultValue);
        window.localStorage.setItem(
          key,
          JSON.stringify({ value: nextValue, versions })
        );
        return nextValue;
      } else {
        return localItem.value;
      }
    } catch (error) {
      return getValue(defaultValue);
    }
  });
  const onStorageChange = useCallback(
    (e) => {
      if (e.key === key) {
        setValue(e.value);
      }
    },
    [key]
  );
  const storageListener = useCallback((e) => {
    if (!e.key) {
      return;
    }
    if (e.newValue) {
      try {
        if (localStorage.getItem(e.key) === e.newValue) {
          return;
        }
        const newValue = JSON.parse(e.newValue).value;
        dispatchStorageEvent(e.key, newValue);
      } catch (error) {
        if (process.env.NODE_ENV === "development") {
          console.error("json parse failed", error);
        }
      }
    } else {
      dispatchStorageEvent(e.key, null);
    }
  }, []);
  useEffect(() => {
    document.addEventListener("storageChange", onStorageChange);
    window.addEventListener("storage", storageListener);
    return () => {
      document.removeEventListener("storageChange", onStorageChange);
      window.removeEventListener("storage", storageListener);
    };
  }, [onStorageChange, storageListener]);
  const valueRef = useRef(value);
  valueRef.current = value;
  const _setValue = useCallback(
    (val) => {
      const nextValue = getValue(val, valueRef.current);
      window.localStorage.setItem(
        key,
        JSON.stringify({ value: nextValue, versions })
      );
      dispatchStorageEvent(key, nextValue);
    },
    [key, versions]
  );
  const removeLocalStorage = () => {
    dispatchStorageEvent(key, null);
    window.localStorage.removeItem(key);
  };
  return [value, _setValue, removeLocalStorage];
}

var LayoutMode = /* @__PURE__ */ ((LayoutMode2) => {
  LayoutMode2["XS"] = "xs";
  LayoutMode2["SM"] = "sm";
  LayoutMode2["MD"] = "md";
  LayoutMode2["LG"] = "lg";
  return LayoutMode2;
})(LayoutMode || {});
const ResponseArray = [
  "xs" /* XS */,
  "sm" /* SM */,
  "md" /* MD */,
  "lg" /* LG */
];
const useMatchMediaQueries = (mode = {
  ["xs" /* XS */]: "1279px",
  ["sm" /* SM */]: "1536px",
  ["md" /* MD */]: "2176px",
  ["lg" /* LG */]: "2304px"
}) => {
  const [sizeState, setSizeState] = useState("xs" /* XS */);
  const listenerWindowResize = _.debounce(() => {
    const mediaQueries = [];
    for (const mediaQueryMode of ResponseArray) {
      const responseValue = mode[mediaQueryMode];
      const mediaQueryList = window.matchMedia(`(min-width: ${responseValue})`);
      if (!mediaQueryList.matches) {
        break;
      }
      mediaQueries.push({
        mediaQueryMode,
        mediaQueryList
      });
    }
    if (!mediaQueries.length) {
      if (sizeState !== "xs" /* XS */) {
        setSizeState("xs" /* XS */);
      }
      return;
    }
    const topMatchMediaQuery = mediaQueries[mediaQueries.length - 1];
    if (topMatchMediaQuery.mediaQueryMode !== sizeState) {
      setSizeState(topMatchMediaQuery.mediaQueryMode);
    }
  });
  useEffect(() => {
    window.addEventListener("resize", listenerWindowResize);
    listenerWindowResize();
    return () => {
      window.removeEventListener("resize", listenerWindowResize);
    };
  }, [mode]);
  return sizeState;
};

// Copyright Joyent, Inc. and other Node contributors.
//
// Permission is hereby granted, free of charge, to any person obtaining a
// copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to permit
// persons to whom the Software is furnished to do so, subject to the
// following conditions:
//
// The above copyright notice and this permission notice shall be included
// in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
// NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
// USE OR OTHER DEALINGS IN THE SOFTWARE.


// If obj.hasOwnProperty has been overridden, then calling
// obj.hasOwnProperty(prop) will break.
// See: https://github.com/joyent/node/issues/1707
function hasOwnProperty(obj, prop) {
  return Object.prototype.hasOwnProperty.call(obj, prop);
}
var isArray = Array.isArray || function (xs) {
  return Object.prototype.toString.call(xs) === '[object Array]';
};
function stringifyPrimitive(v) {
  switch (typeof v) {
    case 'string':
      return v;

    case 'boolean':
      return v ? 'true' : 'false';

    case 'number':
      return isFinite(v) ? v : '';

    default:
      return '';
  }
}

function stringify (obj, sep, eq, name) {
  sep = sep || '&';
  eq = eq || '=';
  if (obj === null) {
    obj = undefined;
  }

  if (typeof obj === 'object') {
    return map(objectKeys(obj), function(k) {
      var ks = encodeURIComponent(stringifyPrimitive(k)) + eq;
      if (isArray(obj[k])) {
        return map(obj[k], function(v) {
          return ks + encodeURIComponent(stringifyPrimitive(v));
        }).join(sep);
      } else {
        return ks + encodeURIComponent(stringifyPrimitive(obj[k]));
      }
    }).join(sep);

  }

  if (!name) return '';
  return encodeURIComponent(stringifyPrimitive(name)) + eq +
         encodeURIComponent(stringifyPrimitive(obj));
}
function map (xs, f) {
  if (xs.map) return xs.map(f);
  var res = [];
  for (var i = 0; i < xs.length; i++) {
    res.push(f(xs[i], i));
  }
  return res;
}

var objectKeys = Object.keys || function (obj) {
  var res = [];
  for (var key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) res.push(key);
  }
  return res;
};

function parse(qs, sep, eq, options) {
  sep = sep || '&';
  eq = eq || '=';
  var obj = {};

  if (typeof qs !== 'string' || qs.length === 0) {
    return obj;
  }

  var regexp = /\+/g;
  qs = qs.split(sep);

  var maxKeys = 1000;
  if (options && typeof options.maxKeys === 'number') {
    maxKeys = options.maxKeys;
  }

  var len = qs.length;
  // maxKeys <= 0 means that we should not limit keys count
  if (maxKeys > 0 && len > maxKeys) {
    len = maxKeys;
  }

  for (var i = 0; i < len; ++i) {
    var x = qs[i].replace(regexp, '%20'),
        idx = x.indexOf(eq),
        kstr, vstr, k, v;

    if (idx >= 0) {
      kstr = x.substr(0, idx);
      vstr = x.substr(idx + 1);
    } else {
      kstr = x;
      vstr = '';
    }

    k = decodeURIComponent(kstr);
    v = decodeURIComponent(vstr);

    if (!hasOwnProperty(obj, k)) {
      obj[k] = v;
    } else if (isArray(obj[k])) {
      obj[k].push(v);
    } else {
      obj[k] = [obj[k], v];
    }
  }

  return obj;
}var qs = {
  encode: stringify,
  stringify: stringify,
  decode: parse,
  parse: parse
};

var __defProp$2 = Object.defineProperty;
var __defProps$2 = Object.defineProperties;
var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues$2 = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp$2.call(b, prop))
      __defNormalProp$2(a, prop, b[prop]);
  if (__getOwnPropSymbols$2)
    for (var prop of __getOwnPropSymbols$2(b)) {
      if (__propIsEnum$2.call(b, prop))
        __defNormalProp$2(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
const routes = {
  overview: {
    path: ""
  },
  datacenters: {
    path: "datacenters",
    views: [
      "detail",
      "clusters",
      "hosts",
      "vms",
      "elfImages",
      "vmTemplates",
      "vmVolumes",
      "disks",
      "usbDevices",
      "vmPlacementGroup",
      "iscsiTargets",
      "nvmfSubsystems",
      "labels"
    ]
  },
  clusters: {
    path: "clusters",
    views: [
      "detail",
      "hosts",
      "disks",
      "nics",
      "usbDevices",
      "vms",
      "vmPlacementGroup",
      "elfImages",
      "vmTemplates",
      "vmVolumes",
      "nfsExports",
      "iscsiTargets",
      "nvmfSubsystems",
      "connection",
      "vds",
      "vm_vlan",
      "system_vlan",
      "snapshot-plans",
      "metro",
      "monitor",
      "alerts",
      "logCollection",
      "consistencyGroups",
      "labels",
      "hardware_topo",
      "setting"
    ]
  },
  hosts: {
    path: "hosts",
    views: [
      "detail",
      "disks",
      "nics",
      "vms",
      "monitor",
      "usbDevices",
      "labels"
    ]
  },
  vms: {
    path: "vms"
  },
  vm_folders: {
    path: "vm_folders"
  },
  login: {
    path: "login"
  },
  tasks: {
    path: "tasks"
  },
  "vm-recycle": {
    path: "vm-recycle"
  },
  alerts: {
    path: "alerts"
  },
  alert_rules: {
    path: "alert_rules"
  },
  disks: { path: "disks" },
  elfImages: { path: "elfImages" },
  vmTemplates: { path: "vmTemplates" },
  vmVolumes: { path: "vmVolumes" },
  iscsiTargets: {
    path: "iscsiTargets",
    views: ["detail", "lun", "snapshot", "connection"]
  },
  nfsExports: {
    path: "nfsExports",
    views: ["detail", "inode"]
  },
  monitor: { path: "monitor" },
  "report-tasks": { path: "report-tasks" },
  "report-templates": { path: "report-templates" },
  usbDevices: { path: "usbDevices" },
  "snapshot-plans": { path: "snapshot-plans" },
  vmPlacementGroup: {
    path: "vmPlacementGroup"
  },
  settings: {
    path: "settings"
  },
  zones: {
    path: "zones",
    views: ["detail", "vms", "hosts", "disks"]
  },
  nvmfSubsystems: {
    path: "nvmfSubsystems",
    views: ["detail", "namespaceGroup", "namespace", "snapshot", "connection"]
  },
  namespaceGroups: {
    path: "namespaceGroups",
    views: ["namespace"]
  },
  "content-library": { path: "content-library" }
};
const routeKeys = Object.keys(routes);
const getAllSearch = () => {
  return qs.parse(hashHistory.location.search.replace(/^\?/, ""));
};
const routeHasView = (route, view) => {
  var _a;
  if (!view)
    return false;
  return (_a = routes[route].views) == null ? void 0 : _a.includes(view);
};
const pushOrReplace = (action) => {
  return (path, state) => {
    if (typeof path === "object") {
      const { resource, id = "", search, state: state2, keepView } = path;
      let _search = {};
      if (typeof search === "object") {
        for (const key in search) {
          if (key === "view") {
            if (routeHasView(resource, search[key])) {
              _search[key] = JSON.stringify(search[key]);
            }
          } else if (search[key] || typeof search[key] === "number") {
            _search[key] = JSON.stringify(search[key]);
          }
        }
        if (keepView && !search.view) {
          const search2 = getAllSearch();
          if ("view" in search2 && routeHasView(resource, search2["view"])) {
            _search["view"] = JSON.stringify(search2["view"]);
          }
        }
        _search = qs.stringify(_search);
      } else {
        if (!search && keepView) {
          let view;
          try {
            view = JSON.parse(getAllSearch()["view"]);
          } catch (e) {
          }
          _search = routeHasView(resource, view) ? `?view="${view}"` : search;
        } else {
          _search = search;
        }
      }
      hashHistory[action]({
        pathname: `/${resource}/${id}`,
        state: state2,
        search: _search
      });
    } else {
      hashHistory[action](path, state);
    }
  };
};
const history = __spreadProps$2(__spreadValues$2({}, hashHistory), {
  push: pushOrReplace("push"),
  replace: pushOrReplace("replace")
});

var __defProp$1 = Object.defineProperty;
var __defProps$1 = Object.defineProperties;
var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues$1 = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp$1.call(b, prop))
      __defNormalProp$1(a, prop, b[prop]);
  if (__getOwnPropSymbols$1)
    for (var prop of __getOwnPropSymbols$1(b)) {
      if (__propIsEnum$1.call(b, prop))
        __defNormalProp$1(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
const useSearch = (key, defaultValue, option) => {
  const unmounted = useRef();
  const prevSearch = useRef({});
  const stateRef = useRef();
  const [state, setState] = useState(() => {
    const allSearch = getAllSearch();
    const searchString = allSearch[key];
    prevSearch.current = allSearch;
    return getSearch(searchString, defaultValue);
  });
  stateRef.current = state;
  const setSearch = useCallback(
    (val, operation) => {
      if (unmounted.current)
        return true;
      const control = (operation == null ? void 0 : operation.control) || "push";
      const value = getValue(val, stateRef.current);
      let nextSearch = getAllSearch();
      if (operation == null ? void 0 : operation.pick) {
        nextSearch = _.pick(nextSearch, operation.pick);
      } else if (operation == null ? void 0 : operation.omit) {
        nextSearch = _.omit(nextSearch, operation.omit);
      }
      const search = value ? __spreadProps$1(__spreadValues$1({}, nextSearch), { [key]: JSON.stringify(value) }) : _.omit(nextSearch, key);
      hashHistory[control]({ search: qs.stringify(search) });
    },
    [key]
  );
  useEffect(() => {
    const unsubscribe = hashHistory.listen(() => {
      const allSearch = getAllSearch();
      const searchString = allSearch[key];
      if (prevSearch.current[key] !== searchString && !(option == null ? void 0 : option.preventRender)) {
        const search = getSearch(searchString, defaultValue);
        setState(search);
      }
      prevSearch.current = allSearch;
    });
    return () => unsubscribe();
  }, [key]);
  useEffect(() => {
    return () => {
      unmounted.current = true;
    };
  }, []);
  return [state, setSearch];
};

function getOSIcon(os, vmtoolsReady = true) {
  let clazz = "";
  const name = (os || "").split(" ").join("").toLowerCase();
  if (name.includes("redhat")) {
    clazz = "redhat";
  } else if (name.includes("debian")) {
    clazz = "debian";
  } else if (name.includes("centos")) {
    clazz = "centos";
  } else if (name.includes("ubuntu")) {
    clazz = "ubuntu";
  } else if (name.includes("archlinux")) {
    clazz = "archlinux";
  } else if (name.includes("fedora")) {
    clazz = "fedora";
  } else if (name.includes("suse")) {
    clazz = "opensuse";
  } else if (name.includes("oraclelinux")) {
    clazz = "oraclelinux";
  } else if (name.includes("oraclesolaris")) {
    clazz = "oraclesolaris";
  } else if (name.includes("macos") || name.includes("osx")) {
    clazz = "macOS";
  } else if (name.includes("windows2000")) {
    clazz = "windows2000";
  } else if (name.includes("windowsxp") || name.includes("windowsserver2003")) {
    clazz = "windowsXP";
  } else if (name.includes("windows7") || name.includes("windowsvista") || name.includes("windowsserver2008")) {
    clazz = "windows7";
  } else if (name.includes("windows8")) {
    clazz = "windows8";
  } else if (name.includes("windows10")) {
    clazz = "windows10";
  } else if (name.includes("windowsserver2012") || name.includes("windowsserver2016") || name.includes("windowsserver2019") || name.includes("windows2012server") || name.includes("windows2008server")) {
    clazz = "windows-server";
  } else if (name.includes("neokylin")) {
    clazz = "neoKylin";
  } else if (name.startsWith("kylin")) {
    clazz = "kylin";
  } else if (name.includes("uniontech") || name.includes("uos")) {
    clazz = "uniontech";
  } else if (!vmtoolsReady) {
    clazz = "question";
  } else {
    clazz = "unknown";
  }
  return `os-logo-${clazz}`;
}
function getAlertIcon(type) {
  switch (type) {
    case "success":
      return "1-checkmark-done-success-circle-fill-16-green";
    case "info":
      return "1-info-i-circle-fill-16-blue";
    case "warning":
      return "1-notice-attention-16-yellow";
    case "error":
      return "1-xmark-failed-serious-warning-fill-16-red";
    case "normal":
      return "1-info-i-circle-fill-16-secondary";
    default:
      return "1-info-i-circle-fill-16-secondary";
  }
}

const ThrowError = () => {
  throw new Error("");
};
const mockImpl = {
  get PAGINATION_SELECTOR() {
    if (process.env.NODE_ENV !== "production") {
      throw new Error("");
    }
    return "";
  },
  get TABLE_WRAPPER_SELECTOR() {
    if (process.env.NODE_ENV !== "production") {
      throw new Error("");
    }
    return "";
  },
  get THEAD_SELECTOR() {
    if (process.env.NODE_ENV !== "production") {
      throw new Error("");
    }
    return "";
  },
  get TBODY_SELECTOR() {
    if (process.env.NODE_ENV !== "production") {
      throw new Error("");
    }
    return "";
  },
  get MODAL_WHITELIST() {
    if (process.env.NODE_ENV !== "production") {
      throw new Error("");
    }
    return [""];
  },
  loading: ThrowError,
  error: ThrowError,
  pagination: ThrowError,
  select: ThrowError,
  option: ThrowError,
  table: ThrowError,
  button: ThrowError,
  modal: ThrowError,
  modal2: Object.assign(ThrowError, {
    Initialized: ThrowError,
    Wizard: ThrowError
  }),
  dropdown: ThrowError,
  switch: ThrowError,
  tooltip: ThrowError,
  input: ThrowError,
  textArea: ThrowError,
  checkbox: ThrowError,
  fields: {
    Int: ThrowError,
    Float: ThrowError,
    DateTime: ThrowError,
    Enum: ThrowError,
    String: ThrowError,
    Boolean: ThrowError,
    TextArea: ThrowError,
    Array: ThrowError,
    DateTimeRange: ThrowError,
    TimePicker: ThrowError
  },
  units: {
    Byte: ThrowError,
    Frequency: ThrowError,
    Percent: ThrowError,
    Speed: ThrowError,
    Second: ThrowError,
    Bps: ThrowError
  },
  inputGroup: ThrowError,
  get Empty() {
    if (process.env.NODE_ENV !== "production") {
      throw new Error("");
    }
    return null;
  },
  alert: ThrowError,
  searchInput: ThrowError,
  exportButton: ThrowError,
  badge: ThrowError,
  radio: ThrowError,
  radioGroup: ThrowError,
  radioButton: ThrowError,
  tree: ThrowError,
  progress: ThrowError,
  divider: ThrowError,
  skeleton: ThrowError,
  menu: ThrowError,
  menuItem: ThrowError,
  menuItemGroup: ThrowError,
  list: ThrowError,
  listItem: ThrowError,
  listItemMeta: ThrowError,
  layout: Object.assign(forwardRef(ThrowError), {
    Header: forwardRef(ThrowError),
    Footer: forwardRef(ThrowError),
    Content: forwardRef(ThrowError),
    Sider: forwardRef(ThrowError)
  }),
  autoComplete: forwardRef(ThrowError),
  message: {
    info: ThrowError,
    success: ThrowError,
    error: ThrowError,
    warning: ThrowError,
    loading: ThrowError,
    open: ThrowError
  },
  tag: Object.assign(forwardRef(ThrowError), {
    CheckableTag: ThrowError
  }),
  popover: forwardRef(ThrowError),
  arch: ThrowError,
  buttonGroup: forwardRef(ThrowError),
  steps: ThrowError
};

const kitContext = React$1.createContext(mockImpl);

const FailedLoadStyle = "f3hbxv9";
const FailedLoad = props => {
  const {
    error,
    refetch,
    className,
    title,
    refetchText
  } = props;
  const kit = useContext(kitContext);
  const {
    t
  } = useTranslation();
  return /* @__PURE__ */React$1.createElement("div", {
    className: cs(FailedLoadStyle, className),
    title
  }, /* @__PURE__ */React$1.createElement("div", {
    className: "error-text"
  }, String(error)), /* @__PURE__ */React$1.createElement(kit.button, {
    type: "ordinary",
    onClick: () => refetch()
  }, refetchText || t("overview.retry")));
};

var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {
  enumerable: true,
  configurable: true,
  writable: true,
  value
}) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {})) if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols) for (var prop of __getOwnPropSymbols(b)) {
    if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]);
  }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
  var target = {};
  for (var prop in source) if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0) target[prop] = source[prop];
  if (source != null && __getOwnPropSymbols) for (var prop of __getOwnPropSymbols(source)) {
    if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop)) target[prop] = source[prop];
  }
  return target;
};
const IconWrapper = "idqfg35";
const Icon = React$1.forwardRef((props, ref) => {
  const _a = props,
    {
      type = "",
      hoverType,
      active,
      activeType,
      onMouseEnter,
      onMouseLeave,
      onMouseMove,
      className,
      iconWidth,
      iconHeight,
      cursor,
      style,
      children,
      isRotate,
      prefix,
      suffixType,
      fileFormat = "svg"
    } = _a,
    restProps = __objRest(_a, ["type", "hoverType", "active", "activeType", "onMouseEnter", "onMouseLeave", "onMouseMove", "className", "iconWidth", "iconHeight", "cursor", "style", "children", "isRotate", "prefix", "suffixType", "fileFormat"]);
  const [hover, setHover] = useState(false);
  const defaultWidth = 16;
  const _iconWidth = iconWidth || (type.includes("24") ? 24 : defaultWidth);
  const _iconHeight = iconHeight || _iconWidth;
  const src = useMemo(() => {
    try {
      if (active && activeType) {
        return require(`../images/${activeType}.${fileFormat}`);
      }
      if (hover && hoverType) {
        return require(`../images/${hoverType}.${fileFormat}`);
      }
      return require(`../images/${type}.${fileFormat}`);
    } catch (error) {
      console.error(error);
      return require("../images/1-status-unknown-questionmark-16-red.svg").default;
    }
  }, [active, activeType, hoverType, type, hover, fileFormat]);
  const suffixIconSrc = useMemo(() => {
    try {
      if (!suffixType) {
        return null;
      }
      const {
        activeType: activeType2,
        hoverType: hoverType2,
        type: type2
      } = suffixType;
      if (active && activeType2) {
        return require(`../images/${activeType2}.${fileFormat}`);
      }
      if (hover && hoverType2) {
        return require(`../images/${hoverType2}.${fileFormat}`);
      }
      return require(`../images/${type2}.${fileFormat}`);
    } catch (error) {
      console.error(error);
      return require("../images/1-status-unknown-questionmark-16-red.svg").default;
    }
  }, [active, fileFormat, hover, suffixType]);
  return /* @__PURE__ */React$1.createElement("span", __spreadProps(__spreadValues({
    ref,
    className: cs(IconWrapper, "icon-wrapper", className, isRotate && "is-rotate"),
    style: _.pickBy(__spreadValues({
      cursor
    }, style))
  }, restProps), {
    onMouseEnter: e => {
      onMouseEnter == null ? void 0 : onMouseEnter(e);
      if (hoverType) {
        setHover(true);
      }
    },
    onMouseMove: e => {
      onMouseMove == null ? void 0 : onMouseMove(e);
      if (hoverType) {
        setHover(true);
      }
    },
    onMouseLeave: e => {
      onMouseLeave == null ? void 0 : onMouseLeave(e);
      if (hoverType) {
        setHover(false);
      }
    }
  }), prefix, /* @__PURE__ */React$1.createElement("span", {
    className: "icon-inner"
  }, /* @__PURE__ */React$1.createElement("img", {
    alt: type,
    src,
    width: `${_iconWidth}px`,
    height: typeof _iconHeight === "string" ? _iconHeight : `${_iconWidth}px`
  })), children && /* @__PURE__ */React$1.createElement("span", {
    className: "icon-children"
  }, children), suffixIconSrc && /* @__PURE__ */React$1.createElement("span", {
    className: "icon-inner suffix"
  }, /* @__PURE__ */React$1.createElement("img", {
    alt: type,
    src: suffixIconSrc,
    width: `${_iconWidth}px`,
    height: typeof _iconHeight === "string" ? _iconHeight : `${_iconWidth}px`
  })));
});

const Loading = () => /* @__PURE__ */ React$1.createElement("div", {
  className: "loading"
}, /* @__PURE__ */ React$1.createElement("div", {
  className: "loading__sugar"
}), /* @__PURE__ */ React$1.createElement("div", {
  className: "loading__sugar"
}), /* @__PURE__ */ React$1.createElement("div", {
  className: "loading__sugar"
}), /* @__PURE__ */ React$1.createElement("div", {
  className: "loading__sugar"
}), /* @__PURE__ */ React$1.createElement("div", {
  className: "loading__sugar"
}), /* @__PURE__ */ React$1.createElement("div", {
  className: "loading__sugar"
}), /* @__PURE__ */ React$1.createElement("div", {
  className: "loading__sugar"
}));

const test = "t1qjkkpk";
const TestBase = () => {
  const {
    t
  } = useTranslation();
  return /* @__PURE__ */React.createElement("div", {
    className: `${test}`
  }, t("hello_world"));
};

const CommonContent = /*#__PURE__*/styled('div')({
  name: "CommonContent",
  class: "c8h4mf5"
});
const ModalBody = /*#__PURE__*/styled('div')({
  name: "ModalBody",
  class: "m1rb9492"
});
const WizardBody = /*#__PURE__*/styled('div')({
  name: "WizardBody",
  class: "w1rretp9"
});
const HorizontalWizardModalCompactStyle = "hduz95v";
const HorizontalWizardModalLooseStyle = "hxz30ly";
const FormWrapper = /*#__PURE__*/styled('div')({
  name: "FormWrapper",
  class: "f1v8fiw6"
});
const FormSectionTitle = /*#__PURE__*/styled('h4')({
  name: "FormSectionTitle",
  class: "fc9efo7"
});
const FormField = /*#__PURE__*/styled('div')({
  name: "FormField",
  class: "f1ve4rm8"
});
const Error$1 = /*#__PURE__*/styled('span')({
  name: "Error",
  class: "e11i7te"
});
const Divider = /*#__PURE__*/styled('div')({
  name: "Divider",
  class: "d1dhpshv"
});
const LoadingWrapper = /*#__PURE__*/styled('div')({
  name: "LoadingWrapper",
  class: "l1ejh90t"
});
const Dot = /*#__PURE__*/styled('span')({
  name: "Dot",
  class: "dvu5bed"
});
const ModalWrapper = "m1o8vyie";
const _exp = () => ({
  color
}) => {
  switch (color) {
    case "red":
      return "linear-gradient(262.79deg, #FA5F3C 0%, #FF9412 100%)";
    case "yellow":
      return "linear-gradient(260.13deg, #FFA600 0%, #FFD900 100%)";
    case "blue":
      return "linear-gradient(276.05deg, #0066FF 10.65%, #5CA8FF 89.35%)";
  }
};
const Tag = /*#__PURE__*/styled('span')({
  name: "Tag",
  class: "t1hzfvwa",
  vars: {
    "t1hzfvwa-0": [_exp()]
  }
});
const FullView = /*#__PURE__*/styled('div')({
  name: "FullView",
  class: "f1ejb6o6"
});
const NameTag = /*#__PURE__*/styled('span')({
  name: "NameTag",
  class: "n1tdgn0z"
});
const FormItemDiv = /*#__PURE__*/styled('div')({
  name: "FormItemDiv",
  class: "fzd3f08"
});
const FieldTitle = /*#__PURE__*/styled('div')({
  name: "FieldTitle",
  class: "f1bripv5"
});
const ExpandArrow = /*#__PURE__*/styled('i')({
  name: "ExpandArrow",
  class: "e1eppb72"
});
const WarningAlert = "wqpk40";
const NoticeAlert = "n1pie8ep";
const NormalAlert = "n16ikzv3";
const InfoAlert = "iuyfjl";
const Description = /*#__PURE__*/styled('div')({
  name: "Description",
  class: "d1p104fh"
});
const SelectOptionDisabledText = /*#__PURE__*/styled('div')({
  name: "SelectOptionDisabledText",
  class: "s1q0d89"
});
const OperationWraper = /*#__PURE__*/styled('div')({
  name: "OperationWraper",
  class: "oggaky4"
});
const TertiaryText = /*#__PURE__*/styled('div')({
  name: "TertiaryText",
  class: "tvab7ae"
});

const IpsTip = "i70rlgh";

const Content = "cl1wv4u";
const ContentNoPadding = "cq9havt";
const ContentHaveBGColor = "c1sfhjhj";
const Title = "t134j283";
const ClusterTitle = "c1nywlrs";
const Toolbar = "t1p89l65";
const DropdownDeleteItem = "db1nj1t";
const DisconnectCluster = "drxxl5b";
const PageTitle = "pf2u90v";
const UnderlineTooltip = "u1hzyru7";

const d1_bold_title = "d15p8z5x";
const d1s_bold_title = "d1de66rq";
const d1_regular_title = "ds4pyy3";
const d2_bold_title = "dkevyr7";
const d2_regular_title = "de9apnx";
const d3_bold_title = "d1b82ura";
const d3_regular_title = "d19iw6s0";
const h1_bold_title = "h147jttn";
const h1_regular_title = "h10g9wxd";
const h2_bold_title = "hq7stnm";
const h2_regular_title = "h9xftf6";
const h3_bold_title = "h5nvpt5";
const h3_regular_title = "hgtk4do";
const h3_bold_upper = "hzkec8n";
const h3_regular_upper = "h4iu4ux";
const l1_regular = "l9fy1or";
const l1_bold = "l1pvcxop";
const l1_regular_title = "l1henojj";
const l1_bold_title = "l17vubsi";
const l1_regular_upper = "l1b5wa33";
const l1_bold_upper = "l9p5woc";
const l2_regular = "l18rx9i8";
const l2_medium = "laddpmf";
const l2_bold = "l2qtvk4";
const l2_regular_title = "l1ok0yft";
const l2_bold_title = "lfuw92r";
const l2_regular_upper = "li6p3ia";
const l2_bold_upper = "l1aydx7e";
const l3_regular = "ld302j";
const l3_semibold = "l1o2ej8m";
const l3_bold = "lb2qsxz";
const l3_regular_title = "llslsgh";
const l3_semibold_title = "l1h1gis1";
const l3_bold_title = "l10ytufg";
const l3_regular_upper = "l1800k62";
const l3_bold_upper = "lesk9e3";
const l4_regular = "ll5ol9e";
const l4_medium = "l7hvtsg";
const l4_bold = "l1y0nstd";
const l4_regular_title = "l40b7u4";
const l4_medium_title = "lpk6p9q";
const l4_bold_title = "l19angs4";
const l4_regular_upper = "l1w1rf43";
const l4_bold_upper = "l123vndg";
const f1_regular = "f1j2a6hh";
const f1_regular_title = "f1c3vl9r";
const f2_regular = "f14fo445";
const f2_regular_title = "f1dzuyrf";
const t1_regular_mono = "t1ybea17";
const t1_regular_slash = "tj0o2e6";
const t2_regular_mono = "t117ml2t";
const t2_medium_mono = "t1va8h2w";
const t2_regular_slash = "t16iyn3q";
const t2_medium_slash = "te0dzm0";
const t16_bold_slash = "t1t4w9nw";
const u1 = "u1v77u9x";
const Typo = {
  Display: {
    d1_bold_title,
    d1s_bold_title,
    d1_regular_title,
    d2_bold_title,
    d2_regular_title,
    d3_bold_title,
    d3_regular_title
  },
  Heading: {
    h1_bold_title,
    h1_regular_title,
    h2_bold_title,
    h2_regular_title,
    h3_bold_title,
    h3_bold_upper,
    h3_regular_title,
    h3_regular_upper
  },
  Label: {
    l1_bold,
    l1_bold_title,
    l1_bold_upper,
    l1_regular,
    l1_regular_title,
    l1_regular_upper,
    l2_bold,
    l2_bold_title,
    l2_bold_upper,
    l2_regular,
    l2_regular_title,
    l2_regular_upper,
    l2_medium,
    l3_bold,
    l3_semibold,
    l3_bold_title,
    l3_bold_upper,
    l3_regular,
    l3_regular_title,
    l3_semibold_title,
    l3_regular_upper,
    l4_bold,
    l4_bold_title,
    l4_bold_upper,
    l4_regular,
    l4_medium,
    l4_regular_title,
    l4_medium_title,
    l4_regular_upper
  },
  Footnote: {
    f1_regular,
    f1_regular_title,
    f2_regular,
    f2_regular_title
  },
  Tabular: {
    t1_regular_mono,
    t1_regular_slash,
    t2_regular_mono,
    t2_medium_mono,
    t2_regular_slash,
    t2_medium_slash,
    t16_bold_slash
  },
  UNKNOWN: {
    u1
  }
};

export { AUTO_SCHEDULE, CUSTOMIZE, ClusterTitle, CommonContent, Content, ContentHaveBGColor, ContentNoPadding, DAYJS_I18N_MAP, DEFAULT_STORAGE_POLICY_UUID, Description, DisconnectCluster, Divider, Dot, DropdownDeleteItem, EMPTY_ARRAY, EMPTY_COMPONENT, EMPTY_FUNCTION, EMPTY_OBJECT, END_POINT, Error$1 as Error, ExpandArrow, FailedLoad, FieldTitle, FormField, FormItemDiv, FormSectionTitle, FormWrapper, FullView, HorizontalWizardModalCompactStyle, HorizontalWizardModalLooseStyle, Icon, InfoAlert, IpsTip, LINUX, LayoutMode, Loading, LoadingWrapper, MAX_VOL_SIZE, ModalBody, ModalWrapper, NO_DATACENTER, NO_FOLDER, NameTag, NormalAlert, NoticeAlert, OperationWraper, PageTitle, SelectOptionDisabledText, Tag, TertiaryText, TestBase, Title, Toolbar, Typo, UnderlineTooltip, WINDOWS, WS_URI, WarningAlert, WizardBody, getAlertIcon, getAllSearch, getFormatValue, getOSIcon, getSearch, getValue, hashHistory, history, kitContext, routeHasView, routeKeys, routes, tableCanClearQuery, useElementResize, useElementsSize, useLocalStorage, useMatchMediaQueries, useSearch };
