Настройка

---

Работа с ресурсами

Основу любого Kube-native интерфейса составляют ресурсы Kubernetes. Чтобы UI мог динамически отображать данные, необходимо стандартизировать подход к их описанию, контексту и области действия.

Области видимости

Область видимости определяет контекст интерфейса, в рамках которого выполняются действия пользователя.

Пояснение

• STOCK — базовая область интерфейса, где происходит основная работа. Она делится на два подтипа:

  • cluster — когда не указан Namespace или в переключателе выбран режим All Namespaces. В этом случае при просмотре ресурсов нужно, например, показывать дополнительный столбец Namespace.
  • namespace — когда выбран конкретный Namespace. Тогда колонка Namespace уже избыточна и скрывается.

• INSIDE — дополнительная область интерфейса, обычно предназначенная для административных задач. Администраторы могут описывать её по тем же принципам, что и STOCK, но адаптировать под свои нужды.

Префикс	Значение
stock	Пользовательский UI
inside	Административный UI
namespace	Объекты в пространстве имен
cluster	Объекты типа ClusterScope или Namespaced во всех Namespaces

Типы страниц

В Kubernetes существуют две разные механики доступа к ресурсам: builtin и api.

• builtin — это базовые ресурсы, доступные по URI /api/v1. К ним относятся стандартные сущности Kubernetes: Pods, Secrets, Services и т. п.

• api — это все ресурсы, доступные по URI вида:

  • /apis/{apiGroup}/{apiVersion}/{kind}
  • /apis/{apiGroup}/{apiVersion}/namespaces/{namespace}/{kind}

Тип	Назначение	Пример запроса
api-form	Форма создания ресурса (/apis/...)	apps/v1/Deployment
api-table	Таблица ресурсов (/apis/...)	batch/v1/Job
builtin-form	Форма для core/v1	v1/Pod
builtin-table	Таблица для core/v1	v1/Service
factory	Выделенные страницы фабрики	empty

---

Визуализация абстракций

Прежде чем углубляться в используемые нами абстракции, попробуем набросать их визуальное представление на основе следующих скриншотов.

Пример страниц с кратким расположением элементов CustomColumnsOverride

Пример страниц с кратким расположением элементов Factory

Пример страниц с кратким расположением элементов CusoromFormOverride/CusoromFormPrefill

Пример страниц с областью видимости INSIDE-*

Пример страниц с областью видимости STOCK-CLUSTER

Пример страниц с областью видимости STOCK-NAMESPACE

---

Sidebar

Sidebar в in‑Cloud — это базовый элемент навигации. Он  отвечает за доступ к  ресурсам и  страницам интерфейса и  настраивается через YAML-конфигурацию. Такой подход позволяет управлять структурой и  содержимым сайдбара декларативно, без  жесткой привязки к  коду.

В отличие от  статичных решений, сайдбар в in‑Cloud можно адаптировать под  конкретные команды и  их рабочие процессы. Это дает возможность настраивать разные области видимости — пользовательскую, административную, cluster или namespace — и  поддерживать разные сценарии работы без  дублирования интерфейса.

Структура полей Sidebar

Поле	Тип	Описание	Пример
spec.id	string	Уникальный идентификатор sidebar, отображается в UI.
spec.keysAndTags	object	Сопоставление ключей и  тегов для sidebar
spec.keysAndTags.{childrenKey}	array	Массив тегов для привязки конкретного ключа	- pod-sidebar
spec.menuItems[]	array	Список элементов меню в сайдбаре
spec.menuItems[].key	string	Уникальный ключ группы меню	workloads
spec.menuItems[].label	string	Отображаемое имя группы меню	Workloads
spec.menuItems[].children[]	array	Вложенные пункты меню
spec.menuItems[].children[].key	string	Уникальный ключ пункта меню	pods
spec.menuItems[].children[].label	string	Отображаемое имя в интерфейсе	Pods
spec.menuItems[].children[].link	string	Путь в интерфейсе UI

Настройка sidebar

Sidebar Example

---
apiVersion: front.in‑Cloud.io/v1alpha1
kind: Sidebar
metadata:
  name: stock-cluster-api-table
