Skip to content
This repository has been archived by the owner on Jan 11, 2024. It is now read-only.

Commit

Permalink
Improve Table
Browse files Browse the repository at this point in the history
  • Loading branch information
@Adi146
Adi146 committed Nov 7, 2021
1 parent 9b2556b commit 69c47d3
Show file tree
Hide file tree
Showing 4 changed files with 188 additions and 71 deletions.
30 changes: 13 additions & 17 deletions frontend/src/component-details-card.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
import { LitElement, html, css } from "lit";

import {
getConditions,
getConditionsAsSpans,
getName,
getNamespace,
getCreated,
getAgeStr,
getNodeName,
getDesiredReplicas,
getReadyReplicas,
} from "./helpers.js";

export class ComponentDetailsCard extends LitElement {
Expand Down Expand Up @@ -40,7 +44,9 @@ export class ComponentDetailsCard extends LitElement {
<tr class="section">
<th>Created</th>
<td colspan="2">
<div>${entity.attributes.metadata.creation_timestamp}</div>
<div>
${getCreated(entity).toLocaleString()} (${getAgeStr(entity)} ago)
</div>
</td>
</tr>
`;
Expand Down Expand Up @@ -83,7 +89,7 @@ export class ComponentDetailsCard extends LitElement {
return html`
<tr class="section">
<th>Conditions</th>
<td colspan="2">${getConditionsAsSpans(getConditions(entity))}</td>
<td colspan="2">${getConditionsAsSpans(entity)}</td>
</tr>
`;
}
Expand Down Expand Up @@ -180,18 +186,8 @@ export class ComponentDetailsCard extends LitElement {
<tr class="section">
<th>Pods</th>
<td colspan="2">
<div>
Desired:
${entity.attributes.status.replicas ??
entity.attributes.status.desired_number_scheduled ??
0}
</div>
<div>
Ready:
${entity.attributes.status.ready_replicas ??
entity.attributes.status.number_ready ??
0}
</div>
<div>Desired: ${getDesiredReplicas(entity)}</div>
<div>Ready: ${getReadyReplicas(entity)}</div>
<div>
Updated:
${entity.attributes.status.updated_replicas ??
Expand Down Expand Up @@ -246,12 +242,12 @@ export class ComponentDetailsCard extends LitElement {
}

renderNode(entity) {
if (!entity.attributes.spec.node_name) return;
if (!getNodeName(entity)) return;
return html`
<tr class="section">
<th>Node</th>
<td colspan="2">
<div>${entity.attributes.spec.node_name}</div>
<div>${getNodeName(entity)}</div>
</td>
</tr>
`;
Expand Down
100 changes: 83 additions & 17 deletions frontend/src/helpers.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
import { html } from "lit";
import { state } from "lit-element";

const stateError = "error";
const stateWarning = "warning";
const stateSuccess = "success";
export const stateError = "error";
export const stateWarning = "warning";
export const stateSuccess = "success";

export function getState(entity_row) {
return entity_row.state;
}

export function getName(entity_row) {
return entity_row.attributes.metadata.name;
Expand All @@ -13,27 +16,49 @@ export function getNamespace(entity_row) {
return entity_row.attributes.metadata.namespace;
}

export function getConditions(entity_row) {
return entity_row.attributes.status.conditions;
export function getConditions(entity_row, filter) {
let conditions = entity_row.attributes.status.conditions;

if (filter) {
conditions = conditions.filter((condition) => {
let condition_filter = filter[condition.type];
let condition_state = getConditionStateMapper(condition);
// prettier-ignore
return (!condition_filter) ||
(condition_filter == stateSuccess) ||
(condition_filter == stateWarning && (condition_state == stateWarning || condition_state == stateError)) ||
(condition_filter == stateError && condition_state == stateError)
});
}

return conditions;
}

export function getNodeSchedulable(entity_row) {
return !entity_row.attributes.spec.unschedulable;
}

export function getNodeSchedulableIcon(value) {
if (value) {
return html` <ha-icon icon="mdi:check"></ha-icon> `;
} else {
return html` <ha-icon icon="mdi:close"></ha-icon> `;
}
export function getCreated(entity_row) {
return new Date(entity_row.attributes.metadata.creation_timestamp);
}

export function getNodeSchedulableStateClass(entity_row) {
export function getAge(entity_row) {
return Date.now() - getCreated(entity_row);
}

export function getAgeStr(entity_row) {
var ms = getAge(entity_row);
var d = Math.floor(ms / 86400000);
var h = Math.floor((ms / 3600000) % 24);

return `${d}d${h}h`;
}

export function getNodeSchedulableIcon(entity_row) {
if (getNodeSchedulable(entity_row)) {
return stateSuccess;
return html` <ha-icon class="success" icon="mdi:check"></ha-icon> `;
} else {
return stateError;
return html` <ha-icon class="warning" icon="mdi:close"></ha-icon> `;
}
}

Expand Down Expand Up @@ -83,10 +108,15 @@ export function getConditionStateMapper(condition) {
},
};

return conditionStateMap[condition.type][condition.reason] ?? conditionStateMap[condition.type][condition.status];
return (
conditionStateMap[condition.type][condition.reason] ??
conditionStateMap[condition.type][condition.status]
);
}

export function getConditionsAsSpans(conditions) {
export function getConditionsAsSpans(entity_row) {
let conditions = getConditions(entity_row, this);

return html`
${conditions.map((condition) => {
return html`
Expand All @@ -97,3 +127,39 @@ export function getConditionsAsSpans(conditions) {
})}
`;
}

export function getConditionsStrings(entity_row) {
let conditions = getConditions(entity_row, this);

return `
${conditions.map((condition) => {
return `
${condition.reason ? condition.reason : condition.type}
`;
})}
`;
}

export function getNodeName(entity_row) {
return entity_row.attributes.spec.node_name;
}

export function getDesiredReplicas(entity_row) {
return (
entity_row.attributes.status.replicas ??
entity_row.attributes.status.desired_number_scheduled ??
0
);
}

export function getReadyReplicas(entity_row) {
return (
entity_row.attributes.status.ready_replicas ??
entity_row.attributes.status.number_ready ??
0
);
}

export function getReplicaStr(entity_row) {
return `${getReadyReplicas(entity_row)}/${getDesiredReplicas(entity_row)}`;
}
110 changes: 86 additions & 24 deletions frontend/src/panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,24 @@ import "./table-card.js";
import "./component-details-card.js";
import "./namespace-selector.js";
import {
stateSuccess,
stateWarning,
stateError,
getName,
getNamespace,
getConditions,
getConditionsAsSpans,
getConditionsStrings,
getNodeSchedulable,
getNodeSchedulableIcon,
getNodeSchedulableStateClass,
getAge,
getAgeStr,
getState,
getNodeName,
getReplicaStr,
} from "./helpers.js";

const componentDetailsCardName = "custom:k8s-component-details";

class KubernetesPanel extends LitElement {
constructor() {
super();
Expand Down Expand Up @@ -43,77 +52,130 @@ class KubernetesPanel extends LitElement {

switch (this._page) {
case "Node":
var conditionFilter = {
NetworkUnavailable: stateWarning,
MemoryPressure: stateWarning,
DiskPressure: stateWarning,
PIDPressure: stateWarning,
};

return {
popUpCard: {
type: "custom:k8s-component-details",
type: componentDetailsCardName,
},
columns: {
Name: {
function: getName,
value: getName,
sort_value: getName,
},
Schedulable: {
function: getNodeSchedulable,
transformation: getNodeSchedulableIcon,
state_function: getNodeSchedulableStateClass,
value: getNodeSchedulableIcon,
sort_value: getNodeSchedulable,
},
Age: {
value: getAgeStr,
sort_value: getAge,
},
Conditions: {
function: getConditions,
transformation: getConditionsAsSpans,
value: getConditionsAsSpans.bind(conditionFilter),
sort_value: getConditionsStrings.bind(conditionFilter),
},
},
filter_functions: [filterByPage],
};
case "Deployment":
var conditionFilter = {
Progressing: stateWarning,
};

return {
popUpCard: {
type: "custom:k8s-component-details",
type: componentDetailsCardName,
},
columns: {
Name: {
function: getName,
value: getName,
sort_value: getName,
},
Namespace: {
function: getNamespace,
value: getNamespace,
sort_value: getNamespace,
},
Replicas: {
value: getReplicaStr,
sort_value: getReplicaStr,
},
Age: {
value: getAgeStr,
sort_value: getAge,
},
Conditions: {
value: getConditionsAsSpans.bind(conditionFilter),
sort_value: getConditionsStrings.bind(conditionFilter),
},
State: { function: "return entity_row.state" },
},
filter_functions: [filterByPage, filterByNamespace],
};
case "DaemonSet":
return {
popUpCard: {
type: "custom:k8s-component-details",
type: componentDetailsCardName,
},
columns: {
Name: {
function: getName,
value: getName,
sort_value: getName,
},
Namespace: {
function: getNamespace,
value: getNamespace,
sort_value: getNamespace,
},
Replicas: {
value: getReplicaStr,
sort_value: getReplicaStr,
},
Age: {
value: getAgeStr,
sort_value: getAge,
},
State: { function: "return entity_row.state" },
},
filter_functions: [filterByPage, filterByNamespace],
};
case "Pod":
var conditionFilter = {
Initialized: stateWarning,
ContainersReady: stateWarning,
PodScheduled: stateWarning,
};

return {
popUpCard: {
type: "custom:k8s-component-details",
type: componentDetailsCardName,
},
columns: {
Name: {
function: getName,
value: getName,
sort_value: getName,
},
Namespace: {
function: getNamespace,
value: getNamespace,
sort_value: getNamespace,
},
Node: {
function: "return entity_row.attributes.spec.node_name",
value: getNodeName,
sort_value: getNodeName,
},
State: {
value: getState,
sort_value: getState,
},
Age: {
value: getAgeStr,
sort_value: getAge,
},
State: { function: "return entity_row.state" },
Conditions: {
function: getConditions,
transformation: getConditionsAsSpans,
value: getConditionsAsSpans.bind(conditionFilter),
sort_value: getConditionsStrings.bind(conditionFilter),
},
},
filter_functions: [filterByPage, filterByNamespace],
Expand Down
Loading

0 comments on commit 69c47d3

Please sign in to comment.