Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 | 5x 5x 5x 5x 5x 5x 5x 5x 7x 7x 7x 7x 7x 7x 7x 7x 35x 35x 7x 7x 7x 7x 7x 35x 21x 14x 14x 7x 7x 7x 7x 7x 7x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 1x 2x 2x 2x 2x 9x 9x 9x 7x 7x 7x 35x 35x 35x 7x 7x 35x 19x 7x 35x 8x 27x 7x 20x 12x 8x 27x 35x 7x 11x 5x 6x 22x 22x 22x 22x 22x 11x 1x 1x 4x 5x 11x 1x 1x 1x 1x | import BaseController from "./BaseController";
import JSONModel from "sap/ui/model/json/JSONModel";
import MessageToast from "sap/m/MessageToast";
import { Route$PatternMatchedEvent } from "sap/ui/core/routing/Route";
import { getSupportEndState, SUPPORT_END_STATE_COLOR } from "../model/supportEndThresholds";
import { parseGermanDate } from "../model/germanDate";
import { PamProduct, createProductKey } from "../model/productKey";
import { CURRENT_STATUS_STATE } from "../model/currentStatus";
type PamEntry = PamProduct;
interface DetailField {
label: string;
value: string;
}
interface Milestone {
label: string;
date: string;
color: string;
size: string;
}
const DETAIL_FIELD_PATHS: Array<{ labelKey: string; path: string }> = [
{ labelKey: "field.addOn", path: "addOn" },
{ labelKey: "field.hanaStatus", path: "hanaStatus" },
{ labelKey: "field.hanaDate", path: "hanaDate" },
{ labelKey: "field.eop1", path: "eop1" },
{ labelKey: "field.eosk", path: "eosk" }
];
/*
* Fields that only exist on UI5 entries (product === "SAP UI5", see
* scripts/import-pam-csv.js --ui5) - shown in their own card, see
* isUi5Entry/ui5Fields.
*/
const UI5_PRODUCT_NAME = "SAP UI5";
const UI5_DETAIL_FIELD_PATHS: Array<{ labelKey: string; path: string }> = [
{ labelKey: "field.lts", path: "lts" },
{ labelKey: "field.eocp", path: "eocp" },
{ labelKey: "field.sapuiversion", path: "sapuiversion" },
{ labelKey: "field.frontendserver", path: "frontendserver" }
];
/*
* Chronological order of the lifecycle phases (old -> new -> future). Used
* both to determine the "currently active" milestone (the last entry in
* this list whose date has already been reached) and - reversed - as the
* display order (EOM at the top, oldest phase at the bottom).
*
* "activeColor" is the color used when this milestone is the currently
* active one: the availability phases (ra_puna/ra_pua/ua) are then a
* positive, ongoing state (green). EOMM/EOM instead mark reaching or
* passing a support-end date - if one of them is the currently active
* milestone, mainstream/overall support has already ended, which is
* critical (red), not positive.
*/
const MILESTONE_ORDER: Array<{ labelKey: string; path: string; activeColor: string }> = [
{ labelKey: "field.ra_puna", path: "ra_puna", activeColor: "#16a34a" },
{ labelKey: "field.ra_pua", path: "ra_pua", activeColor: "#16a34a" },
{ labelKey: "field.ua", path: "ua", activeColor: "#16a34a" },
{ labelKey: "field.eomm", path: "eomm", activeColor: SUPPORT_END_STATE_COLOR.Error },
{ labelKey: "field.eom", path: "eom", activeColor: SUPPORT_END_STATE_COLOR.Error }
];
const MILESTONE_COLOR_NEUTRAL = SUPPORT_END_STATE_COLOR.None;
const MILESTONE_DOT_SIZE = "0.85rem";
const MILESTONE_DOT_SIZE_ACTIVE = "1.7rem";
/**
* @namespace de.itsfullofstars.sap.pam.controller
*/
export default class ProductDetail extends BaseController {
/** Wires up the "productdetail/{index}" route handler. */
public onInit(): void {
this.getRouter()
.getRoute("productdetail")
?.attachPatternMatched(this.onRouteMatched.bind(this));
}
/**
* Binds the view to the PAM entry addressed by the route's `index`
* argument and rebuilds the "detail" model.
* @param oEvent The patternMatched event of the "productdetail" route
*/
private onRouteMatched(oEvent: Route$PatternMatchedEvent): void {
const oArgs = oEvent.getParameter("arguments") as { index?: string } | undefined;
const sIndex = oArgs?.index;
Iif (sIndex === undefined) {
return;
}
this.getView().bindElement({
path: `/${sIndex}`,
model: "pam"
});
this.updateDetailFields(sIndex);
}
/**
* Builds the "detail" model (fields, milestones, own-product flag, UI5
* fields) for the PAM entry at the given index.
* @param sIndex The entry's index into the "pam" model's underlying array
*/
private updateDetailFields(sIndex: string): void {
const pamModel = this.getOwnerComponent().getModel("pam") as JSONModel;
const entry = pamModel.getProperty(`/${sIndex}`) as PamEntry | undefined;
const fields: DetailField[] = DETAIL_FIELD_PATHS.map((definition) => {
const value = entry ? entry[definition.path] : undefined;
return {
label: this.getText(definition.labelKey),
value: this.formatFieldValue(value)
};
});
const isUi5Entry = entry?.product === UI5_PRODUCT_NAME;
const ui5Fields: DetailField[] = isUi5Entry
? UI5_DETAIL_FIELD_PATHS.map((definition) => ({
label: this.getText(definition.labelKey),
value: this.formatUi5FieldValue(definition.path, entry ? entry[definition.path] : undefined)
}))
: [];
const milestones = this.buildMilestones(entry);
const isOwnProduct = this.isOwnProduct(entry);
this.setModel(new JSONModel({ fields, milestones, isOwnProduct, isUi5Entry, ui5Fields }), "detail");
}
/**
* Formats one UI5-only field's value. "lts" is a boolean (true/false),
* all other UI5 fields are strings like in DETAIL_FIELD_PATHS - hence
* this own, small formatting instead of the generic fields map above.
* @param path The UI5 field's PAM key (see UI5_DETAIL_FIELD_PATHS)
* @param value The raw field value
* @returns The display string
*/
private formatUi5FieldValue(path: string, value: unknown): string {
if (path === "lts") {
return value === true ? this.getText("detail.yes") : this.getText("detail.no");
}
return this.formatFieldValue(value);
}
/**
* Formats a generic PAM field value for display, falling back to "–"
* for empty/missing values. PAM fields are always primitive JSON values
* (string/number/boolean), never nested objects - see
* scripts/import-pam-csv.js. The explicit typeof check proves that to
* TypeScript too, instead of blindly calling String(value) on an
* unknown value.
* @param value The raw field value
* @returns The display string, or "–" if empty/missing
*/
private formatFieldValue(value: unknown): string {
if (value === null || value === undefined || value === "") {
return "–";
}
Eif (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
return String(value);
}
return "–";
}
/**
* Checks whether the given PAM entry is part of the user's own product
* selection, by product key (see {@link createProductKey}).
* @param entry The PAM entry to check, or `undefined` if none is bound
* @returns `true` if the entry is part of "ownProducts"
*/
private isOwnProduct(entry: PamEntry | undefined): boolean {
Iif (!entry) {
return false;
}
const ownProductsModel = this.getOwnerComponent().getModel("ownProducts") as JSONModel;
const ownProducts = ownProductsModel?.getData() as PamEntry[] | undefined;
Iif (!Array.isArray(ownProducts)) {
return false;
}
const key = createProductKey(entry);
return ownProducts.some((product) => createProductKey(product) === key);
}
/** Adds or removes the currently viewed PAM entry from the user's own product selection. */
public onToggleOwnProduct(): void {
const context = this.getView().getBindingContext("pam");
const entry = context?.getObject() as PamEntry | undefined;
Iif (!entry) {
return;
}
const ownProductsModel = this.getOwnerComponent().getModel("ownProducts") as JSONModel;
Iif (!ownProductsModel) {
return;
}
const ownProducts = ownProductsModel.getData() as PamEntry[] | undefined;
const products = Array.isArray(ownProducts) ? ownProducts : [];
const key = createProductKey(entry);
const wasOwnProduct = products.some((product) => createProductKey(product) === key);
const updatedProducts = wasOwnProduct
? products.filter((product) => createProductKey(product) !== key)
: [...products, { ...entry }];
ownProductsModel.setData(updatedProducts);
const detailModel = this.getModel("detail") as JSONModel;
detailModel.setProperty("/isOwnProduct", !wasOwnProduct);
MessageToast.show(
wasOwnProduct
? this.getText("msg.productRemovedFromOwnProducts")
: this.getText("msg.productAddedToOwnProducts")
);
}
/** Formatter for the "add/remove own product" button's text. */
public ownProductButtonText(isOwnProduct: boolean): string {
return isOwnProduct
? this.getText("detail.removeFromOwnProducts")
: this.getText("detail.addToOwnProducts");
}
/** Formatter for the "add/remove own product" button's icon. */
public ownProductButtonIcon(isOwnProduct: boolean): string {
return isOwnProduct ? "sap-icon://less" : "sap-icon://add";
}
/** Formatter for the "add/remove own product" button's type. */
public ownProductButtonType(isOwnProduct: boolean): string {
return isOwnProduct ? "Reject" : "Emphasized";
}
/**
* Determines a color per milestone:
* - the most recently reached milestone (current state) is colored
* according to its milestone type (see MILESTONE_ORDER.activeColor):
* green for the availability phases, red for EOMM/EOM, since
* reaching those means the end of (mainstream) support,
* - all earlier (past) milestones are shown in gray,
* - future milestones follow the central, configurable red/yellow
* threshold from model/supportEndThresholds.ts (default: red within
* 6 months, yellow within 12 months, gray otherwise).
* Display order is the reverse of the chronological order (EOM at the
* top, oldest phase at the bottom).
* @param entry The PAM entry to build milestones for, or `undefined` if none is bound
* @returns The milestones to render, newest first
*/
private buildMilestones(entry: PamEntry | undefined): Milestone[] {
const today = new Date();
today.setHours(0, 0, 0, 0);
const parsed = MILESTONE_ORDER.map((definition) => {
const value = entry ? entry[definition.path] : undefined;
const dateText = typeof value === "string" ? value.trim() : "";
return {
label: this.getText(definition.labelKey),
dateText,
date: dateText ? parseGermanDate(dateText) : null,
activeColor: definition.activeColor
};
});
let activeIndex = -1;
parsed.forEach((milestone, index) => {
if (milestone.date !== null && milestone.date.getTime() <= today.getTime()) {
activeIndex = index;
}
});
const milestones = parsed.map((milestone, index) => {
if (milestone.date === null) {
return null;
}
let color: string;
if (index === activeIndex) {
color = milestone.activeColor;
} else if (milestone.date.getTime() < today.getTime()) {
color = MILESTONE_COLOR_NEUTRAL;
} else {
color = SUPPORT_END_STATE_COLOR[getSupportEndState(milestone.date, today)]
?? MILESTONE_COLOR_NEUTRAL;
}
return {
label: milestone.label,
date: milestone.dateText,
color,
size: index === activeIndex ? MILESTONE_DOT_SIZE_ACTIVE : MILESTONE_DOT_SIZE
};
}).filter((milestone): milestone is Milestone => milestone !== null);
return milestones.reverse();
}
/**
* Formatter for the support-end date shown in the title area.
* @param value The raw (dd.mm.yyyy) support end date value
* @returns The date string, or a "no end date" placeholder text if unparseable
*/
public supportStatusText(value: unknown): string {
if (typeof value !== "string" || parseGermanDate(value) === null) {
return this.getText("detail.noEndDate");
}
return value;
}
/**
* ValueState formatter for the support-end date shown in the title area.
* @param value The raw (dd.mm.yyyy) support end date value
* @returns A sap.ui.core.ValueState name ("Error"/"Warning"/"Success"/"None")
*/
public supportStatusState(value: unknown): string {
const date = parseGermanDate(value);
const today = new Date();
today.setHours(0, 0, 0, 0);
const state = getSupportEndState(date, today);
/*
* Outside the red/yellow thresholds and with a maintained date,
* support is still considered non-critical (green), not neutral.
*/
return date !== null && state === "None" ? "Success" : state;
}
/** Icon formatter matching {@link supportStatusState}'s ValueState. */
public supportStatusIcon(value: unknown): string {
switch (this.supportStatusState(value)) {
case "Error":
return "sap-icon://error";
case "Warning":
return "sap-icon://alert";
case "Success":
return "sap-icon://accept";
default:
return "sap-icon://question-mark";
}
}
/**
* ValueState formatter for the "Current Status" field.
* @param value The raw "status" field value
* @returns A sap.ui.core.ValueState name, or "None" if unmapped
*/
public currentStatusState(value: unknown): string {
return typeof value === "string"
? CURRENT_STATUS_STATE[value] ?? "None"
: "None";
}
/** Opens the entry's SAP Support Portal URL in a new tab, if set. */
public onOpenSupportPortal(): void {
const context = this.getView().getBindingContext("pam");
const url = context?.getProperty("url") as string | undefined;
Eif (url) {
window.open(url, "_blank", "noopener");
}
}
}
|