spec:
  id: stock-cluster-api-table
  menuItems:
    - children:
        - key: pods
          label: Pods
          link: /openapi-ui/{clusterName}/builtin-table/pods
        - key: deployments
          label: Deployments
          link: /openapi-ui/{clusterName}/api-table/apps/v1/deployments
        - key: statefulsets
          label: Statefulsets
          link: /openapi-ui/{clusterName}/api-table/apps/v1/statefulsets
        - key: secrets
          label: Secrets
          link: /openapi-ui/{clusterName}/builtin-table/secrets
        - key: configmaps
          label: ConfigMaps
          link: /openapi-ui/{clusterName}/builtin-table/configmaps
        - key: cronjobs
          label: CronJobs
          link: /openapi-ui/{clusterName}/api-table/batch/v1/cronjobs
        - key: jobs
          label: Jobs
          link: /openapi-ui/{clusterName}/api-table/batch/v1/jobs
        - key: daemonsets
          label: Daemonsets
          link: /openapi-ui/{clusterName}/api-table/apps/v1/daemonsets
        - key: replicasets
          label: ReplicaSets
          link: /openapi-ui/{clusterName}/api-table/apps/v1/replicasets
        - key: replicationcontrollers
          label: ReplicationControllers
          link: /openapi-ui/{clusterName}/builtin-table/replicationcontrollers
        - key: horizontalpodautoscalers
          label: HorizontalPodAutoscalers
          link: /openapi-ui/{clusterName}/api-table/autoscaling/v2/horizontalpodautoscalers
        - key: poddisruptionbudgets
          label: PodDisruptionBudgets
          link: /openapi-ui/{clusterName}/api-table/policy/v1/poddisruptionbudgets
      key: workloads
      label: Workloads
    - children:
        - key: services
          label: Services
          link: /openapi-ui/{clusterName}/builtin-table/services
        - key: networkpolicies
          label: NetworkPolicies
          link: /openapi-ui/{clusterName}/api-table/networking.k8s.io/v1/networkpolicies
        - key: ingresses
          label: Ingresses
          link: /openapi-ui/{clusterName}/api-table/networking.k8s.io/v1/ingresses
      key: networking
      label: Networking
    - children:
        - key: persistentvolumes
          label: PersistentVolumes
          link: /openapi-ui/{clusterName}/builtin-table/persistentvolumes
        - key: persistentvolumeclaims
          label: PersistentVolumeClaims
          link: /openapi-ui/{clusterName}/builtin-table/persistentvolumeclaims
        - key: storageclasses
          label: StorageClasses
          link: /openapi-ui/{clusterName}/api-table/storage.k8s.io/v1/storageclasses
      key: storage
      label: Storage
    - children:
        - key: nodes
          label: Nodes
          link: /openapi-ui/{clusterName}/builtin-table/nodes
      key: compute
      label: Compute
    - children:
        - key: groups
          label: ServiceAccounts
          link: /openapi-ui/{clusterName}/builtin-table/serviceaccounts
        - key: roles
          label: Roles
          link: /openapi-ui/{clusterName}/api-table/rbac.authorization.k8s.io/v1/roles
        - key: rolebindings
          label: RoleBindings
          link: /openapi-ui/{clusterName}/api-table/rbac.authorization.k8s.io/v1/rolebindings
        - key: clusterroles
          label: ClusterRoles
          link: /openapi-ui/{clusterName}/api-table/rbac.authorization.k8s.io/v1/clusterroles
        - key: clusterrolebindings
          label: ClusterRoleBindings
          link: /openapi-ui/{clusterName}/api-table/rbac.authorization.k8s.io/v1/clusterrolebindings
      key: usermanagement
      label: User Management
    - children:
        - key: namespaces
          label: Namespaces
          link: /openapi-ui/{clusterName}/builtin-table/namespaces
        - key: limitranges
          label: LimitRanges
          link: /openapi-ui/{clusterName}/builtin-table/limitranges
        - key: resourcequotas
          label: ResourceQuotas
          link: /openapi-ui/{clusterName}/builtin-table/resourcequotas
        - key: customresourcedefinitions
          label: CustomResourceDefinitions
          link: /openapi-ui/{clusterName}/api-table/apiextensions.k8s.io/v1/customresourcedefinitions
      key: administration
      label: Administration

warning

Просьба обратить внимание что id связаны между компонентами интерфейса и  подчиняются правилам именования.

к сведению

Просьба учитывать, что сайдбары требуется настраивать под  каждую область видимости. Для административного и  пользовательского интерфейсов конфигурация может различаться. Также сайдбар необходимо описывать под  каждую страницу фабрики. На первый взгляд это может показаться избыточным, но именно такой подход обеспечивает гибкость и  позволяет адаптировать интерфейс под  конкретные команды и  их процессы.

Пример сайдбара для страницы Pods в пространстве имен All

---

Breadcrumb

Breadcrumb в in‑Cloud — это дополнительный элемент навигации. Он  показывает путь от  корневого уровня до текущей страницы и  помогает пользователю понимать контекст, в котором он работает. Основная цель — дать быстрый доступ к  предыдущим уровням без  необходимости возвращаться к  сайдбару или выполнять повторный поиск.

