LoopOS UI v1.1.41.2

Previews

No matching results.

x
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
<div style="display: flex; flex-direction: column; width: 100%;">
  <h1>
    You probably want to use LogList and not the singular Log component.
  </h1>
  <br>
  <div class="lui-log" data-controller="log" data-log-expanded-copy-text-value="Show details" data-log-collapsed-copy-text-value="Hide details">
    <div class="lui-log__main">
      <div class="lui-log__content">
        <div class="lui-log__content__icon">
          <div class="lui-tooltip hidden"
    data-controller="tooltips"
    data-tooltips-tippy-target-id-value=""
    data-tooltips-position-value="top"
    data-tooltips-interactive-value="false"
  >
            <div class="lui-tooltip__title">
              Item
            </div>
          </div>
          <i class="lui-m_icon material-symbols-outlined" style="--lui-micon-size: 20px;">
            package_2
          </i>
        </div>
      
        <div class="lui-log__content__header">
          <div class="lui-log__content__header__title" data-log-target="content">
            <div class="lui-log__word">Content </div>
          </div>
        
          <div class="lui-log__content__header__description">
            By 
            System
          </div>
        
          <div class="lui-log__expand-content" data-log-target="expand">
            <div class="lui-log__expand-inner">
              <!-- BEGIN app/views/admin/v2/items/_item_value_table.html.erb --><!-- BEGIN mounted/loopos-ui/app/components/loopos_ui/v2/table.html.erb -->
              <div id="table_4545812968">
                <div class="lui-table" id="table_4545812968" data-controller="table" data-table-float-bar-outlet="#table_4545812968 .lui-table__floating_bar .lui-float_bar">
                  <div data-react-class="Table" data-react-props='{"uniqueId":"table_4545812968","id":"price_details_table","lang":"en","columns":[{"title":"Details","dataIndex":"details","width":200,"type":"html","className":"lui-table__cell lui-table__cell--n0 lui-table__cell--first","hidable":true},{"title":"Value","dataIndex":"value","width":200,"type":"html","className":"lui-table__cell lui-table__cell--n1 lui-table__cell--last","hidable":true}],"dataSource":[],"pagination":{"current":1,"pageSize":15,"total":0},"searchQuery":null,"clearFiltersHtml":"\u003c!-- BEGIN mounted/loopos-ui/app/components/loopos_ui/button/button.html.erb --\u003e\u003cspan class=\"inline-flex lui-button__tooltip\" id=\"5380699029\"\u003e\n  \n\n  \u003cbutton class=\"lui-button lui-button--neutral--tertiary lui-button--size-small\" data-controller=\"lui--button\"\u003e\n      \u003ci class=\"lui-button__icon lui-button__icon--small fa-regular fa-eraser\" data-lui--button-target=\"leadingIcon\"\u003e\u003c/i\u003e\n    \u003cspan data-lui--button-target=\"text\"\u003e\n      Clear all filters\n\u003c/span\u003e    \n      \n\u003c/button\u003e\u003c/span\u003e\u003c!-- END mounted/loopos-ui/app/components/loopos_ui/button/button.html.erb --\u003e","globalFiltersHtml":null,"searchHtml":"\u003c!-- BEGIN mounted/loopos-ui/app/components/loopos_ui/inputs/search/search.html.erb --\u003e\u003cdiv data-controller=\"search\"\n  id=\"looposui-inputs-search_q_9006762425\"\n  class=\"lui-search  \"\n  data-search-input-outlet=\"#looposui-inputs-search_q_9006762425 .lui-inner-input\"\n  \u003e\n  \u003c!-- BEGIN mounted/loopos-ui/app/components/loopos_ui/input/input.html.erb --\u003e\n  \u003cdiv data-controller=\"input\" data-input-open-actions-value=\"false\" class=\"lui-inner-input relative flex gap-2\"\n   data-input-original-input-value=\"\"\n    data-input-mode-value=\"inline\"\n    data-input-form-value=\"\"\u003e\n    \u003cdiv class=\"w-full flex flex-col\"\u003e\n        \u003cspan class=\"lui-input \"\u003e\n            \u003cspan class=\"lui-input__addon-left\"\u003e\n                    \u003cdiv class=\"text-[12px] flex items-center text-center\"\u003e\n        \u003ci class=\"fa-regular fa-magnifying-glass text-gray-400\"\u003e\u003c/i\u003e\n      \u003c/div\u003e\n\n            \u003c/span\u003e\n          \u003cinput name=\"q\" type=\"search\" placeholder=\"Search by...\" class=\"lui-input__input\" mode=\"inline\" contentEditable=\"true\" data-input-target=\"input\" data-action=\"input-\u0026gt;search#toggleClearButton input-\u0026gt;input#setEditing input-\u0026gt;search#onInput change-\u0026gt;search#onInput\" data-search-target=\"input\"\u003e\n            \u003cspan class=\"lui-input__addon-right\"\u003e\n                    \u003cspan class=\"flex\"\u003e\n        \u003ci class=\"fa-regular fa-xmark cursor-pointer text-gray-400\"\n          data-search-target=\"clearButton\"\n          data-action=\"click-\u003esearch#clear click-\u003einput#finishEditing\"\u003e\n        \u003c/i\u003e\n      \u003c/span\u003e\n\n            \u003c/span\u003e\n          \u003cspan class=\"lui-input__spinner\"\u003e\n            \u003ci class=\"fa-regular fa-spinner\"\u003e\u003c/i\u003e\n          \u003c/span\u003e\n\u003c/span\u003e      \n      \n    \u003c/div\u003e\n    \u003cspan class=\"lui-inner-input__actions opacity-0 flex items-center gap-1 h-fit\" data-input-target=\"actions\"\u003e\n      \u003c!-- BEGIN mounted/loopos-ui/app/components/loopos_ui/button/button.html.erb --\u003e\u003cspan class=\"inline-flex lui-button__tooltip\" id=\"4698745784\"\u003e\n  \n\n  \u003cbutton class=\"lui-button lui-button--neutral--secondary lui-button--size-tiny\" data-controller=\"lui--button\" data-input-target=\"cancel\" data-action=\"click-\u0026gt;input#handleClose\" type=\"button\" disabled=\"disabled\"\u003e\n      \u003ci class=\"lui-button__icon lui-button__icon--tiny fa-regular fa-xmark\" data-lui--button-target=\"leadingIcon\"\u003e\u003c/i\u003e\n        \n      \n\u003c/button\u003e\u003c/span\u003e\u003c!-- END mounted/loopos-ui/app/components/loopos_ui/button/button.html.erb --\u003e\n\n        \u003c!-- BEGIN mounted/loopos-ui/app/components/loopos_ui/button/button.html.erb --\u003e\u003cspan class=\"inline-flex lui-button__tooltip\" id=\"4565403248\"\u003e\n  \n\n  \u003cbutton class=\"lui-button lui-button--success--secondary lui-button--size-tiny\" data-controller=\"lui--button\" data-input-target=\"submit\" data-action=\"click-\u0026gt;input#setLoading\" type=\"submit\" disabled=\"disabled\"\u003e\n      \u003ci class=\"lui-button__icon lui-button__icon--tiny fa-regular fa-check\" data-lui--button-target=\"leadingIcon\"\u003e\u003c/i\u003e\n        \n      \n\u003c/button\u003e\u003c/span\u003e\u003c!-- END mounted/loopos-ui/app/components/loopos_ui/button/button.html.erb --\u003e\n\n\n    \u003c/span\u003e\n  \u003c/div\u003e\n\n\u003c!-- END mounted/loopos-ui/app/components/loopos_ui/input/input.html.erb --\u003e\u003c/div\u003e\n\u003c!-- END mounted/loopos-ui/app/components/loopos_ui/inputs/search/search.html.erb --\u003e","footerHtml":null,"filterCounterTemplateHtml":"\u003c!-- BEGIN mounted/loopos-ui/app/components/loopos_ui/counter/counter.html.erb --\u003e\n  \u003cspan class=\"lui-counter lui-counter--tinny\" style=\"color: #212529; background-color: #F8F9FA; border: var(--Spacings-0, 1px) solid var(--General-Gray-500, #C4CAD0);\"\u003e\n    \u003cspan class=\"lui-counter__text\"\u003e:count:\u003c/span\u003e\n\u003c/span\u003e\n\u003c!-- END mounted/loopos-ui/app/components/loopos_ui/counter/counter.html.erb --\u003e","view_more":10,"viewMoreHtml":"\u003c!-- BEGIN mounted/loopos-ui/app/components/loopos_ui/button/button.html.erb --\u003e\u003cspan class=\"inline-flex lui-button__tooltip\" id=\"8129332790\"\u003e\n  \n\n  \u003cbutton class=\"lui-button lui-button--neutral--tertiary lui-button--size-default\" data-controller=\"lui--button\"\u003e\n      \n    \u003cspan data-lui--button-target=\"text\"\u003e\n      View more\n\u003c/span\u003e    \n      \n\u003c/button\u003e\u003c/span\u003e\u003c!-- END mounted/loopos-ui/app/components/loopos_ui/button/button.html.erb --\u003e","fetchUrl":null,"selectable":null,"selectableType":null,"showPagination":false,"showPaginationSizeChanger":true,"showResultCount":false,"searchable":false,"theme":{"token":{"fontFamily":"Satoshi","borderRadius":4,"colorLink":"#212529","colorActive":"#212529","colorHover":"#212529","colorText":"#212529"},"components":{"Table":{"footerBg":"#ffffff","headerBg":"#F8F9FA","headerColor":"#495057","headerSortActiveBg":"#F8F9FA","headerSortHoverBg":"#F8F9FA","headerSortSortBg":"#F8F9FA","bodySortBg":"#ffffff","rowHoverBg":"#F8F9FA","borderColor":"#ECEFF2","headerBorderRadius":4,"rowSelectedBg":"#F8F9FA","rowSelectedHoverBg":"#F8F9FA","selectionColumnWidth":32,"headerSplitColor":"#ECEFF2"},"Pagination":{"itemActiveBg":"transparent"}}},"treeIndentSize":15,"expandableConfig":{"defaultExpandAllRows":false}}' data-react-cache-id="Table-0"></div>
                </div>
              </div>
              <div id="price_details_table_data_source" class="hidden">
                []
              </div>
              <div id="price_details_table_pagination" class="hidden">
                {"current":1,"pageSize":15,"total":0}
              </div>
              <!-- END mounted/loopos-ui/app/components/loopos_ui/v2/table.html.erb -->
              <div class="flex flex-row items-center justify-end mb-3">
                <span class="lui-financial_card-content-info__timestamp">
                  26/08/2025 09:25
                </span>
              </div>
              <!-- END app/views/admin/v2/items/_item_value_table.html.erb -->
            </div>
          </div>
        
          <div class="lui-log__buttons">
            <button class="lui-button lui-button--neutral--secondary lui-button--size-tiny w-fit w-fit relative" data-controller="lui--button" data-action="click->log#showMore:prevent log:toggleExpand->lui--button#rotateTrailingIcon" data-log-target="toggleExpand">
              <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
                Show details
              </span>    
              <div class="opacity-100 inline-flex" data-lui--button-target="trailingIcon">
                <div class="flex items-center justify-center" style="width: 12px; height: 12px;"><i class="lui-button__icon lui-button__icon--tiny fa-regular fa-chevron-down"></i></div>
              </div>
      
              <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon">
                <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 12px;">
                  progress_activity
                </i>
              </div>
            </button>
          </div>
        </div>
      </div>
    
      <div class="lui-log__source_content">
        31/03/2026 21:12
      </div>
    </div>
  </div>
  <div class="lui-log" data-controller="log" data-log-expanded-copy-text-value="Show details" data-log-collapsed-copy-text-value="Hide details">
    <div class="lui-log__main">
      <div class="lui-log__content">
        <div class="lui-log__content__icon">
          <div class="lui-tooltip hidden"
    data-controller="tooltips"
    data-tooltips-tippy-target-id-value=""
    data-tooltips-position-value="top"
    data-tooltips-interactive-value="false"
  >
            <div class="lui-tooltip__title">
              Item
            </div>
          </div>
          <i class="lui-m_icon material-symbols-outlined" style="--lui-micon-size: 20px;">
            package_2
          </i>
        </div>
      
        <div class="lui-log__content__header">
          <div class="lui-log__content__header__title" data-log-target="content">
            <div class="lui-log__word">Content </div>
          </div>
        
          <div class="lui-log__content__header__description">
            By 
            System
          </div>
        
          <div class="lui-log__expand-content" data-log-target="expand">
            <div class="lui-log__expand-inner">
              <!-- BEGIN app/views/admin/v2/items/_item_value_table.html.erb --><!-- BEGIN mounted/loopos-ui/app/components/loopos_ui/v2/table.html.erb -->
              <div id="table_4545812968">
                <div class="lui-table" id="table_4545812968" data-controller="table" data-table-float-bar-outlet="#table_4545812968 .lui-table__floating_bar .lui-float_bar">
                  <div data-react-class="Table" data-react-props='{"uniqueId":"table_4545812968","id":"price_details_table","lang":"en","columns":[{"title":"Details","dataIndex":"details","width":200,"type":"html","className":"lui-table__cell lui-table__cell--n0 lui-table__cell--first","hidable":true},{"title":"Value","dataIndex":"value","width":200,"type":"html","className":"lui-table__cell lui-table__cell--n1 lui-table__cell--last","hidable":true}],"dataSource":[],"pagination":{"current":1,"pageSize":15,"total":0},"searchQuery":null,"clearFiltersHtml":"\u003c!-- BEGIN mounted/loopos-ui/app/components/loopos_ui/button/button.html.erb --\u003e\u003cspan class=\"inline-flex lui-button__tooltip\" id=\"5380699029\"\u003e\n  \n\n  \u003cbutton class=\"lui-button lui-button--neutral--tertiary lui-button--size-small\" data-controller=\"lui--button\"\u003e\n      \u003ci class=\"lui-button__icon lui-button__icon--small fa-regular fa-eraser\" data-lui--button-target=\"leadingIcon\"\u003e\u003c/i\u003e\n    \u003cspan data-lui--button-target=\"text\"\u003e\n      Clear all filters\n\u003c/span\u003e    \n      \n\u003c/button\u003e\u003c/span\u003e\u003c!-- END mounted/loopos-ui/app/components/loopos_ui/button/button.html.erb --\u003e","globalFiltersHtml":null,"searchHtml":"\u003c!-- BEGIN mounted/loopos-ui/app/components/loopos_ui/inputs/search/search.html.erb --\u003e\u003cdiv data-controller=\"search\"\n  id=\"looposui-inputs-search_q_9006762425\"\n  class=\"lui-search  \"\n  data-search-input-outlet=\"#looposui-inputs-search_q_9006762425 .lui-inner-input\"\n  \u003e\n  \u003c!-- BEGIN mounted/loopos-ui/app/components/loopos_ui/input/input.html.erb --\u003e\n  \u003cdiv data-controller=\"input\" data-input-open-actions-value=\"false\" class=\"lui-inner-input relative flex gap-2\"\n   data-input-original-input-value=\"\"\n    data-input-mode-value=\"inline\"\n    data-input-form-value=\"\"\u003e\n    \u003cdiv class=\"w-full flex flex-col\"\u003e\n        \u003cspan class=\"lui-input \"\u003e\n            \u003cspan class=\"lui-input__addon-left\"\u003e\n                    \u003cdiv class=\"text-[12px] flex items-center text-center\"\u003e\n        \u003ci class=\"fa-regular fa-magnifying-glass text-gray-400\"\u003e\u003c/i\u003e\n      \u003c/div\u003e\n\n            \u003c/span\u003e\n          \u003cinput name=\"q\" type=\"search\" placeholder=\"Search by...\" class=\"lui-input__input\" mode=\"inline\" contentEditable=\"true\" data-input-target=\"input\" data-action=\"input-\u0026gt;search#toggleClearButton input-\u0026gt;input#setEditing input-\u0026gt;search#onInput change-\u0026gt;search#onInput\" data-search-target=\"input\"\u003e\n            \u003cspan class=\"lui-input__addon-right\"\u003e\n                    \u003cspan class=\"flex\"\u003e\n        \u003ci class=\"fa-regular fa-xmark cursor-pointer text-gray-400\"\n          data-search-target=\"clearButton\"\n          data-action=\"click-\u003esearch#clear click-\u003einput#finishEditing\"\u003e\n        \u003c/i\u003e\n      \u003c/span\u003e\n\n            \u003c/span\u003e\n          \u003cspan class=\"lui-input__spinner\"\u003e\n            \u003ci class=\"fa-regular fa-spinner\"\u003e\u003c/i\u003e\n          \u003c/span\u003e\n\u003c/span\u003e      \n      \n    \u003c/div\u003e\n    \u003cspan class=\"lui-inner-input__actions opacity-0 flex items-center gap-1 h-fit\" data-input-target=\"actions\"\u003e\n      \u003c!-- BEGIN mounted/loopos-ui/app/components/loopos_ui/button/button.html.erb --\u003e\u003cspan class=\"inline-flex lui-button__tooltip\" id=\"4698745784\"\u003e\n  \n\n  \u003cbutton class=\"lui-button lui-button--neutral--secondary lui-button--size-tiny\" data-controller=\"lui--button\" data-input-target=\"cancel\" data-action=\"click-\u0026gt;input#handleClose\" type=\"button\" disabled=\"disabled\"\u003e\n      \u003ci class=\"lui-button__icon lui-button__icon--tiny fa-regular fa-xmark\" data-lui--button-target=\"leadingIcon\"\u003e\u003c/i\u003e\n        \n      \n\u003c/button\u003e\u003c/span\u003e\u003c!-- END mounted/loopos-ui/app/components/loopos_ui/button/button.html.erb --\u003e\n\n        \u003c!-- BEGIN mounted/loopos-ui/app/components/loopos_ui/button/button.html.erb --\u003e\u003cspan class=\"inline-flex lui-button__tooltip\" id=\"4565403248\"\u003e\n  \n\n  \u003cbutton class=\"lui-button lui-button--success--secondary lui-button--size-tiny\" data-controller=\"lui--button\" data-input-target=\"submit\" data-action=\"click-\u0026gt;input#setLoading\" type=\"submit\" disabled=\"disabled\"\u003e\n      \u003ci class=\"lui-button__icon lui-button__icon--tiny fa-regular fa-check\" data-lui--button-target=\"leadingIcon\"\u003e\u003c/i\u003e\n        \n      \n\u003c/button\u003e\u003c/span\u003e\u003c!-- END mounted/loopos-ui/app/components/loopos_ui/button/button.html.erb --\u003e\n\n\n    \u003c/span\u003e\n  \u003c/div\u003e\n\n\u003c!-- END mounted/loopos-ui/app/components/loopos_ui/input/input.html.erb --\u003e\u003c/div\u003e\n\u003c!-- END mounted/loopos-ui/app/components/loopos_ui/inputs/search/search.html.erb --\u003e","footerHtml":null,"filterCounterTemplateHtml":"\u003c!-- BEGIN mounted/loopos-ui/app/components/loopos_ui/counter/counter.html.erb --\u003e\n  \u003cspan class=\"lui-counter lui-counter--tinny\" style=\"color: #212529; background-color: #F8F9FA; border: var(--Spacings-0, 1px) solid var(--General-Gray-500, #C4CAD0);\"\u003e\n    \u003cspan class=\"lui-counter__text\"\u003e:count:\u003c/span\u003e\n\u003c/span\u003e\n\u003c!-- END mounted/loopos-ui/app/components/loopos_ui/counter/counter.html.erb --\u003e","view_more":10,"viewMoreHtml":"\u003c!-- BEGIN mounted/loopos-ui/app/components/loopos_ui/button/button.html.erb --\u003e\u003cspan class=\"inline-flex lui-button__tooltip\" id=\"8129332790\"\u003e\n  \n\n  \u003cbutton class=\"lui-button lui-button--neutral--tertiary lui-button--size-default\" data-controller=\"lui--button\"\u003e\n      \n    \u003cspan data-lui--button-target=\"text\"\u003e\n      View more\n\u003c/span\u003e    \n      \n\u003c/button\u003e\u003c/span\u003e\u003c!-- END mounted/loopos-ui/app/components/loopos_ui/button/button.html.erb --\u003e","fetchUrl":null,"selectable":null,"selectableType":null,"showPagination":false,"showPaginationSizeChanger":true,"showResultCount":false,"searchable":false,"theme":{"token":{"fontFamily":"Satoshi","borderRadius":4,"colorLink":"#212529","colorActive":"#212529","colorHover":"#212529","colorText":"#212529"},"components":{"Table":{"footerBg":"#ffffff","headerBg":"#F8F9FA","headerColor":"#495057","headerSortActiveBg":"#F8F9FA","headerSortHoverBg":"#F8F9FA","headerSortSortBg":"#F8F9FA","bodySortBg":"#ffffff","rowHoverBg":"#F8F9FA","borderColor":"#ECEFF2","headerBorderRadius":4,"rowSelectedBg":"#F8F9FA","rowSelectedHoverBg":"#F8F9FA","selectionColumnWidth":32,"headerSplitColor":"#ECEFF2"},"Pagination":{"itemActiveBg":"transparent"}}},"treeIndentSize":15,"expandableConfig":{"defaultExpandAllRows":false}}' data-react-cache-id="Table-0"></div>
                </div>
              </div>
              <div id="price_details_table_data_source" class="hidden">
                []
              </div>
              <div id="price_details_table_pagination" class="hidden">
                {"current":1,"pageSize":15,"total":0}
              </div>
              <!-- END mounted/loopos-ui/app/components/loopos_ui/v2/table.html.erb -->
              <div class="flex flex-row items-center justify-end mb-3">
                <span class="lui-financial_card-content-info__timestamp">
                  26/08/2025 09:25
                </span>
              </div>
              <!-- END app/views/admin/v2/items/_item_value_table.html.erb -->
            </div>
          </div>
        
          <div class="lui-log__buttons">
            <button class="lui-button lui-button--neutral--secondary lui-button--size-tiny w-fit w-fit relative" data-controller="lui--button" data-action="click->log#showMore:prevent log:toggleExpand->lui--button#rotateTrailingIcon" data-log-target="toggleExpand">
              <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
                Show details
              </span>    
              <div class="opacity-100 inline-flex" data-lui--button-target="trailingIcon">
                <div class="flex items-center justify-center" style="width: 12px; height: 12px;"><i class="lui-button__icon lui-button__icon--tiny fa-regular fa-chevron-down"></i></div>
              </div>
      
              <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon">
                <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 12px;">
                  progress_activity
                </i>
              </div>
            </button>
          </div>
        </div>
      </div>
    
      <div class="lui-log__source_content">
        31/03/2026 21:12
      </div>
    </div>
  </div>
