Skip to content

Commit

Permalink
CONSOLE-4269: add custom ConsolePlugin resource details page
Browse files Browse the repository at this point in the history
  • Loading branch information
rhamilto committed Nov 13, 2024
1 parent d054036 commit 505389d
Show file tree
Hide file tree
Showing 23 changed files with 595 additions and 46 deletions.
127 changes: 127 additions & 0 deletions frontend/packages/console-app/console-extensions.json
Original file line number Diff line number Diff line change
Expand Up @@ -1891,5 +1891,132 @@
"$codeRef": "nodeActions.useNodeActions"
}
}
},
{
"type": "console.resource/details-item",
"properties": {
"id": "plugin-display-name",
"model": {
"group": "console.openshift.io",
"version": "v1",
"kind": "ConsolePlugin"
},
"column": "left",
"title": "%console-app~Display Name%",
"path": "spec.displayName",
"sortWeight": 0
}
},
{
"type": "console.resource/details-item",
"properties": {
"id": "plugin-description",
"model": {
"group": "console.openshift.io",
"version": "v1",
"kind": "ConsolePlugin"
},
"column": "left",
"title": "%console-app~Description%",
"description": "%console-app~Information describing the plugin.%",
"component": { "$codeRef": "consolePluginDescriptionDetail" },
"sortWeight": 1
}
},
{
"type": "console.resource/details-item",
"properties": {
"id": "plugin-version",
"model": {
"group": "console.openshift.io",
"version": "v1",
"kind": "ConsolePlugin"
},
"column": "right",
"title": "%console-app~Version%",
"description": "%console-app~The specific update of the plugin.%",
"component": { "$codeRef": "consolePluginVersionDetail" },
"sortWeight": 0
}
},
{
"type": "console.resource/details-item",
"properties": {
"id": "plugin-status",
"model": {
"group": "console.openshift.io",
"version": "v1",
"kind": "ConsolePlugin"
},
"column": "right",
"title": "%console-app~Status%",
"description": "%console-app~The state of the plugin.%",
"component": { "$codeRef": "consolePluginStatusDetail" },
"sortWeight": 1
}
},
{
"type": "console.resource/details-item",
"properties": {
"id": "plugin-enabled",
"model": {
"group": "console.openshift.io",
"version": "v1",
"kind": "ConsolePlugin"
},
"column": "right",
"title": "%console-app~Enabled%",
"description": "%console-app~Whether or not the plugin renders in console.%",
"component": { "$codeRef": "consolePluginEnabledStatusDetail" },
"sortWeight": 2
}
},
{
"type": "console.resource/details-item",
"properties": {
"id": "plugin-csp",
"model": {
"group": "console.openshift.io",
"version": "v1",
"kind": "ConsolePlugin"
},
"column": "right",
"title": "%console-app~CSP Violations%",
"description": "%console-app~Whether or not the plugin might have violated the Console Content Security Policy.%",
"component": { "$codeRef": "consolePluginCSPStatusDetail" },
"sortWeight": 3
}
},
{
"type": "console.resource/details-item",
"properties": {
"id": "plugin-backend",
"model": {
"group": "console.openshift.io",
"version": "v1",
"kind": "ConsolePlugin"
},
"column": "right",
"title": "%console-app~Backend Service%",
"path": "spec.backend.service",
"component": { "$codeRef": "consolePluginBackendDetail" },
"sortWeight": 4
}
},
{
"type": "console.resource/details-item",
"properties": {
"id": "plugin-proxy",
"model": {
"group": "console.openshift.io",
"version": "v1",
"kind": "ConsolePlugin"
},
"column": "right",
"title": "%console-app~Proxy Services%",
"path": "spec.proxy",
"component": { "$codeRef": "consolePluginProxyDetail" },
"sortWeight": 5
}
}
]
16 changes: 13 additions & 3 deletions frontend/packages/console-app/locales/en/console-app.json
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,18 @@
"Namespace where the API configuration secret is located": "Namespace where the API configuration secret is located",
"Scheduling disabled": "Scheduling disabled",
"Approval required": "Approval required",
"Display Name": "Display Name",
"Information describing the plugin.": "Information describing the plugin.",
"Version": "Version",
"The specific update of the plugin.": "The specific update of the plugin.",
"Status": "Status",
"The state of the plugin.": "The state of the plugin.",
"Enabled": "Enabled",
"Whether or not the plugin renders in console.": "Whether or not the plugin renders in console.",
"CSP Violations": "CSP Violations",
"Whether or not the plugin might have violated the Console Content Security Policy.": "Whether or not the plugin might have violated the Console Content Security Policy.",
"Backend Service": "Backend Service",
"Proxy Services": "Proxy Services",
"Delete {{kind}}": "Delete {{kind}}",
"Edit {{kind}}": "Edit {{kind}}",
"Edit labels": "Edit labels",
Expand Down Expand Up @@ -222,18 +234,16 @@
"Insufficient permissions": "Insufficient permissions",
"You do not have sufficient permissions to read any cluster configuration.": "You do not have sufficient permissions to read any cluster configuration.",
"{{section}} not found": "{{section}} not found",
"Enabled": "Enabled",
"Disabled": "Disabled",
"This plugin might have violated the Console Content Security Policy. Refer to the browser's console logs for details.": "This plugin might have violated the Console Content Security Policy. Refer to the browser's console logs for details.",
"Yes": "Yes",
"No": "No",
"Name": "Name",
"Version": "Version",
"Status": "Status",
"CSP violations": "CSP violations",
"Console operator spec.managementState is unmanaged. Changes to plugins will have no effect.": "Console operator spec.managementState is unmanaged. Changes to plugins will have no effect.",
"Console plugins": "Console plugins",
"Customize": "Customize",
"Plugin manifest": "Plugin manifest",
"Updating cluster to {{version}}": "Updating cluster to {{version}}",
"API Servers": "API Servers",
"Controller Managers": "Controller Managers",
Expand Down
9 changes: 8 additions & 1 deletion frontend/packages/console-app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,14 @@
"nodeStatus": "src/components/nodes/status",
"nodeActions": "src/components/nodes/menu-actions.tsx",
"oauthConfigDetailsPage": "src/components/oauth-config/OAuthConfigDetailsPage.tsx",
"multiNetworkFlag": "src/components/network-policies/multi-network-policy/multiNetworkFlag.ts"
"multiNetworkFlag": "src/components/network-policies/multi-network-policy/multiNetworkFlag.ts",
"consolePluginDescriptionDetail": "src/components/console-operator/ConsolePluginDescriptionDetail",
"consolePluginVersionDetail": "src/components/console-operator/ConsolePluginVersionDetail",
"consolePluginStatusDetail": "src/components/console-operator/ConsolePluginStatusDetail",
"consolePluginEnabledStatusDetail": "src/components/console-operator/ConsolePluginEnabledStatusDetail",
"consolePluginCSPStatusDetail": "src/components/console-operator/ConsolePluginCSPStatusDetail",
"consolePluginBackendDetail": "src/components/console-operator/ConsolePluginBackendDetail",
"consolePluginProxyDetail": "src/components/console-operator/ConsolePluginProxyDetail"
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -55,14 +55,14 @@ import {
Comparator,
} from '@console/shared/src/utils/comparators';

