adding the show SIT parameters for regions and filter then on the basis of source

CHANGELOG.md

@@ -13,6 +13,7 @@ All notable changes to the "cics-extension-for-zowe" extension will be documente
 - Updated the troubleshooting guide with a V2 schema error [#241](https://github.com/zowe/vscode-extension-for-cics/pull/241).
 - Updated the `Show Attributes` table to resize column width to fit into the view [#234](https://github.com/zowe/vscode-extension-for-cics/pull/234).
 - Updated the `Show Attributes` table to consistently show uppercase values for headings [#239](https://github.com/zowe/vscode-extension-for-cics/pull/239).
+- Adding the 'Show SIT Attribute' option for Regions and Added filter on Name and Source Columns [#277](https://github.com/zowe/vscode-extension-for-cics/pull/277).
 
 ## `2.0.0`
 - **Major**: Introduced the ability to access Team Profiles.

package.json

@@ -222,6 +222,11 @@
         "title": "Show Attributes",
         "category": "Zowe Explorer for IBM CICS"
       },
+      {
+        "command": "cics-extension-for-zowe.showRegionParameters",
+        "title": "Show SIT Parameters",
+        "category": "Zowe Explorer for IBM CICS"
+      },
       {
         "command": "cics-extension-for-zowe.enableProgram",
         "title": "Enable Program",
@@ -351,6 +356,11 @@
           "command": "cics-extension-for-zowe.showRegionAttributes",
           "group": ""
         },
+        {
+          "when": "view == cics-view && viewItem =~ /^cicsregion\\./",
+          "command": "cics-extension-for-zowe.showRegionParameters",
+          "group": ""
+        },
         {
           "when": "view == cics-view && viewItem =~ /^cicstreeprogram.*/",
           "command": "cics-extension-for-zowe.filterPrograms",

src/commands/showParameterCommand.ts

@@ -0,0 +1,68 @@
+/*
+* This program and the accompanying materials are made available under the terms of the
+* Eclipse Public License v2.0 which accompanies this distribution, and is available at
+* https://www.eclipse.org/legal/epl-v20.html
+*
+* SPDX-License-Identifier: EPL-2.0
+*
+* Copyright Contributors to the Zowe Project.
+*
+*/
+
+import { commands, window, WebviewPanel, TreeView } from "vscode";
+import { CICSRegionTree } from "../trees/CICSRegionTree";
+import { findSelectedNodes } from "../utils/commandUtils";
+import { getResource } from "@zowe/cics-for-zowe-cli";
+import { getParametersHtml } from "../utils/webviewHTML";
+
+export function getShowRegionSITParametersCommand(treeview: TreeView<any>) {
+  return commands.registerCommand(
+    "cics-extension-for-zowe.showRegionParameters",
+    async (node) => {
+      const allSelectedNodes = findSelectedNodes(treeview, CICSRegionTree, node);
+      if (!allSelectedNodes || !allSelectedNodes.length) {
+        window.showErrorMessage("No CICS region selected");
+        return;
+      }
+      for (const regionTree of allSelectedNodes) {
+        const db2transactionResponse = await getResource(regionTree.parentSession.session, {
+          name: "CICSSystemParameter",
+          regionName: regionTree.label,
+          cicsPlex: regionTree.parentPlex ? regionTree.parentPlex!.getPlexName() : undefined,
+          parameter: "PARMSRCE(COMBINED) PARMTYPE(SIT)"
+        });
+        // let webText = `<thead><tr><th class="headingTH">CICS Name <input type="text" id="searchBox" placeholder="Search Attribute..." /></th><th class="sourceHeading">Source<input type="text" id="searchBox" placeholder="Search Source..." /></th><th class="valueHeading">Value</th></tr></thead>`;
+        let webText = `<thead><tr><th class="headingTH">CICS Name <input type="text" id="searchBox" placeholder="Search Attribute..." /></th>
+        <th class="sourceHeading">Source
+          <select id="filterSource" name="cars" id="cars">
+            <option value="combined">Combined</option>
+            <option value="console">Console</option>
+            <option value="jcl">JCL</option>
+            <option value="sysin">SYSIN</option>
+            <option value="table">Table</option>
+          </select>
+        </th>
+        <th class="valueHeading">Value</th></tr></thead>`;
+        webText += "<tbody>";
+        for (const systemParameter of db2transactionResponse.response.records.cicssystemparameter) {
+          const attributeHeadings = Object.keys(systemParameter);
+          webText += `<tr><th class="colHeading">${systemParameter.keyword.toUpperCase()}</th><td>${systemParameter.source.toUpperCase()}</td><td>${systemParameter.value.toUpperCase()}</td></tr>`;
+        }
+        webText += "</tbody>";
+        const webviewHTML = getParametersHtml(regionTree.getRegionName(), webText);
+        const column = window.activeTextEditor
+          ? window.activeTextEditor.viewColumn
+          : undefined;
+        const panel: WebviewPanel = window.createWebviewPanel(
+          "zowe",
+          `CICS Region ${regionTree.getRegionName()}`,
+          column || 1,
+          { enableScripts: true }
+        );
+        panel.webview.html = webviewHTML;
+      }
+    }
+  );
+}
+
+

src/extension.ts

@@ -25,6 +25,7 @@ import {
   getShowLocalFileAttributesCommand,
   getShowTaskAttributesCommand
 } from "./commands/showAttributesCommand";
+import { getShowRegionSITParametersCommand} from "./commands/showParameterCommand";
 import { getFilterProgramsCommand } from "./commands/filterProgramsCommand";
 import { getFilterLibrariesCommand } from "./commands/filterLibrariesCommand";
 import { ProfileManagement } from "./utils/profileManagement";
@@ -325,6 +326,8 @@ export async function activate(context: ExtensionContext) {
     getShowLocalFileAttributesCommand(treeview),
     getShowTaskAttributesCommand(treeview),
 
+    getShowRegionSITParametersCommand(treeview),
+
     getFilterProgramsCommand(treeDataProv, treeview),
     getFilterLibrariesCommand(treeDataProv, treeview),
     getFilterTransactionCommand(treeDataProv, treeview),

src/trees/treeItems/CICSLibraryTreeItem.ts

@@ -30,7 +30,7 @@ export class CICSLibraryTreeItem extends TreeItem {
   ) {
 
     super(
-      `${library.name} ${library.enablestatus.toLowerCase() == "disabled" ? "(Disabled)" : ""}`,
+      `${library.name} ${library.enablestatus.toLowerCase() === "disabled" ? "(Disabled)" : ""}`,
       TreeItemCollapsibleState.Collapsed
     );
 
@@ -66,7 +66,7 @@ export class CICSLibraryTreeItem extends TreeItem {
       }); 
       https.globalAgent.options.rejectUnauthorized = undefined;
       const datasetArray = Array.isArray(libraryResponse.response.records.cicslibrarydatasetname) ? libraryResponse.response.records.cicslibrarydatasetname : [libraryResponse.response.records.cicslibrarydatasetname];
-      this.label = `${this.library.name} [${datasetArray.length}]${this.parentRegion.parentPlex ? ` (${this.library.eyu_cicsname})` : ""} ${this.library.enablestatus.toLowerCase() == "disabled" ? "(Disabled)" : ""}`;
+      this.label = `${this.library.name} [${datasetArray.length}]${this.parentRegion.parentPlex ? ` (${this.library.eyu_cicsname})` : ""} ${this.library.enablestatus.toLowerCase() === "disabled" ? "(Disabled)" : ""}`;
       for (const dataset of datasetArray) {
         const newDatasetItem = new CICSLibraryDatasets(dataset, this.parentRegion, this); //this=CICSLibraryTreeItem
         this.addDataset(newDatasetItem);

src/utils/webviewHTML.ts

@@ -481,3 +481,137 @@ export const getAttributesHtml = (title: string, webText: string) => {
   </body>
   </html>`;
 };
+
+/**
+ * show attributes webview
+ * @param title 
+ * @param webText 
+ * @returns 
+ */
+ export const getParametersHtml = (title: string, webText: string) => {
+  return `<!DOCTYPE html>
+  <html lang="en">
+  <head>
+      <meta charset="UTF-8">
+      <title>${title}</title>
+      <style>
+      * {
+        background-color: var(--vscode-editor-background);
+        color: var(--vscode-editor-foreground);
+      }
+
+      thead th {
+        position: sticky;
+        top: 0;
+      }
+
+
+      table {
+        border:1px solid var(--vscode-editor-foreground);
+        width: 90%;
+        table-layout:fixed
+      }
+      th {
+        border:1px solid var(--vscode-editor-foreground);
+      }
+      .colHeading {
+        width: 30%;
+        word-wrap:break-word;
+      }
+      td {
+        border:1px solid var(--vscode-editor-foreground);
+        padding: 0.3rem 0.5rem;
+        word-wrap:break-word;
+        text-align:center;
+      }
+      h1 {
+        width: 100%;
+        text-align: center;
+        padding: 0.5rem 0;
+        text-decoration: underline;
+      }
+      .valueHeading {
+        padding: 0.7rem 0.5rem;
+        flex-direction: column;
+        align-items: center;
+      }
+      .sourceHeading {
+        padding: 0.7rem 0.5rem;
+        flex-direction: column;
+        align-items: center;
+      }
+      .headingTH {
+        padding: 0.7rem 0.5rem;
+        flex-direction: column;
+        align-items: center;
+      }
+      div {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      input {
+        text-align: center;
+        margin: 0.2rem 0;
+        border:1px solid var(--vscode-editor-foreground);
+        border-radius: 5px;
+      }
+      </style>
+  </head>
+  <body>
+  <div>
+
+  <table id="resultsTable">
+  <colgroup>
+    <col span="1" style="width: 30%;">
+    <col span="1" style="width: 20%;">
+    <col span="1" style="width: 50%;">
+  </colgroup>
+  ${webText}
+  </table>
+
+  </div>
+  <script>
+  let keyword = '';
+  let source = 'COMBINED';
+    document.getElementById("searchBox").addEventListener("keyup", (e) => {
+      keyword = e.target.value.toUpperCase();
+      let tableRows = document.getElementsByTagName("tr");
+      for(let row of tableRows){
+        if(row.children[2].innerText !== 'Value'){
+          if(source !== 'COMBINED'){
+            if(row.children[0].innerText.toUpperCase().includes(keyword) && row.children[1].innerText.toUpperCase().includes(source))
+            {
+              row.style.display = '';
+            } else{
+              row.style.display = 'none';
+            }
+          } else {
+            row.style.display = row.children[0].innerText.toUpperCase().includes(keyword) ? '' : 'none';
+          }
+        }
+      }
+    });
+    document.getElementById("filterSource").addEventListener("change", (e) => {
+      source = e.target.value.toUpperCase();
+      let tableRows = document.getElementsByTagName("tr");
+      for(let row of tableRows){
+        if(row.children[2].innerText !== 'Value'){
+          if(source !== 'COMBINED'){
+            if(row.children[0].innerText.toUpperCase().includes(keyword) && row.children[1].innerText.toUpperCase().includes(source))
+            {
+              row.style.display = '';
+            } else{
+              row.style.display = 'none';
+            }  
+          } else{
+            row.style.display = row.children[0].innerText.toUpperCase().includes(keyword) ? '' : 'none';
+          }
+        }
+      }
+    });
+  </script>
+  </body>
+  </html>`;
+};