Цепочка формируется декларативно на  основе YAML-описания. Каждый элемент имеет ключ, отображаемое имя и  ссылку, в которых могут использоваться плейсхолдеры ({clusterName}, {namespace}, {apiGroup}, {apiVersion}, {typeName}). Это позволяет гибко настраивать структуру навигации под  конкретный сценарий работы.

В отличие от  Sidebar, Breadcrumb не  определяет логику интерфейса, а дополняет ее. Он  служит для удобства и  экономии времени, когда необходимо перемещаться по вложенным уровням интерфейса или быстро переключаться между кластерами и  пространствами имен.

Структура полей Breadcrumb

Поле	Тип	Описание	Пример
spec.id	string	Уникальный идентификатор цепочки навигации (breadcrumb), отображается в UI.
spec.breadcrumbItems[]	array	Список элементов навигационной цепочки (breadcrumb trail).
spec.breadcrumbItems[].key	string	Уникальный ключ пункта в цепочке навигации.	clusterList
spec.breadcrumbItems[].label	string	Отображаемое имя пункта навигации в UI.	Cluster List
spec.breadcrumbItems[].link	string	Ссылка на  страницу, соответствующую элементу навигации.

Настройка breadcrumb

BreadCrumb Example

---
apiVersion: front.in‑Cloud.io/v1alpha1
kind: Breadcrumb
metadata:
  name: stock-cluster-api-table
spec:
  id: "stock-cluster-api-table"
  breadcrumbItems:
    - key: in‑Cloud
      label: in‑Cloud
      link: "/openapi-ui"
    - key: clusterList
      label: "Cluster List"
      link: "/openapi-ui/clusters"
    - key: cluster
      label: "{clusterName}"
      link: "/openapi-ui/clusters/{clusterName}"
    - key: namespaces
      label: "Namespaces"
    - key: namespace
      label: "All"
    - key: api
      label: "{typeName}"

warning

Просьба обратить внимание что id связаны между компонентами интерфейса и  подчиняются правилам именования.

к сведению

Просьба учитывать, что Breadcrumb требуется настраивать под  каждую область видимости. Для административного и  пользовательского интерфейсов конфигурация может различаться. Также Breadcrumb необходимо описывать под  каждую страницу фабрики. На первый взгляд это может показаться избыточным, но именно такой подход обеспечивает гибкость и  позволяет адаптировать интерфейс под  конкретные команды и  их процессы.

Пример хлебных крошек для страницы Pods в пространстве имен All

---

CustomColumnsOverride

CustomColumnsOverride — механизм описания колонок табличных представлений Kubernetes-ресурсов в in‑Cloud. Позволяет переопределять стандартные колонки, добавлять новые и  задавать поведение (тип, значения по умолчанию, обрезку длины).

Работает для пользовательской и  административной областей видимости. Конфигурация декларативная (YAML) и  не  требует правок кода.

Структура полей CustomColumnsOverride

Поле	Тип	Пример
spec.id	string
spec.additionalPrinterColumns[]	array
spec.additionalPrinterColumnsUndefinedValues[]	array
spec.additionalPrinterColumnsTrimLengths[]	array

Описание полей

spec.id

Идентификатор области видимости и  ресурса, для которого переопределяются колонки.

spec.additionalPrinterColumns[]

Список пользовательских колонок для табличного представления ресурса.

spec.additionalPrinterColumnsUndefinedValues[]

Подстановка значений по умолчанию, если вычисленное значение пустое или не  определено.

spec.additionalPrinterColumnsTrimLengths[]

Правила обрезки строковых значений по длине для указанных колонок.

Структура элемента additionalPrinterColumns[]

Поле	Тип	Описание	Пример
jsonPath	string	JSONPath-выражение для извлечения значения колонки из объекта ресурса.	.status.phase
name	string	Заголовок колонки.	Phase

Структура элемента additionalPrinterColumnsUndefinedValues[]

Поле	Тип	Описание	Пример
key	string	Имя колонки, к  которой применяется подстановка.	Pod IP
value	string	Значение по умолчанию при отсутствии данных.	NotAllocated

Структура элемента additionalPrinterColumnsTrimLengths[]

Поле	Тип	Описание	Пример
key	string	Имя колонки, для которой задается ограничение длины.	Name
value	integer	Максимальная длина строки, символы сверх — обрезаются.	64

Настройка CustomColumnsOverride

CustomColumnsOverride Example

---
apiVersion: front.in‑Cloud.io/v1alpha1
kind: CustomColumnsOverride
metadata:
  name: "stock-cluster-v1.pods"
