Script Color

<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Color in condition basis HTML1</title>
<link rel="shortcut icon" href="/en-
US/static/@E9108C1A0B9249CEBCF56E309DD049D822A70E10DBF689D0AE3B69501582D291/img/fav
icon.ico" />
<link rel="stylesheet" type="text/css"
href="{{SPLUNKWEB_URL_PREFIX}}/static/build/css/bootstrap-enterprise.css" />
<link rel="stylesheet" type="text/css"
href="{{SPLUNKWEB_URL_PREFIX}}/static/build/css/splunkjs-dashboard.css" />
<link rel="stylesheet" type="text/css" media="all"
href="{{SPLUNKWEB_URL_PREFIX}}/static/app/search/dashboard.css" />
<style>
.css_for_1 {
background-color:red;
}
.css_for_3 {
background-color:orange;
}
.css_for_5 {
background-color:green;
}
</style>
<meta name="referrer" content="never" />

<meta name="referrer" content="no-referrer" />
<script>
(function () {
window._splunk_metrics_events = [];
window._splunk_metrics_events.active = true;
function onLoadSwa() {
new SWA({"deploymentID": "d5cde535-7545-5736-9632-
1b4ece184199", "userID":
"0895c9e6fb797d2034efcc56a095e1913b2b808edc00a6e4c92dedef2b27c546", "version": "3",
"instanceGUID": "99A8FFA7-5F38-48F8-8159-95A583E76372", "visibility":
"anonymous,support", "url": "https://e1345286.api.splkmobile.com/1.0/e1345286"});
};
document.addEventListener("DOMContentLoaded", function(event) {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = '/en-
US/static/app/splunk_instrumentation/build/pages/swa.js';
s.addEventListener('load', onLoadSwa);
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
});
}());
</script>
</head>
<body class="simplexml preload locale-en" data-splunk-version="8.0.0" data-splunk-
product="enterprise">

<header>
<a aria-label="Screen reader users, click here to skip the navigation bar"
class="navSkip" href="#navSkip" tabIndex="1">Skip Navigation ></a>
<div class="header splunk-header">
<div id="placeholder-splunk-bar">
<a href="{{SPLUNKWEB_URL_PREFIX}}/app/launcher/home" class="brand"
title="splunk > listen to your data">splunk<strong>></strong></a>
</div>
<div id="placeholder-app-bar"></div>
</div>
<a id="navSkip"></a>
</header>
<div class="dashboard-body container-fluid main-section-body" data-role="main">
<div class="dashboard-header clearfix">
<h2>Color in condition basis HTML1</h2>
</div>
<div id="row1" class="dashboard-row dashboard-row1">

<div id="panel1" class="dashboard-cell" style="width: 100%;">
<div class="dashboard-panel clearfix">
<div class="panel-element-row">
<div id="my_table" class="dashboard-element table"
style="width: 100%">
<div class="panel-body"></div>
</div>
</div>
</div>
</div>
</div>
</div>

<script src="{{SPLUNKWEB_URL_PREFIX}}/config?autoload=1" crossorigin="use-

