Skip to content

Commit

Permalink
Removal service chainflow (#5)
Browse files Browse the repository at this point in the history 
* Update index.html

* Delete services.js

* Delete services.html

* Update service_insights.html

Removed Service chainflow reference

* Update service_insights.js

Used delay for llm async calls
  • Loading branch information
@Mounesh301
Mounesh301 authored Jan 20, 2025
1 parent 52189db commit 245d4eb
Show file tree
Hide file tree
Showing 5 changed files with 196 additions and 357 deletions.
1 change: 0 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="btn-group ms-auto">
<a href="#" class="btn btn-outline-primary active" aria-current="page">Incident Analysis</a>
<a href="services.html" class="btn btn-outline-primary">Service Chainflow</a>
<a href="service_insights.html" class="btn btn-outline-primary">Service Insights</a>
</div>
<div class="nav-item dropdown ms-auto" role="group" aria-label="Toggle dark mode" title="Toggle Dark Mode">
Expand Down
229 changes: 158 additions & 71 deletions service_insights.html
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,73 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Service Process Flow and Insights</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Service Insights</title>

<!-- Favicon -->
<link rel="icon" href="https://raw.githubusercontent.com/gramener/assets/main/straive-favicon.svg">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" crossorigin="anonymous">
<!-- Bootstrap CSS (5.3.3 for data-bs-theme) -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
crossorigin="anonymous"
/>

<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"
/>

<!-- Minimal Custom CSS -->

<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>

<!-- Body starts in auto mode for theme -->
<body data-bs-theme="auto">
<!-- Navbar with dark theme, so it looks “dark” from the start -->
<nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href=".">Service Insights</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Nav links -->
<div class="btn-group ms-auto">
<a href="." class="btn btn-outline-primary">Incident Analysis</a>
<a href="services.html" class="btn btn-outline-primary">Service Chainflow</a>
<a href="service_insights.html" class="btn btn-outline-primary active" aria-current="page">Service Insights</a>
<a href="service_insights.html" class="btn btn-outline-primary active" aria-current="page">
Service Insights
</a>
</div>
<div class="nav-item dropdown ms-auto" role="group"
aria-label="Toggle dark mode" title="Toggle Dark Mode">
<button class="dark-theme-toggle btn btn-outline-light dropdown-toggle"
type="button" data-bs-toggle="dropdown" aria-expanded="false"
aria-label="Toggle theme (auto)">
<i class="bi bi-circle-half"></i> <span class="d-lg-none ms-2">Toggle theme</span>

<!-- Dark mode toggle dropdown -->
<div
class="nav-item dropdown ms-auto"
role="group"
aria-label="Toggle dark mode"
title="Toggle Dark Mode"
>
<button
class="dark-theme-toggle btn btn-outline-light dropdown-toggle"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
aria-label="Toggle theme (auto)"
>
<i class="bi bi-circle-half"></i>
<span class="d-lg-none ms-2">Toggle theme</span>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li>
Expand All @@ -59,86 +91,141 @@
</div>
</nav>

<!-- Main content container -->
<div class="container-fluid">
<!-- Title -->
<h1 class="display-1 my-4 text-center">Service Insights</h1>
<h2 class="display-6 text-center">What are the main Feeds for services?</h2>
<h2 class="display-6 text-center">What are the main feeds for services?</h2>

<div class="mx-auto my-3" style="max-width: 40rem;">
<p>This application is designed for incident analysis, allowing users to upload CSV file containing Service data.</p>
<p>It visualizes the relationships between different feeds on service and their impacts using Network Flow Diagram.</p>
<!-- Narrative -->
<div class="mx-auto my-3 narrative">
<p>This application is designed for incident analysis, allowing users to upload CSV files containing Service data.</p>
<p>It visualizes the relationships between different feeds on services and their impacts using a Network Flow Diagram.</p>
<p>You can use sample data from <a href="https://drive.google.com/drive/folders/1qJXojKTsVfXAPVLApNV17tvY1Keexc0C">this folder</a> if you have access.</p>
</div>

<!-- File Upload & Service Selector -->
<form class="container my-4">
<div class="row g-3 align-items-center">
<div class="col-md-6">
<label for="fileInput" class="form-label fw-semibold text-secondary">Upload Service Data(CSV):</label>
<input type="file" id="fileInput" accept=".csv" class="form-control"/>
<p class="form-text">Columns: Service, Incident, Time, Team</p>
<label for="fileInput" class="form-label fw-semibold text-secondary">Upload Service Data (CSV):</label>
<input type="file" id="fileInput" accept=".csv" class="form-control" />
<p class="form-text"><em>Columns</em>: Service, Incident, Time, Team</p>
</div>
<div class="col-md-6">
<label for="serviceDropdown" class="form-label fw-semibold text-secondary">Select Service:</label>
<select id="serviceDropdown" class="form-select">
<option value="">Incident Service</option>
</select>
<p class="form-text">Example: CTR, LOGAN, K2 etc.</p>
<p class="form-text">Example: CTR, LOGAN, K2, etc.</p>
</div>
</div>
</form>

<!-- 2-column layout -->
<div class="row mt-3">
<!-- Left column for Problem & Recurring Patterns -->
<div class="col-lg-4 mb-4">
<div class="card border-0 shadow-sm h-50">
<div class="card-header bg-secondary text-white">
<h5 class="mb-0">Problem Description</h5>
</div>
<div class="card-body" style="min-height: 50px; transition: min-height 0.3s ease; overflow: hidden;">
<p id="problemText" class="mb-0 text-muted">
Please upload a file and select a service to view details.
</p>
</div>
</div>
<div class="card border-0 shadow-sm mt-4 h-100">
<div class="card-header bg-secondary text-white">
<h5 class="mb-0">Recurring Patterns</h5>
</div>
<div class="card-body" style="min-height: 50px; transition: min-height 0.3s ease; overflow: hidden;">
<ul id="recurringList" class="list-unstyled mb-0 text-muted">
<li>Upload data and select a service to see recurring issues.</li>
</ul>
</div>
</div>
</div>
<!-- Detail Section (hidden until a service is selected) -->
<div id="detail-section" class="d-none">
<div class="row mt-3">
<!-- LEFT COLUMN: ACCORDION BOXES -->
<div class="col-lg-4 mb-4">
<!-- Multiple accordion items can be open at once if no data-bs-parent -->
<div class="accordion" id="boxesAccordion">
<!-- Problem Description Box -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingProblem">
<button
class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseProblem"
aria-expanded="true"
aria-controls="collapseProblem"
>
Problem Description
</button>
</h2>
<div
id="collapseProblem"
class="accordion-collapse collapse show"
aria-labelledby="headingProblem"
>
<div class="accordion-body">
<p id="problemText" class="mb-0 text-muted">
Please upload a file and select a service to view details.
</p>
</div>
</div>
</div>

<!-- Right column for the Process Flow heading + network diagram -->
<div class="col-lg-8">
<div class="card border-0 shadow-sm h-200">
<div class="card-header bg-secondary text-white d-flex justify-content-between align-items-center">
<h5 class="mb-0">Process Flow</h5>
</div>
<div class="card-body p-3">
<!-- The network container -->
<div id="network"></div>
<!-- Recurring Patterns Box -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingRecurring">
<button
class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseRecurring"
aria-expanded="true"
aria-controls="collapseRecurring"
>
Recurring Patterns
</button>
</h2>
<div
id="collapseRecurring"
class="accordion-collapse collapse show"
aria-labelledby="headingRecurring"
>
<div class="accordion-body">
<ul id="recurringList" class="list-unstyled mb-0 text-muted">
<li>Upload data and select a service to see recurring issues.</li>
</ul>
</div>
</div>
</div>
</div> <!-- End accordion -->
</div> <!-- End left column -->

<!-- RIGHT COLUMN: PROCESS FLOW + NETWORK DIAGRAM -->
<div class="col-lg-8">
<div class="card border-0 shadow-sm h-200">
<div class="card-header bg-secondary text-white d-flex justify-content-between align-items-center">
<h5 class="mb-0">Process Flow</h5>
</div>
<div class="card-body p-3">
<div id="network"></div> <!-- The network container -->
</div>
</div>
</div>
</div>
</div>
</div> <!-- End detail-section -->

<!-- Footer -->
<footer class="my-5 d-flex align-items-center justify-content-center">
<h1 class="display-6 fw-normal">
Designed by
<a
href="https://gramener.com/"
class="text-reset link-offset-3 link-underline link-underline-opacity-25"
>
Gramener
</a>
</h1>
</footer>
</div>

<!-- Dependencies -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vis-network.min.js"></script>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/marked.min.js"></script>
<!-- Bootstrap JS (5.3.3) -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
type="module"
></script>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@gramex/[email protected]/dist/dark-theme.js" type="module"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
<!-- Dark theme script (if using @gramex/ui) -->
<script
src="https://cdn.jsdelivr.net/npm/@gramex/[email protected]/dist/dark-theme.js"
type="module"
></script>

<!-- Main JS script -->
<!-- Main JS -->
<script type="module" src="service_insights.js"></script>
</body>
</html>
Loading

0 comments on commit 245d4eb

Please sign in to comment.