spec:
  additionalPrinterColumns:
    - jsonPath: .metadata.name
      name: Name
      type: string
    - jsonPath: .metadata.namespace
      name: Namespace
      type: string
    - jsonPath: .spec.nodeName
      name: Node
      type: string
    - jsonPath: .spec.restartPolicy
      name: Restart Policy
      type: string
    - jsonPath: .status.podIP
      name: Pod IP
      type: string
    - jsonPath: .status.conditions[?(@.type=="ContainersReady")].status
      name: Status Containers
      type: string
    - jsonPath: .status.conditions[?(@.type=="PodScheduled")].status
      name: Status Scheduled
      type: string
    - jsonPath: .status.qosClass
      name: QOS
      type: string
    - jsonPath: .status.phase
      name: Phase
      type: string
    - jsonPath: .metadata.creationTimestamp
      name: Created
      type: date
  additionalPrinterColumnsUndefinedValues:
    - key: Node
      value: Unschedulable
    - key: Pod IP
      value: NotAllocated
  additionalPrinterColumnsTrimLengths:
    - key: Name
      value: 64
  id: "stock-cluster-/v1/pods"

CustomColumnsOverride Example Factory

Внимание!

Обратите внимание: данный пример отличается от предыдущего использованием кастомного типа factory. Чуть ниже вы сможете подробнее ознакомиться с этой абстракцией. На данном этапе важно запомнить, что элементы таблицы также могут использовать этот механизм для наполнения ячеек.

---
apiVersion: front.in‑Cloud.io/v1alpha1
kind: CustomColumnsOverride
metadata:
  name: stock-cluster-v1.pods
spec:
  additionalPrinterColumns:
  - customProps:
      disableEventBubbling: true
      items:
      - children:
        - data:
            id: header-badge
            style:
              backgroundColor: '#009596'
              borderRadius: 20px
              color: '#fff'
              display: inline-block
              fontFamily: RedHatDisplay, Overpass, overpass, helvetica, arial, sans-serif
              fontSize: 15px
              fontWeight: 400
              lineHeight: 24px
              minWidth: 24
              padding: 0 9px
              textAlign: center
              whiteSpace: nowrap
            text: P
            title: pod
          type: antdText
        - data:
            href: /openapi-ui/{2}/{reqsJsonPath[0]['.metadata.namespace']['-']}/factory/pod-details/{reqsJsonPath[0]['.metadata.name']['-']}
            id: name-link
            text: '{reqsJsonPath[0][''.metadata.name''][''-'']}'
          type: antdLink
        data:
          align: center
          gap: 6
          id: header-row
        type: antdFlex
    jsonPath: .metadata.name
    name: Name
    type: factory
  - customProps:
      disableEventBubbling: true
      items:
      - children:
        - data:
            id: header-badge
            style:
              backgroundColor: '#a25792ff'
              borderRadius: 20px
              color: '#fff'
              display: inline-block
              fontFamily: RedHatDisplay, Overpass, overpass, helvetica, arial, sans-serif
              fontSize: 15px
              fontWeight: 400
              lineHeight: 24px
              minWidth: 24
              padding: 0 9px
              textAlign: center
              whiteSpace: nowrap
            text: NS
            title: namespace
          type: antdText
        - data:
            href: /openapi-ui/{2}/factory/namespace-details/{reqsJsonPath[0]['.metadata.namespace']['-']}
            id: namespace-link
            text: '{reqsJsonPath[0][''.metadata.namespace''][''-'']}'
          type: antdLink
        data:
          align: center
          gap: 6
          id: header-row
        type: antdFlex
    jsonPath: .metadata.namespace
    name: Namespace
    type: factory
  - customProps:
      disableEventBubbling: true
      items:
      - children:
        - data:
            id: header-badge
            style:
              backgroundColor: '#8476d1'
              borderRadius: 20px
              color: '#fff'
              display: inline-block
              fontFamily: RedHatDisplay, Overpass, overpass, helvetica, arial, sans-serif
              fontSize: 15px
              fontWeight: 400
              lineHeight: 24px
              minWidth: 24
              padding: 0 9px
              textAlign: center
              whiteSpace: nowrap
            text: "N"
            title: node
          type: antdText
        - data:
            href: /openapi-ui/{2}/factory/node-details/{reqsJsonPath[0]['.spec.nodeName']['-']}
            id: name-link
            text: '{reqsJsonPath[0][''.spec.nodeName''][''-'']}'
          type: antdLink
        data:
          align: center
          gap: 6
          id: header-row
        type: antdFlex
    jsonPath: .spec.nodeName
    name: Node
    type: factory
  - jsonPath: .spec.restartPolicy
    name: Restart Policy
    type: string
  - jsonPath: .status.podIP
    name: Pod IP
    type: string
  - jsonPath: .status.qosClass
    name: QOS
    type: string
  - customProps:
      disableEventBubbling: true
      items:
      - data:
          criteriaError: equals
          criteriaSuccess: notEquals
          errorText: Error
          fallbackText: Progressing
          id: pod-status
          stategySuccess: every
          strategyError: every
          successText: '{reqsJsonPath[0][''.status.phase'']}'
          valueToCompareError:
          - Failed
          - Unknown
          - Evicted
          - NodeLost
          - UnexpectedAdmissionError
          - SchedulerError
          - FailedScheduling
          - CrashLoopBackOff
          - ImagePullBackOff
          - ErrImagePull
          - ErrImageNeverPull
          - InvalidImageName
          - ImageInspectError
          - CreateContainerConfigError
          - CreateContainerError
          - RunContainerError
          - StartError
          - PostStartHookError
          - ContainerCannotRun
          - OOMKilled
          - Error
          - DeadlineExceeded
          - CreatePodSandboxError
          valueToCompareSuccess:
          - Preempted
          - Shutdown
          - NodeShutdown
          - DisruptionTarget
          - Unschedulable
          - SchedulingGated
          - ContainersNotReady
          - ContainersNotInitialized
          - BackOff
          - PreStopHookError
          - KillError
          - ContainerStatusUnknown
          values:
          - '{reqsJsonPath[0][''.status.initContainerStatuses[*].state.waiting.reason'']}'
          - '{reqsJsonPath[0][''.status.initContainerStatuses[*].state.terminated.reason'']}'
          - '{reqsJsonPath[0][''.status.initContainerStatuses[*].lastState.terminated.reason'']}'
          - '{reqsJsonPath[0][''.status.containerStatuses[*].state.waiting.reason'']}'
          - '{reqsJsonPath[0][''.status.containerStatuses[*].state.terminated.reason'']}'
          - '{reqsJsonPath[0][''.status.containerStatuses[*].lastState.terminated.reason'']}'
          - '{reqsJsonPath[0][''.status.phase'']}'
          - '{reqsJsonPath[0][''.status.reason'']}'
          - '{reqsJsonPath[0][''.status.conditions[*].reason'']}'
        type: StatusText
    name: Status
    type: factory
  - customProps:
      disableEventBubbling: true
      items:
      - children:
        - data:
            id: time-icon
            text: "U0001F310"
          type: antdText
        - data:
            formatter: timestamp
            id: time-value
            text: '{reqsJsonPath[0][''.metadata.creationTimestamp''][''-'']}'
          type: parsedText
        data:
          align: center
          gap: 6
          id: time-block
        type: antdFlex
    jsonPath: .metadata.creationTimestamp
    name: Created
    type: factory
  additionalPrinterColumnsTrimLengths:
  - key: Name
    value: 64
  additionalPrinterColumnsUndefinedValues:
  - key: Node
    value: Unschedulable
  - key: Pod IP
    value: NotAllocated
  id: stock-cluster-/v1/pods

