Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI - Bugfixes multi nodes - high availability #3521

Merged
merged 4 commits into from
Sep 3, 2021
Merged

UI - Bugfixes multi nodes - high availability #3521

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1210b60
ui: Filter volume list per nodes in volume tabs on node details page
JBWatenbergScality Aug 31, 2021
160e1a9
ui: Fix node alert filter and status
JBWatenbergScality Sep 2, 2021
3c9589c
ui: Hide deploy button when a node is unavailable but already deployed
JBWatenbergScality Sep 2, 2021
012fcf3
changelog: Mention UI mutli nodes fixes
JBWatenbergScality Sep 2, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@
- Bump Kubernetes version to 1.21.4
(PR[#3495](https://github.com/scality/metalk8s/pull/3495))

- Fix UI issues in multi nodes environment when a node
is unavailable (PR[#3521](https://github.com/scality/metalk8s/pull/3521))

## Release 2.10.2
### Bug fixes
- Fix the link to documentation from the UI navigation bar
Expand Down
2 changes: 1 addition & 1 deletion ui/src/components/NodePageOverviewTab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@ const NodePageOverviewTab = (props) => {
<CircleStatus status={currentNode?.health?.health}></CircleStatus>
<NodeName>{name}</NodeName>
</div>
{currentNodeReturnByK8S?.status === API_STATUS_UNKNOWN ? (
{currentNodeReturnByK8S?.status === API_STATUS_UNKNOWN && !currentNodeReturnByK8S.internalIP ? (
!currentNodeReturnByK8S?.deploying ? (
<DeployButton
text={intl.formatMessage({ id: 'deploy' })}
Expand Down
2 changes: 1 addition & 1 deletion ui/src/components/NodePageVolumesTab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const NodePageVolumesTab = (props) => {
const { name } = useParams();
const dispatch = useDispatch();

const volumeListData = useVolumesWithAlerts();
const volumeListData = useVolumesWithAlerts(name);

useRefreshEffect(refreshVolumesAction, stopRefreshVolumesAction);
useRefreshEffect(
Expand Down
7 changes: 5 additions & 2 deletions ui/src/containers/NodePageRSP.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,10 +123,13 @@ const NodePageRSP = (props) => {

const alertList = useAlerts({
alertname: NODE_ALERTS_GROUP,
instance: `${instanceIP}:${PORT_NODE_EXPORTER}`,
});

const alertsNode = (alertList && alertList.alerts) || [];
const alertsNode = ((alertList && alertList.alerts) || []).filter(
(alert) =>
alert.labels.instance === `${instanceIP}:${PORT_NODE_EXPORTER}` ||
alert.labels.node === name,
);
Comment on lines +128 to +132
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am wondering why can't we add this filter within useAlerts() ?

  const alertList = useAlerts({
    alertname: NODE_ALERTS_GROUP,
    instance: `${instanceIP}:${PORT_NODE_EXPORTER}`,
   node: name
  });

Copy link
Contributor Author

@JBWatenbergScality JBWatenbergScality Sep 2, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That would make an AND filter and then exclude the Alerts with label instance: ${instanceIP}:${PORT_NODE_EXPORTER} if the node label is not defined.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh. Yes, that's right.. I miss the OR logic in the filter..
Look good to me then!


const isHealthTabActive = location.pathname.endsWith('/overview');
const isAlertsTabActive = location.pathname.endsWith('/alerts');
Expand Down
122 changes: 67 additions & 55 deletions ui/src/services/NodeUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,18 @@ import {
API_STATUS_NOT_READY,
API_STATUS_UNKNOWN,
API_STATUS_DEPLOYING,
STATUS_HEALTH,
} from '../constants';
import { compareHealth } from './utils';
import type { IPInterfaces } from './salt/api';
import type { RootState } from '../ducks/reducer';
import type { NodesState } from '../ducks/app/nodes';
import type { Brand } from '../services/api';
import { getHealthStatus, filterAlerts, type Alert } from '../services/alertUtils';
import {
getHealthStatus,
filterAlerts,
type Alert,
} from '../services/alertUtils';

const METALK8S_CONTROL_PLANE_IP = 'metalk8s:control_plane_ip';
const METALK8S_WORKLOAD_PLANE_IP = 'metalk8s:workload_plane_ip';
Expand Down Expand Up @@ -56,33 +61,35 @@ const IPsInfoSelector = (state) => state.app.nodes.IPsInfo;
const nodesSelector = (state) => state.app.nodes.list;

// Return the data used by the Node list table
export const getNodeListData = (alerts: Array<Alert>, brand: Brand) => createTypedSelector<NodetableList>(
(
nodes: $PropertyType<NodesState, 'list'>,
nodeIPsInfo: NodesState
) => {
const mapped =
nodes.map((node) => {
const conditions = node.conditions;
const IPsInfo = nodeIPsInfo[node.name];
let statusTextColor, health;
export const getNodeListData = (alerts: Array<Alert>, brand: Brand) =>
createTypedSelector<NodetableList>(
(nodes: $PropertyType<NodesState, 'list'>, nodeIPsInfo: NodesState) => {
const mapped =
nodes.map((node) => {
const conditions = node.conditions;
const IPsInfo = nodeIPsInfo[node.name];
let statusTextColor, health;

const alertsNode = filterAlerts(alerts, {
alertname: NODE_ALERTS_GROUP,
instance: `${node.internalIP}:${PORT_NODE_EXPORTER}`,
});
const alertsNode = filterAlerts(alerts, {
alertname: NODE_ALERTS_GROUP,
}).filter(
(alert) =>
alert.labels.instance ===
`${node.internalIP}:${PORT_NODE_EXPORTER}` ||
alert.labels.node === node.name,
);

const totalAlertsCounter = alertsNode.length;
const criticalAlertsCounter = alertsNode.filter(
(alert) => alert.labels.severity === STATUS_CRITICAL,
).length;
const warningAlertsCounter = alertsNode.filter(
(alert) => alert.labels.severity === STATUS_WARNING,
).length;
const totalAlertsCounter = alertsNode.length;
const criticalAlertsCounter = alertsNode.filter(
(alert) => alert.labels.severity === STATUS_CRITICAL,
).length;
const warningAlertsCounter = alertsNode.filter(
(alert) => alert.labels.severity === STATUS_WARNING,
).length;

health = getHealthStatus(alertsNode);
const computedStatus = [];
/* The rules of the color of the node status
health = getHealthStatus(alertsNode);
const computedStatus = [];
/* The rules of the color of the node status
<green> when status.conditions['Ready'] == True and all other conditions are false
<yellow> when status.conditions['Ready'] == True and some other conditions are true
<red> when status.conditions['Ready'] == False
Expand All @@ -105,43 +112,48 @@ export const getNodeListData = (alerts: Array<Alert>, brand: Brand) => createTyp
} else if (node.status !== API_STATUS_READY) {
statusTextColor = brand.statusCritical;
computedStatus.push(API_STATUS_NOT_READY);
health = STATUS_NONE;
//If no alert is raised on the node but kubernetes
//report a non-ready node we set the node health to NONE
//else we set it to the highest alert status raised on the node.
if (health === STATUS_HEALTH) {
health = STATUS_NONE;
}
} else {
statusTextColor = brand.textSecondary;
computedStatus.push(API_STATUS_UNKNOWN);
health = STATUS_NONE;
}

return {
// According to the design, the IPs of Control Plane and Workload Plane are in the same Cell with Name
name: {
name: node.name,
controlPlaneIP: IPsInfo?.controlPlane?.ip,
workloadPlaneIP: IPsInfo?.workloadPlane?.ip,
},
status: {
status: node.status,
conditions: node.conditions,
statusTextColor,
computedStatus,
},
roles: node.roles,
health: {
health,
totalAlertsCounter,
criticalAlertsCounter,
warningAlertsCounter,
},
};
}) || [];
return {
// According to the design, the IPs of Control Plane and Workload Plane are in the same Cell with Name
name: {
name: node.name,
controlPlaneIP: IPsInfo?.controlPlane?.ip,
workloadPlaneIP: IPsInfo?.workloadPlane?.ip,
},
status: {
status: node.status,
conditions: node.conditions,
statusTextColor,
computedStatus,
},
roles: node.roles,
health: {
health,
totalAlertsCounter,
criticalAlertsCounter,
warningAlertsCounter,
},
};
}) || [];

return mapped.sort((a, b) =>
compareHealth(b.health.health, a.health.health),
);
},
nodesSelector,
IPsInfoSelector,
);
return mapped.sort((a, b) =>
compareHealth(b.health.health, a.health.health),
);
},
nodesSelector,
IPsInfoSelector,
);

/*
This function returns the IP and interface of Control Plane and Workload Plane for each Node
Expand Down