</div>

Log

Renders one timeline entry with content, metadata, optional expandable details and action buttons.

Used components Components where it is used
LogList Item logs tab, financial logs modal/list
StateLabel Block/source badge on the right side
Button Expand/download/retry actions

Usage rules

  • ✅ Use log_class + optional block to keep iconography and right badge consistent.
  • ✅ Use from_any_source factories when converting backend payloads.
  • ✅ If passing block, provide full shape { name:, kind:, url: }.
  • ✅ Use with_expand / with_expand_content when you need details; it adds the expand button automatically.
  • ✅ Prefer with_button(...) over with_button_manual(...) unless you need a custom render flow.
  • ❌ Do not pass raw HTML from untrusted sources (prefer factory helpers and controlled content).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<%
html = "<!-- BEGIN app/views/admin/v2/items/_item_value_table.html.erb --><!-- BEGIN mounted/loopos-ui/app/components/loopos_ui/v2/table.html.erb --><div id=\"table_4545812968\">\n  <div class=\"lui-table\" id=table_4545812968 data-controller=\"table\" data-table-float-bar-outlet=\"#table_4545812968 .lui-table__floating_bar .lui-float_bar\">\n    <div data-react-class=\"Table\" data-react-props=\"{"uniqueId":"table_4545812968","id":"price_details_table","lang":"en","columns":[{"title":"Details","dataIndex":"details","width":200,"type":"html","className":"lui-table__cell lui-table__cell--n0 lui-table__cell--first","hidable":true},{"title":"Value","dataIndex":"value","width":200,"type":"html","className":"lui-table__cell lui-table__cell--n1 lui-table__cell--last","hidable":true}],"dataSource":[],"pagination":{"current":1,"pageSize":15,"total":0},"searchQuery":null,"clearFiltersHtml":"\\u003c!-- BEGIN mounted/loopos-ui/app/components/loopos_ui/button/button.html.erb --\\u003e\\u003cspan class=\\"inline-flex lui-button__tooltip\\" id=\\"5380699029\\"\\u003e\\n  \\n\\n  \\u003cbutton class=\\"lui-button lui-button--neutral--tertiary lui-button--size-small\\" data-controller=\\"lui--button\\"\\u003e\\n      \\u003ci class=\\"lui-button__icon lui-button__icon--small fa-regular fa-eraser\\" data-lui--button-target=\\"leadingIcon\\"\\u003e\\u003c/i\\u003e\\n    \\u003cspan data-lui--button-target=\\"text\\"\\u003e\\n      Clear all filters\\n\\u003c/span\\u003e    \\n      \\n\\u003c/button\\u003e\\u003c/span\\u003e\\u003c!-- END mounted/loopos-ui/app/components/loopos_ui/button/button.html.erb --\\u003e","globalFiltersHtml":null,"searchHtml":"\\u003c!-- BEGIN mounted/loopos-ui/app/components/loopos_ui/inputs/search/search.html.erb --\\u003e\\u003cdiv data-controller=\\"search\\"\\n  id=\\"looposui-inputs-search_q_9006762425\\"\\n  class=\\"lui-search  \\"\\n  data-search-input-outlet=\\"#looposui-inputs-search_q_9006762425 .lui-inner-input\\"\\n  \\u003e\\n  \\u003c!-- BEGIN mounted/loopos-ui/app/components/loopos_ui/input/input.html.erb --\\u003e\\n  \\u003cdiv data-controller=\\"input\\" data-input-open-actions-value=\\"false\\" class=\\"lui-inner-input relative flex gap-2\\"\\n   data-input-original-input-value=\\"\\"\\n    data-input-mode-value=\\"inline\\"\\n    data-input-form-value=\\"\\"\\u003e\\n    \\u003cdiv class=\\"w-full flex flex-col\\"\\u003e\\n        \\u003cspan class=\\"lui-input \\"\\u003e\\n            \\u003cspan class=\\"lui-input__addon-left\\"\\u003e\\n                    \\u003cdiv class=\\"text-[12px] flex items-center text-center\\"\\u003e\\n        \\u003ci class=\\"fa-regular fa-magnifying-glass text-gray-400\\"\\u003e\\u003c/i\\u003e\\n      \\u003c/div\\u003e\\n\\n            \\u003c/span\\u003e\\n          \\u003cinput name=\\"q\\" type=\\"search\\" placeholder=\\"Search by...\\" class=\\"lui-input__input\\" mode=\\"inline\\" contentEditable=\\"true\\" data-input-target=\\"input\\" data-action=\\"input-\\u0026gt;search#toggleClearButton input-\\u0026gt;input#setEditing input-\\u0026gt;search#onInput change-\\u0026gt;search#onInput\\" data-search-target=\\"input\\"\\u003e\\n            \\u003cspan class=\\"lui-input__addon-right\\"\\u003e\\n                    \\u003cspan class=\\"flex\\"\\u003e\\n        \\u003ci class=\\"fa-regular fa-xmark cursor-pointer text-gray-400\\"\\n          data-search-target=\\"clearButton\\"\\n          data-action=\\"click-\\u003esearch#clear click-\\u003einput#finishEditing\\"\\u003e\\n        \\u003c/i\\u003e\\n      \\u003c/span\\u003e\\n\\n            \\u003c/span\\u003e\\n          \\u003cspan class=\\"lui-input__spinner\\"\\u003e\\n            \\u003ci class=\\"fa-regular fa-spinner\\"\\u003e\\u003c/i\\u003e\\n          \\u003c/span\\u003e\\n\\u003c/span\\u003e      \\n      \\n    \\u003c/div\\u003e\\n    \\u003cspan class=\\"lui-inner-input__actions opacity-0 flex items-center gap-1 h-fit\\" data-input-target=\\"actions\\"\\u003e\\n      \\u003c!-- BEGIN mounted/loopos-ui/app/components/loopos_ui/button/button.html.erb --\\u003e\\u003cspan class=\\"inline-flex lui-button__tooltip\\" id=\\"4698745784\\"\\u003e\\n  \\n\\n  \\u003cbutton class=\\"lui-button lui-button--neutral--secondary lui-button--size-tiny\\" data-controller=\\"lui--button\\" data-input-target=\\"cancel\\" data-action=\\"click-\\u0026gt;input#handleClose\\" type=\\"button\\" disabled=\\"disabled\\"\\u003e\\n      \\u003ci class=\\"lui-button__icon lui-button__icon--tiny fa-regular fa-xmark\\" data-lui--button-target=\\"leadingIcon\\"\\u003e\\u003c/i\\u003e\\n        \\n      \\n\\u003c/button\\u003e\\u003c/span\\u003e\\u003c!-- END mounted/loopos-ui/app/components/loopos_ui/button/button.html.erb --\\u003e\\n\\n        \\u003c!-- BEGIN mounted/loopos-ui/app/components/loopos_ui/button/button.html.erb --\\u003e\\u003cspan class=\\"inline-flex lui-button__tooltip\\" id=\\"4565403248\\"\\u003e\\n  \\n\\n  \\u003cbutton class=\\"lui-button lui-button--success--secondary lui-button--size-tiny\\" data-controller=\\"lui--button\\" data-input-target=\\"submit\\" data-action=\\"click-\\u0026gt;input#setLoading\\" type=\\"submit\\" disabled=\\"disabled\\"\\u003e\\n      \\u003ci class=\\"lui-button__icon lui-button__icon--tiny fa-regular fa-check\\" data-lui--button-target=\\"leadingIcon\\"\\u003e\\u003c/i\\u003e\\n        \\n      \\n\\u003c/button\\u003e\\u003c/span\\u003e\\u003c!-- END mounted/loopos-ui/app/components/loopos_ui/button/button.html.erb --\\u003e\\n\\n\\n    \\u003c/span\\u003e\\n  \\u003c/div\\u003e\\n\\n\\u003c!-- END mounted/loopos-ui/app/components/loopos_ui/input/input.html.erb --\\u003e\\u003c/div\\u003e\\n\\u003c!-- END mounted/loopos-ui/app/components/loopos_ui/inputs/search/search.html.erb --\\u003e","footerHtml":null,"filterCounterTemplateHtml":"\\u003c!-- BEGIN mounted/loopos-ui/app/components/loopos_ui/counter/counter.html.erb --\\u003e\\n  \\u003cspan class=\\"lui-counter lui-counter--tinny\\" style=\\"color: #212529; background-color: #F8F9FA; border: var(--Spacings-0, 1px) solid var(--General-Gray-500, #C4CAD0);\\"\\u003e\\n    \\u003cspan class=\\"lui-counter__text\\"\\u003e:count:\\u003c/span\\u003e\\n\\u003c/span\\u003e\\n\\u003c!-- END mounted/loopos-ui/app/components/loopos_ui/counter/counter.html.erb --\\u003e","view_more":10,"viewMoreHtml":"\\u003c!-- BEGIN mounted/loopos-ui/app/components/loopos_ui/button/button.html.erb --\\u003e\\u003cspan class=\\"inline-flex lui-button__tooltip\\" id=\\"8129332790\\"\\u003e\\n  \\n\\n  \\u003cbutton class=\\"lui-button lui-button--neutral--tertiary lui-button--size-default\\" data-controller=\\"lui--button\\"\\u003e\\n      \\n    \\u003cspan data-lui--button-target=\\"text\\"\\u003e\\n      View more\\n\\u003c/span\\u003e    \\n      \\n\\u003c/button\\u003e\\u003c/span\\u003e\\u003c!-- END mounted/loopos-ui/app/components/loopos_ui/button/button.html.erb --\\u003e","fetchUrl":null,"selectable":null,"selectableType":null,"showPagination":false,"showPaginationSizeChanger":true,"showResultCount":false,"searchable":false,"theme":{"token":{"fontFamily":"Satoshi","borderRadius":4,"colorLink":"#212529","colorActive":"#212529","colorHover":"#212529","colorText":"#212529"},"components":{"Table":{"footerBg":"#ffffff","headerBg":"#F8F9FA","headerColor":"#495057","headerSortActiveBg":"#F8F9FA","headerSortHoverBg":"#F8F9FA","headerSortSortBg":"#F8F9FA","bodySortBg":"#ffffff","rowHoverBg":"#F8F9FA","borderColor":"#ECEFF2","headerBorderRadius":4,"rowSelectedBg":"#F8F9FA","rowSelectedHoverBg":"#F8F9FA","selectionColumnWidth":32,"headerSplitColor":"#ECEFF2"},"Pagination":{"itemActiveBg":"transparent"}}},"treeIndentSize":15,"expandableConfig":{"defaultExpandAllRows":false}}\" data-react-cache-id=\"Table-0\"></div>\n  </div>\n</div>\n<div id=\"price_details_table_data_source\" class=\"hidden\">\n  []\n</div><div id=\"price_details_table_pagination\" class=\"hidden\">\n  {"current":1,"pageSize":15,"total":0}\n</div><!-- END mounted/loopos-ui/app/components/loopos_ui/v2/table.html.erb --><div class=\"flex flex-row items-center justify-end mb-3\">\n  <span class=\"lui-financial_card-content-info__timestamp\">\n    26/08/2025 09:25\n  </span>\n</div><!-- END app/views/admin/v2/items/_item_value_table.html.erb -->"
%>
<div style="display: flex; flex-direction: column; width: 100%;">
  <h1>
      You probably want to use LogList and not the singular Log component.
  </h1>
  <br>
  <%= render LooposUi::Log.new(date: DateTime.current) do |log| %>
      <% log.with_expand_content(html.html_safe) %>
      Content
  <% end %>
  <%= render LooposUi::Log.new(date: DateTime.current) do |log| %>
      <% log.with_expand do %>
          <%= html.html_safe %>
      <% end %>
      Content
  <% end %>