warning

Просьба обратить внимание что id в этом ресурсе отличается от  BreadCrumb и  Sidebar.

к сведению

Просьба учитывать, что CustomColumnsOverride требуется настраивать под  каждый тип ресурса тк они отличаются по структуре.

JsonPath использует весь функционал библиотеки TypeScript JSONPath, а значит позволяет использовать фильтры, условия и  другие возможности для извлечения данных из сложных структур.

Пример форматирования таблиц для Pods в пространстве имен All

---

TableUriMapping

TableUriMapping — механизм настройки маршрутов для табличных представлений Kubernetes-ресурсов в in‑Cloud. При  определении маршрута строки и  ячейки становятся кликабельными и  ведут на  соответствующие страницы ресурса.

Работает для пользовательской и  административной областей видимости. Конфигурация декларативная (YAML) и  не  требует правок кода.

Структура полей TableUriMapping

Поле	Тип	Описание	Пример
spec.id	string	Идентификатор области видимости и  ресурса, для которых настраивается табличный роутинг.
spec.keysToParse	string	JSONPath до значения, подставляемого как ~recordValue (опционально).
spec.keysToParseSecond	string	JSONPath до значения, подставляемого как ~recordValueSecond (опционально).
spec.keysToParseThird	string	JSONPath до значения, подставляемого как ~recordValueThird (опционально).
spec.pathToNavigate	string	Шаблон маршрута для перехода из таблицы. Поддерживает плейсхолдеры из контекста и  значений по JSONPath.

Плейсхолдеры маршрута

Плейсхолдер	Источник
{clusterName}	Выбранный кластер
{namespace}	Выбранное пространство имен (если применяется)
~recordValue~	Значение из spec.keysToParse
~recordValueSecond~	Значение из spec.keysToParseSecond
~recordValueThird~	Значение из spec.keysToParseThird
{index}	Номер индекса URI (считается в разрезе разделительных "/")