const developmentMode = window.SERVER_FLAGS.k8sMode === 'off-cluster';
export const developmentMode = window.SERVER_FLAGS.k8sMode === 'off-cluster';
const consolePluginGVK = getGroupVersionKindForModel(ConsolePluginModel);
const consolePluginConcatenatedGVK = getReferenceForModel(ConsolePluginModel);
const consoleOperatorConfigReference: K8sResourceKindReference = referenceForModel(
ConsoleOperatorConfigModel,
);

const getConsolePluginDisplayData = (plugin: DynamicPluginInfo): ConsolePluginTableRow => {
export const getConsolePluginDisplayData = (plugin: DynamicPluginInfo): ConsolePluginTableRow => {
if (isLoadedDynamicPluginInfo(plugin)) {
return {
name: plugin.metadata.name,
Expand All @@ -82,19 +82,16 @@ const getConsolePluginDisplayData = (plugin: DynamicPluginInfo): ConsolePluginTa
};
};

const ConsolePluginEnabledStatus: React.FC<ConsolePluginEnabledStatusProps> = ({
pluginName,
enabled,
}) => {
const { t } = useTranslation();

export const useConsoleOperatorConfigData = () => {
const console: WatchK8sResource = {
kind: referenceForModel(ConsoleOperatorConfigModel),
isList: false,
name: CONSOLE_OPERATOR_CONFIG_NAME,
};

const [consoleOperatorConfig] = useK8sWatchResource<K8sResourceKind>(console);
const [consoleOperatorConfig, consoleOperatorConfigLoaded] = useK8sWatchResource<K8sResourceKind>(
console,
);

const canPatchConsoleOperatorConfig = useAccessReview({
group: ConsoleOperatorConfigModel.apiGroup,
Expand All @@ -103,11 +100,34 @@ const ConsolePluginEnabledStatus: React.FC<ConsolePluginEnabledStatusProps> = ({
name: CONSOLE_OPERATOR_CONFIG_NAME,
});

return React.useMemo(
() => ({ consoleOperatorConfig, consoleOperatorConfigLoaded, canPatchConsoleOperatorConfig }),
[consoleOperatorConfig, consoleOperatorConfigLoaded, canPatchConsoleOperatorConfig],
);
};

export const ConsolePluginStatus: React.FC<ConsolePluginStatusProps> = ({
status,
errorMessage,
}) => <Status status={status} title={status === 'Failed' ? errorMessage : undefined} />;

export const ConsolePluginEnabledStatus: React.FC<ConsolePluginEnabledStatusProps> = ({
pluginName,
enabled,
}) => {
const { t } = useTranslation();

const {
consoleOperatorConfig,
consoleOperatorConfigLoaded,
canPatchConsoleOperatorConfig,
} = useConsoleOperatorConfigData();

const labels = enabled ? t('console-app~Enabled') : t('console-app~Disabled');

return (
<>
{consoleOperatorConfig && canPatchConsoleOperatorConfig ? (
{consoleOperatorConfigLoaded && canPatchConsoleOperatorConfig && !developmentMode ? (
<Button
data-test="edit-console-plugin"
type="button"
Expand All @@ -131,7 +151,9 @@ const ConsolePluginEnabledStatus: React.FC<ConsolePluginEnabledStatusProps> = ({
);
};

const ConsolePluginCSPStatus: React.FC<ConsolePluginCSPStatusProps> = ({ hasViolations }) => {
export const ConsolePluginCSPStatus: React.FC<ConsolePluginCSPStatusProps> = ({
hasViolations,
}) => {
const { t } = useTranslation();

return hasViolations ? (
Expand Down Expand Up @@ -257,15 +279,16 @@ const ConsolePluginsTable: React.FC<ConsolePluginsTableProps> = ({ obj, rows, lo
({ name, version, description, status, enabled, errorMessage, hasCSPViolations }) => (
<Tr key={name}>
<Td dataLabel={columns[0].id}>
<ResourceLink groupVersionKind={consolePluginGVK} name={name} hideIcon />
{!developmentMode ? (
<ResourceLink groupVersionKind={consolePluginGVK} name={name} hideIcon />
) : (
name
)}
</Td>
<Td dataLabel={columns[1].id}>{version || DASH}</Td>
<Td dataLabel={columns[2].id}>{description || DASH}</Td>
<Td dataLabel={columns[3].id}>
<Status
status={status}
title={status === 'Failed' ? errorMessage : undefined}
/>
<ConsolePluginStatus status={status} errorMessage={errorMessage} />
</Td>
<Td dataLabel={columns[4].id}>
<ConsolePluginEnabledStatus pluginName={name} enabled={enabled} />
Expand Down Expand Up @@ -299,7 +322,7 @@ const DevPluginsPage: React.FCC<ConsoleOperatorConfigPageProps> = (props) => {
const PluginsPage: React.FC<ConsoleOperatorConfigPageProps> = (props) => {
const [pluginInfoEntries, allPluginsProcessed] = useDynamicPluginInfo();

const enabledPlugins = React.useMemo(() => props?.obj?.spec?.plugins ?? [], [
const enabledPlugins = React.useMemo<string[]>(() => props?.obj?.spec?.plugins ?? [], [
props?.obj?.spec?.plugins,
]);

Expand All @@ -322,7 +345,7 @@ const PluginsPage: React.FC<ConsoleOperatorConfigPageProps> = (props) => {
return <ConsolePluginsTable {...props} rows={rows} loaded={allPluginsProcessed} />;
};

const ConsoleOperatorConfigPluginsPage: React.FCC<ConsoleOperatorConfigPageProps> = developmentMode
const ConsoleOperatorConfigPluginsPage: React.FC<ConsoleOperatorConfigPageProps> = developmentMode
? DevPluginsPage
: PluginsPage;

Expand Down Expand Up @@ -370,7 +393,7 @@ export const ConsoleOperatorConfigDetailsPage: React.FC<React.ComponentProps<
);
};

type ConsolePluginTableRow = {
export type ConsolePluginTableRow = {
name: string;
version?: string;
description?: string;
Expand All @@ -391,6 +414,11 @@ type ConsolePluginsTableProps = ConsoleOperatorConfigPageProps & {
loaded: boolean;
};

type ConsolePluginStatusProps = {
status: DynamicPluginInfo['status'];
errorMessage?: string;
};

type ConsolePluginEnabledStatusProps = {
pluginName: string;
enabled: boolean;
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import * as React from 'react';
import { DetailsItemComponentProps } from '@console/dynamic-plugin-sdk/src/extensions/details-item';
import {
getGroupVersionKindForModel,
ResourceLink,
} from '@console/dynamic-plugin-sdk/src/lib-core';
import { ServiceModel } from '@console/internal/models';
import { ConsolePluginKind } from '@console/internal/module/k8s';
import { DASH } from '@console/shared/src/constants';

const ConsolePluginBackendDetail: React.FC<ConsolePluginBackendDetailProps> = ({
obj: {
spec: { backend },
},
}) =>
// only Service is supported per the ConsolePlugin schema
backend.type === ServiceModel.label ? (
<ResourceLink
name={backend.service.name}
namespace={backend.service.namespace}
groupVersionKind={getGroupVersionKindForModel(ServiceModel)}
/>
) : (
<>{DASH}</>
);

type ConsolePluginBackendDetailProps = Omit<DetailsItemComponentProps, 'obj'> & {
obj: ConsolePluginKind;
};

export default ConsolePluginBackendDetail;
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import * as React from 'react';
import { DetailsItemComponentProps } from '@console/dynamic-plugin-sdk/src/extensions/details-item';
import { isLoadedDynamicPluginInfo } from '@console/plugin-sdk/src';
import { usePluginStore } from '@console/plugin-sdk/src/api/usePluginStore';
import { DASH } from '@console/shared/src/constants';
import { ConsolePluginCSPStatus } from './ConsoleOperatorConfig';

const ConsolePluginCSPStatusDetail: React.FC<DetailsItemComponentProps> = ({ obj }) => {
const pluginStore = usePluginStore();
const pluginName = React.useMemo(() => obj?.metadata?.name, [obj?.metadata?.name]);

const pluginInfo = React.useMemo(() => pluginStore.findDynamicPluginInfo(pluginName), [
pluginStore,
pluginName,
]);

return pluginInfo ? (
<ConsolePluginCSPStatus
hasViolations={
isLoadedDynamicPluginInfo(pluginInfo) ? pluginInfo.hasCSPViolations ?? false : false
}
/>
) : (
<>{DASH}</>
);
};

export default ConsolePluginCSPStatusDetail;
Loading

0 comments on commit 505389d

Please sign in to comment.