</div>

No notes provided.

No params configured.

Description

The Log component is a versatile component for displaying individual log entries with rich content, expandable sections, and interactive elements. It's designed to work within the LogList component but can also be used standalone.

The component supports various content types including text with HTML formatting, entity tokens, expandable content, and action buttons.

Arguments

Property Default Required Description
error false Whether this log represents an error state
user nil User that performed the action (falls back to "System" when blank)
date - ✓ Timestamp of the log entry
log_class "item" Controls left icon (transition, email, sms, item, privacy, etc.)
block nil Optional hash { name:, kind:, url: } rendered as a StateLabel on right

Slots

For content related:

  • content (default slot). Supports rich text with HTML
  • expand - Use via with_expand { ... } or with_expand_content(...); it auto-creates the "Show details" button.
  • button - Use via with_button(...); renders LooposUi::Button.
  • button_manual - Use via with_button_manual { ... } for custom/manual action rendering.
  • source - Populates the right side of the Log. Has polymorphic options:
    • entity_token_source - Renders an EntityToken.
    • source - Alternative interface you can build an entity token and pass in as a parameter.
  • title_token (polymorphic slot) Appears to the left of the log title.
    • Can render:
    • an EntityToken
    • an entity
    • manual content

block hash details

When passing block, use:

{
  name: "Validation",
  kind: "validation", # app/service/block kind
  url: "https://..."  # required when block is provided
}