Настройка TableUriMapping

TableUriMapping Example

---
apiVersion: front.in‑Cloud.io/v1alpha1
kind: TableUriMapping
metadata:
  name: stock-cluster-pod-details
spec:
  keysToParse: ".metadata.name"
  keysToParseSecond: ".metadata.namespace"
  id: "stock-cluster-/v1/pods"
  pathToNavigate: "/openapi-ui/{clusterName}/~recordValueSecond~/factory/pod-details/~recordValue~"

warning

Просьба обратить внимание что id в этом ресурсе отличается от  BreadCrumb и  Sidebar.

к сведению

Просьба учитывать, что CustomColumnsOverride требуется настраивать под  каждый тип ресурса.

Страница табличного представления Pods в пространстве имен All где  нажали на  строку таблицы

Страница фабрики с деталями Pods, открытая по клику на  строку таблицы

Как видно на  втором изображении, контекст сохраняется на  уровнях Sidebar и  Breadcrumb — это позволяет быстро вернуться к  предыдущему состоянию интерфейса. Указатели keysToParse и  keysToParseSecond передают нужные значения в фабрику, задавая Namespace-контекст для дальнейшей работы с Pods.

---

Navigation

Navigation — это механизм настройки переходов между контекстами в интерфейсе in‑Cloud UI. Он  определяет, куда должен направляться пользователь при выборе проекта, инстанса или пространства имен.

Navigation работает декларативно: при изменении значения в выпадающем списке пользователь перенаправляется на  заранее заданный маршрут. Для этого задаются два шаблона на  каждый тип контекста:

• clear — маршрут при сбросе значения (например, "все проекты")
• change — маршрут при выборе нового значения

В маршрутах поддерживаются следующие плейсхолдеры:

Плейсхолдер	Описание
{selectedCluster}	Текущий выбранный кластер
{value}	Новое выбранное значение (проект, инстанс или namespace)

Структура полей Navigation

Поле	Тип	Описание	Пример
spec.projects.clear	string	Маршрут при сбросе выбранного проекта.
spec.projects.change	string	Маршрут при выборе конкретного проекта.
spec.instances.clear	string	Маршрут при сбросе выбранного инстанса.
spec.instances.change	string	Маршрут при выборе конкретного инстанса.
spec.namespaces.clear	string	Маршрут при сбросе выбранного namespace.
spec.namespaces.change	string	Маршрут при выборе конкретного namespace.

Пример ресурса Navigation

Navigation Example

---
apiVersion: front.in‑Cloud.io/v1alpha1
kind: Navigation
metadata:
  name: navigation
spec:
  projects:
    clear: "/openapi-ui/{selectedCluster}/builtin-table/pods"
    change: "/openapi-ui/{selectedCluster}/{value}/builtin-table/pods"

  instances:
    clear: "/openapi-ui/{selectedCluster}/builtin-table/pods"
    change: "/openapi-ui/{selectedCluster}/{value}/builtin-table/pods"

  namespaces:
    clear: "/openapi-ui/{selectedCluster}/builtin-table/pods"
    change: "/openapi-ui/{selectedCluster}/{value}/builtin-table/pods"

к сведению

Ресурс Navigation обычно описывается один раз и  применяется глобально ко всем элементам интерфейса. При необходимости можно задать разные правила навигации для разных страниц фабрики.

warning

Обратите внимание, что маршруты должны быть валидными и  вести на  существующие представления, иначе пользователь может попасть на  несуществующую страницу.

---

Factory

Ресурс Factory используется в in‑Cloud UI для декларативного построения интерфейсов на  основе описания в YAML. Он  выступает как описатель страницы или ее части, включающей:

• получение данных через API
• визуальное разложение на  компоненты
• объединение вложенных компонентов в структуру
• работу с JSONPath-выражениями и  переменными из URL

Переменные URL

Все  пути в urlsToFetch и  других полях могут содержать переменные в фигурных скобках, которые подставляются при рендеринге:

Пример с плейсхолдерами

urlsToFetch:
  - /api/clusters/{2}/k8s/api/v1/namespaces/{3}/pods/{6}

Обработка данных

Данные, полученные из urlsToFetch, доступны во всех компонентах через JSONPath с синтаксисом:

text: '{reqsJsonPath[0][".metadata.name"]["-"]}'

• reqsJsonPath[0] — первый элемент из urlsToFetch
• [".metadata.name"] — путь к  нужному полю
• ["-"] — Базовое значение если значение не  определено

Типовые применения