credentials"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/static/js/i18n.js"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/i18ncatalog?autoload=1"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/static/build/simplexml/index.js"></script>
<script type="text/javascript">
// <![CDATA[
// <![CDATA[
//
// LIBRARY REQUIREMENTS
//
// In the require function, we include the necessary libraries and modules for
// the HTML dashboard. Then, we pass variable names for these libraries and
// modules as function parameters, in order.
//
// When you add libraries or modules, remember to retain this mapping order
// between the library or module and its function parameter. You can do this by
// adding to the end of these lists, as shown in the commented examples below.
require([
"splunkjs/mvc",
"splunkjs/mvc/utils",
"splunkjs/mvc/tokenutils",
"underscore",
"jquery",
"splunkjs/mvc/simplexml",
"splunkjs/mvc/layoutview",
"splunkjs/mvc/simplexml/dashboardview",
"splunkjs/mvc/simplexml/dashboard/panelref",
"splunkjs/mvc/simplexml/element/chart",
"splunkjs/mvc/simplexml/element/event",
"splunkjs/mvc/simplexml/element/html",
"splunkjs/mvc/simplexml/element/list",
"splunkjs/mvc/simplexml/element/map",
"splunkjs/mvc/simplexml/element/single",
"splunkjs/mvc/simplexml/element/table",
"splunkjs/mvc/simplexml/element/visualization",
"splunkjs/mvc/simpleform/formutils",
"splunkjs/mvc/simplexml/eventhandler",
"splunkjs/mvc/simplexml/searcheventhandler",
"splunkjs/mvc/simpleform/input/dropdown",
"splunkjs/mvc/simpleform/input/radiogroup",
"splunkjs/mvc/simpleform/input/linklist",
"splunkjs/mvc/simpleform/input/multiselect",
"splunkjs/mvc/simpleform/input/checkboxgroup",
"splunkjs/mvc/simpleform/input/text",
"splunkjs/mvc/simpleform/input/timerange",
"splunkjs/mvc/simpleform/input/submit",
"splunkjs/mvc/searchmanager",
"splunkjs/mvc/savedsearchmanager",
"splunkjs/mvc/postprocessmanager",
"splunkjs/mvc/simplexml/urltokenmodel"
// Add comma-separated libraries and modules manually here, for example:
// ..."splunkjs/mvc/simplexml/urltokenmodel",
// "splunkjs/mvc/tokenforwarder"
],
function(
mvc,
utils,
TokenUtils,
_,
$,
DashboardController,
LayoutView,
Dashboard,
PanelRef,
ChartElement,
EventElement,
HtmlElement,
ListElement,
MapElement,
SingleElement,
TableElement,
VisualizationElement,
FormUtils,
EventHandler,
SearchEventHandler,
DropdownInput,
RadioGroupInput,
LinkListInput,
MultiSelectInput,
CheckboxGroupInput,
TextInput,
TimeRangeInput,
SubmitButton,
SearchManager,
SavedSearchManager,
PostProcessManager,
UrlTokenModel
// Add comma-separated parameter names here, for example:

// ...UrlTokenModel,
// TokenForwarder
) {
var pageLoading = true;
//
// TOKENS
//
// Create token namespaces

var urlTokenModel = new UrlTokenModel();
mvc.Components.registerInstance('url', urlTokenModel);
var defaultTokenModel = mvc.Components.getInstance('default', {create:
true});
var submittedTokenModel = mvc.Components.getInstance('submitted', {create:
true});
urlTokenModel.on('url:navigate', function() {
defaultTokenModel.set(urlTokenModel.toJSON());
if (!_.isEmpty(urlTokenModel.toJSON()) && !
_.all(urlTokenModel.toJSON(), _.isUndefined)) {
submitTokens();
} else {
submittedTokenModel.clear();
}
});
// Initialize tokens
defaultTokenModel.set(urlTokenModel.toJSON());
function submitTokens() {
// Copy the contents of the defaultTokenModel to the
submittedTokenModel and urlTokenModel
FormUtils.submitForm({ replaceState: pageLoading });
}
function setToken(name, value) {

defaultTokenModel.set(name, value);
submittedTokenModel.set(name, value);
}
function unsetToken(name) {
defaultTokenModel.unset(name);
submittedTokenModel.unset(name);
}
//
// SEARCH MANAGERS
//
var search1 = new SearchManager({

"id": "search1",
"earliest_time": "0",
"latest_time": "$latest$",
"sample_ratio": 1,
"search": "index=hii123 | table status1 min | eval
status1=case('status1'=\"Pending\" AND min<71,status1.\"|5\",'status1'=\"Pending\"
AND min<241,status1.\"|3\",'status1'=\"Pending\" AND min>240,status1.\"|
1\",1=1,status1.\"|5\")",
"status_buckets": 0,
"cancelOnUnload": true,
"app": utils.getCurrentApp(),
"auto_cancel": 90,
"preview": true,
"tokenDependencies": {
},
"runWhenTimeIsUndefined": false
}, {tokens: true, tokenNamespace: "submitted"});
//
// SPLUNK LAYOUT
//
$('header').remove();
new LayoutView({"hideChrome": false, "hideSplunkBar": false, "hideAppBar":
false})
.render()
.getContainerElement()
.appendChild($('.dashboard-body')[0]);
//
// DASHBOARD EDITOR
//
new Dashboard({
id: 'dashboard',
el: $('.dashboard-body'),
showTitle: true,
editable: true
}, {tokens: true}).render();
//
// VIEWS: VISUALIZATION ELEMENTS
//
var my_table = new TableElement({

"id": "my_table",
"count": 20,
"dataOverlayMode": "none",
"drilldown": "none",
"percentagesRow": "false",
"refresh.display": "progressbar",
"rowNumbers": "false",
"totalsRow": "false",
"wrap": "true",
"managerid": "search1",
"el": $('#my_table')
}, {tokens: true, tokenNamespace: "submitted"}).render();
// Initialize time tokens to default

if (!defaultTokenModel.has('earliest') && !defaultTokenModel.has('latest'))
{
defaultTokenModel.set({ earliest: '0', latest: '' });
}
submitTokens();
//
// DASHBOARD READY
//
DashboardController.ready();
pageLoading = false;
}
);
// ]]>
</script>
<script>
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
var CustomRangeRenderer = TableView.BaseCellRenderer.extend({

canRender: function(cell) {
return _(['status1','Desc2','Desc3']).contains(cell.field);
},
render: function($td, cell) {
var label = cell.value.split("|")[0];
var val = cell.value.split("|")[1];
if(val=="1" || val=="3" || val=="5")

{
$td.html("<div class='css_for_"+val+"'>"+label+"</div>")
}
else
{
$td.html("<div class='align_center'>"+label+"</div>")
}
}
});
//List of table IDs to add icon

var tableIDs = ["my_table"];
for (i=0;i<tableIDs.length;i++) {
var sh = mvc.Components.get(tableIDs[i]);
if(typeof(sh)!="undefined") {
sh.getVisualization(function(tableView) {
// Add custom cell renderer and force re-render
tableView.table.addCellRenderer(new CustomRangeRenderer());
tableView.table.render();
});
}
}
});
</script>
</body>
</html>

Script Color

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Script Color

Uploaded by

Copyright:

Available Formats

<!

<meta name="referrer" content="never" />

<div id="row1" class="dashboard-row dashboard-row1">

<script src="{{SPLUNKWEB_URL_PREFIX}}/config?autoload=1" crossorigin="use-

// Add comma-separated parameter names here, for example:

var pageLoading = true;

// Create token namespaces

function setToken(name, value) {

var search1 = new SearchManager({

var my_table = new TableElement({

// Initialize time tokens to default

var CustomRangeRenderer = TableView.BaseCellRenderer.extend({

if(val=="1" || val=="3" || val=="5")

//List of table IDs to add icon

You might also like