kind is now mapped to current flow icons, including tool/decision kinds like tag, remove_tag, auto_validation, auto_accept_proposal, decision_*, as well as app kinds (core, submission, hubs, validation, handling).

Factory System

The Log component includes a factory system that allows automatic creation of Log components from various data sources. This system provides a consistent interface for converting different data types into Log components.

How It Works

The factory system automatically detects the appropriate factory for a given data source and uses it to create a Log component. This is done through the from_any_source class method:

log = LooposUi::Log.from_any_source(my_data_source)
# Note you can also use the desired factory directly
log = LooposUi::Log::Factories::CoreItemLogPresenterHash.create(my_data_source)
# or
log = LooposUi::Log::Factories::CoreItemLogPresenterHash.try_create(my_data_source)
# returns NilLog if the factory can't create the log in production
# raises error in development

from_any_source signature:

LooposUi::Log.from_any_source(source)

Implemented Factories

1. CoreItemLogPresenterHash

Purpose: Converts hash data from core item log presenters into Log components.

Data Source: Hash with the following structure:

{
  time: DateTime,
  author: String,
  app_instance: {
    name: String,
    kind: String
  },
  message: String,
  error: Boolean,
  log_class: String,      # optional
  title: String,          # optional
  extra_message: String,  # optional
  block: {                # optional (if present, must include all 3 keys)
    name: String,
    kind: String,
    url: String
  }
}