• Страницы деталей ресурсов (Pods, Deployments, Nodes)
• Таблицы с YAML/JSON редактированием
• Динамические вкладки с таблицами (EnrichedTable)
• Визуализация логов и  терминала

Общее описание

Ресурс принадлежит группе front.in‑Cloud.io/v1alpha1 и  имеет следующий базовый вид:

Factory.yaml

---
apiVersion: front.in‑Cloud.io/v1alpha1
kind: Factory
metadata:
  name: example-details
spec:
  key: example-details
  urlsToFetch:
    - /api/clusters/{2}/k8s/api/v1/namespaces/{3}/examples/{6}
  data:
    - type: antdText
      data:
        id: text-header
        text: Example title

Ключевые поля

Поле	Тип	Назначение
spec.key	string	Уникальный ключ страницы, используется как ID и  часть URL.
sidebarTags[]	string[]	Связь с тегами сайдбара, влияет на  навигацию и  видимость.
urlsToFetch[]	string[]	Список API-запросов, чьи данные будут подставлены в шаблоны компонентов.
withScrollableMainContentCard	bool	Управляет наличием скролла в карточке основного контента.
data[]	Component[]	Основная структура компонентов интерфейса.

Поле data[]

Поле data — это основное содержимое Factory-ресурса. Оно описывает структуру интерфейса в виде иерархии компонентов.

Доступные компоненты Factory

Название	Назначение	Пример
antdText	Выводит простой текст или заголовок	TextPropsПример
ResourceBadge	Выводит простой текст или заголовок
parsedText	Значение из JSONPath
LabelsToSearchParams	Создает ссылку на Search модуль с подставленными атрибутами поиска
StatusText	Определяет статус по значениям (успех, ошибка, ожидание)	TextPropsПример
antdLink	Гиперссылка на  другой ресурс или маршрут	Пример
antdButton	Кнопка действия с ID, стилями и  событиями	ButtonPropsПример
KeyCounter	Подсчитывает количество ключей в объекте
ItemCounter	Подсчитывает количество элементов в массиве
ConverterBytes	Конвертирует байты в читаемый размер (КБ, МБ и т. д.)
MarketPlace	Отображает доступный набор ресурсов Marketplace для заказа
SecretBase64Plain	Показывает секрет в base64 или plaintext с глазком
antdFlex	Контейнер с флекс-раскладкой (по умолчанию вертикальный)	FlexPropsПример
antdRow	Горизонтальная сетка из колонок	RowPropsПример
antdCol	Колонка в рамках строки antdRow	ColPropsПример
antdTabs	Вкладки с разными дочерними компонентами	TabsPropsПример
antdCard	Обертка в виде карточки с отступами и  стилем	CardPropsПример
ContentCard	Визуальная карточка с секцией данных
Spacer	Добавляет вертикальный отступ между элементами
EnrichedTable	Продвинутая таблица с поддержкой загрузки данных и  фильтрации
VisibilityContainer	Показывает блок при наличии содержимого (обычно из value)
YamlEditorSingleton	Редактор YAML для одного ресурса (prefill через API)
Labels	Редактируемый список label'ов объекта	selectProps
Tolerations	Просмотр и  редактирование toleration'ов Pod'а
Annotations	Редактируемая таблица аннотаций
ArrayOfObjectsToKeyValues	Преобразует массив объектов в список ключ:значение по полям keyFieldName и  valueFieldName
PodLogs	Просмотр логов выбранного Pod'а
PodTerminal	Терминал для exec внутри контейнера Pod'а
NodeTerminal	Exec в отдельный Pod на  выбранной ноде

Примеры

• Factory: pod-details
• Factory: node-details

к сведению

Компонент Factory является ключевым в визуальной архитектуре in‑Cloud UI. Он  дает возможность создавать интерфейс без  написания кода.

подсказка

Factory поддерживает версионность API. Вы можете создавать разные Factory-ресурсы с одинаковым ключом, но разными реализациями под  нужные кластеры.

---

CustomFormsOverride

Компонент CustomFormsOverride используется для кастомизации динамических форм редактирования ресурсов в интерфейсе in‑Cloud. Он  работает поверх OpenAPI-спецификаций и  позволяет декларативно переопределять поведение и  структуру UI-форм.

1. Зачем нужен CustomFormsOverride

к сведению

CustomFormsOverride создан для того, чтобы стандартная форма, построенная на  базе OpenAPI, стала более удобной, лаконичной и  безопасной.

Он решает следующие задачи:

• скрывает ненужные или чувствительные поля (например, metadata, status);
• позволяет переопределить типы и  поведение полей;
• добавляет поддержку справочников и  зависимостей между полями;
• меняет отображение без  пересборки всего UI.