2. ScriptLog

Purpose: Converts LoopOs::ScriptLog objects into Log components.

Data Source: LoopOs::ScriptLog instances with properties like:

  • created_at
  • user_identification
  • level
  • name
  • files
  • input_data

Automatic Features:

  • Download Button: Automatically added when files are present
  • Retry Button: Automatically added when input_data is present and script is a ScriptProxy with retry capability
  • Info Modal: Always included for detailed script information
  • Retry Modal: Automatically created when retry button is present

Parameters:

  • script: ScriptProxy object that provides retry functionality (optional, for retry button)

Example:

script_proxy = LoopOs::Scripts::ScriptProxy.new(@loop_os_script, context: {
  retry_path_proc: ->(script_log) { 
    rerun_script_script_path(@loop_os_script, script_log_id: script_log.id) 
  }
})
log = LooposUi::Log::Factories::ScriptLog.new(script_log, script: script_proxy).create

Creating Custom Factories

To create a custom factory, you need to:

Inherit from the base class:

class MyCustomFactory < LooposUi::Log::Factories::Base

Implement the can_create? class method:

def self.can_create?(source)
  # Return true if this factory can handle the given source
  source.is_a?(MyCustomModel)
end

Implement the create instance method:

def create
  LooposUi::Log.new(
    date: @source.created_at,
    user: @source.user_name,
    error: @source.error?
  ).with_content(@source.message)
end

Available Instance Variables in create method:

  • @source - The original data source passed to the factory constructor
  • @view_context - Available when using defer_render for complex rendering

Example: Number Factory

Here's a complete example from the dummy app showing how to create a simple factory:

module Factories
  class ExampleLogNumberFactory < LooposUi::Log::Factories::Base
    def self.can_create?(source)
      source.is_a?(Integer)
    end
    def create
      LooposUi::Log.new(
        # random time +- 5days
        date: Time.now + (3*@source).hours + 60.minutes - rand(60).minutes,
        user: "random LogNumberFactory #{@source}",
        error: rand > 0.9
      ).with_content("random message #{@source}")
    end
  end
end

Deferred Rendering

The factory create method must return a LooposUi::Log instance. But this runs before the component is rendered, so if you need to call for render, you need to use defer_render and call the view_context.render method.

def create
  log = LooposUi::Log.new(...)
  log.defer_render do |log, view_context|
    # Complex rendering logic here
    view_context.render( SomeComponent.new(...))
  end
  log
end

You have some helpers methods available if you want to build up the log incrementally:

  • with_expand_content(content)

Note if you want to render HTML directly (e.g from a partial), you need to mark it as html_safe to avoid escaping.

Check for examples in the with_custom_expand example source code.