3. Основные блоки ресурса

Ресурс CustomFormsOverride внутри spec логически делится на  несколько ключевых блоков:

Блок	Назначение
customizationId	Уникальный идентификатор, по которому UI находит и  применяет переопределенную форму к  нужному ресурсу.
hidden	Массив путей до скрываемых полей. Например, ["spec", "serviceRef", "apiVersion"]. Позволяет убрать из формы технические и  чувствительные поля.
schema	Переопределение структуры и  поведения формы на  базе JSON Schema. Здесь задаются типы, описания, required-поля и  расширения вроде customProps.
strategy	Определяет способ объединения с оригинальной схемой ресурса: merge (объединить) или replace (заменить полностью).

4. Что делает блок schema

Блок schema используется для переопределения OpenAPI-структуры формы. Он  позволяет задать удобную, безопасную и  бизнес-ориентированную форму с описаниями, справочниками, обязательными полями и  типами.

Возможность	Описание
type	Базовый тип поля: string, integer, boolean, object, array.
description	Подпись и  пояснение для поля — отображается как подсказка в UI.
required	Массив обязательных полей. Используется для валидации формы.
enum	Ограничение на  набор допустимых значений — автоматически отрисовывается как выпадающий список.
properties	Вложенные поля для объектов. Используется при описании type: object.
items	Схема элемента массива. Используется при type: array.
customProps	Кастомные расширения in‑Cloud UI для отображения справочников, диапазонов и  зависимостей между полями.

подсказка

Блок schema позволяет настроить поведение формы без  пересборки UI.

6. Кастомные типы полей

При переопределении схемы в ресурсах CustomFormsOverride доступны нестандартные типы, которые расширяют базовые возможности OpenAPI Schema. Эти типы используются в поле type и  активируют специальное поведение в UI.

Тип	Описание	Пример
listInput	Кастомный тип для выбора значения из внешнего справочника. В сочетании с customProps позволяет подгружать данные по valueUri, отображать и  фильтровать их по заданным keysToLabel и  keysToValue.
rangeInputCpu	Тип ввода значений CPU с возможностью задания минимального и  максимального диапазона, шага и  бизнес-логики сравнения. Поддерживает редактирование и  агрегацию значений из API-ответов.
rangeInputMemory	Аналогично rangeInputCpu, но используется для управления значениями объема памяти. Позволяет задать диапазоны, фильтрацию и  зависимости от  квот или лимитов в других ресурсах.

к сведению

Кастомные типы являются расширением стандартных типов string, number, boolean и  работают только в рамках UI in‑Cloud.

---

CustomFormsPrefill

Ресурс CustomFormsPrefill позволяет заранее подставлять значения в кастомные формы UI in‑Cloud. Это упрощает ввод данных и  обеспечивает единообразие при создании ресурсов Kubernetes.

Пример ресурса

---
apiVersion: front.in‑Cloud.io/v1alpha1
kind: CustomFormsPrefill
metadata:
  name: v1.service
spec:
  customizationId: stock-namespace-/v1/services
  values:
    - path:
        - metadata
      value:
        name: example-service
        namespace: default
    - path:
        - spec
      value:
        type: ClusterIP
        selector:
          app: my-app
        ports:
          - name: http
            protocol: TCP
            port: 80
            targetPort: 8080

Поля ресурса

Поле	Тип	Назначение
metadata.name	string	Уникальное имя ресурса префилла.
spec.customizationId	string	ID формы, к  которой применяется префилл (должен совпадать с CustomForms).
spec.values[]	array	Массив подстановок для полей формы.
spec.values[].path	string[]	Путь до поля объекта в виде массива ключей (например, ["spec","ports"]).
spec.values[].value	any	Значение для подстановки (строка, число, объект или массив).

Search

Страница Search предназначена для поиска ресурсов Kubernetes по имени, типу, лейблам и кастомным полям в рамках выбранного кластера.

Она доступна из бокового меню интерфейса и также поддерживает callback-ссылки из форм создания и редактирования ресурсов, что позволяет быстро перейти к списку найденных объектов после выполнения операций.

Пути доступа

Доступные маршруты

• /openapi-ui/{clusterName}/{namespace}/search — поиск с указанием пространства имён.
• /openapi-ui/{clusterName}/search — глобальный поиск по кластеру.

Схема взаимодействия интерфейса страницы Search с кластером Kubernetes

примечание

Страница Search является частью общей системы визуализации Factory и использует единый механизм отображения данных, включая поддержку фильтрации, подсветку совпадений и контекстные переходы.

---

Информация

Что-то непонятно или нашли ошибку? Напишите нам — поможем разобраться.

info@prorobotech.ru

@prt_architecture